Kana Typer 1st version done

Author: BenjaBobs

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

@@ -28,6 +28,8 @@ const game = makeAutoObservable({
 	timeLimitMs: 0,
 	finished: false,
 	enabledKanas: [] as string[],
+	dakuten: true,
+	handakuten: true,
 
 	reset(): void {
 		this.currentInput = "";
@@ -100,9 +102,22 @@ const game = makeAutoObservable({
 
 		if (!this.enabledKanas.length) return result;
 
+		const pool = new Set([...this.enabledKanas]);
+
+		if (this.dakuten) {
+			for (const dakuten of [...pool.values()].map(KanaUtils.toDakuten))
+				pool.add(dakuten);
+		}
+
+		if (this.handakuten) {
+			for (const handakuten of [...pool.values()].map(KanaUtils.toHandakuten))
+				pool.add(handakuten);
+		}
+
+		const poolArr = Array.from(pool);
+
 		for (let i = 0; i < 10; i++) {
-			const selectedKana =
-				this.enabledKanas[Math.floor(Math.random() * this.enabledKanas.length)];
+			const selectedKana = poolArr[Math.floor(Math.random() * poolArr.length)];
 
 			result.push({
 				idx: startingIdx + i,
@@ -123,10 +138,10 @@ export function KanaTyper() {
 	return (
 		<ContentBox>
 			<Flex itemsPlacement="center" gap={12}>
-				<h1>Kana typer</h1>
 				<Dropdown trigger="click" content={<KanaTyperSettings />}>
 					<span className="clickable">&#128736;</span>
 				</Dropdown>
+				<h1>Kana typer</h1>
 			</Flex>
 			<div>
 				{!game.timer
@@ -215,6 +230,26 @@ function KanaTyperSettings() {
 			style={{ minWidth: 350 }}
 		>
 			<h3>Selected Kana</h3>
+			<Flex>
+				<CheckBox
+					checked={game.dakuten}
+					onChange={(val) => {
+						game.dakuten = val;
+						game.reset();
+					}}
+				>
+					Dakuten
+				</CheckBox>
+				<CheckBox
+					checked={game.handakuten}
+					onChange={(val) => {
+						game.handakuten = val;
+						game.reset();
+					}}
+				>
+					Handakuten
+				</CheckBox>
+			</Flex>
 			<Flex gap={12}>
 				<Flex down>
 					{Object.entries(kanaTables.hiragana).map(([rowName, kanas]) => (

src/japanese/utils/kana-utils.ts

@@ -12,6 +12,18 @@ export namespace KanaUtils {
 	export function toAll(input: string) {
 		return [toRomaji(input), toHiragana(input), toKatakana(input)];
 	}
+	export function toDakuten(input: string) {
+		return transpileLangSymbol(toDakutenLookup, 3, input);
+	}
+	export function toHandakuten(input: string) {
+		return transpileLangSymbol(toHandakutenLookup, 3, input);
+	}
+	export function fromDakuten(input: string) {
+		return transpileLangSymbol(fromDakutenLookup, 3, input);
+	}
+	export function fromHandakuten(input: string) {
+		return transpileLangSymbol(fromHandakutenLookup, 3, input);
+	}
 }
 
 (window as any).KanaUtils = KanaUtils;
@@ -52,6 +64,69 @@ function transpileLangSymbol(
 	return transpiled;
 }
 
+function initDiacriticMaps() {
+	if (toDakutenLookup.size !== 0) return;
+
+	const dakutenChars = [
+		["が", "か"],
+		["ぎ", "き"],
+		["ぐ", "く"],
+		["げ", "け"],
+		["ご", "こ"],
+		["ざ", "さ"],
+		["じ", "し"],
+		["ず", "す"],
+		["ぜ", "せ"],
+		["ぞ", "そ"],
+		["だ", "た"],
+		["ぢ", "ち"],
+		["づ", "つ"],
+		["で", "て"],
+		["ど", "と"],
+		["ば", "な"],
+		["び", "ひ"],
+		["ぶ", "ふ"],
+		["べ", "へ"],
+		["ぼ", "ほ"],
+	];
+
+	for (const [hiraganaDakuten, hiraganaNormal] of dakutenChars) {
+		const katakanaDakuten = KanaUtils.toKatakana(hiraganaDakuten);
+		const katakanaNormal = KanaUtils.toKatakana(hiraganaNormal);
+		const romajiDakuten = KanaUtils.toRomaji(hiraganaDakuten);
+		const romajiNormal = KanaUtils.toRomaji(hiraganaNormal);
+
+		toDakutenLookup.set(hiraganaNormal, hiraganaDakuten);
+		toDakutenLookup.set(katakanaNormal, katakanaDakuten);
+		toDakutenLookup.set(romajiNormal, romajiDakuten);
+		fromDakutenLookup.set(hiraganaDakuten, hiraganaNormal);
+		fromDakutenLookup.set(katakanaDakuten, katakanaNormal);
+		fromDakutenLookup.set(romajiDakuten, romajiNormal);
+	}
+
+	const handakutenChars = [
+		["ぱ ", "は"],
+		["ぴ ", "ひ"],
+		["ぷ ", "ふ"],
+		["ぺ ", "へ"],
+		["ぽ ", "ほ"],
+	];
+	for (const [hiraganaDakuten, hiraganaNormal] of handakutenChars) {
+		const katakanaDakuten = KanaUtils.toKatakana(hiraganaDakuten);
+		const katakanaNormal = KanaUtils.toKatakana(hiraganaNormal);
+		const romajiDakuten = KanaUtils.toRomaji(hiraganaDakuten);
+		const romajiNormal = KanaUtils.toRomaji(hiraganaNormal);
+
+		toHandakutenLookup.set(hiraganaNormal, hiraganaDakuten);
+		toHandakutenLookup.set(katakanaNormal, katakanaDakuten);
+		toHandakutenLookup.set(romajiNormal, romajiDakuten);
+		fromHandakutenLookup.set(hiraganaDakuten, hiraganaNormal);
+		fromHandakutenLookup.set(katakanaDakuten, katakanaNormal);
+		fromHandakutenLookup.set(romajiDakuten, romajiNormal);
+	}
+}
+
+/* [hiragana, katakana, romaji] */
 const symbolGroupings: [string, string, string][] = [
 	["あ", "ア", "a"],
 	["い", "イ", "i"],
@@ -213,4 +288,8 @@ const katakanaLookup = new Map<string, string>([
 	...symbolGroupings.map(([, katakana, romaji]) => [romaji, katakana]),
 ] as [string, string][]);
 
-console.log(katakanaLookup);
+let toDakutenLookup = new Map<string, string>();
+let toHandakutenLookup = new Map<string, string>();
+let fromDakutenLookup = new Map<string, string>();
+let fromHandakutenLookup = new Map<string, string>();
+initDiacriticMaps();