Add hints to kana typer

Author: BenjaBobs

src/japanese/exercises/kana-typer/KanaTyper.scss

@@ -1,6 +1,6 @@
 .\/japanese {
   .correct {
-    background:  oklch(0.9 0.05 141)
+    background: oklch(0.9 0.05 141)
   }
 
   .incorrect {
@@ -9,15 +9,45 @@
 
   .current {
     background: oklch(0.9 0.05 244);
+
+    .hint-0 {
+      opacity: 0;
+      animation-delay: 2s;
+      animation-fill-mode: forwards;
+      animation-name: fadeIn;
+      animation-timing-function: ease-in;
+      animation-duration: 2s;
+    }
+
+    .hint-1 {
+      opacity: 0;
+      animation-delay: 4s;
+      animation-fill-mode: forwards;
+      animation-name: fadeIn;
+      animation-timing-function: ease-in;
+      animation-duration: 2s;
+    }
   }
 
-  .prev,.next {
+  .prev,
+  .next {
     opacity: 0.5;
     font-size: 2em;
   }
 
-  .prev,.cur,.next {
+  .prev,
+  .cur,
+  .next {
     font-size: 3em;
   }
 }
 
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/japanese/exercises/kana-typer/KanaTyper.tsx

@@ -13,6 +13,7 @@ type TypedKana = {
 	expected: string;
 	typed?: string;
 	correct?: boolean;
+	hints: string[];
 };
 
 const game = makeAutoObservable({
@@ -25,7 +26,7 @@ const game = makeAutoObservable({
 	timer: undefined as
 		| undefined
 		| { handle: number; startedAtMs: number; timeLeftMs: number },
-	timeLimitMs: 30_000,
+	timeLimitMs: 0,
 	finished: false,
 	enabledKanas: [] as string[],
 	dakuten: true,
@@ -123,10 +124,19 @@ const game = makeAutoObservable({
 		for (let i = 0; i < 10; i++) {
 			const selectedKana = poolArr[Math.floor(Math.random() * poolArr.length)];
 
+			const expectedInput = KanaUtils.toRomaji(selectedKana);
+
 			result.push({
 				idx: startingIdx + i,
 				kana: selectedKana,
-				expected: KanaUtils.toRomaji(selectedKana),
+				expected: expectedInput,
+				hints:
+					expectedInput.length === 1
+						? [expectedInput]
+						: [
+								expectedInput.slice(0, Math.ceil(expectedInput.length / 2)),
+								expectedInput.slice(Math.ceil(expectedInput.length / 2)),
+							],
 			});
 		}
 
@@ -176,10 +186,21 @@ export function KanaTyper() {
 								<span
 									style={{
 										fontSize: "0.3em",
-										opacity: it.correct != null ? 1 : 0,
+										opacity:
+											it.idx === game.currentIdx || it.correct != null ? 1 : 0,
 									}}
 								>
-									{it.expected}
+									{it.idx === game.currentIdx ? (
+										<span>
+											{it.hints.map((hint, hintIdx) => (
+												<span key={hint} className={`hint-${hintIdx}`}>
+													{hint}
+												</span>
+											))}
+										</span>
+									) : (
+										it.expected
+									)}
 								</span>
 							</Flex>
 						))}

src/japanese/utils/kana-utils.ts

@@ -185,8 +185,8 @@ const symbolGroupings: [string, string, string][] = [
 	["ぜ", "ゼ", "ze"],
 	["ぞ", "ゾ", "zo"],
 	["だ", "ダ", "da"],
-	["ぢ", "ヂ", "dji"],
-	["づ", "ヅ", "dzu"],
+	["ぢ", "ヂ", "ji"],
+	["づ", "ヅ", "zu"],
 	["で", "デ", "de"],
 	["ど", "ド", "do"],
 	["ば", "バ", "ba"],