auto-sync

src/lib/components/Navigation.svelte

@@ -1,7 +1,8 @@
 <script>
-  import {serialPort} from "$lib/serial/connection.js"
+  import {serialPort, syncing} from "$lib/serial/connection.js"
   import {browser} from "$app/environment"
   import {base} from "$app/paths"
+  import {slide} from "svelte/transition"
 </script>
 
 <nav>
@@ -29,8 +30,11 @@
       href="{base}/device-manager"
       title="Device Manager"
       class="icon connect"
-      class:error={$serialPort === undefined}>cable</a
+      class:error={$serialPort === undefined}
+      class:syncing={$syncing}
     >
+      cable
+    </a>
     <a href={base} title="Statistics" class="icon account">person</a>
   </div>
 </nav>
@@ -57,6 +61,8 @@
   .icon {
     cursor: pointer;
 
+    position: relative;
+
     aspect-ratio: 1;
     padding: 4px;
 
@@ -116,4 +122,38 @@
     color: var(--md-sys-color-on-secondary-container);
     background: var(--md-sys-color-secondary-container);
   }
+
+  @keyframes sync {
+    from {
+      rotate: 0deg;
+    }
+
+    to {
+      rotate: -360deg;
+    }
+  }
+
+  .connect::after {
+    pointer-events: none;
+    content: "sync";
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--md-sys-color-on-background);
+
+    opacity: 0;
+    background: var(--md-sys-color-background);
+    border-radius: 50%;
+
+    transition: opacity 250ms ease;
+    animation: sync 1s linear infinite;
+  }
+
+  .connect.syncing::after {
+    opacity: 1;
+  }
 </style>

src/lib/serial/connection.js

@@ -5,3 +5,9 @@ export const serialPort = writable()
 
 /** @type {import('svelte/store').Writable<Array<{type: 'input' | 'output' | 'system'; value: string}>>} */
 export const serialLog = writable([])
+
+/** @type {import('svelte/store').Writable<Array<{actions: number[]; phrase: string}>>} */
+export const chords = writable([])
+
+/** @type {import('svelte/store').Writable<boolean>} */
+export const syncing = writable(false)

src/lib/serial/device.js

@@ -61,6 +61,7 @@ export class CharaDevice {
    */
   async #read() {
     return this.#reader.then(async it => {
+      /** @type {string} */
       const result = await it.read().then(({value}) => value)
       serialLog.update(it => {
         it.push({

src/routes/+layout.svelte

@@ -4,7 +4,7 @@
   import {onMount} from "svelte"
   import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
   import Navigation from "$lib/components/Navigation.svelte"
-  import {serialPort} from "$lib/serial/connection.js"
+  import {chords, serialPort, syncing} from "$lib/serial/connection.js"
   import {CharaDevice} from "$lib/serial/device.js"
 
   /** @type {import('$lib/serial/device.js').CharaDevice} */
@@ -17,8 +17,17 @@
     const dark = true // window.matchMedia("(prefers-color-scheme: dark)").matches
     applyTheme(theme, {target: document.body, dark})
 
+    syncing.set(true)
     device ??= new CharaDevice()
     serialPort.set(device)
+
+    const chordCount = await device.getChordCount()
+    const chordInfo = []
+    for (let i = 0; i < chordCount; i++) {
+      chordInfo.push(await device.getChord(i))
+    }
+    chords.set(chordInfo)
+    syncing.set(false)
   })
 </script>
 

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-  import {serialPort} from "$lib/serial/connection.js"
+  import {chords, serialPort} from "$lib/serial/connection.js"
   import keySymbols from "$lib/assets/key-symbols.json"
 </script>
 
@@ -11,25 +11,19 @@
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
 
 <h2>Chords</h2>
-{#if $serialPort}
-  {#await $serialPort.getChordCount() then chordCount}
-    <p>You have {chordCount} chords</p>
-    <table>
-      {#each Array.from({length: chordCount}) as _, i}
-        {#await $serialPort.getChord(i) then { phrase, actions }}
-          <tr>
-            <th>{phrase}</th>
-            <td>
-              {#each actions as action}
-                <i>{keySymbols[action] || action}</i>
-              {/each}
-            </td>
-          </tr>
-        {/await}
-      {/each}
-    </table>
-  {/await}
-{/if}
+<p>You have {$chords.length} chords</p>
+<table>
+  {#each $chords as { phrase, actions }}
+    <tr>
+      <th>{phrase}</th>
+      <td>
+        {#each actions as action}
+          <i>{keySymbols[action] || action}</i>
+        {/each}
+      </td>
+    </tr>
+  {/each}
+</table>
 
 <style lang="scss">
   table i {