Skip to content

Commit feec227

Browse files
committed
Add hints to kana typer
1 parent e74bc41 commit feec227

File tree

3 files changed

+60
-9
lines changed

3 files changed

+60
-9
lines changed
Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.\/japanese {
22
.correct {
3-
background: oklch(0.9 0.05 141)
3+
background: oklch(0.9 0.05 141)
44
}
55

66
.incorrect {
@@ -9,15 +9,45 @@
99

1010
.current {
1111
background: oklch(0.9 0.05 244);
12+
13+
.hint-0 {
14+
opacity: 0;
15+
animation-delay: 2s;
16+
animation-fill-mode: forwards;
17+
animation-name: fadeIn;
18+
animation-timing-function: ease-in;
19+
animation-duration: 2s;
20+
}
21+
22+
.hint-1 {
23+
opacity: 0;
24+
animation-delay: 4s;
25+
animation-fill-mode: forwards;
26+
animation-name: fadeIn;
27+
animation-timing-function: ease-in;
28+
animation-duration: 2s;
29+
}
1230
}
1331

14-
.prev,.next {
32+
.prev,
33+
.next {
1534
opacity: 0.5;
1635
font-size: 2em;
1736
}
1837

19-
.prev,.cur,.next {
38+
.prev,
39+
.cur,
40+
.next {
2041
font-size: 3em;
2142
}
2243
}
2344

45+
@keyframes fadeIn {
46+
0% {
47+
opacity: 0;
48+
}
49+
50+
100% {
51+
opacity: 1;
52+
}
53+
}

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

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ type TypedKana = {
1313
expected: string;
1414
typed?: string;
1515
correct?: boolean;
16+
hints: string[];
1617
};
1718

1819
const game = makeAutoObservable({
@@ -25,7 +26,7 @@ const game = makeAutoObservable({
2526
timer: undefined as
2627
| undefined
2728
| { handle: number; startedAtMs: number; timeLeftMs: number },
28-
timeLimitMs: 30_000,
29+
timeLimitMs: 0,
2930
finished: false,
3031
enabledKanas: [] as string[],
3132
dakuten: true,
@@ -123,10 +124,19 @@ const game = makeAutoObservable({
123124
for (let i = 0; i < 10; i++) {
124125
const selectedKana = poolArr[Math.floor(Math.random() * poolArr.length)];
125126

127+
const expectedInput = KanaUtils.toRomaji(selectedKana);
128+
126129
result.push({
127130
idx: startingIdx + i,
128131
kana: selectedKana,
129-
expected: KanaUtils.toRomaji(selectedKana),
132+
expected: expectedInput,
133+
hints:
134+
expectedInput.length === 1
135+
? [expectedInput]
136+
: [
137+
expectedInput.slice(0, Math.ceil(expectedInput.length / 2)),
138+
expectedInput.slice(Math.ceil(expectedInput.length / 2)),
139+
],
130140
});
131141
}
132142

@@ -176,10 +186,21 @@ export function KanaTyper() {
176186
<span
177187
style={{
178188
fontSize: "0.3em",
179-
opacity: it.correct != null ? 1 : 0,
189+
opacity:
190+
it.idx === game.currentIdx || it.correct != null ? 1 : 0,
180191
}}
181192
>
182-
{it.expected}
193+
{it.idx === game.currentIdx ? (
194+
<span>
195+
{it.hints.map((hint, hintIdx) => (
196+
<span key={hint} className={`hint-${hintIdx}`}>
197+
{hint}
198+
</span>
199+
))}
200+
</span>
201+
) : (
202+
it.expected
203+
)}
183204
</span>
184205
</Flex>
185206
))}

src/japanese/utils/kana-utils.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,8 +185,8 @@ const symbolGroupings: [string, string, string][] = [
185185
["ぜ", "ゼ", "ze"],
186186
["ぞ", "ゾ", "zo"],
187187
["だ", "ダ", "da"],
188-
["ぢ", "ヂ", "dji"],
189-
["づ", "ヅ", "dzu"],
188+
["ぢ", "ヂ", "ji"],
189+
["づ", "ヅ", "zu"],
190190
["で", "デ", "de"],
191191
["ど", "ド", "do"],
192192
["ば", "バ", "ba"],

0 commit comments

Comments
 (0)