change next char timing

deno.json

@@ -9,9 +9,11 @@
   "tasks": {
     "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
     "build": "deno task lume",
-    "serve": "deno task lume -s"
+    "serve": "deno task lume -s",
+    "test": "deno test --allow-read=src/"
   },
   "imports": {
+    "@std/assert": "jsr:@std/assert@^1.0.9",
     "@std/path": "jsr:@std/path@^1.0.8",
     "@std/yaml": "jsr:@std/yaml@^1.0.5",
     "esbuild/": "https://deno.land/x/esbuild@v0.24.0/",

src/_components/RomajiField.tsx

@@ -1,4 +1,4 @@
-import RomajiYaml_ from "../_data/romaji.yaml" with {type: 'json'};
+import RomajiYaml_ from "../_data/romaji.yaml" with { type: "json" };
 import { loadRomajiDict, matchInput } from "./_engine.ts";
 import { Hankaku } from "./_lib.ts";
 import { signal, useEffect } from "../_deps.ts";
@@ -31,23 +31,22 @@ export default function RomajiField({ answer, voice }: Args) {
   const match = matchInput(input.value, answer);
   if (match.some((x) => x.state === "ng")) {
     document.dispatchEvent(new Event("game:miss"));
-  }
-  if (match.every((x) => x.state === "ok")) {
+    hint("Backspace");
+  } else if (match.every((x) => x.state === "ok")) {
     input.value = "";
     match.length = 0;
     document.dispatchEvent(new Event("game:done"));
-  }
-  const nextUnit = match.find((x) => x.state !== "ok");
-  if (nextUnit) {
-    if (nextUnit.state == "ng") {
-      hint("Backspace");
-    } else {
+  } else {
+    const nextUnit = match.find((x) => x.state !== "ok");
+    if (nextUnit) {
       const inputLength = nextUnit.input?.length || 0;
       const nextChar = nextUnit.roman.substring(inputLength, inputLength + 1) ||
         nextUnit.kana;
       hint(`key-${nextChar}`);
+      if (nextUnit.state == "yet") nextUnit.state = "next";
     }
   }
+
   return (
     <div class="answer">
       {match.map(({ kana, roman, state, input }) => (

src/_components/_engine.ts

@@ -27,7 +27,7 @@ type CharUnit = {
   roman: string;
 };
 type CharUnitWithInput = CharUnit & {
-  state: "ok" | "ng" | "in" | "yet";
+  state: "yet" | "next" | "in" | "ok" | "ng";
   input?: string;
 };
 

src/_components/_engine_test.ts

@@ -1,11 +1,11 @@
-import { assertEquals } from "deno/std/testing/asserts.ts";
+import { assertEquals } from "@std/assert";
 import {
   firstLongestKanaMatch,
   kanaToRomanChars,
   loadRomajiDict,
   matchInput,
 } from "./_engine.ts";
-import { parse } from "deno/std/yaml/parse.ts";
+import { parse } from "@std/yaml/parse";
 const RomajiYaml_ = parse(Deno.readTextFileSync("./src/_data/romaji.yaml"));
 loadRomajiDict(RomajiYaml_ as any);
 

src/main.css

@@ -157,17 +157,21 @@ button.play {
   from {
     opacity: 0;
   }
-  50% {
+  80% {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
 
-ruby.yet {
+ruby.next {
   color: gray;
-  animation: next_key 4s;
+  animation: next_key 2s;
+}
+
+ruby.yet {
+  opacity: 0;
 }
 
 ruby.in {