From b7c9c8941bbe66fd4eeaccddba48d563a3bf9473 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Wed, 5 Jul 2023 18:19:53 +0200
Subject: [PATCH] auto-sync

---
 src/lib/components/Navigation.svelte | 44 ++++++++++++++++++++++++++--
 src/lib/serial/connection.js         |  6 ++++
 src/lib/serial/device.js             |  1 +
 src/routes/+layout.svelte            | 11 ++++++-
 src/routes/+page.svelte              | 34 +++++++++------------
 5 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index 1bf9ebd7..815b54f9 100644
--- a/src/lib/components/Navigation.svelte
+++ b/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>
diff --git a/src/lib/serial/connection.js b/src/lib/serial/connection.js
index be65950e..9770b815 100644
--- a/src/lib/serial/connection.js
+++ b/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)
diff --git a/src/lib/serial/device.js b/src/lib/serial/device.js
index b2d4486a..90570c7d 100644
--- a/src/lib/serial/device.js
+++ b/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({
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a62b15a1..ca98e523 100644
--- a/src/routes/+layout.svelte
+++ b/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>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0629dd1a..a8936d90 100644
--- a/src/routes/+page.svelte
+++ b/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 {