Update USDPL to v0.10, modularize react UI elements

2023-02-18 22:24:54 -05:00 · 2023-02-18 22:24:54 -05:00 · 82af952962
parent 1d17714274
commit 82af952962
18 changed files with 678 additions and 405 deletions
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@ -247,6 +247,70 @@ dependencies = [
 "crypto-common",
 ]

+[[package]]
+name = "encoding"
+version = "0.2.33"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6b0d943856b990d12d3b55b359144ff341533e516d94098b1d3fc1ac666d36ec"
+dependencies = [
+ "encoding-index-japanese",
+ "encoding-index-korean",
+ "encoding-index-simpchinese",
+ "encoding-index-singlebyte",
+ "encoding-index-tradchinese",
+]
+
+[[package]]
+name = "encoding-index-japanese"
+version = "1.20141219.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "04e8b2ff42e9a05335dbf8b5c6f7567e5591d0d916ccef4e0b1710d32a0d0c91"
+dependencies = [
+ "encoding_index_tests",
+]
+
+[[package]]
+name = "encoding-index-korean"
+version = "1.20141219.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4dc33fb8e6bcba213fe2f14275f0963fd16f0a02c878e3095ecfdf5bee529d81"
+dependencies = [
+ "encoding_index_tests",
+]
+
+[[package]]
+name = "encoding-index-simpchinese"
+version = "1.20141219.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d87a7194909b9118fc707194baa434a4e3b0fb6a5a757c73c3adb07aa25031f7"
+dependencies = [
+ "encoding_index_tests",
+]
+
+[[package]]
+name = "encoding-index-singlebyte"
+version = "1.20141219.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3351d5acffb224af9ca265f435b859c7c01537c0849754d3db3fdf2bfe2ae84a"
+dependencies = [
+ "encoding_index_tests",
+]
+
+[[package]]
+name = "encoding-index-tradchinese"
+version = "1.20141219.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fd0e20d5688ce3cab59eb3ef3a2083a5c77bf496cb798dc6fcdb75f323890c18"
+dependencies = [
+ "encoding_index_tests",
+]
+
+[[package]]
+name = "encoding_index_tests"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a246d82be1c9d791c5dfde9a2bd045fc3cbba3fa2b11ad558f27d01712f00569"
+
 [[package]]
 name = "fastrand"
 version = "1.8.0"
@ -335,6 +399,16 @@ dependencies = [
 "wasi",
 ]

+[[package]]
+name = "gettext-ng"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c2c86be871deb255ef65fc8395048a2505912c595f1eddc4da03aeb6fda5cf34"
+dependencies = [
+ "byteorder",
+ "encoding",
+]
+
 [[package]]
 name = "h2"
 version = "0.3.13"
