layout viewer

src/lib/components/LayoutCC1.svelte

@@ -15,42 +15,42 @@
 <div class="col layout" style="gap: 0">
   <div class="row" style="gap: 156px">
     <div class="row">
-      <RingInput {activeLayer} />
+      <RingInput {activeLayer} keys={{d: 30, e: 31, n: 32, w: 33, s: 34}} type="tertiary" />
       <div class="col">
-        <RingInput {activeLayer} />
-        <RingInput {activeLayer} type="secondary" />
+        <RingInput {activeLayer} keys={{d: 25, e: 26, n: 27, w: 28, s: 29}} />
+        <RingInput {activeLayer} keys={{d: 40, e: 41, n: 42, w: 43, s: 44}} type="secondary" />
       </div>
       <div class="col">
-        <RingInput {activeLayer} />
-        <RingInput {activeLayer} />
+        <RingInput {activeLayer} keys={{d: 20, e: 21, n: 22, w: 23, s: 24}} />
+        <RingInput {activeLayer} keys={{d: 35, e: 36, n: 37, w: 38, s: 39}} type="secondary" />
       </div>
-      <RingInput {activeLayer} />
+      <RingInput {activeLayer} keys={{d: 15, e: 16, n: 17, w: 18, s: 19}} />
     </div>
 
     <div class="row">
-      <RingInput {activeLayer} />
+      <RingInput {activeLayer} keys={{d: 60, w: 61, n: 62, e: 63, s: 64}} />
       <div class="col">
-        <RingInput {activeLayer} />
-        <RingInput {activeLayer} />
+        <RingInput {activeLayer} keys={{d: 65, w: 66, n: 67, e: 68, s: 69}} />
+        <RingInput {activeLayer} keys={{d: 80, w: 81, n: 82, e: 83, s: 84}} />
       </div>
       <div class="col">
-        <RingInput {activeLayer} />
-        <RingInput {activeLayer} />
+        <RingInput {activeLayer} keys={{d: 70, w: 71, n: 72, e: 73, s: 74}} />
+        <RingInput {activeLayer} keys={{d: 85, w: 86, n: 87, e: 88, s: 89}} />
       </div>
-      <RingInput {activeLayer} />
+      <RingInput {activeLayer} keys={{d: 75, w: 76, n: 77, e: 78, s: 79}} />
     </div>
   </div>
   <div class="row" style="gap: 48px; margin-top: -32px">
-    <RingInput {activeLayer} />
-    <RingInput {activeLayer} />
+    <RingInput {activeLayer} keys={{d: 10, e: 11, n: 12, w: 13, s: 14}} />
+    <RingInput {activeLayer} keys={{d: 55, w: 56, n: 57, e: 58, s: 59}} />
   </div>
   <div class="row" style="gap: 160px">
-    <RingInput {activeLayer} />
-    <RingInput {activeLayer} />
+    <RingInput {activeLayer} keys={{d: 5, e: 6, n: 7, w: 8, s: 9}} />
+    <RingInput {activeLayer} keys={{d: 50, w: 51, n: 52, e: 53, s: 54}} />
   </div>
   <div class="row" style="gap: 320px; margin-top: -12px">
-    <RingInput {activeLayer} />
-    <RingInput {activeLayer} />
+    <RingInput {activeLayer} keys={{d: 0, e: 1, n: 2, w: 3, s: 4}} type="secondary" />
+    <RingInput {activeLayer} keys={{d: 45, w: 46, n: 47, e: 48, s: 49}} type="secondary" />
   </div>
 </div>
 

src/lib/components/RingInput.svelte

@@ -1,12 +1,12 @@
 <script>
+  import {layout} from "$lib/serial/connection.js"
+  import {ACTION_MAP} from "$lib/serial/webserial/constants/action-map.js"
+  import keySymbols from "$lib/assets/key-symbols.json"
+
   export let activeLayer = 0
 
-  export let layout = [
-    ["a", "b", "c"],
-    ["d", "e", "f"],
-    ["g", "h", "i"],
-    ["j", "k", "l"],
-  ]
+  /** @type {{d: number, n: number, w: number, e: number, s: number}} */
+  export let keys
 
   /** @type {'primary' | 'secondary' | 'tertiary'} */
   export let type = "primary"
@@ -23,18 +23,35 @@
   }
 
   function getKeyDescriptions(keys) {
-    return keys.map((it, i) => (it ? `${it} (${layerNames[i]})` : "")).join("\n")
+    return keys.map(([, it], i) => (it ? `${it} (${layerNames[i]})` : "")).join("\n")
+  }
+
+  /**
+   * @param id {number}
+   * @param layout {[number[], number[], number[]]}
+   * @returns [string, string][]
+   */
+  function getActions(id, layout) {
+    return Array.from({length: 3}).map((_, i) => {
+      const actionId = layout?.[i][id]
+      return actionId !== undefined
+        ? [keySymbols[ACTION_MAP[actionId]], ACTION_MAP[actionId]]
+        : ["❓", undefined]
+    })
   }
 </script>
 
 <div class="radial {type}">
-  {#each layout as keys, quadrant}
-    <button title={getKeyDescriptions(keys)}>
-      {#each keys as value, layer}
-        <span
-          class:active={virtualLayerMap[activeLayer] === virtualLayerMap[layer]}
-          style="offset-distance: {offsetDistance(quadrant, layer, activeLayer)}%">{value}</span
-        >
+  {#each [keys.n, keys.e, keys.s, keys.w] as id, quadrant}
+    {@const actions = getActions(id, $layout)}
+    <button title={getKeyDescriptions(actions)}>
+      {#each actions as [value, raw], layer}
+        {#if value || raw}
+          <span
+            class:active={virtualLayerMap[activeLayer] === virtualLayerMap[layer]}
+            style="offset-distance: {offsetDistance(quadrant, layer, activeLayer)}%">{value || raw}</span
+          >
+        {/if}
       {/each}
     </button>
   {/each}
@@ -64,6 +81,7 @@
     $cr: math.div($size, 2) - 2 * $offset;
 
     will-change: scale, offset-distance;
+    user-select: none;
 
     scale: 0.9;
     offset-path: path(
@@ -82,7 +100,7 @@
 
     font-size: 16px;
 
-    opacity: 0.3;
+    opacity: 0.2;
 
     transition: scale 250ms ease, opacity 250ms ease, offset-distance 250ms ease;
 
@@ -137,4 +155,12 @@
       clip-path: polygon(50% 50%, 0 0, 0 100%);
     }
   }
+
+  .secondary > button {
+    filter: brightness(80%) contrast(120%);
+  }
+
+  .tertiary > button {
+    filter: brightness(80%) contrast(110%);
+  }
 </style>