feat: more look-alike katakana chars

arkhlima · May 30, 2023 · fa81560 · fa81560 · vercel · May 30, 2023
1 parent d5d3910
commit fa81560
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 12 deletions.
diff --git a/src/components/CharGroupSelect.tsx b/src/components/CharGroupSelect.tsx
@@ -56,7 +56,7 @@ const Char = (props: CharProps) => {
   })
 
   onCleanup(() => {
-    if (animation.data) animation.kill()
+    if (animation) animation.kill()
   })
 
   return (

diff --git a/src/constants/kana.ts b/src/constants/kana.ts
@@ -41,8 +41,11 @@ export const DIAGRAPH_DIACRITICS: CharGroup = [
   ['ぴゃ', 'ぴゅ', 'ぴょ'], // PY
 ]
 
-export const LOOK_ALIKE: CharGroup = [
+export const KATAKANA_LOOK_ALIKE: CharGroup = [
   ['し', 'つ', 'そ', 'ん', 'の'],
   ['う', 'ふ', 'わ', 'ら', 'を'],
+  ['こ', 'ゆ', 'ろ', null, null],
+  ['く', 'け', 'た', null, null],
+  ['ち', 'テ', null, null, null],
   ['す', 'ぬ', null, null, null],
 ]
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -17,7 +17,7 @@ import {
   MONOGRAPHS,
   MONOGRAPH_DIACRITICS,
   DIAGRAPH_DIACRITICS,
-  LOOK_ALIKE,
+  KATAKANA_LOOK_ALIKE,
 } from '~/constants/kana'
 
 const App = () => {
@@ -75,7 +75,7 @@ const App = () => {
           />
           <Show when={state.selectedScript === 'Katakana'}>
             <CharGroupSelect
-              chars={LOOK_ALIKE}
+              chars={KATAKANA_LOOK_ALIKE}
               selectedChars={`selected${state.selectedScript}LookAlike`}
               toggleChars={toggleChars}
               toggleAllChars={toggleAllChars}

diff --git a/src/routes/quiz.tsx b/src/routes/quiz.tsx
@@ -39,15 +39,15 @@ const AnimatedChar = (props: AnimatedCharProps) => {
   })
 
   onCleanup(() => {
-    if (animation.data) animation.kill()
+    if (animation) animation.kill()
   })
 
   return <span ref={(el) => (char = el)}>{props.children}</span>
 }
 
 const Quiz = () => {
   const state = useStore()
-  const { setAnswer } = state
+  const { setAnswer, reset } = state
 
   const navigate = useNavigate()
   let answerInput: HTMLInputElement
@@ -122,7 +122,7 @@ const Quiz = () => {
   })
 
   onCleanup(() => {
-    if (animation.data) animation.kill()
+    if (animation) animation.kill()
   })
 
   const calculateTranslateValue = (question: number): number => {

diff --git a/src/store/kanaStore.ts b/src/store/kanaStore.ts
@@ -6,7 +6,7 @@ import {
   MONOGRAPH_DIACRITICS,
   DIAGRAPHS,
   DIAGRAPH_DIACRITICS,
-  LOOK_ALIKE,
+  KATAKANA_LOOK_ALIKE,
 } from '~/constants/kana'
 import type { CharGroup, Script } from '~/constants/kana'
 
@@ -61,7 +61,9 @@ const initialState: State = {
   selectedKatakanaDiagraphDiacritics: DIAGRAPH_DIACRITICS.map((group) =>
     group.map(() => '')
   ),
-  selectedKatakanaLookAlike: LOOK_ALIKE.map((group) => group.map(() => '')),
+  selectedKatakanaLookAlike: KATAKANA_LOOK_ALIKE.map((group) =>
+    group.map(() => '')
+  ),
 
   questions: [],
   currentQuestion: 0,
@@ -177,8 +179,6 @@ const useStore = create<State & Actions>((set, get) => ({
 
   reset: () => {
     set({
-      scripts: ['Hiragana', 'Katakana'],
-
       selectedScript: 'Hiragana',
 
       totalHiragana: 0,
@@ -204,7 +204,9 @@ const useStore = create<State & Actions>((set, get) => ({
       selectedKatakanaDiagraphDiacritics: DIAGRAPH_DIACRITICS.map((group) =>
         group.map(() => '')
       ),
-      selectedKatakanaLookAlike: LOOK_ALIKE.map((group) => group.map(() => '')),
+      selectedKatakanaLookAlike: KATAKANA_LOOK_ALIKE.map((group) =>
+        group.map(() => '')
+      ),
 
       questions: [],
       currentQuestion: 0,