@ -1217,13 +1291,14 @@ dependencies = [

 [[package]]
 name = "usdpl-back"
-version = "0.8.0"
+version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e2ff8cc372a3b876bdbad212a398b06127bdb67603bce621d4148a50f1195372"
+checksum = "b64335d4a1eda1a4b56b80fcf22eaf43543b22186d20999a400f80eecd7587e0"
 dependencies = [
 "async-recursion",
 "async-trait",
 "bytes",
+ "gettext-ng",
 "hex",
 "log",
 "obfstr",
@ -1234,9 +1309,9 @@ dependencies = [

 [[package]]
 name = "usdpl-core"
-version = "0.6.0"
+version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "862153581fac266458521f49e5906a71c1eee1665cb4c7d71e9586bd34b45394"
+checksum = "bd73bec3df5bed5862cab15aaa645d76c388e00128a14c372806907e2f331960"
 dependencies = [
 "aes-gcm-siv",
 "base64",
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@ -8,7 +8,7 @@ license = "MIT"
 repository = "https://github.com/NGnius/kaylon"

 [dependencies]
-usdpl-back = { version = "0.8.0"}
+usdpl-back = { version = "0.10.0"}

 clap = { version = "3.2", features = ["derive", "std"], default-features = false }

--- a/backend/build.sh
+++ b/backend/build.sh
@ -1,7 +1,7 @@
 #!/bin/bash

 #cargo build --release --target x86_64-unknown-linux-musl --features encrypt
-cargo build --target x86_64-unknown-linux-musl --features $1
+cargo build --target x86_64-unknown-linux-musl --features $1,
 #cross build --release --features encrypt

 mkdir -p ../bin
--- a/backend/create_docker_img.sh
+++ b/backend/create_docker_img.sh
@ -1,4 +1,4 @@
 #!/bin/bash
 # build docker container locally (for testing)

-cd .. && docker build -t caylon_backend -f ./backend/Dockerfile . && cd ./backend
+cd .. && docker build --pull -t caylon_backend -f ./backend/Dockerfile . && cd ./backend
--- a/backend/src/api/get_display.rs
+++ b/backend/src/api/get_display.rs
@ -47,7 +47,7 @@ impl AsyncCallable for GetDisplayEndpoint {
                    log::info!("waiting for display for item #{}", index);
                    match super::async_utils::channel_recv(receiver).await {
                        Err(_) => {
-                                let msg = format!("Failed to response for get_display for #{}", index);
+                                let msg = format!("Failed to get response for get_display for #{}", index);
                                log::warn!("{}", msg);
                                return vec![ApiDisplayResult::failure(msg, "receiving channel disconnected").to_primitive()];
                        },
--- a/backend/src/api/run_js.rs
+++ b/backend/src/api/run_js.rs
@ -51,7 +51,7 @@ impl AsyncCallable for GetJavascriptEndpoint {
            Ok(_) => {
                match super::async_utils::channel_recv(receiver).await {
                    Err(_) => {
-                            let msg = "Failed to response for get_javascript";
+                            let msg = "Failed to get response for get_javascript";
                            log::warn!("{}", msg);
                            vec![ApiJavascriptResult::failure(msg, "receiving channel disconnected").to_primitive()]
                    },
--- a/caylon.json
+++ b/caylon.json
@ -51,7 +51,7 @@
    },
    {
      "element": "reading",
-      "title": "Fan Speed",
+      "title": "Fan Speed Frozen",
      "period_ms": null,
      "on_period": {
        "action": "sequence",
@ -109,7 +109,7 @@
      "notches": null,
      "on_set": {
        "action": "javascript",
-        "run": "console.warn(\"YAAAAAAAAAAAAAAAAAAAAAAAAAAAARG JS Slider is now\", CAYLON_VALUE); \"JS Result\""
+        "run": "console.warn(\"YAAAAAAAAAAAAAAAAAAAAAAAAAAAARG JS Slider is now\", CAYLON_VALUE); \"JS Result \" + CAYLON_VALUE"
      }
    },
    {
@ -143,6 +143,27 @@
          }
        ]
      }
+    },
+    {
+      "element": "reading",
+      "title": "Fan Speed fast",
+      "period_ms": 100,
+      "on_period": {
+        "action": "sequence",
+        "steps": [
+          {
+            "action": "command",
+            "run": "cat /sys/class/hwmon/hwmon5/fan1_input"
+          },
+          {
+            "action": "transform",
+            "transformer": {
+              "rule": "expand",
+              "format": "$CAYLON_VALUE RPM"
+            }
+          }
+        ]
+      }
    }
  ],
  "about": {
--- a/package.json
+++ b/package.json
@ -26,21 +26,21 @@
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.1.0",
    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.2.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-replace": "^4.0.0",
-    "@rollup/plugin-typescript": "^8.3.2",
+    "@rollup/plugin-typescript": "^8.5.0",
    "@types/react": "16.14.0",
    "@types/webpack": "^5.28.0",
-    "rollup": "^2.70.2",
+    "rollup": "^2.79.1",
    "rollup-plugin-import-assets": "^1.1.1",
    "shx": "^0.3.4",
-    "tslib": "^2.4.0",
-    "typescript": "^4.6.4"
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
  },
  "dependencies": {
-    "decky-frontend-lib": "3.*",
-    "react-icons": "^4.3.1",
-    "usdpl-front": "file:./src/usdpl_front"
+    "decky-frontend-lib": "~3.18.10",
+    "react-icons": "^4.7.1",
+    "usdpl-front": "file:src/usdpl_front"
  },
  "pnpm": {
    "peerDependencyRules": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -3,128 +3,130 @@ lockfileVersion: 5.4
 specifiers:
  '@rollup/plugin-commonjs': ^21.1.0
  '@rollup/plugin-json': ^4.1.0
-  '@rollup/plugin-node-resolve': ^13.2.1
+  '@rollup/plugin-node-resolve': ^13.3.0
  '@rollup/plugin-replace': ^4.0.0
-  '@rollup/plugin-typescript': ^8.3.2
+  '@rollup/plugin-typescript': ^8.5.0
  '@types/react': 16.14.0
  '@types/webpack': ^5.28.0
-  decky-frontend-lib: ^1.0.1
-  react-icons: ^4.3.1
-  rollup: ^2.70.2
+  decky-frontend-lib: ~3.18.10
+  react-icons: ^4.7.1
+  rollup: ^2.79.1
  rollup-plugin-import-assets: ^1.1.1
  shx: ^0.3.4
-  tslib: ^2.4.0
-  typescript: ^4.6.4
+  tslib: ^2.5.0
+  typescript: ^4.9.5
+  usdpl-front: file:src/usdpl_front

 dependencies:
-  decky-frontend-lib: 1.0.1
-  react-icons: 4.4.0
+  decky-frontend-lib: 3.18.10
+  react-icons: 4.7.1
+  usdpl-front: file:src/usdpl_front

 devDependencies:
-  '@rollup/plugin-commonjs': 21.1.0_rollup@2.75.6
-  '@rollup/plugin-json': 4.1.0_rollup@2.75.6
-  '@rollup/plugin-node-resolve': 13.3.0_rollup@2.75.6
-  '@rollup/plugin-replace': 4.0.0_rollup@2.75.6
-  '@rollup/plugin-typescript': 8.3.3_a4s7325ov6m337p2dvgeh54tg4
+  '@rollup/plugin-commonjs': 21.1.0_rollup@2.79.1
+  '@rollup/plugin-json': 4.1.0_rollup@2.79.1
+  '@rollup/plugin-node-resolve': 13.3.0_rollup@2.79.1
+  '@rollup/plugin-replace': 4.0.0_rollup@2.79.1
+  '@rollup/plugin-typescript': 8.5.0_bhcmvni67fkldpaxrtldxbogce
  '@types/react': 16.14.0
  '@types/webpack': 5.28.0
-  rollup: 2.75.6
-  rollup-plugin-import-assets: 1.1.1_rollup@2.75.6
+  rollup: 2.79.1
+  rollup-plugin-import-assets: 1.1.1_rollup@2.79.1
  shx: 0.3.4
-  tslib: 2.4.0
-  typescript: 4.7.3
+  tslib: 2.5.0
+  typescript: 4.9.5

 packages:

-  /@jridgewell/gen-mapping/0.3.1:
-    resolution: {integrity: sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==}
+  /@jridgewell/gen-mapping/0.3.2:
+    resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==}
    engines: {node: '>=6.0.0'}
    dependencies:
-      '@jridgewell/set-array': 1.1.1
-      '@jridgewell/sourcemap-codec': 1.4.13
-      '@jridgewell/trace-mapping': 0.3.13
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/trace-mapping': 0.3.17
    dev: true

-  /@jridgewell/resolve-uri/3.0.7:
-    resolution: {integrity: sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==}
+  /@jridgewell/resolve-uri/3.1.0:
+    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
    engines: {node: '>=6.0.0'}
    dev: true

-  /@jridgewell/set-array/1.1.1:
-    resolution: {integrity: sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==}
+  /@jridgewell/set-array/1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
    engines: {node: '>=6.0.0'}
    dev: true

  /@jridgewell/source-map/0.3.2:
    resolution: {integrity: sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==}
    dependencies:
-      '@jridgewell/gen-mapping': 0.3.1
-      '@jridgewell/trace-mapping': 0.3.13
+      '@jridgewell/gen-mapping': 0.3.2
+      '@jridgewell/trace-mapping': 0.3.17
    dev: true

-  /@jridgewell/sourcemap-codec/1.4.13:
-    resolution: {integrity: sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==}
+  /@jridgewell/sourcemap-codec/1.4.14:
+    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
    dev: true

-  /@jridgewell/trace-mapping/0.3.13:
-    resolution: {integrity: sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==}
+  /@jridgewell/trace-mapping/0.3.17:
+    resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
    dependencies:
-      '@jridgewell/resolve-uri': 3.0.7
-      '@jridgewell/sourcemap-codec': 1.4.13
+      '@jridgewell/resolve-uri': 3.1.0
+      '@jridgewell/sourcemap-codec': 1.4.14
    dev: true

-  /@rollup/plugin-commonjs/21.1.0_rollup@2.75.6:
+  /@rollup/plugin-commonjs/21.1.0_rollup@2.79.1:
    resolution: {integrity: sha512-6ZtHx3VHIp2ReNNDxHjuUml6ur+WcQ28N1yHgCQwsbNkQg2suhxGMDQGJOn/KuDxKtd1xuZP5xSTwBA4GQ8hbA==}
    engines: {node: '>= 8.0.0'}
    peerDependencies:
      rollup: ^2.38.3
    dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.75.6
+      '@rollup/pluginutils': 3.1.0_rollup@2.79.1
      commondir: 1.0.1
      estree-walker: 2.0.2
      glob: 7.2.3
      is-reference: 1.2.1
      magic-string: 0.25.9
-      resolve: 1.22.0
-      rollup: 2.75.6
+      resolve: 1.22.1
+      rollup: 2.79.1
    dev: true

-  /@rollup/plugin-json/4.1.0_rollup@2.75.6:
+  /@rollup/plugin-json/4.1.0_rollup@2.79.1:
    resolution: {integrity: sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==}
    peerDependencies:
      rollup: ^1.20.0 || ^2.0.0
    dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.75.6
-      rollup: 2.75.6
+      '@rollup/pluginutils': 3.1.0_rollup@2.79.1
+      rollup: 2.79.1
    dev: true

-  /@rollup/plugin-node-resolve/13.3.0_rollup@2.75.6:
+  /@rollup/plugin-node-resolve/13.3.0_rollup@2.79.1:
    resolution: {integrity: sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==}
    engines: {node: '>= 10.0.0'}
    peerDependencies:
      rollup: ^2.42.0
    dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.75.6
+      '@rollup/pluginutils': 3.1.0_rollup@2.79.1
      '@types/resolve': 1.17.1
-      deepmerge: 4.2.2
-      is-builtin-module: 3.1.0
+      deepmerge: 4.3.0
+      is-builtin-module: 3.2.1
      is-module: 1.0.0
-      resolve: 1.22.0
-      rollup: 2.75.6
+      resolve: 1.22.1
+      rollup: 2.79.1
    dev: true

-  /@rollup/plugin-replace/4.0.0_rollup@2.75.6:
+  /@rollup/plugin-replace/4.0.0_rollup@2.79.1:
    resolution: {integrity: sha512-+rumQFiaNac9y64OHtkHGmdjm7us9bo1PlbgQfdihQtuNxzjpaB064HbRnewUOggLQxVCCyINfStkgmBeQpv1g==}
    peerDependencies:
      rollup: ^1.20.0 || ^2.0.0
    dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.75.6
+      '@rollup/pluginutils': 3.1.0_rollup@2.79.1
      magic-string: 0.25.9
-      rollup: 2.75.6
+      rollup: 2.79.1
    dev: true

-  /@rollup/plugin-typescript/8.3.3_a4s7325ov6m337p2dvgeh54tg4:
-    resolution: {integrity: sha512-55L9SyiYu3r/JtqdjhwcwaECXP7JeJ9h1Sg1VWRJKIutla2MdZQodTgcCNybXLMCnqpNLEhS2vGENww98L1npg==}
+  /@rollup/plugin-typescript/8.5.0_bhcmvni67fkldpaxrtldxbogce:
+    resolution: {integrity: sha512-wMv1/scv0m/rXx21wD2IsBbJFba8wGF3ErJIr6IKRfRj49S85Lszbxb4DCo8iILpluTjk2GAAu9CoZt4G3ppgQ==}
    engines: {node: '>=8.0.0'}
    peerDependencies:
      rollup: ^2.14.0
@ -134,14 +136,14 @@ packages:
      tslib:
        optional: true
    dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.75.6
-      resolve: 1.22.0
-      rollup: 2.75.6
-      tslib: 2.4.0
-      typescript: 4.7.3
+      '@rollup/pluginutils': 3.1.0_rollup@2.79.1
+      resolve: 1.22.1
+      rollup: 2.79.1
+      tslib: 2.5.0
+      typescript: 4.9.5
    dev: true

-  /@rollup/pluginutils/3.1.0_rollup@2.75.6:
+  /@rollup/pluginutils/3.1.0_rollup@2.79.1:
    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
    engines: {node: '>= 8.0.0'}
    peerDependencies:
@ -150,18 +152,18 @@ packages:
      '@types/estree': 0.0.39
      estree-walker: 1.0.1
      picomatch: 2.3.1
-      rollup: 2.75.6
+      rollup: 2.79.1
    dev: true

-  /@types/eslint-scope/3.7.3:
-    resolution: {integrity: sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==}
+  /@types/eslint-scope/3.7.4:
+    resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==}
    dependencies:
-      '@types/eslint': 8.4.3
+      '@types/eslint': 8.21.1
      '@types/estree': 0.0.51
    dev: true

-  /@types/eslint/8.4.3:
-    resolution: {integrity: sha512-YP1S7YJRMPs+7KZKDb9G63n8YejIwW9BALq7a5j2+H4yl6iOv9CB29edho+cuFRrvmJbbaH2yiVChKLJVysDGw==}
+  /@types/eslint/8.21.1:
+    resolution: {integrity: sha512-rc9K8ZpVjNcLs8Fp0dkozd5Pt2Apk1glO4Vgz8ix1u6yFByxfqo5Yavpy65o+93TAe24jr7v+eSBtFLvOQtCRQ==}
    dependencies:
      '@types/estree': 0.0.51
      '@types/json-schema': 7.0.11
@ -175,12 +177,16 @@ packages:
    resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
    dev: true

+  /@types/estree/1.0.0:
+    resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==}
+    dev: true
+
  /@types/json-schema/7.0.11:
    resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
    dev: true

-  /@types/node/17.0.42:
-    resolution: {integrity: sha512-Q5BPGyGKcvQgAMbsr7qEGN/kIPN6zZecYYABeTDBizOsau+2NMdSVTar9UQw21A2+JyA2KRNDYaYrPB0Rpk2oQ==}
+  /@types/node/18.14.0:
+    resolution: {integrity: sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==}
    dev: true

  /@types/prop-types/15.7.5:
@ -191,21 +197,21 @@ packages:
    resolution: {integrity: sha512-jJjHo1uOe+NENRIBvF46tJimUvPnmbQ41Ax0pEm7pRvhPg+wuj8VMOHHiMvaGmZRzRrCtm7KnL5OOE/6kHPK8w==}
    dependencies:
      '@types/prop-types': 15.7.5
-      csstype: 3.1.0
+      csstype: 3.1.1
    dev: true

  /@types/resolve/1.17.1:
    resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
    dependencies:
-      '@types/node': 17.0.42
+      '@types/node': 18.14.0
    dev: true

  /@types/webpack/5.28.0:
    resolution: {integrity: sha512-8cP0CzcxUiFuA9xGJkfeVpqmWTk9nx6CWwamRGCj95ph1SmlRRk9KlCZ6avhCbZd4L68LvYT6l1kpdEnQXrF8w==}
    dependencies:
-      '@types/node': 17.0.42
+      '@types/node': 18.14.0
      tapable: 2.2.1
-      webpack: 5.73.0
+      webpack: 5.75.0
    transitivePeerDependencies:
      - '@swc/core'
      - esbuild
@ -327,16 +333,16 @@ packages:
    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
    dev: true

-  /acorn-import-assertions/1.8.0_acorn@8.7.1:
+  /acorn-import-assertions/1.8.0_acorn@8.8.2:
    resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==}
    peerDependencies:
      acorn: ^8
    dependencies:
-      acorn: 8.7.1
+      acorn: 8.8.2
    dev: true

-  /acorn/8.7.1:
-    resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==}
+  /acorn/8.8.2:
+    resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
    engines: {node: '>=0.4.0'}
    hasBin: true
    dev: true
@ -369,16 +375,15 @@ packages:
      concat-map: 0.0.1
    dev: true

-  /browserslist/4.20.4:
-    resolution: {integrity: sha512-ok1d+1WpnU24XYN7oC3QWgTyMhY/avPJ/r9T00xxvUOIparA/gc+UPUMaod3i+G6s+nI2nUb9xZ5k794uIwShw==}
+  /browserslist/4.21.5:
+    resolution: {integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==}
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true
    dependencies:
-      caniuse-lite: 1.0.30001352
-      electron-to-chromium: 1.4.154
-      escalade: 3.1.1
-      node-releases: 2.0.5
-      picocolors: 1.0.0
+      caniuse-lite: 1.0.30001456
+      electron-to-chromium: 1.4.302
+      node-releases: 2.0.10
+      update-browserslist-db: 1.0.10_browserslist@4.21.5
    dev: true

  /buffer-from/1.1.2:
@ -390,8 +395,8 @@ packages:
    engines: {node: '>=6'}
    dev: true

-  /caniuse-lite/1.0.30001352:
-    resolution: {integrity: sha512-GUgH8w6YergqPQDGWhJGt8GDRnY0L/iJVQcU3eJ46GYf52R8tk0Wxp0PymuFVZboJYXGiCqwozAYZNRjVj6IcA==}
+  /caniuse-lite/1.0.30001456:
+    resolution: {integrity: sha512-XFHJY5dUgmpMV25UqaD4kVq2LsiaU5rS8fb0f17pCoXQiQslzmFgnfOxfvo1bTpTqf7dwG/N/05CnLCnOEKmzA==}
    dev: true

  /chrome-trace-event/1.0.3:
@ -411,25 +416,25 @@ packages:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
    dev: true

-  /csstype/3.1.0:
-    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
+  /csstype/3.1.1:
+    resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
    dev: true

-  /decky-frontend-lib/1.0.1:
-    resolution: {integrity: sha512-SgIPoB3IcWbzVRlXvs8JfhwrMphHYa7O/Ek2mh+rC0WTVT3TI2qGJ5+OoV16mw5kGY0DMu1ikcZC6ib1lh2zKQ==}
+  /decky-frontend-lib/3.18.10:
+    resolution: {integrity: sha512-2mgbA3sSkuwQR/FnmhXVrcW6LyTS95IuL6muJAmQCruhBvXapDtjk1TcgxqMZxFZwGD1IPnemPYxHZll6IgnZw==}
    dev: false

-  /deepmerge/4.2.2:
-    resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
+  /deepmerge/4.3.0:
+    resolution: {integrity: sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==}
    engines: {node: '>=0.10.0'}
    dev: true

-  /electron-to-chromium/1.4.154:
-    resolution: {integrity: sha512-GbV9djOkrnj6xmW+YYVVEI3VCQnJ0pnSTu7TW2JyjKd5cakoiSaG5R4RbEtfaD92GsY10DzbU3GYRe+IOA9kqA==}
+  /electron-to-chromium/1.4.302:
+    resolution: {integrity: sha512-Uk7C+7aPBryUR1Fwvk9VmipBcN9fVsqBO57jV2ZjTm+IZ6BMNqu7EDVEg2HxCNufk6QcWlFsBkhQyQroB2VWKw==}
    dev: true

-  /enhanced-resolve/5.9.3:
-    resolution: {integrity: sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==}
+  /enhanced-resolve/5.12.0:
+    resolution: {integrity: sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==}
    engines: {node: '>=10.13.0'}
    dependencies:
      graceful-fs: 4.2.10
@ -558,15 +563,15 @@ packages:
    engines: {node: '>= 0.10'}
    dev: true

-  /is-builtin-module/3.1.0:
-    resolution: {integrity: sha512-OV7JjAgOTfAFJmHZLvpSTb4qi0nIILDV1gWPYDnDJUTNFM5aGlRAhk4QcT8i7TuAleeEV5Fdkqn3t4mS+Q11fg==}
+  /is-builtin-module/3.2.1:
+    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
    engines: {node: '>=6'}
    dependencies:
      builtin-modules: 3.3.0
    dev: true

-  /is-core-module/2.9.0:
-    resolution: {integrity: sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==}
+  /is-core-module/2.11.0:
+    resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
    dependencies:
      has: 1.0.3
    dev: true
@ -578,14 +583,14 @@ packages:
  /is-reference/1.2.1:
    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
    dependencies:
-      '@types/estree': 0.0.51
+      '@types/estree': 1.0.0
    dev: true

  /jest-worker/27.5.1:
    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
    engines: {node: '>= 10.13.0'}
    dependencies:
-      '@types/node': 17.0.42
+      '@types/node': 18.14.0
      merge-stream: 2.0.0
      supports-color: 8.1.1
    dev: true
@ -631,16 +636,16 @@ packages:
      brace-expansion: 1.1.11
    dev: true

-  /minimist/1.2.6:
-    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
+  /minimist/1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
    dev: true

  /neo-async/2.6.2:
    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
    dev: true

-  /node-releases/2.0.5:
-    resolution: {integrity: sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==}
+  /node-releases/2.0.10:
+    resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
    dev: true

  /once/1.4.0:
@ -667,8 +672,8 @@ packages:
    engines: {node: '>=8.6'}
    dev: true

-  /punycode/2.1.1:
-    resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
+  /punycode/2.3.0:
+    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
    engines: {node: '>=6'}
    dev: true

@ -678,8 +683,8 @@ packages:
      safe-buffer: 5.2.1
    dev: true

-  /react-icons/4.4.0:
-    resolution: {integrity: sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==}
+  /react-icons/4.7.1:
+    resolution: {integrity: sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==}
    peerDependencies:
      react: '*'
    peerDependenciesMeta:
@ -691,24 +696,24 @@ packages:
    resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
    engines: {node: '>= 0.10'}
    dependencies:
-      resolve: 1.22.0
+      resolve: 1.22.1
    dev: true

-  /resolve/1.22.0:
-    resolution: {integrity: sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==}
+  /resolve/1.22.1:
+    resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
    hasBin: true
    dependencies:
-      is-core-module: 2.9.0
+      is-core-module: 2.11.0
      path-parse: 1.0.7
      supports-preserve-symlinks-flag: 1.0.0
    dev: true

-  /rollup-plugin-import-assets/1.1.1_rollup@2.75.6:
+  /rollup-plugin-import-assets/1.1.1_rollup@2.79.1:
    resolution: {integrity: sha512-u5zJwOjguTf2N+wETq2weNKGvNkuVc1UX/fPgg215p5xPvGOaI6/BTc024E9brvFjSQTfIYqgvwogQdipknu1g==}
    peerDependencies:
      rollup: '>=1.9.0'
    dependencies:
-      rollup: 2.75.6
+      rollup: 2.79.1
      rollup-pluginutils: 2.8.2
      url-join: 4.0.1
    dev: true
@ -719,8 +724,8 @@ packages:
      estree-walker: 0.6.1
    dev: true

-  /rollup/2.75.6:
-    resolution: {integrity: sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==}
+  /rollup/2.79.1:
+    resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==}
    engines: {node: '>=10.0.0'}
    hasBin: true
    optionalDependencies:
