Welcome to KanaDojo!
` 22 | 23 | to 24 | 25 | `{t('greeting')}
` 26 | 27 | being 28 | 29 | `t = useTranslations('query')` **for server components** 30 | 31 | and 32 | 33 | `t = getTranslations('query')` **for client components.** 34 | 35 | Above functions are provided by `next-inl` package and **can only be used inside of react functions.** 36 | 37 | ## Example. 38 | 39 | if **/translations/es.json** holds: 40 | 41 | `{ "MenuInfo": { "greeting": "¡Bienvenido a KanaDojo!"...} }` 42 | 43 | the usage of `const t = useTranslations('MenuInfo')` will store the queried property and all of its nested properties can be thus accessed in `t`. 44 | 45 | The developer can now implement 46 | 47 | `{t('greeting')}
` 48 | 49 | and expect 50 | 51 | `¡Bienvenido a KanaDojo!
` 52 | 53 | to be actually rendered if the locale of Spanish 'es' is provided by the system. 54 | -------------------------------------------------------------------------------- /TimedGame.md: -------------------------------------------------------------------------------- 1 | # 🕒 Timed Challenge Mode — KanaDojo 2 | 3 | The **Timed Challenge Mode** is a fast-paced training feature that tests your kana recognition speed and accuracy under pressure. It complements existing modes like Pick, Reverse-Pick, Input, and Reverse-Input with a time-bound twist. 4 | 5 | ## ✨ Features 6 | 7 | - ⏱ 60-second challenge window 8 | - 🎯 Real-time scoring with streak tracking 9 | - 🧠 Instant feedback on each answer 10 | - 📊 Separate stat tracking for timed mode (correct, incorrect, streak) 11 | - 🔁 Retry option with full stat reset 12 | 13 | ## 📁 File Structure 14 | 15 | | File | Purpose | 16 | |------|---------| 17 | | `lib/generateKanaQuestion.ts` | Utility to randomly select kana from user’s selection | 18 | | `store/useStatsStore.ts` | Extended Zustand store with timed stats | 19 | | `components/Dojo/Kana/TimedChallenge.tsx` | Main game component with timer, input, and scoring | 20 | | `app/kana/train/timed/page.tsx` | App Router entry point for timed mode | 21 | 22 | ## 🧠 How It Works 23 | 24 | 1. User selects kana characters from the Kana dojo. 25 | 2. On starting the challenge, a 60-second timer begins. 26 | 3. One kana character is shown at a time. 27 | 4. User types the correct romaji and submits. 28 | 5. Stats update in real time. 29 | 6. When time runs out, a summary screen appears with retry option. 30 | 31 | ## 🛠 Developer Notes 32 | 33 | - Stats are tracked separately from regular modes to avoid overlap. 34 | - Timer logic is handled via `useChallengeTimer` hook. 35 | - Component is modular and can be extended to Kanji/Vocab dojos easily. 36 | - All state updates are handled via Zustand for consistency. 37 | 38 | --- 39 | 40 | > PR: Adds Timed Challenge mode for Kana training. Includes stat tracking, timer logic, and App Router integration. 41 | -------------------------------------------------------------------------------- /app/ClientLayout.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import clsx from 'clsx'; 3 | // 1. Import useState to hold the dynamically imported module 4 | import { useEffect, useState } from 'react'; 5 | import usePreferencesStore from '@/store/usePreferencesStore'; 6 | // 2. Remove the static import 7 | // import fonts from '@/static/fonts'; 8 | import { ScrollRestoration } from 'next-scroll-restoration'; 9 | import WelcomeModal from '@/components/Modals/WelcomeModal'; 10 | import { AchievementNotificationContainer } from '@/components/reusable/AchievementNotification'; 11 | import AchievementIntegration from '@/components/reusable/AchievementIntegration'; 12 | import { applyTheme } from '@/static/themes'; 13 | 14 | // Define a type for the font object for clarity, adjust as needed 15 | type FontObject = { 16 | name: string; 17 | font: { 18 | className: string; 19 | }; 20 | }; 21 | 22 | export default function ClientLayout({ 23 | children 24 | }: Readonly<{ 25 | children: React.ReactNode; 26 | }>) { 27 | const { theme } = usePreferencesStore(); 28 | const font = usePreferencesStore(state => state.font); 29 | 30 | // 3. Create state to hold the fonts module 31 | const [fontsModule, setFontsModule] = useState40 | {kanaSubgroup.kana.join(' ')} 41 |
42 |142 | {kanjiObj.fullDisplayMeanings.join(', ')} 143 |
144 |87 | {wordObj.displayMeanings.join(', ')} 88 |
89 |出
11 |{message}
57 | )} 58 |59 | Exports only preferences and stats. No account data is included. 60 |
61 |84 | {'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん'.slice( 85 | 0, 86 | 20 87 | )} 88 |
89 |91 | {'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメもヤユヨラリルレロワヲン'.slice( 92 | 0, 93 | 20 94 | )} 95 |
96 |98 | 人日大小学 校生先円上下中外右左名前時分国 99 |
100 |102 | 人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは 103 |
104 || 14 | Key 15 | | 16 |17 | Action 18 | | 19 |
|---|---|
| 28 | 29 | {hotkey.key} 30 | 31 | | 32 |{hotkey.action} | 33 |
14 | {/* */} 29 |
30 | ); 31 | }; 32 | export default DevNotice; 33 | -------------------------------------------------------------------------------- /components/reusable/FuriganaText.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { ReactNode } from 'react'; 3 | import usePreferencesStore from '@/store/usePreferencesStore'; 4 | 5 | interface FuriganaTextProps { 6 | text: string; 7 | reading?: string; 8 | className?: string; 9 | furiganaClassName?: string; 10 | lang?: string; 11 | children?: ReactNode; 12 | } 13 | 14 | /** 15 | * Component for displaying Japanese text with optional furigana (reading annotations) 16 | * When furigana is enabled in settings, displays reading above the main text 17 | * When disabled, displays only the main text 18 | */ 19 | const FuriganaText = ({ 20 | text, 21 | reading, 22 | className = '', 23 | furiganaClassName = '', 24 | lang = 'ja', 25 | children 26 | }: FuriganaTextProps) => { 27 | const furiganaEnabled = usePreferencesStore(state => state.furiganaEnabled); 28 | 29 | // If children are provided, render them with optional furigana 30 | if (children) { 31 | if (furiganaEnabled && reading) { 32 | return ( 33 | 34 | {children} 35 | 36 | 37 | ); 38 | } 39 | return ( 40 | 41 | {children} 42 | 43 | ); 44 | } 45 | 46 | if (furiganaEnabled && reading) { 47 | const hiraganaReading = reading.includes(' ') 48 | ? reading.split(' ')[1] 49 | : reading; 50 | 51 | return ( 52 | 53 | {text} 54 | 55 | 56 | ); 57 | } 58 | return ( 59 | 60 | {text} 61 | 62 | ); 63 | }; 64 | 65 | export default FuriganaText; 66 | -------------------------------------------------------------------------------- /components/reusable/Game/Animals.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import useStatsStore from '@/store/useStatsStore'; 3 | // import { Star } from 'lucide-react'; 4 | import clsx from 'clsx'; 5 | import { animalIcons } from '@/static/icons'; 6 | 7 | const Stars = () => { 8 | // const stars = useStatsStore(state => state.stars); 9 | const iconIndices = useStatsStore(state => state.iconIndices); 10 | const animalIconsToDisplay = iconIndices.map(index => animalIcons[index]); 11 | 12 | return ( 13 |
68 | {gameMode.toLowerCase() === 'pick' && (
69 |
113 |
117 |
121 |
146 | {feedback} 147 |
148 | )} 149 | 150 |
156 |
157 |