typing challenge prototype

src/lib/components/TypingInput.svelte

@@ -34,6 +34,7 @@
             >
           {/each}
         </span>
+        &nbsp;
       {/if}
     {/each}
   </section>
@@ -54,17 +55,16 @@
   section {
     display: flex;
     flex-direction: row;
-    gap: 8px;
-
     font-size: 1.3rem;
     font-weight: 500;
   }
 
   .letter {
     position: relative;
+    filter: brightness(50%);
   }
 
-  .letter.active::before {
+  .cursor {
     content: "";
 
     position: absolute;

src/lib/serial/chord.spec.ts

@@ -5,7 +5,6 @@ import {
   deserializeActions,
   serializeActions,
 } from "./chord"
-import type {Chord} from "./chord"
 
 describe("chords", function () {
   describe("actions", function () {

src/lib/serialization/base64.ts

@@ -9,11 +9,11 @@ export async function toBase64(blob: Blob): Promise<string> {
     const reader = new FileReader()
     reader.onloadend = function () {
       resolve(
-        (reader.result as string)
+        `${(reader.result as string)
           .replace(/^data:application\/octet-stream;base64,/, "")
-          .replaceAll("+", "~")
+          .replaceAll("+", ".")
           .replaceAll("/", "_")
-          .replaceAll("=", "-"),
+          .replaceAll("=", "-")}-`,
       )
     }
     reader.readAsDataURL(blob)
@@ -23,7 +23,8 @@ export async function toBase64(blob: Blob): Promise<string> {
 export async function fromBase64(base64: string): Promise<Blob> {
   return fetch(
     `data:application/octet-stream;base64,${base64
-      .replaceAll("~", "+")
+      .replace(/-$/, "")
+      .replaceAll(".", "+")
       .replaceAll("_", "/")
       .replaceAll("-", "=")}`,
   ).then(it => it.blob())