@ -740,8 +745,8 @@ packages:
      ajv-keywords: 3.5.2_ajv@6.12.6
    dev: true

-  /serialize-javascript/6.0.0:
-    resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
+  /serialize-javascript/6.0.1:
+    resolution: {integrity: sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==}
    dependencies:
      randombytes: 2.1.0
    dev: true
@ -761,7 +766,7 @@ packages:
    engines: {node: '>=6'}
    hasBin: true
    dependencies:
-      minimist: 1.2.6
+      minimist: 1.2.8
      shelljs: 0.8.5
    dev: true

@ -779,6 +784,7 @@ packages:

  /sourcemap-codec/1.4.8:
    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
    dev: true

  /supports-color/8.1.1:
@ -798,8 +804,8 @@ packages:
    engines: {node: '>=6'}
    dev: true

-  /terser-webpack-plugin/5.3.3_webpack@5.73.0:
-    resolution: {integrity: sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==}
+  /terser-webpack-plugin/5.3.6_webpack@5.75.0:
+    resolution: {integrity: sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==}
    engines: {node: '>= 10.13.0'}
    peerDependencies:
      '@swc/core': '*'
@ -814,39 +820,50 @@ packages:
      uglify-js:
        optional: true
    dependencies:
-      '@jridgewell/trace-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.17
      jest-worker: 27.5.1
      schema-utils: 3.1.1
