typing challenge prototype

src/lib/components/LayoutCC1.svelte

@@ -4,15 +4,21 @@
   let activeLayer = 0
 </script>
 
-<fieldset>
+<div>
+  <fieldset>
     {#each [["Numeric Layer", "123", 1], ["Primary Layer", "abc", 0], ["Function Layer", "function", 2]] as [title, icon, value]}
-    <button {title} class="icon" on:click={() => (activeLayer = value)} class:active={activeLayer === value}>
+      <button
+        {title}
+        class="icon"
+        on:click={() => (activeLayer = value)}
+        class:active={activeLayer === value}
+      >
         {icon}
       </button>
     {/each}
-</fieldset>
+  </fieldset>
 
-<div class="col layout" style="gap: 0">
+  <div class="col layout" style="gap: 0">
     <div class="row" style="gap: 156px">
       <div class="row">
         <RingInput {activeLayer} keys={{d: 30, e: 31, n: 32, w: 33, s: 34}} type="tertiary" />
@@ -52,6 +58,7 @@
       <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>
 </div>
 
 <style lang="scss">

src/lib/components/RingInput.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import {layout} from "$lib/serial/connection"
-  import type {CharaLayout} from "$lib/serial/connection"
+  import {highlightActions, layout} from "$lib/serial/connection"
+  import type {CharaLayout} from "$lib/serialization/layout"
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
   import type {KeyInfo} from "$lib/serial/keymap-codes"
 
   export let activeLayer = 0
-  export let keys: Record<"d" | "n" | "w" | "e", number>
+  export let keys: Record<"d" | "s" | "n" | "w" | "e", number>
   export let type: "primary" | "secondary" | "tertiary" = "primary"
 
   const layerNames = ["Primary Layer", "Number Layer", "Function Layer"]
@@ -37,7 +37,10 @@
 <div class="radial {type}">
   {#each [keys.n, keys.e, keys.s, keys.w] as id, quadrant}
     {@const actions = getActions(id, $layout)}
-    <button title={getKeyDescriptions(actions)}>
+    <button
+      title={getKeyDescriptions(actions)}
+      class:active={actions.some(it => it && $highlightActions?.includes(it.code))}
+    >
       {#each actions as keyInfo, layer}
         {#if keyInfo}
           <span
@@ -136,6 +139,7 @@
     mask-image: url("$lib/assets/quater-ring.svg");
     mask-size: 100% 100%;
 
+    &.active,
     &:active {
       color: var(--md-sys-color-on-tertiary);
       background: var(--md-sys-color-tertiary);

src/lib/components/TypingInput.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import {tick} from "svelte"
+  import LayoutCC1 from "$lib/components/LayoutCC1.svelte"
+  import {chords, highlightActions} from "$lib/serial/connection"
+  import {KEYMAP_CODES} from "$lib/serial/keymap-codes.js"
+
+  $: content = Array.from({length: 10}).map(() => $chords[Math.floor(Math.random() * $chords.length)])
+
+  let cursor = [0, 0]
+
+  $: {
+    $highlightActions = content[cursor[0]]?.actions ?? []
+  }
+
+  function keypress(event: KeyboardEvent) {
+    cursor[1]++
+    if (cursor[1] >= content[cursor[0]].phrase.length) {
+      cursor[0]++
+      cursor[1] = 0
+    }
+  }
+</script>
+
+<svelte:window on:keypress={keypress} />
+
+<div>
+  <section>
+    {#each content as word, i}
+      {#if word}
+        <span class="word">
+          {#each word.phrase as letter, j}
+            <span class="letter" class:active={i === cursor[0] && j === cursor[1]}
+              >{KEYMAP_CODES[letter].id}</span
+            >
+          {/each}
+        </span>
+      {/if}
+    {/each}
+  </section>
+
+  <LayoutCC1 />
+</div>
+
+<style lang="scss">
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+
+    height: 100%;
+  }
+
+  section {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+
+    font-size: 1.3rem;
+    font-weight: 500;
+  }
+
+  .letter {
+    position: relative;
+  }
+
+  .letter.active::before {
+    content: "";
+
+    position: absolute;
+    top: 50%;
+    translate: -50% -50%;
+
+    width: 2px;
+    height: 1em;
+
+    background: var(--md-sys-color-primary);
+  }
+</style>

src/lib/serial/connection.ts

@@ -19,6 +19,8 @@ export const layout = writable<CharaLayout>([[], [], []])
 
 export const unsavedChanges = writable(0)
 
+export const highlightActions: Writable<number[]> = writable([])
+
 export const syncStatus: Writable<"done" | "error" | "downloading" | "uploading"> = writable("done")
 
 let device: CharaDevice // @hmr:keep

src/routes/train/[mode]/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+  import TypingInput from "$lib/components/TypingInput.svelte"
+</script>
+
+<TypingInput />