-      serialize-javascript: 6.0.0
-      terser: 5.14.1
-      webpack: 5.73.0
+      serialize-javascript: 6.0.1
+      terser: 5.16.4
+      webpack: 5.75.0
    dev: true

-  /terser/5.14.1:
-    resolution: {integrity: sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==}
+  /terser/5.16.4:
+    resolution: {integrity: sha512-5yEGuZ3DZradbogeYQ1NaGz7rXVBDWujWlx1PT8efXO6Txn+eWbfKqB2bTDVmFXmePFkoLU6XI8UektMIEA0ug==}
    engines: {node: '>=10'}
    hasBin: true
    dependencies:
      '@jridgewell/source-map': 0.3.2
-      acorn: 8.7.1
+      acorn: 8.8.2
      commander: 2.20.3
      source-map-support: 0.5.21
    dev: true

-  /tslib/2.4.0:
-    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+  /tslib/2.5.0:
+    resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
    dev: true

-  /typescript/4.7.3:
-    resolution: {integrity: sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==}
+  /typescript/4.9.5:
+    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
    engines: {node: '>=4.2.0'}
    hasBin: true
    dev: true

+  /update-browserslist-db/1.0.10_browserslist@4.21.5:
+    resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.5
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: true
+
  /uri-js/4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
    dependencies:
-      punycode: 2.1.1
+      punycode: 2.3.0
    dev: true

  /url-join/4.0.1:
@ -866,8 +883,8 @@ packages:
    engines: {node: '>=10.13.0'}
    dev: true

-  /webpack/5.73.0:
-    resolution: {integrity: sha512-svjudQRPPa0YiOYa2lM/Gacw0r6PvxptHj4FuEKQ2kX05ZLkjbVc5MnPs6its5j7IZljnIqSVo/OsY2X0IpHGA==}
+  /webpack/5.75.0:
+    resolution: {integrity: sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==}
    engines: {node: '>=10.13.0'}
    hasBin: true
    peerDependencies:
@ -876,16 +893,16 @@ packages:
      webpack-cli:
        optional: true
    dependencies:
-      '@types/eslint-scope': 3.7.3
+      '@types/eslint-scope': 3.7.4
      '@types/estree': 0.0.51
      '@webassemblyjs/ast': 1.11.1
      '@webassemblyjs/wasm-edit': 1.11.1
      '@webassemblyjs/wasm-parser': 1.11.1
-      acorn: 8.7.1
-      acorn-import-assertions: 1.8.0_acorn@8.7.1
-      browserslist: 4.20.4
+      acorn: 8.8.2
+      acorn-import-assertions: 1.8.0_acorn@8.8.2
+      browserslist: 4.21.5
      chrome-trace-event: 1.0.3
-      enhanced-resolve: 5.9.3
+      enhanced-resolve: 5.12.0
      es-module-lexer: 0.9.3
      eslint-scope: 5.1.1
      events: 3.3.0
@ -897,7 +914,7 @@ packages:
      neo-async: 2.6.2
      schema-utils: 3.1.1
      tapable: 2.2.1
-      terser-webpack-plugin: 5.3.3_webpack@5.73.0
+      terser-webpack-plugin: 5.3.6_webpack@5.75.0
      watchpack: 2.4.0
      webpack-sources: 3.2.3
    transitivePeerDependencies:
@ -909,3 +926,9 @@ packages:
  /wrappy/1.0.2:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
    dev: true
+
+  file:src/usdpl_front:
+    resolution: {directory: src/usdpl_front, type: directory}
+    name: usdpl-front
+    version: 0.10.0
+    dev: false
--- a/src/backend.ts
+++ b/src/backend.ts
@ -7,11 +7,12 @@ const USDPL_PORT: number = 25717;
 export function resolve<T>(promise: Promise<T>, setter: (x: T) => void) {
    (async function () {
        let data = await promise;
-        if (data != null) {
+        if (data) {
            console.debug("Got resolved", data);
            setter(data);
        } else {
-            console.warn("Resolve failed:", data);
+            console.warn("Resolve may have failed:", data);
+            setter(data);
        }
    })();
 }
--- a/src/components/element.tsx
+++ b/src/components/element.tsx
@ -0,0 +1,185 @@
+import { Component } from "react";
+import {
+  ButtonItem,
+  PanelSectionRow,
+  SliderField,
+  ToggleField,
+  Field,
+} from "decky-frontend-lib";
+
+import { get_value, set_value } from "usdpl-front";
+import {DISPLAY_KEY, VALUE_KEY} from "../consts";
+import * as backend from "../backend";
+
+const DISPLAY_ERROR_ABORT_THRESHOLD = 8;
+
+interface ElementProps {
+    item: backend.CElement;
+    index: number;
+    errors: number;
+    callback: (ok: boolean) => void;
+    next: (update: () => void) => void;
+};
+
+export class SingleElement extends Component<ElementProps, boolean> {
+    constructor(props: ElementProps) {
+        super(props);
+        this.state = true;
+        // setup first callback
+        const update = () => {
+            this.setState((state) => !state);
+        };
+        if (this.props.errors < DISPLAY_ERROR_ABORT_THRESHOLD) {
+            backend.resolve(backend.getDisplay(this.props.index), this.displayCallback(update));
+        }
+
+    }
+
+    render() {
+
+        const update = () => {
+            this.setState((state) => !state);
+        };
+
+        const updateIdc = (_: any) => {
+            update();
+        };
+
+        return (
+            <PanelSectionRow>
+                {buildHtmlElement(this.props.item, this.props.index, updateIdc)}
+            </PanelSectionRow>
+        );
+    }
+
+    displayCallback(update: () => void) {
+        return (newVal: backend.CDisplayResponse) => {
+            const index = this.props.index;
+            if (newVal != null) {
+                switch (newVal.result) {
+                    case "value":
+                        this.props.callback(true);
+                        let val = newVal as backend.CValueResult;
+                        console.log("CAYLON: Got display for " + index.toString(), val);
+                        backend.log(backend.CLogLevel.DEBUG, "Got display for " + index.toString());
+                        set_value(DISPLAY_KEY + index.toString(), val.value);
+                        break;
+                    case "error":
+                        this.props.callback(false);
+                        let err = newVal as backend.CErrorResult;
+                        console.warn("CAYLON: Got display error for " + index.toString(), err);
+                        backend.log(backend.CLogLevel.WARN, "Got display error for " + index.toString());
+                        break;
+                    default:
+                        console.error("CAYLON: Got invalid display response for " + index.toString(), newVal);
+                        backend.log(backend.CLogLevel.ERROR, "Got invalid display response for " + index.toString());
+                    break;
+                }
+            } else {
+                this.props.callback(false);
+                console.warn("CAYLON: Ignoring null display result for " + index.toString());
+                backend.log(backend.CLogLevel.WARN, "Ignoring null display result for " + index.toString());
+            }
+            if (this.props.errors < DISPLAY_ERROR_ABORT_THRESHOLD) {
+                backend.resolve(backend.getDisplay(this.props.index), this.displayCallback(update));
+                backend.log(backend.CLogLevel.INFO, "Resubscribing for display " + this.props.index.toString());
+            } else {
+                console.error("CAYLON: Got too many display errors for " + this.props.index.toString() + ", stopping display updates for element");
+                backend.log(backend.CLogLevel.ERROR, "Got too many display errors for " + this.props.index.toString() + ", stopping display updates for element");
+            }
+            update();
+        }
+    }
+}
+
+function buildHtmlElement(element: backend.CElement, index: number, updateIdc: any) {
+  switch (element.element) {
+    case "button":
+      return buildButton(element as backend.CButton, index, updateIdc);
+    case "slider":
+      return buildSlider(element as backend.CSlider, index, updateIdc);
+    case "toggle":
+      return buildToggle(element as backend.CToggle, index, updateIdc);
+    case "reading":
+      return buildReading(element as backend.CReading, index, updateIdc);
+    case "result-display":
+      return buildResultDisplay(element as backend.CResultDisplay, index, updateIdc);
+    case "event-display":
+      return buildEventDisplay(element as backend.CEventDisplay, index, updateIdc);
+  }
+  console.error("CAYLON: Unrecognized element", element);
+  backend.log(backend.CLogLevel.ERROR, "Unrecognized element " + element.element);
+  return (<div>Unknown</div>);
+}
+
+function buildButton(element: backend.CButton, index: number, updateIdc: any) {
+  return (
+    <ButtonItem
+      layout="below"
+      onClick={() => {backend.resolve(backend.onUpdate(index, null), updateIdc)}}>
+      {element.title}
+    </ButtonItem>
+  );
+}
+
+function buildSlider(element: backend.CSlider, index: number, updateIdc: any) {
+  const KEY = VALUE_KEY + index.toString();
+  if (get_value(KEY) == null) {
+    set_value(KEY, element.min);
+  }
+  return (
+    <SliderField
+      label={element.title}
+      value={get_value(KEY)}
+      max={element.max}
+      min={element.min}
+      showValue={true}
+      onChange={(value: number) => {
+        backend.resolve(backend.onUpdate(index, value), updateIdc);
+        set_value(KEY, value);
+      }}
+    />
+  );
+}
+
+function buildToggle(element: backend.CToggle, index: number, updateIdc: any) {
+  const KEY = VALUE_KEY + index.toString();
+  if (get_value(KEY) == null) {
+    set_value(KEY, false);
+  }
+  return (
+    <ToggleField
+      checked={get_value(KEY)}
+      label={element.title}
+      description={element.description!}
+      onChange={(value: boolean) => {
+        backend.resolve(backend.onUpdate(index, value), updateIdc);
+        set_value(KEY, value);
+      }}
+    />
+  );
+}
+
+function buildReading(element: backend.CReading, index: number, _updateIdc: any) {
+  return (
+    <Field label={element.title} focusable={true}>
+      {get_value(DISPLAY_KEY + index.toString())}
+    </Field>
+  );
+}
+
+function buildResultDisplay(element: backend.CResultDisplay, index: number, _updateIdc: any) {
+  return (
+    <Field label={element.title} focusable={true}>
+      {get_value(DISPLAY_KEY + index.toString())}
+    </Field>
+  );
+}
+
+function buildEventDisplay(element: backend.CEventDisplay, index: number, _updateIdc: any) {
+  return (
+    <Field label={element.title} focusable={true}>
+      {get_value(DISPLAY_KEY + index.toString())}
+    </Field>
+  );
+}
--- a/src/components/elements.tsx
+++ b/src/components/elements.tsx
@ -1,125 +1,44 @@
-import { Component, useState } from "react";
-import {
+import { Component } from "react";
+/*import {
  ButtonItem,
  PanelSectionRow,
  SliderField,
  ToggleField,
  Field,
-} from "decky-frontend-lib";
+} from "decky-frontend-lib";*/

-import { get_value, set_value } from "usdpl-front";
-import {DISPLAY_KEY, VALUE_KEY} from "../consts";
+//import { get_value, set_value } from "usdpl-front";
+//import {DISPLAY_KEY, VALUE_KEY} from "../consts";
+import { SingleElement } from "./element";
 import * as backend from "../backend";

-export class Elements extends Component<{items: backend.CElement[]}> {
+interface ElementsProps {
+  items: backend.CElement[];
+  displayErrors: number[];
+  displayCallback: (index: number) => (ok: boolean) => void;
+  schedule: (update: () => void) => void;
+};
+
+export class Elements extends Component<ElementsProps, boolean> {

    render() {
-        const [triggerInternal, updateInternal] = useState<boolean>(false);
+        /*const update = () => {
+            this.setState((state) => !state);
+        };

-        const update = () => {
-            updateInternal(!triggerInternal);
-        }
-
-        function updateIdc(_: any) {
+        const updateIdc = (_: any) => {
            update();
-        }
+        };*/

        return this.props.items.map(
            (elem, i) => {
-                return (<PanelSectionRow>{buildHtmlElement(elem, i, updateIdc)}</PanelSectionRow>);
+                return <SingleElement
+                        item={elem}
+                        index={i}
+                        errors={this.props.displayErrors[i]}
+                        callback={this.props.displayCallback(i)}
+                        next={this.props.schedule} />;
            }
        );
    }
 }
-
-function buildHtmlElement(element: backend.CElement, index: number, updateIdc: any) {
-  switch (element.element) {
-    case "button":
-      return buildButton(element as backend.CButton, index, updateIdc);
-    case "slider":
-      return buildSlider(element as backend.CSlider, index, updateIdc);
-    case "toggle":
-      return buildToggle(element as backend.CToggle, index, updateIdc);
-    case "reading":
-      return buildReading(element as backend.CReading, index, updateIdc);
-    case "result-display":
-      return buildResultDisplay(element as backend.CResultDisplay, index, updateIdc);
-    case "event-display":
-      return buildEventDisplay(element as backend.CEventDisplay, index, updateIdc);
-  }
-  console.error("CAYLON: Unsupported element", element);
-  backend.log(backend.CLogLevel.ERROR, "Unsupported element " + element.element);
-  return (<div>Unsupported</div>);
-}
-
-function buildButton(element: backend.CButton, index: number, updateIdc: any) {
-  return (
-    <ButtonItem
-      layout="below"
-      onClick={() => {backend.resolve(backend.onUpdate(index, null), updateIdc)}}>
-      {element.title}
-    </ButtonItem>
-  );
-}
-
-function buildSlider(element: backend.CSlider, index: number, updateIdc: any) {
-  const KEY = VALUE_KEY + index.toString();
-  if (get_value(KEY) == null) {
-    set_value(KEY, element.min);
-  }
-  return (
-    <SliderField
-      label={element.title}
-      value={get_value(KEY)}
-      max={element.max}
-      min={element.min}
-      showValue={true}
-      onChange={(value: number) => {
-        backend.resolve(backend.onUpdate(index, value), updateIdc);
-        set_value(KEY, value);
-      }}
-    />
-  );
-}
-
-function buildToggle(element: backend.CToggle, index: number, updateIdc: any) {
-  const KEY = VALUE_KEY + index.toString();
-  if (get_value(KEY) == null) {
-    set_value(KEY, false);
-  }
-  return (
-    <ToggleField
-      checked={get_value(KEY)}
-      label={element.title}
-      description={element.description!}
-      onChange={(value: boolean) => {
-        backend.resolve(backend.onUpdate(index, value), updateIdc);
-        set_value(KEY, value);
-      }}
-    />
-  );
-}
-
-function buildReading(element: backend.CReading, index: number, _updateIdc: any) {
-  return (
-    <Field label={element.title}>
-      {get_value(DISPLAY_KEY + index.toString())}
-    </Field>
-  );
-}
-
-function buildResultDisplay(element: backend.CResultDisplay, index: number, _updateIdc: any) {
-  return (
-    <Field label={element.title}>
-      {get_value(DISPLAY_KEY + index.toString())}
-    </Field>
-  );
-}
-
-function buildEventDisplay(element: backend.CEventDisplay, index: number, _updateIdc: any) {
-  return (
-    <Field label={element.title}>
-      {get_value(DISPLAY_KEY + index.toString())}
-    </Field>
-  );
-}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -14,10 +14,10 @@ import {
 import { VFC, useState } from "react";
 import { GiWashingMachine } from "react-icons/gi";

-import { set_value } from "usdpl-front";
+//import { set_value } from "usdpl-front";
 import * as backend from "./backend";
 import {register_for_steam_events, unregister_for_steam_events} from "./steam_events";
-import {DISPLAY_KEY} from "./consts";
+//import {DISPLAY_KEY} from "./consts";
 import {Elements} from "./components/elements";
 import {About} from "./components/about";

@ -28,48 +28,24 @@ let update = () => {};

 let updateTasks: (() => void)[] = [];

-let displayErrors: number[] = [];
-const DISPLAY_ERROR_ABORT_THRESHHOLD = 8;
-
-function displayCallback(index: number) {
-  return (newVal: backend.CDisplayResponse) => {
-    if (newVal != null) {
-      switch (newVal.result) {
-        case "value":
-          displayErrors[index] = 0;
-          let val = newVal as backend.CValueResult;
-          console.log("CAYLON: Got display for " + index.toString(), val);
-          backend.log(backend.CLogLevel.DEBUG, "Got display for " + index.toString());
-          set_value(DISPLAY_KEY + index.toString(), val.value);
-          break;
-        case "error":
-          displayErrors[index]++;
-          let err = newVal as backend.CErrorResult;
-          console.warn("CAYLON: Got display error for " + index.toString(), err);
-          backend.log(backend.CLogLevel.WARN, "Got display error for " + index.toString());
-          break;
-        default:
-          console.error("CAYLON: Got invalid display response for " + index.toString(), newVal);
-          backend.log(backend.CLogLevel.ERROR, "Got invalid display response for " + index.toString());
-          break;
-      }
-    } else {
-      displayErrors[index]++;
-      console.warn("CAYLON: Ignoring null display result for " + index.toString());
-      backend.log(backend.CLogLevel.WARN, "Ignoring null display result for " + index.toString());
-    }
-    if (displayErrors[index] < DISPLAY_ERROR_ABORT_THRESHHOLD) {
-      updateTasks.push(() => backend.resolve(backend.getDisplay(index), displayCallback(index)));
-      update();
-    } else {
-      console.error("CAYLON: Got too many display errors for " + index.toString() + ", stopping display updates for element");
-      backend.log(backend.CLogLevel.ERROR, "Got too many display errors for " + index.toString() + ", stopping display updates for element");
-    }
-  }
+function scheduleCall(cb: () => void) {
+  updateTasks.push(cb);
 }

 let jsErrors: number = 0;
-const JAVASCRIPT_ERROR_ABORT_THRESHHOLD = 16;
+const JAVASCRIPT_ERROR_ABORT_THRESHOLD = 16;
+
+let displayErrors: number[] = [];
+
+function displayCallback(index: number) {
+  return (ok: boolean) => {
+    if (ok) {
+      displayErrors[index] = 0;
+    } else {
+      displayErrors[index]++;
+    }
+  }
+}

 function onGetElements() {
  displayErrors = [];
@ -77,7 +53,6 @@ function onGetElements() {
    console.log("CAYLON: req display for item #" + i.toString());
    backend.log(backend.CLogLevel.DEBUG, "req display for item #" + i.toString());
    displayErrors.push(0);
-    backend.resolve(backend.getDisplay(i), displayCallback(i));
  }
  jsErrors = 0;
  backend.resolve(backend.getJavascriptToRun(), jsCallback());
@ -89,7 +64,7 @@ const eval2 = eval;
 function jsCallback() {
  return (script: backend.CJavascriptResponse) => {
    // register next callback (before running JS, in case that crashes)
-    if (jsErrors < JAVASCRIPT_ERROR_ABORT_THRESHHOLD) {
+    if (jsErrors < JAVASCRIPT_ERROR_ABORT_THRESHOLD) {
      backend.resolve(backend.getJavascriptToRun(), jsCallback());
    } else {
      console.error("CAYLON: Got too many javascript errors, stopping remote javascript execution");
@ -169,7 +144,11 @@ const Content: VFC<{ serverAPI: ServerAPI }> = ({}) => {

  return (
    <PanelSection>
-      <Elements items={items}/>
+      <Elements
+        items={items}
+        displayErrors={displayErrors}
+        displayCallback={displayCallback}
+        schedule={scheduleCall} />
      <About about={about}/>
      <PanelSectionRow>
        <ButtonItem
--- a/src/usdpl_front/package.json
+++ b/src/usdpl_front/package.json
@ -4,7 +4,7 @@
    "NGnius (Graham) <ngniusness@gmail.com>"
  ],
  "description": "Universal Steam Deck Plugin Library front-end designed for WASM",
-  "version": "0.7.0",
+  "version": "0.10.0",
  "license": "GPL-3.0-only",
  "repository": {
    "type": "git",
--- a/src/usdpl_front/usdpl_front.d.ts
+++ b/src/usdpl_front/usdpl_front.d.ts
@ -36,6 +36,25 @@ export function get_value(key: string): any;
 * @returns {Promise<any>}
 */
 export function call_backend(name: string, parameters: any[]): Promise<any>;
+/**
+* Initialize translation strings for the front-end
+* @param {string} locale
+* @returns {Promise<void>}
+*/
+export function init_tr(locale: string): Promise<void>;
+/**
+* Translate a phrase, equivalent to tr_n(msg_id, 0)
+* @param {string} msg_id
+* @returns {string}
+*/
+export function tr(msg_id: string): string;
+/**
+* Translate a phrase, retrieving the plural form for `n` items
+* @param {string} msg_id
+* @param {number} n
+* @returns {string}
+*/
+export function tr_n(msg_id: string, n: number): string;

 export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;

@ -47,6 +66,9 @@ export interface InitOutput {
  readonly set_value: (a: number, b: number, c: number) => number;
  readonly get_value: (a: number, b: number) => number;
  readonly call_backend: (a: number, b: number, c: number, d: number) => number;
+  readonly init_tr: (a: number, b: number) => number;
+  readonly tr: (a: number, b: number, c: number) => void;
+  readonly tr_n: (a: number, b: number, c: number, d: number) => void;
  readonly __wbindgen_export_0: (a: number) => number;
  readonly __wbindgen_export_1: (a: number, b: number, c: number) => number;
  readonly __wbindgen_export_2: WebAssembly.Table;
--- a/src/usdpl_front/usdpl_front.js
+++ b/src/usdpl_front/usdpl_front.js
--- a/src/usdpl_front/usdpl_front_bg.wasm
+++ b/src/usdpl_front/usdpl_front_bg.wasm
--- a/src/usdpl_front/usdpl_front_bg.wasm.d.ts
+++ b/src/usdpl_front/usdpl_front_bg.wasm.d.ts
@ -7,6 +7,9 @@ export function version_usdpl(a: number): void;
 export function set_value(a: number, b: number, c: number): number;
 export function get_value(a: number, b: number): number;
 export function call_backend(a: number, b: number, c: number, d: number): number;
+export function init_tr(a: number, b: number): number;
+export function tr(a: number, b: number, c: number): void;
+export function tr_n(a: number, b: number, c: number, d: number): void;
 export function __wbindgen_export_0(a: number): number;
 export function __wbindgen_export_1(a: number, b: number, c: number): number;
 export const __wbindgen_export_2: WebAssembly.Table;