antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: internationalize guide page with 6 languages

Browse Source 
Add complete i18n support for the /guide page across all 6 supported
languages (en, de, ja, hi, es, la).

Created comprehensive translation files for guide content including:
- Page metadata (nav title, hero, tabs)
- Reading Numbers section (structure, single digits, multi-digit, practice, interactive)
- Arithmetic Operations section (addition, subtraction, multiplication/division, practice tips)

Updated components to use translations:
- guide/page.tsx: Main page layout with nav and tabs
- ReadingNumbersGuide.tsx: All 5 steps with nested content
- ArithmeticOperationsGuide.tsx: All operation sections with examples

All hardcoded strings replaced with translation calls using next-intl.
Message interpolation used for dynamic content. Arrays properly handled
with t.raw() for list items.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-11-01 18:24:09 -05:00
parent 95b0105ca3
commit e9c320bb10
11 changed files with 1446 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
apps/web/src/app/guide/components/ArithmeticOperationsGuide.tsx
View File

@@ -2,7 +2,7 @@
import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
import Link from 'next/link'
import { useMessages } from 'next-intl'
import { useMessages, useTranslations } from 'next-intl'
import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
import { getTutorialForEditor } from '@/utils/tutorialConverter'
import { css } from '../../../../styled-system/css'
@@ -11,6 +11,7 @@ import { grid } from '../../../../styled-system/patterns'
export function ArithmeticOperationsGuide() {
const appConfig = useAbacusConfig()
const messages = useMessages() as any
const t = useTranslations('guide.arithmetic')
return (
<div className={css({ maxW: '4xl', mx: 'auto' })}>
@@ -33,7 +34,7 @@ export function ArithmeticOperationsGuide() {
mb: '4',
})}
>
🧮 Arithmetic Operations
{t('title')}
</h2>
<p
className={css({
@@ -41,7 +42,7 @@ export function ArithmeticOperationsGuide() {
opacity: '0.9',
})}
>
Master addition, subtraction, multiplication, and division on the soroban
{t('subtitle')}
</p>
</div>
@@ -68,13 +69,10 @@ export function ArithmeticOperationsGuide() {
gap: '2',
})}
>
<span>➕</span> Addition
{t('addition.title')}
</h3>
<p className={css({ mb: '6', color: 'gray.700' })}>
Addition on the soroban follows the principle of moving beads toward the bar to increase
values.
</p>
<p className={css({ mb: '6', color: 'gray.700' })}>{t('addition.description')}</p>
<div className={css({ mb: '6' })}>
<h4
@@ -85,7 +83,7 @@ export function ArithmeticOperationsGuide() {
color: 'green.600',
})}
>
Basic Steps:
{t('addition.basicSteps.title')}
</h4>
<ol
className={css({
@@ -94,12 +92,11 @@ export function ArithmeticOperationsGuide() {
color: 'gray.700',
})}
>
<li className={css({ mb: '2' })}>1. Set the first number on the soroban</li>
<li className={css({ mb: '2' })}>
2. Add the second number by moving beads toward the bar
</li>
<li className={css({ mb: '2' })}>3. Handle carries when a column exceeds 9</li>
<li>4. Read the final result</li>
{(t.raw('addition.basicSteps.steps') as string[]).map((step, i) => (
<li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
{i + 1}. {step}
</li>
))}
</ol>
</div>
@@ -120,11 +117,13 @@ export function ArithmeticOperationsGuide() {
mb: '2',
})}
>
Example: 3 + 4 = 7
{t('addition.example.title')}
</h5>
<div className={grid({ columns: 3, gap: '4', alignItems: 'center' })}>
<div className={css({ textAlign: 'center' })}>
<p className={css({ fontSize: 'sm', mb: '2', color: 'green.700' })}>Start: 3</p>
<p className={css({ fontSize: 'sm', mb: '2', color: 'green.700' })}>
{t('addition.example.start')}
</p>
<div
className={css({
width: '160px',
@@ -156,7 +155,9 @@ export function ArithmeticOperationsGuide() {
</div>
<div className={css({ textAlign: 'center', fontSize: '2xl' })}>+</div>
<div className={css({ textAlign: 'center' })}>
<p className={css({ fontSize: 'sm', mb: '2', color: 'green.700' })}>Result: 7</p>
<p className={css({ fontSize: 'sm', mb: '2', color: 'green.700' })}>
{t('addition.example.result')}
</p>
<div
className={css({
width: '160px',
@@ -213,12 +214,10 @@ export function ArithmeticOperationsGuide() {
gap: '2',
})}
>
<span>🎯</span> Guided Addition Tutorial
{t('guidedTutorial.title')}
</h3>
<p className={css({ mb: '6', color: 'gray.700' })}>
Learn addition step-by-step with interactive guidance, tooltips, and error correction.
</p>
<p className={css({ mb: '6', color: 'gray.700' })}>{t('guidedTutorial.description')}</p>
<div
className={css({
@@ -241,10 +240,10 @@ export function ArithmeticOperationsGuide() {
})}
>
<span>✏️</span>
<strong>This tutorial is now editable!</strong>
<strong>{t('guidedTutorial.editableNote')}</strong>
</p>
<p className={css({ fontSize: 'xs', color: 'blue.600' })}>
You can customize this tutorial using our new tutorial editor system.{' '}
{t('guidedTutorial.editableDesc')}{' '}
<a
href="/tutorial-editor"
className={css({
@@ -253,7 +252,7 @@ export function ArithmeticOperationsGuide() {
_hover: { color: 'blue.800' },
})}
>
Open in Editor →
{t('guidedTutorial.editableLink')}
</a>
</p>
</div>
@@ -288,12 +287,10 @@ export function ArithmeticOperationsGuide() {
gap: '2',
})}
>
<span>➖</span> Subtraction
{t('subtraction.title')}
</h3>
<p className={css({ mb: '6', color: 'gray.700' })}>
Subtraction involves moving beads away from the bar to decrease values.
</p>
<p className={css({ mb: '6', color: 'gray.700' })}>{t('subtraction.description')}</p>
<div className={css({ mb: '6' })}>
<h4
@@ -304,7 +301,7 @@ export function ArithmeticOperationsGuide() {
color: 'red.600',
})}
>
Basic Steps:
{t('subtraction.basicSteps.title')}
</h4>
<ol
className={css({
@@ -313,10 +310,11 @@ export function ArithmeticOperationsGuide() {
color: 'gray.700',
})}
>
<li className={css({ mb: '2' })}>1. Set the minuend (first number) on the soroban</li>
<li className={css({ mb: '2' })}>2. Subtract by moving beads away from the bar</li>
<li className={css({ mb: '2' })}>3. Handle borrowing when needed</li>
<li>4. Read the final result</li>
{(t.raw('subtraction.basicSteps.steps') as string[]).map((step, i) => (
<li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
{i + 1}. {step}
</li>
))}
</ol>
</div>
@@ -337,11 +335,13 @@ export function ArithmeticOperationsGuide() {
mb: '2',
})}
>
Example: 8 - 3 = 5
{t('subtraction.example.title')}
</h5>
<div className={grid({ columns: 3, gap: '4', alignItems: 'center' })}>
<div className={css({ textAlign: 'center' })}>
<p className={css({ fontSize: 'sm', mb: '2', color: 'red.700' })}>Start: 8</p>
<p className={css({ fontSize: 'sm', mb: '2', color: 'red.700' })}>
{t('subtraction.example.start')}
</p>
<div
className={css({
width: '160px',
@@ -373,7 +373,9 @@ export function ArithmeticOperationsGuide() {
</div>
<div className={css({ textAlign: 'center', fontSize: '2xl' })}>-</div>
<div className={css({ textAlign: 'center' })}>
<p className={css({ fontSize: 'sm', mb: '2', color: 'red.700' })}>Result: 5</p>
<p className={css({ fontSize: 'sm', mb: '2', color: 'red.700' })}>
{t('subtraction.example.result')}
</p>
<div
className={css({
width: '160px',
@@ -430,11 +432,11 @@ export function ArithmeticOperationsGuide() {
gap: '2',
})}
>
<span>✖️➗</span> Multiplication & Division
{t('multiplicationDivision.title')}
</h3>
<p className={css({ mb: '6', color: 'gray.700' })}>
Advanced operations that combine addition/subtraction with position shifting.
{t('multiplicationDivision.description')}
</p>
<div className={grid({ columns: { base: 1, md: 2 }, gap: '6' })}>
@@ -455,7 +457,7 @@ export function ArithmeticOperationsGuide() {
mb: '3',
})}
>
Multiplication
{t('multiplicationDivision.multiplication.title')}
</h4>
<ul
className={css({
@@ -464,10 +466,13 @@ export function ArithmeticOperationsGuide() {
pl: '4',
})}
>
<li className={css({ mb: '2' })}>• Break down into repeated addition</li>
<li className={css({ mb: '2' })}>• Use position shifts for place values</li>
<li className={css({ mb: '2' })}>• Master multiplication tables</li>
<li>• Practice with single digits first</li>
{(t.raw('multiplicationDivision.multiplication.points') as string[]).map(
(point, i) => (
<li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
• {point}
</li>
)
)}
</ul>
</div>
@@ -488,7 +493,7 @@ export function ArithmeticOperationsGuide() {
mb: '3',
})}
>
Division
{t('multiplicationDivision.division.title')}
</h4>
<ul
className={css({
@@ -497,10 +502,11 @@ export function ArithmeticOperationsGuide() {
pl: '4',
})}
>
<li className={css({ mb: '2' })}>• Use repeated subtraction method</li>
<li className={css({ mb: '2' })}>• Estimate quotients carefully</li>
<li className={css({ mb: '2' })}>• Handle remainders properly</li>
<li>• Check results by multiplication</li>
{(t.raw('multiplicationDivision.division.points') as string[]).map((point, i) => (
<li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
• {point}
</li>
))}
</ul>
</div>
</div>
@@ -525,7 +531,7 @@ export function ArithmeticOperationsGuide() {
mb: '3',
})}
>
💡 Master the Fundamentals
{t('practiceTips.title')}
</h4>
<p
className={css({
@@ -533,7 +539,7 @@ export function ArithmeticOperationsGuide() {
opacity: '0.9',
})}
>
Start with simple problems and gradually increase complexity
{t('practiceTips.description')}
</p>
<Link
href="/create"
@@ -550,7 +556,7 @@ export function ArithmeticOperationsGuide() {
_hover: { transform: 'translateY(-1px)', shadow: 'lg' },
})}
>
Practice Arithmetic Operations →
{t('practiceTips.button')}
</Link>
</div>
</div>

175
apps/web/src/app/guide/components/ReadingNumbersGuide.tsx
View File

@@ -2,11 +2,13 @@
import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
import Link from 'next/link'
import { useTranslations } from 'next-intl'
import { css } from '../../../../styled-system/css'
import { grid, hstack, stack } from '../../../../styled-system/patterns'
export function ReadingNumbersGuide() {
const appConfig = useAbacusConfig()
const t = useTranslations('guide.reading')
return (
<div className={stack({ gap: '12' })}>
@@ -20,7 +22,7 @@ export function ReadingNumbersGuide() {
mb: '4',
})}
>
🔍 Learning to Read Soroban Numbers
{t('title')}
</h2>
<p
className={css({
@@ -31,8 +33,7 @@ export function ReadingNumbersGuide() {
lineHeight: 'relaxed',
})}
>
Master the fundamentals of reading numbers on the soroban with step-by-step visual
tutorials
{t('subtitle')}
</p>
</div>
@@ -61,7 +62,7 @@ export function ReadingNumbersGuide() {
fontSize: 'lg',
})}
>
1
{t('structure.number')}
</div>
<h3
className={css({
@@ -70,7 +71,7 @@ export function ReadingNumbersGuide() {
color: 'gray.900',
})}
>
Understanding the Structure
{t('structure.title')}
</h3>
</div>
@@ -82,8 +83,7 @@ export function ReadingNumbersGuide() {
lineHeight: 'relaxed',
})}
>
The soroban consists of two main sections divided by a horizontal bar. Understanding
this structure is fundamental to reading any number.
{t('structure.description')}
</p>
<div className={grid({ columns: { base: 1, md: 2 }, gap: '8' })}>
@@ -104,7 +104,7 @@ export function ReadingNumbersGuide() {
mb: '3',
})}
>
🌅 Heaven Beads (Top)
{t('structure.heaven.title')}
</h4>
<ul
className={css({
@@ -114,10 +114,11 @@ export function ReadingNumbersGuide() {
pl: '4',
})}
>
<li className={css({ mb: '2' })}>• Located above the horizontal bar</li>
<li className={css({ mb: '2' })}>• Each bead represents 5</li>
<li className={css({ mb: '2' })}>• Only one bead per column</li>
<li>• When pushed down = active/counted</li>
{(t.raw('structure.heaven.points') as string[]).map((point, i) => (
<li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
• {point}
</li>
))}
</ul>
</div>
@@ -138,7 +139,7 @@ export function ReadingNumbersGuide() {
mb: '3',
})}
>
🌍 Earth Beads (Bottom)
{t('structure.earth.title')}
</h4>
<ul
className={css({
@@ -148,10 +149,11 @@ export function ReadingNumbersGuide() {
pl: '4',
})}
>
<li className={css({ mb: '2' })}>• Located below the horizontal bar</li>
<li className={css({ mb: '2' })}>• Each bead represents 1</li>
<li className={css({ mb: '2' })}>• Four beads per column</li>
<li>• When pushed up = active/counted</li>
{(t.raw('structure.earth.points') as string[]).map((point, i) => (
<li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
• {point}
</li>
))}
</ul>
</div>
</div>
@@ -173,7 +175,7 @@ export function ReadingNumbersGuide() {
fontWeight: 'medium',
})}
>
💡 Key Concept: Active beads are those touching the horizontal bar
{t('structure.keyConcept')}
</p>
</div>
</div>
@@ -205,7 +207,7 @@ export function ReadingNumbersGuide() {
fontSize: 'lg',
})}
>
2
{t('singleDigits.number')}
</div>
<h3
className={css({
@@ -214,7 +216,7 @@ export function ReadingNumbersGuide() {
color: 'gray.900',
})}
>
Reading Single Digits (1-9)
{t('singleDigits.title')}
</h3>
</div>
@@ -225,17 +227,16 @@ export function ReadingNumbersGuide() {
lineHeight: 'relaxed',
})}
>
Let's learn to read single digits by understanding how heaven and earth beads combine to
represent numbers 1 through 9.
{t('singleDigits.description')}
</p>
<div className={grid({ columns: { base: 1, lg: 5 }, gap: '6' })}>
{[
{ num: 0, desc: 'No beads active - all away from bar' },
{ num: 1, desc: 'One earth bead pushed up' },
{ num: 3, desc: 'Three earth beads pushed up' },
{ num: 5, desc: 'Heaven bead pushed down' },
{ num: 7, desc: 'Heaven bead + two earth beads' },
{ num: 0, descKey: '0' },
{ num: 1, descKey: '1' },
{ num: 3, descKey: '3' },
{ num: 5, descKey: '5' },
{ num: 7, descKey: '7' },
].map((example) => (
<div
key={example.num}
@@ -301,7 +302,7 @@ export function ReadingNumbersGuide() {
mt: 'auto',
})}
>
{example.desc}
{t(`singleDigits.examples.${example.descKey}`)}
</p>
</div>
))}
@@ -334,7 +335,7 @@ export function ReadingNumbersGuide() {
fontSize: 'lg',
})}
>
3
{t('multiDigit.number')}
</div>
<h3
className={css({
@@ -343,7 +344,7 @@ export function ReadingNumbersGuide() {
color: 'gray.900',
})}
>
Multi-Digit Numbers
{t('multiDigit.title')}
</h3>
</div>
@@ -354,8 +355,7 @@ export function ReadingNumbersGuide() {
lineHeight: 'relaxed',
})}
>
Reading larger numbers is simply a matter of reading each column from left to right,
with each column representing a different place value.
{t('multiDigit.description')}
</p>
<div
@@ -376,7 +376,7 @@ export function ReadingNumbersGuide() {
textAlign: 'center',
})}
>
📍 Reading Direction & Place Values
{t('multiDigit.readingDirection.title')}
</h4>
<div className={grid({ columns: { base: 1, md: 2 }, gap: '6' })}>
<div>
@@ -387,7 +387,7 @@ export function ReadingNumbersGuide() {
color: 'purple.800',
})}
>
Reading Order:
{t('multiDigit.readingDirection.readingOrder.title')}
</h5>
<ul
className={css({
@@ -396,9 +396,13 @@ export function ReadingNumbersGuide() {
pl: '4',
})}
>
<li className={css({ mb: '1' })}>• Always read from LEFT to RIGHT</li>
<li className={css({ mb: '1' })}>• Each column is one digit</li>
<li>• Combine digits to form the complete number</li>
{(t.raw('multiDigit.readingDirection.readingOrder.points') as string[]).map(
(point, i) => (
<li key={i} className={css({ mb: i < 2 ? '1' : '0' })}>
• {point}
</li>
)
)}
</ul>
</div>
<div>
@@ -409,7 +413,7 @@ export function ReadingNumbersGuide() {
color: 'purple.800',
})}
>
Place Values:
{t('multiDigit.readingDirection.placeValues.title')}
</h5>
<ul
className={css({
@@ -418,9 +422,13 @@ export function ReadingNumbersGuide() {
pl: '4',
})}
>
<li className={css({ mb: '1' })}>• Rightmost = Ones (1s)</li>
<li className={css({ mb: '1' })}>• Next left = Tens (10s)</li>
<li>• Continue for hundreds, thousands, etc.</li>
{(t.raw('multiDigit.readingDirection.placeValues.points') as string[]).map(
(point, i) => (
<li key={i} className={css({ mb: i < 2 ? '1' : '0' })}>
• {point}
</li>
)
)}
</ul>
</div>
</div>
@@ -445,20 +453,14 @@ export function ReadingNumbersGuide() {
textAlign: 'center',
})}
>
🔢 Multi-Digit Examples
{t('multiDigit.examples.title')}
</h4>
<div className={grid({ columns: { base: 1, md: 3 }, gap: '8' })}>
{[
{
num: 23,
desc: 'Two-digit: 2 in tens place + 3 in ones place',
},
{
num: 58,
desc: 'Heaven bead in tens (5) + heaven + earth beads in ones (8)',
},
{ num: 147, desc: 'Three-digit: 1 hundred + 4 tens + 7 ones' },
{ num: 23, descKey: '23' },
{ num: 58, descKey: '58' },
{ num: 147, descKey: '147' },
].map((example) => (
<div
key={example.num}
@@ -523,7 +525,7 @@ export function ReadingNumbersGuide() {
textAlign: 'center',
})}
>
{example.desc}
{t(`multiDigit.examples.${example.descKey}`)}
</p>
</div>
))}
@@ -557,7 +559,7 @@ export function ReadingNumbersGuide() {
fontSize: 'lg',
})}
>
4
{t('practice.number')}
</div>
<h3
className={css({
@@ -566,7 +568,7 @@ export function ReadingNumbersGuide() {
color: 'gray.900',
})}
>
Practice Strategy
{t('practice.title')}
</h3>
</div>
@@ -588,7 +590,7 @@ export function ReadingNumbersGuide() {
mb: '4',
})}
>
🎯 Learning Tips
{t('practice.learningTips.title')}
</h4>
<ul
className={css({
@@ -598,12 +600,11 @@ export function ReadingNumbersGuide() {
pl: '4',
})}
>
<li className={css({ mb: '2' })}>• Start with single digits (0-9)</li>
<li className={css({ mb: '2' })}>
• Practice identifying active vs. inactive beads
</li>
<li className={css({ mb: '2' })}>• Work on speed recognition</li>
<li>• Progress to multi-digit numbers gradually</li>
{(t.raw('practice.learningTips.points') as string[]).map((point, i) => (
<li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
• {point}
</li>
))}
</ul>
</div>
@@ -624,7 +625,7 @@ export function ReadingNumbersGuide() {
mb: '4',
})}
>
⚡ Quick Recognition
{t('practice.quickRecognition.title')}
</h4>
<ul
className={css({
@@ -634,10 +635,11 @@ export function ReadingNumbersGuide() {
pl: '4',
})}
>
<li className={css({ mb: '2' })}>• Numbers 1-4: Only earth beads</li>
<li className={css({ mb: '2' })}>• Number 5: Only heaven bead</li>
<li className={css({ mb: '2' })}>• Numbers 6-9: Heaven + earth beads</li>
<li>• Zero: All beads away from bar</li>
{(t.raw('practice.quickRecognition.points') as string[]).map((point, i) => (
<li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
• {point}
</li>
))}
</ul>
</div>
</div>
@@ -658,7 +660,7 @@ export function ReadingNumbersGuide() {
mb: '3',
})}
>
🚀 Ready to Practice?
{t('practice.readyToPractice.title')}
</h4>
<p
className={css({
@@ -666,7 +668,7 @@ export function ReadingNumbersGuide() {
opacity: '0.9',
})}
>
Test your newfound knowledge with interactive flashcards
{t('practice.readyToPractice.description')}
</p>
<Link
href="/create"
@@ -683,7 +685,7 @@ export function ReadingNumbersGuide() {
_hover: { transform: 'translateY(-1px)', shadow: 'lg' },
})}
>
Create Practice Flashcards →
{t('practice.readyToPractice.button')}
</Link>
</div>
</div>
@@ -714,7 +716,7 @@ export function ReadingNumbersGuide() {
fontSize: 'lg',
})}
>
5
{t('interactive.number')}
</div>
<h3
className={css({
@@ -723,7 +725,7 @@ export function ReadingNumbersGuide() {
color: 'gray.900',
})}
>
Interactive Practice
{t('interactive.title')}
</h3>
</div>
@@ -734,8 +736,7 @@ export function ReadingNumbersGuide() {
lineHeight: 'relaxed',
})}
>
Try the interactive abacus below! Click on the beads to activate them and watch the
number change in real-time.
{t('interactive.description')}
</p>
<div
@@ -756,7 +757,7 @@ export function ReadingNumbersGuide() {
textAlign: 'center',
})}
>
🎮 How to Use the Interactive Abacus
{t('interactive.howToUse.title')}
</h4>
<div className={grid({ columns: { base: 1, md: 2 }, gap: '6' })}>
<div>
@@ -767,7 +768,7 @@ export function ReadingNumbersGuide() {
color: 'orange.800',
})}
>
Heaven Beads (Top):
{t('interactive.howToUse.heaven.title')}
</h5>
<ul
className={css({
@@ -776,9 +777,11 @@ export function ReadingNumbersGuide() {
pl: '4',
})}
>
<li className={css({ mb: '1' })}>• Worth 5 points each</li>
<li className={css({ mb: '1' })}>• Click to toggle on/off</li>
<li>• Blue when active, gray when inactive</li>
{(t.raw('interactive.howToUse.heaven.points') as string[]).map((point, i) => (
<li key={i} className={css({ mb: i < 2 ? '1' : '0' })}>
• {point}
</li>
))}
</ul>
</div>
<div>
@@ -789,7 +792,7 @@ export function ReadingNumbersGuide() {
color: 'orange.800',
})}
>
Earth Beads (Bottom):
{t('interactive.howToUse.earth.title')}
</h5>
<ul
className={css({
@@ -798,9 +801,11 @@ export function ReadingNumbersGuide() {
pl: '4',
})}
>
<li className={css({ mb: '1' })}>• Worth 1 point each</li>
<li className={css({ mb: '1' })}>• Click to activate groups</li>
<li>• Green when active, gray when inactive</li>
{(t.raw('interactive.howToUse.earth.points') as string[]).map((point, i) => (
<li key={i} className={css({ mb: i < 2 ? '1' : '0' })}>
• {point}
</li>
))}
</ul>
</div>
</div>
@@ -849,7 +854,7 @@ export function ReadingNumbersGuide() {
mb: '3',
})}
>
🚀 Ready to Practice?
{t('interactive.readyToPractice.title')}
</h4>
<p
className={css({
@@ -857,7 +862,7 @@ export function ReadingNumbersGuide() {
opacity: '0.9',
})}
>
Test your newfound knowledge with interactive flashcards
{t('interactive.readyToPractice.description')}
</p>
<Link
href="/create"
@@ -874,7 +879,7 @@ export function ReadingNumbersGuide() {
_hover: { transform: 'translateY(-1px)', shadow: 'lg' },
})}
>
Create Practice Flashcards →
{t('interactive.readyToPractice.button')}
</Link>
</div>
</div>

13
apps/web/src/app/guide/page.tsx
View File

@@ -1,6 +1,7 @@
'use client'
import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { PageWithNav } from '@/components/PageWithNav'
import { css } from '../../../styled-system/css'
import { container, hstack } from '../../../styled-system/patterns'
@@ -10,10 +11,11 @@ import { ReadingNumbersGuide } from './components/ReadingNumbersGuide'
type TabType = 'reading' | 'arithmetic'
export default function GuidePage() {
const t = useTranslations('guide.page')
const [activeTab, setActiveTab] = useState<TabType>('reading')
return (
<PageWithNav navTitle="Interactive Guide" navEmoji="📖">
<PageWithNav navTitle={t('navTitle')} navEmoji="📖">
<div className={css({ minHeight: '100vh', bg: 'gray.50' })}>
{/* Hero Section */}
<div
@@ -33,7 +35,7 @@ export default function GuidePage() {
textShadow: '0 4px 20px rgba(0,0,0,0.3)',
})}
>
📚 Complete Soroban Mastery Guide
{t('hero.title')}
</h1>
<p
className={css({
@@ -44,8 +46,7 @@ export default function GuidePage() {
lineHeight: 'relaxed',
})}
>
From basic reading to advanced arithmetic - everything you need to master the Japanese
abacus
{t('hero.subtitle')}
</p>
</div>
</div>
@@ -78,7 +79,7 @@ export default function GuidePage() {
},
})}
>
📖 Reading Numbers
{t('tabs.reading')}
</button>
<button
onClick={() => setActiveTab('arithmetic')}
@@ -98,7 +99,7 @@ export default function GuidePage() {
},
})}
>
🧮 Arithmetic Operations
{t('tabs.arithmetic')}
</button>
</div>
</div>

215
apps/web/src/i18n/locales/guide/de.json Normal file
View File

@@ -0,0 +1,215 @@
{
"guide": {
"page": {
"navTitle": "Interaktiver Leitfaden",
"hero": {
"title": "📚 Vollständiger Soroban-Meisterschafts-Leitfaden",
"subtitle": "Vom grundlegenden Lesen bis zur fortgeschrittenen Arithmetik - alles, was du brauchst, um den japanischen Abakus zu meistern"
},
"tabs": {
"reading": "📖 Zahlen Lesen",
"arithmetic": "🧮 Rechenoperationen"
}
},
"reading": {
"title": "🔍 Soroban-Zahlen Lesen Lernen",
"subtitle": "Meistere die Grundlagen des Zahlenlesens auf dem Soroban mit Schritt-für-Schritt-Visualisierungen",
"structure": {
"number": "1",
"title": "Die Struktur Verstehen",
"description": "Der Soroban besteht aus zwei Hauptabschnitten, die durch einen horizontalen Balken geteilt sind. Das Verständnis dieser Struktur ist grundlegend für das Lesen jeder Zahl.",
"heaven": {
"title": "🌅 Himmelsperlen (Oben)",
"points": [
"Befinden sich über dem horizontalen Balken",
"Jede Perle repräsentiert 5",
"Nur eine Perle pro Spalte",
"Wenn nach unten geschoben = aktiv/gezählt"
]
},
"earth": {
"title": "🌍 Erdperlen (Unten)",
"points": [
"Befinden sich unter dem horizontalen Balken",
"Jede Perle repräsentiert 1",
"Vier Perlen pro Spalte",
"Wenn nach oben geschoben = aktiv/gezählt"
]
},
"keyConcept": "💡 Schlüsselkonzept: Aktive Perlen sind diejenigen, die den horizontalen Balken berühren"
},
"singleDigits": {
"number": "2",
"title": "Einzelne Ziffern Lesen (1-9)",
"description": "Lass uns einzelne Ziffern lesen lernen, indem wir verstehen, wie Himmels- und Erdperlen kombiniert werden, um die Zahlen 1 bis 9 darzustellen.",
"examples": {
"0": "Keine Perlen aktiv - alle vom Balken entfernt",
"1": "Eine Erdperle nach oben geschoben",
"3": "Drei Erdperlen nach oben geschoben",
"5": "Himmelsperle nach unten geschoben",
"7": "Himmelsperle + zwei Erdperlen"
}
},
"multiDigit": {
"number": "3",
"title": "Mehrstellige Zahlen",
"description": "Das Lesen größerer Zahlen ist einfach eine Frage des Lesens jeder Spalte von links nach rechts, wobei jede Spalte einen anderen Stellenwert darstellt.",
"readingDirection": {
"title": "📍 Leserichtung & Stellenwerte",
"readingOrder": {
"title": "Lesereihenfolge:",
"points": [
"Immer von LINKS nach RECHTS lesen",
"Jede Spalte ist eine Ziffer",
"Ziffern kombinieren, um die vollständige Zahl zu bilden"
]
},
"placeValues": {
"title": "Stellenwerte:",
"points": [
"Ganz rechts = Einer (1en)",
"Nächste links = Zehner (10er)",
"Fortsetzen für Hunderter, Tausender, etc."
]
}
},
"examples": {
"title": "🔢 Mehrstellige Beispiele",
"23": "Zweistellig: 2 an Zehnerstelle + 3 an Einerstelle",
"58": "Himmelsperle an Zehnern (5) + Himmels- + Erdperlen an Einern (8)",
"147": "Dreistellig: 1 Hundert + 4 Zehner + 7 Einer"
}
},
"practice": {
"number": "4",
"title": "Übungsstrategie",
"learningTips": {
"title": "🎯 Lerntipps",
"points": [
"Beginne mit einzelnen Ziffern (0-9)",
"Übe das Erkennen von aktiven vs. inaktiven Perlen",
"Arbeite an Geschwindigkeitserkennung",
"Schreite allmählich zu mehrstelligen Zahlen fort"
]
},
"quickRecognition": {
"title": "⚡ Schnellerkennung",
"points": [
"Zahlen 1-4: Nur Erdperlen",
"Zahl 5: Nur Himmelsperle",
"Zahlen 6-9: Himmels- + Erdperlen",
"Null: Alle Perlen vom Balken entfernt"
]
},
"readyToPractice": {
"title": "🚀 Bereit zum Üben?",
"description": "Teste dein neues Wissen mit interaktiven Lernkarten",
"button": "Übungs-Lernkarten Erstellen →"
}
},
"interactive": {
"number": "5",
"title": "Interaktive Übung",
"description": "Probiere den interaktiven Abakus unten aus! Klicke auf die Perlen, um sie zu aktivieren und beobachte, wie sich die Zahl in Echtzeit ändert.",
"howToUse": {
"title": "🎮 So Verwendest du den Interaktiven Abakus",
"heaven": {
"title": "Himmelsperlen (Oben):",
"points": [
"Wert 5 Punkte pro Perle",
"Klicken zum Ein-/Ausschalten",
"Blau wenn aktiv, grau wenn inaktiv"
]
},
"earth": {
"title": "Erdperlen (Unten):",
"points": [
"Wert 1 Punkt pro Perle",
"Klicken zum Aktivieren von Gruppen",
"Grün wenn aktiv, grau wenn inaktiv"
]
}
},
"readyToPractice": {
"title": "🚀 Bereit zum Üben?",
"description": "Teste dein neues Wissen mit interaktiven Lernkarten",
"button": "Übungs-Lernkarten Erstellen →"
}
}
},
"arithmetic": {
"title": "🧮 Rechenoperationen",
"subtitle": "Meistere Addition, Subtraktion, Multiplikation und Division auf dem Soroban",
"addition": {
"title": "➕ Addition",
"description": "Addition auf dem Soroban folgt dem Prinzip, Perlen zum Balken hin zu bewegen, um Werte zu erhöhen.",
"basicSteps": {
"title": "Grundlegende Schritte:",
"steps": [
"Stelle die erste Zahl auf dem Soroban ein",
"Addiere die zweite Zahl durch Bewegen von Perlen zum Balken hin",
"Behandle Überträge, wenn eine Spalte 9 überschreitet",
"Lies das Endergebnis ab"
]
},
"example": {
"title": "Beispiel: 3 + 4 = 7",
"start": "Start: 3",
"result": "Ergebnis: 7"
}
},
"guidedTutorial": {
"title": "🎯 Geführtes Additions-Tutorial",
"description": "Lerne Addition Schritt für Schritt mit interaktiver Anleitung, Tooltips und Fehlerkorrektur.",
"editableNote": "Dieses Tutorial ist jetzt bearbeitbar!",
"editableDesc": "Du kannst dieses Tutorial mit unserem neuen Tutorial-Editor-System anpassen.",
"editableLink": "Im Editor Öffnen →"
},
"subtraction": {
"title": "➖ Subtraktion",
"description": "Subtraktion beinhaltet das Bewegen von Perlen vom Balken weg, um Werte zu verringern.",
"basicSteps": {
"title": "Grundlegende Schritte:",
"steps": [
"Stelle den Minuenden (erste Zahl) auf dem Soroban ein",
"Subtrahiere durch Bewegen von Perlen vom Balken weg",
"Behandle Borgen bei Bedarf",
"Lies das Endergebnis ab"
]
},
"example": {
"title": "Beispiel: 8 - 3 = 5",
"start": "Start: 8",
"result": "Ergebnis: 5"
}
},
"multiplicationDivision": {
"title": "✖️➗ Multiplikation & Division",
"description": "Fortgeschrittene Operationen, die Addition/Subtraktion mit Positionsverschiebung kombinieren.",
"multiplication": {
"title": "Multiplikation",
"points": [
"In wiederholte Addition zerlegen",
"Positionsverschiebungen für Stellenwerte verwenden",
"Multiplikationstabellen meistern",
"Zuerst mit einzelnen Ziffern üben"
]
},
"division": {
"title": "Division",
"points": [
"Wiederholte Subtraktionsmethode verwenden",
"Quotienten sorgfältig schätzen",
"Reste richtig behandeln",
"Ergebnisse durch Multiplikation überprüfen"
]
}
},
"practiceTips": {
"title": "💡 Meistere die Grundlagen",
"description": "Beginne mit einfachen Aufgaben und erhöhe allmählich die Komplexität",
"button": "Rechenoperationen Üben →"
}
}
}
}

215
apps/web/src/i18n/locales/guide/en.json Normal file
View File

@@ -0,0 +1,215 @@
{
"guide": {
"page": {
"navTitle": "Interactive Guide",
"hero": {
"title": "📚 Complete Soroban Mastery Guide",
"subtitle": "From basic reading to advanced arithmetic - everything you need to master the Japanese abacus"
},
"tabs": {
"reading": "📖 Reading Numbers",
"arithmetic": "🧮 Arithmetic Operations"
}
},
"reading": {
"title": "🔍 Learning to Read Soroban Numbers",
"subtitle": "Master the fundamentals of reading numbers on the soroban with step-by-step visual tutorials",
"structure": {
"number": "1",
"title": "Understanding the Structure",
"description": "The soroban consists of two main sections divided by a horizontal bar. Understanding this structure is fundamental to reading any number.",
"heaven": {
"title": "🌅 Heaven Beads (Top)",
"points": [
"Located above the horizontal bar",
"Each bead represents 5",
"Only one bead per column",
"When pushed down = active/counted"
]
},
"earth": {
"title": "🌍 Earth Beads (Bottom)",
"points": [
"Located below the horizontal bar",
"Each bead represents 1",
"Four beads per column",
"When pushed up = active/counted"
]
},
"keyConcept": "💡 Key Concept: Active beads are those touching the horizontal bar"
},
"singleDigits": {
"number": "2",
"title": "Reading Single Digits (1-9)",
"description": "Let's learn to read single digits by understanding how heaven and earth beads combine to represent numbers 1 through 9.",
"examples": {
"0": "No beads active - all away from bar",
"1": "One earth bead pushed up",
"3": "Three earth beads pushed up",
"5": "Heaven bead pushed down",
"7": "Heaven bead + two earth beads"
}
},
"multiDigit": {
"number": "3",
"title": "Multi-Digit Numbers",
"description": "Reading larger numbers is simply a matter of reading each column from left to right, with each column representing a different place value.",
"readingDirection": {
"title": "📍 Reading Direction & Place Values",
"readingOrder": {
"title": "Reading Order:",
"points": [
"Always read from LEFT to RIGHT",
"Each column is one digit",
"Combine digits to form the complete number"
]
},
"placeValues": {
"title": "Place Values:",
"points": [
"Rightmost = Ones (1s)",
"Next left = Tens (10s)",
"Continue for hundreds, thousands, etc."
]
}
},
"examples": {
"title": "🔢 Multi-Digit Examples",
"23": "Two-digit: 2 in tens place + 3 in ones place",
"58": "Heaven bead in tens (5) + heaven + earth beads in ones (8)",
"147": "Three-digit: 1 hundred + 4 tens + 7 ones"
}
},
"practice": {
"number": "4",
"title": "Practice Strategy",
"learningTips": {
"title": "🎯 Learning Tips",
"points": [
"Start with single digits (0-9)",
"Practice identifying active vs. inactive beads",
"Work on speed recognition",
"Progress to multi-digit numbers gradually"
]
},
"quickRecognition": {
"title": "⚡ Quick Recognition",
"points": [
"Numbers 1-4: Only earth beads",
"Number 5: Only heaven bead",
"Numbers 6-9: Heaven + earth beads",
"Zero: All beads away from bar"
]
},
"readyToPractice": {
"title": "🚀 Ready to Practice?",
"description": "Test your newfound knowledge with interactive flashcards",
"button": "Create Practice Flashcards →"
}
},
"interactive": {
"number": "5",
"title": "Interactive Practice",
"description": "Try the interactive abacus below! Click on the beads to activate them and watch the number change in real-time.",
"howToUse": {
"title": "🎮 How to Use the Interactive Abacus",
"heaven": {
"title": "Heaven Beads (Top):",
"points": [
"Worth 5 points each",
"Click to toggle on/off",
"Blue when active, gray when inactive"
]
},
"earth": {
"title": "Earth Beads (Bottom):",
"points": [
"Worth 1 point each",
"Click to activate groups",
"Green when active, gray when inactive"
]
}
},
"readyToPractice": {
"title": "🚀 Ready to Practice?",
"description": "Test your newfound knowledge with interactive flashcards",
"button": "Create Practice Flashcards →"
}
}
},
"arithmetic": {
"title": "🧮 Arithmetic Operations",
"subtitle": "Master addition, subtraction, multiplication, and division on the soroban",
"addition": {
"title": "➕ Addition",
"description": "Addition on the soroban follows the principle of moving beads toward the bar to increase values.",
"basicSteps": {
"title": "Basic Steps:",
"steps": [
"Set the first number on the soroban",
"Add the second number by moving beads toward the bar",
"Handle carries when a column exceeds 9",
"Read the final result"
]
},
"example": {
"title": "Example: 3 + 4 = 7",
"start": "Start: 3",
"result": "Result: 7"
}
},
"guidedTutorial": {
"title": "🎯 Guided Addition Tutorial",
"description": "Learn addition step-by-step with interactive guidance, tooltips, and error correction.",
"editableNote": "This tutorial is now editable!",
"editableDesc": "You can customize this tutorial using our new tutorial editor system.",
"editableLink": "Open in Editor →"
},
"subtraction": {
"title": "➖ Subtraction",
"description": "Subtraction involves moving beads away from the bar to decrease values.",
"basicSteps": {
"title": "Basic Steps:",
"steps": [
"Set the minuend (first number) on the soroban",
"Subtract by moving beads away from the bar",
"Handle borrowing when needed",
"Read the final result"
]
},
"example": {
"title": "Example: 8 - 3 = 5",
"start": "Start: 8",
"result": "Result: 5"
}
},
"multiplicationDivision": {
"title": "✖️➗ Multiplication & Division",
"description": "Advanced operations that combine addition/subtraction with position shifting.",
"multiplication": {
"title": "Multiplication",
"points": [
"Break down into repeated addition",
"Use position shifts for place values",
"Master multiplication tables",
"Practice with single digits first"
]
},
"division": {
"title": "Division",
"points": [
"Use repeated subtraction method",
"Estimate quotients carefully",
"Handle remainders properly",
"Check results by multiplication"
]
}
},
"practiceTips": {
"title": "💡 Master the Fundamentals",
"description": "Start with simple problems and gradually increase complexity",
"button": "Practice Arithmetic Operations →"
}
}
}
}

215
apps/web/src/i18n/locales/guide/es.json Normal file
View File

@@ -0,0 +1,215 @@
{
"guide": {
"page": {
"navTitle": "Guía Interactiva",
"hero": {
"title": "📚 Guía Completa de Maestría del Soroban",
"subtitle": "Desde la lectura básica hasta la aritmética avanzada - todo lo que necesitas para dominar el ábaco japonés"
},
"tabs": {
"reading": "📖 Leer Números",
"arithmetic": "🧮 Operaciones Aritméticas"
}
},
"reading": {
"title": "🔍 Aprender a Leer Números del Soroban",
"subtitle": "Domina los fundamentos de leer números en el soroban con tutoriales visuales paso a paso",
"structure": {
"number": "1",
"title": "Entender la Estructura",
"description": "El soroban consta de dos secciones principales divididas por una barra horizontal. Entender esta estructura es fundamental para leer cualquier número.",
"heaven": {
"title": "🌅 Cuentas del Cielo (Arriba)",
"points": [
"Ubicadas sobre la barra horizontal",
"Cada cuenta representa 5",
"Solo una cuenta por columna",
"Cuando se empuja hacia abajo = activa/contada"
]
},
"earth": {
"title": "🌍 Cuentas de la Tierra (Abajo)",
"points": [
"Ubicadas debajo de la barra horizontal",
"Cada cuenta representa 1",
"Cuatro cuentas por columna",
"Cuando se empuja hacia arriba = activa/contada"
]
},
"keyConcept": "💡 Concepto Clave: Las cuentas activas son aquellas que tocan la barra horizontal"
},
"singleDigits": {
"number": "2",
"title": "Leer Dígitos Individuales (1-9)",
"description": "Aprendamos a leer dígitos individuales entendiendo cómo las cuentas del cielo y la tierra se combinan para representar los números del 1 al 9.",
"examples": {
"0": "No hay cuentas activas - todas lejos de la barra",
"1": "Una cuenta de tierra empujada hacia arriba",
"3": "Tres cuentas de tierra empujadas hacia arriba",
"5": "Cuenta del cielo empujada hacia abajo",
"7": "Cuenta del cielo + dos cuentas de tierra"
}
},
"multiDigit": {
"number": "3",
"title": "Números de Múltiples Dígitos",
"description": "Leer números más grandes es simplemente cuestión de leer cada columna de izquierda a derecha, donde cada columna representa un valor posicional diferente.",
"readingDirection": {
"title": "📍 Dirección de Lectura y Valores Posicionales",
"readingOrder": {
"title": "Orden de Lectura:",
"points": [
"Siempre leer de IZQUIERDA a DERECHA",
"Cada columna es un dígito",
"Combinar dígitos para formar el número completo"
]
},
"placeValues": {
"title": "Valores Posicionales:",
"points": [
"Más a la derecha = Unidades (1s)",
"Siguiente a la izquierda = Decenas (10s)",
"Continuar para centenas, miles, etc."
]
}
},
"examples": {
"title": "🔢 Ejemplos de Múltiples Dígitos",
"23": "Dos dígitos: 2 en lugar de las decenas + 3 en lugar de las unidades",
"58": "Cuenta del cielo en decenas (5) + cuenta del cielo + cuentas de tierra en unidades (8)",
"147": "Tres dígitos: 1 centena + 4 decenas + 7 unidades"
}
},
"practice": {
"number": "4",
"title": "Estrategia de Práctica",
"learningTips": {
"title": "🎯 Consejos de Aprendizaje",
"points": [
"Comienza con dígitos individuales (0-9)",
"Practica identificar cuentas activas vs. inactivas",
"Trabaja en el reconocimiento de velocidad",
"Progresa gradualmente a números de múltiples dígitos"
]
},
"quickRecognition": {
"title": "⚡ Reconocimiento Rápido",
"points": [
"Números 1-4: Solo cuentas de tierra",
"Número 5: Solo cuenta del cielo",
"Números 6-9: Cielo + cuentas de tierra",
"Cero: Todas las cuentas lejos de la barra"
]
},
"readyToPractice": {
"title": "🚀 ¿Listo para Practicar?",
"description": "Pon a prueba tu nuevo conocimiento con tarjetas interactivas",
"button": "Crear Tarjetas de Práctica →"
}
},
"interactive": {
"number": "5",
"title": "Práctica Interactiva",
"description": "¡Prueba el ábaco interactivo a continuación! Haz clic en las cuentas para activarlas y observa cómo cambia el número en tiempo real.",
"howToUse": {
"title": "🎮 Cómo Usar el Ábaco Interactivo",
"heaven": {
"title": "Cuentas del Cielo (Arriba):",
"points": [
"Valen 5 puntos cada una",
"Haz clic para activar/desactivar",
"Azul cuando está activa, gris cuando está inactiva"
]
},
"earth": {
"title": "Cuentas de la Tierra (Abajo):",
"points": [
"Valen 1 punto cada una",
"Haz clic para activar grupos",
"Verde cuando está activa, gris cuando está inactiva"
]
}
},
"readyToPractice": {
"title": "🚀 ¿Listo para Practicar?",
"description": "Pon a prueba tu nuevo conocimiento con tarjetas interactivas",
"button": "Crear Tarjetas de Práctica →"
}
}
},
"arithmetic": {
"title": "🧮 Operaciones Aritméticas",
"subtitle": "Domina la suma, resta, multiplicación y división en el soroban",
"addition": {
"title": "➕ Suma",
"description": "La suma en el soroban sigue el principio de mover las cuentas hacia la barra para aumentar valores.",
"basicSteps": {
"title": "Pasos Básicos:",
"steps": [
"Establece el primer número en el soroban",
"Suma el segundo número moviendo cuentas hacia la barra",
"Maneja los acarreos cuando una columna exceda 9",
"Lee el resultado final"
]
},
"example": {
"title": "Ejemplo: 3 + 4 = 7",
"start": "Inicio: 3",
"result": "Resultado: 7"
}
},
"guidedTutorial": {
"title": "🎯 Tutorial de Suma Guiada",
"description": "Aprende suma paso a paso con orientación interactiva, información sobre herramientas y corrección de errores.",
"editableNote": "¡Este tutorial ahora es editable!",
"editableDesc": "Puedes personalizar este tutorial usando nuestro nuevo sistema de editor de tutoriales.",
"editableLink": "Abrir en el Editor →"
},
"subtraction": {
"title": "➖ Resta",
"description": "La resta implica mover las cuentas lejos de la barra para disminuir valores.",
"basicSteps": {
"title": "Pasos Básicos:",
"steps": [
"Establece el minuendo (primer número) en el soroban",
"Resta moviendo cuentas lejos de la barra",
"Maneja los préstamos cuando sea necesario",
"Lee el resultado final"
]
},
"example": {
"title": "Ejemplo: 8 - 3 = 5",
"start": "Inicio: 8",
"result": "Resultado: 5"
}
},
"multiplicationDivision": {
"title": "✖️➗ Multiplicación y División",
"description": "Operaciones avanzadas que combinan suma/resta con desplazamiento de posición.",
"multiplication": {
"title": "Multiplicación",
"points": [
"Descomponer en suma repetida",
"Usar desplazamientos de posición para valores posicionales",
"Dominar las tablas de multiplicar",
"Practicar primero con dígitos individuales"
]
},
"division": {
"title": "División",
"points": [
"Usar el método de resta repetida",
"Estimar cocientes cuidadosamente",
"Manejar residuos correctamente",
"Verificar resultados mediante multiplicación"
]
}
},
"practiceTips": {
"title": "💡 Domina los Fundamentos",
"description": "Comienza con problemas simples y aumenta gradualmente la complejidad",
"button": "Practicar Operaciones Aritméticas →"
}
}
}
}

211
apps/web/src/i18n/locales/guide/hi.json Normal file
View File

@@ -0,0 +1,211 @@
{
"guide": {
"page": {
"navTitle": "इंटरैक्टिव गाइड",
"hero": {
"title": "📚 पूर्ण सोरोबन मास्टरी गाइड",
"subtitle": "बुनियादी पढ़ने से लेकर उन्नत अंकगणित तक - जापानी अबेकस में महारत हासिल करने के लिए आपको जो कुछ भी चाहिए"
},
"tabs": {
"reading": "📖 संख्याएँ पढ़ना",
"arithmetic": "🧮 अंकगणितीय संचालन"
}
},
"reading": {
"title": "🔍 सोरोबन संख्याएँ पढ़ना सीखें",
"subtitle": "चरण-दर-चरण दृश्य ट्यूटोरियल के साथ सोरोबन पर संख्याएँ पढ़ने की बुनियादी बातें में महारत हासिल करें",
"structure": {
"number": "1",
"title": "संरचना को समझना",
"description": "सोरोबन एक क्षैतिज पट्टी द्वारा विभाजित दो मुख्य अनुभागों से बना है। इस संरचना को समझना किसी भी संख्या को पढ़ने के लिए मौलिक है।",
"heaven": {
"title": "🌅 स्वर्ग मोती (ऊपर)",
"points": [
"क्षैतिज पट्टी के ऊपर स्थित",
"प्रत्येक मोती 5 का प्रतिनिधित्व करता है",
"प्रति स्तंभ केवल एक मोती",
"नीचे धकेलने पर = सक्रिय/गिना जाता है"
]
},
"earth": {
"title": "🌍 पृथ्वी मोती (नीचे)",
"points": [
"क्षैतिज पट्टी के नीचे स्थित",
"प्रत्येक मोती 1 का प्रतिनिधित्व करता है",
"प्रति स्तंभ चार मोती",
"ऊपर धकेलने पर = सक्रिय/गिना जाता है"
]
},
"keyConcept": "💡 मुख्य अवधारणा: सक्रिय मोती वे हैं जो क्षैतिज पट्टी को छू रहे हैं"
},
"singleDigits": {
"number": "2",
"title": "एकल अंक पढ़ना (1-9)",
"description": "आइए यह समझकर एकल अंक पढ़ना सीखें कि स्वर्ग और पृथ्वी मोती कैसे संयुक्त होकर 1 से 9 तक की संख्याओं का प्रतिनिधित्व करते हैं।",
"examples": {
"0": "कोई मोती सक्रिय नहीं - सभी पट्टी से दूर",
"1": "एक पृथ्वी मोती ऊपर धकेला गया",
"3": "तीन पृथ्वी मोती ऊपर धकेले गए",
"5": "स्वर्ग मोती नीचे धकेला गया",
"7": "स्वर्ग मोती + दो पृथ्वी मोती"
}
},
"multiDigit": {
"number": "3",
"title": "बहु-अंकीय संख्याएँ",
"description": "बड़ी संख्याओं को पढ़ना बस प्रत्येक स्तंभ को बाएं से दाएं पढ़ने की बात है, प्रत्येक स्तंभ एक अलग स्थानीय मान का प्रतिनिधित्व करता है।",
"readingDirection": {
"title": "📍 पढ़ने की दिशा और स्थानीय मान",
"readingOrder": {
"title": "पढ़ने का क्रम:",
"points": [
"हमेशा बाएं से दाएं पढ़ें",
"प्रत्येक स्तंभ एक अंक है",
"पूर्ण संख्या बनाने के लिए अंकों को संयोजित करें"
]
},
"placeValues": {
"title": "स्थानीय मान:",
"points": ["सबसे दाएं = इकाई (1)", "अगला बाएं = दहाई (10)", "सैकड़ा, हजार आदि के लिए जारी रखें"]
}
},
"examples": {
"title": "🔢 बहु-अंकीय उदाहरण",
"23": "दो-अंकीय: दहाई स्थान में 2 + इकाई स्थान में 3",
"58": "दहाई में स्वर्ग मोती (5) + इकाई में स्वर्ग + पृथ्वी मोती (8)",
"147": "तीन-अंकीय: 1 सौ + 4 दहाई + 7 इकाई"
}
},
"practice": {
"number": "4",
"title": "अभ्यास रणनीति",
"learningTips": {
"title": "🎯 सीखने के टिप्स",
"points": [
"एकल अंकों (0-9) से शुरू करें",
"सक्रिय बनाम निष्क्रिय मोतियों की पहचान का अभ्यास करें",
"गति पहचान पर काम करें",
"धीरे-धीरे बहु-अंकीय संख्याओं की ओर बढ़ें"
]
},
"quickRecognition": {
"title": "⚡ त्वरित पहचान",
"points": [
"संख्याएँ 1-4: केवल पृथ्वी मोती",
"संख्या 5: केवल स्वर्ग मोती",
"संख्याएँ 6-9: स्वर्ग + पृथ्वी मोती",
"शून्य: सभी मोती पट्टी से दूर"
]
},
"readyToPractice": {
"title": "🚀 अभ्यास के लिए तैयार?",
"description": "इंटरैक्टिव फ्लैशकार्ड के साथ अपने नए ज्ञान का परीक्षण करें",
"button": "अभ्यास फ्लैशकार्ड बनाएं →"
}
},
"interactive": {
"number": "5",
"title": "इंटरैक्टिव अभ्यास",
"description": "नीचे इंटरैक्टिव अबेकस आज़माएं! मोतियों को सक्रिय करने के लिए क्लिक करें और वास्तविक समय में संख्या बदलते हुए देखें।",
"howToUse": {
"title": "🎮 इंटरैक्टिव अबेकस का उपयोग कैसे करें",
"heaven": {
"title": "स्वर्ग मोती (ऊपर):",
"points": [
"प्रत्येक 5 अंक मूल्य",
"चालू/बंद टॉगल करने के लिए क्लिक करें",
"सक्रिय होने पर नीला, निष्क्रिय होने पर धूसर"
]
},
"earth": {
"title": "पृथ्वी मोती (नीचे):",
"points": [
"प्रत्येक 1 अंक मूल्य",
"समूहों को सक्रिय करने के लिए क्लिक करें",
"सक्रिय होने पर हरा, निष्क्रिय होने पर धूसर"
]
}
},
"readyToPractice": {
"title": "🚀 अभ्यास के लिए तैयार?",
"description": "इंटरैक्टिव फ्लैशकार्ड के साथ अपने नए ज्ञान का परीक्षण करें",
"button": "अभ्यास फ्लैशकार्ड बनाएं →"
}
}
},
"arithmetic": {
"title": "🧮 अंकगणितीय संचालन",
"subtitle": "सोरोबन पर जोड़, घटाव, गुणा और भाग में महारत हासिल करें",
"addition": {
"title": "➕ जोड़",
"description": "सोरोबन पर जोड़ मान बढ़ाने के लिए मोतियों को पट्टी की ओर ले जाने के सिद्धांत का पालन करता है।",
"basicSteps": {
"title": "बुनियादी चरण:",
"steps": [
"सोरोबन पर पहली संख्या सेट करें",
"मोतियों को पट्टी की ओर ले जाकर दूसरी संख्या जोड़ें",
"जब कोई स्तंभ 9 से अधिक हो तो कैरी को संभालें",
"अंतिम परिणाम पढ़ें"
]
},
"example": {
"title": "उदाहरण: 3 + 4 = 7",
"start": "शुरुआत: 3",
"result": "परिणाम: 7"
}
},
"guidedTutorial": {
"title": "🎯 निर्देशित जोड़ ट्यूटोरियल",
"description": "इंटरैक्टिव मार्गदर्शन, टूलटिप्स और त्रुटि सुधार के साथ चरण-दर-चरण जोड़ सीखें।",
"editableNote": "यह ट्यूटोरियल अब संपादन योग्य है!",
"editableDesc": "आप हमारे नए ट्यूटोरियल संपादक सिस्टम का उपयोग करके इस ट्यूटोरियल को अनुकूलित कर सकते हैं।",
"editableLink": "संपादक में खोलें →"
},
"subtraction": {
"title": "➖ घटाव",
"description": "घटाव में मान कम करने के लिए मोतियों को पट्टी से दूर ले जाना शामिल है।",
"basicSteps": {
"title": "बुनियादी चरण:",
"steps": [
"सोरोबन पर मिनुएंड (पहली संख्या) सेट करें",
"मोतियों को पट्टी से दूर ले जाकर घटाएं",
"आवश्यकता पड़ने पर उधार लेने को संभालें",
"अंतिम परिणाम पढ़ें"
]
},
"example": {
"title": "उदाहरण: 8 - 3 = 5",
"start": "शुरुआत: 8",
"result": "परिणाम: 5"
}
},
"multiplicationDivision": {
"title": "✖️➗ गुणा और भाग",
"description": "उन्नत संचालन जो जोड़/घटाव को स्थिति स्थानांतरण के साथ जोड़ते हैं।",
"multiplication": {
"title": "गुणा",
"points": [
"बार-बार जोड़ में विभाजित करें",
"स्थानीय मानों के लिए स्थिति स्थानांतरण का उपयोग करें",
"गुणा तालिका में महारत हासिल करें",
"पहले एकल अंकों के साथ अभ्यास करें"
]
},
"division": {
"title": "भाग",
"points": [
"बार-बार घटाव विधि का उपयोग करें",
"भागफल का सावधानीपूर्वक अनुमान लगाएं",
"शेषफल को ठीक से संभालें",
"गुणा द्वारा परिणामों की जांच करें"
]
}
},
"practiceTips": {
"title": "💡 बुनियादी बातों में महारत हासिल करें",
"description": "सरल समस्याओं से शुरू करें और धीरे-धीरे जटिलता बढ़ाएं",
"button": "अंकगणितीय संचालन का अभ्यास करें →"
}
}
}
}

203
apps/web/src/i18n/locales/guide/ja.json Normal file
View File

@@ -0,0 +1,203 @@
{
"guide": {
"page": {
"navTitle": "インタラクティブガイド",
"hero": {
"title": "📚 完全そろばんマスターガイド",
"subtitle": "基本的な読み方から高度な算術まで - 日本のそろばんをマスターするために必要なすべて"
},
"tabs": {
"reading": "📖 数字を読む",
"arithmetic": "🧮 算術演算"
}
},
"reading": {
"title": "🔍 そろばんの数字の読み方を学ぶ",
"subtitle": "ステップバイステップのビジュアルチュートリアルでそろばんの数字を読む基礎をマスター",
"structure": {
"number": "1",
"title": "構造を理解する",
"description": "そろばんは横棒で分けられた2つの主要なセクションで構成されています。この構造を理解することは、どんな数字を読むためにも基本です。",
"heaven": {
"title": "🌅 天珠（上）",
"points": [
"横棒の上に位置",
"各珠は5を表す",
"列ごとに1つの珠のみ",
"下に押すと=有効/カウント"
]
},
"earth": {
"title": "🌍 地珠（下）",
"points": [
"横棒の下に位置",
"各珠は1を表す",
"列ごとに4つの珠",
"上に押すと=有効/カウント"
]
},
"keyConcept": "💡 重要な概念：有効な珠は横棒に触れている珠です"
},
"singleDigits": {
"number": "2",
"title": "一桁の数字を読む（1-9）",
"description": "天珠と地珠が組み合わされて1から9の数字を表す方法を理解して、一桁の数字を読むことを学びましょう。",
"examples": {
"0": "珠が有効でない - すべて棒から離れている",
"1": "1つの地珠を上に押す",
"3": "3つの地珠を上に押す",
"5": "天珠を下に押す",
"7": "天珠 + 2つの地珠"
}
},
"multiDigit": {
"number": "3",
"title": "複数桁の数字",
"description": "大きな数字を読むことは、単に各列を左から右に読むことです。各列は異なる位の値を表します。",
"readingDirection": {
"title": "📍 読む方向と位の値",
"readingOrder": {
"title": "読む順序：",
"points": [
"常に左から右に読む",
"各列は1つの数字",
"数字を組み合わせて完全な数字を形成"
]
},
"placeValues": {
"title": "位の値：",
"points": ["一番右=一の位（1）", "次の左=十の位（10）", "百、千などに続く"]
}
},
"examples": {
"title": "🔢 複数桁の例",
"23": "2桁：十の位に2 + 一の位に3",
"58": "十の位に天珠（5）+ 一の位に天珠と地珠（8）",
"147": "3桁：1百 + 4十 + 7一"
}
},
"practice": {
"number": "4",
"title": "練習戦略",
"learningTips": {
"title": "🎯 学習のヒント",
"points": [
"一桁の数字（0-9）から始める",
"有効な珠と無効な珠を識別する練習",
"速度認識に取り組む",
"徐々に複数桁の数字に進む"
]
},
"quickRecognition": {
"title": "⚡ 素早い認識",
"points": [
"数字1-4：地珠のみ",
"数字5：天珠のみ",
"数字6-9：天珠 + 地珠",
"ゼロ：すべての珠が棒から離れている"
]
},
"readyToPractice": {
"title": "🚀 練習の準備はできましたか？",
"description": "インタラクティブなフラッシュカードで新しい知識をテスト",
"button": "練習用フラッシュカードを作成 →"
}
},
"interactive": {
"number": "5",
"title": "インタラクティブな練習",
"description": "下のインタラクティブなそろばんを試してみてください！珠をクリックして有効にし、リアルタイムで数字が変わるのを見てください。",
"howToUse": {
"title": "🎮 インタラクティブそろばんの使い方",
"heaven": {
"title": "天珠（上）：",
"points": ["各5ポイント", "クリックしてオン/オフ切り替え", "有効時は青、無効時は灰色"]
},
"earth": {
"title": "地珠（下）：",
"points": ["各1ポイント", "クリックしてグループを有効化", "有効時は緑、無効時は灰色"]
}
},
"readyToPractice": {
"title": "🚀 練習の準備はできましたか？",
"description": "インタラクティブなフラッシュカードで新しい知識をテスト",
"button": "練習用フラッシュカードを作成 →"
}
}
},
"arithmetic": {
"title": "🧮 算術演算",
"subtitle": "そろばんで加算、減算、乗算、除算をマスター",
"addition": {
"title": "➕ 加算",
"description": "そろばんでの加算は、値を増やすために珠を棒に向かって動かす原則に従います。",
"basicSteps": {
"title": "基本ステップ：",
"steps": [
"そろばんに最初の数字を設定",
"珠を棒に向かって動かして2番目の数字を加算",
"列が9を超えたときの繰り上がりを処理",
"最終結果を読む"
]
},
"example": {
"title": "例：3 + 4 = 7",
"start": "開始：3",
"result": "結果：7"
}
},
"guidedTutorial": {
"title": "🎯 ガイド付き加算チュートリアル",
"description": "インタラクティブなガイダンス、ツールチップ、エラー訂正で段階的に加算を学びます。",
"editableNote": "このチュートリアルは編集可能になりました！",
"editableDesc": "新しいチュートリアルエディターシステムを使用してこのチュートリアルをカスタマイズできます。",
"editableLink": "エディターで開く →"
},
"subtraction": {
"title": "➖ 減算",
"description": "減算は、値を減らすために珠を棒から遠ざけることを含みます。",
"basicSteps": {
"title": "基本ステップ：",
"steps": [
"そろばんに被減数（最初の数字）を設定",
"珠を棒から遠ざけて減算",
"必要に応じて借用を処理",
"最終結果を読む"
]
},
"example": {
"title": "例：8 - 3 = 5",
"start": "開始：8",
"result": "結果：5"
}
},
"multiplicationDivision": {
"title": "✖️➗ 乗算と除算",
"description": "加算/減算を位置シフトと組み合わせた高度な演算。",
"multiplication": {
"title": "乗算",
"points": [
"繰り返し加算に分解",
"位の値のための位置シフトを使用",
"九九表をマスター",
"最初に一桁で練習"
]
},
"division": {
"title": "除算",
"points": [
"繰り返し減算法を使用",
"商を慎重に見積もる",
"余りを適切に処理",
"乗算で結果を確認"
]
}
},
"practiceTips": {
"title": "💡 基礎をマスター",
"description": "簡単な問題から始めて、徐々に複雑さを増やす",
"button": "算術演算を練習 →"
}
}
}
}

215
apps/web/src/i18n/locales/guide/la.json Normal file
View File

@@ -0,0 +1,215 @@
{
"guide": {
"page": {
"navTitle": "Ductus Interactiv us",
"hero": {
"title": "📚 Ductus Plenus Magisterii Sorobani",
"subtitle": "A lectione basica ad arithmeticam progressam - omnia quae tibi opus sunt ut abacum Iaponicum perfecte discas"
},
"tabs": {
"reading": "📖 Numeros Legere",
"arithmetic": "🧮 Operationes Arithmeticae"
}
},
"reading": {
"title": "🔍 Numeros Sorobani Legere Disco",
"subtitle": "Fundamenta numerorum in sorobano legendi cum inductionibus visualibus gradatim perfice",
"structure": {
"number": "1",
"title": "Structuram Intellegere",
"description": "Sorobanus ex duabus sectionibus principalibus constat tigno horizontali divisis. Haec structura intellecta fundamentalis est ad quemvis numerum legendum.",
"heaven": {
"title": "🌅 Gemmae Caelestes (Supra)",
"points": [
"Supra tignum horizontale sitae",
"Quaeque gemma 5 repraesentat",
"Tantum una gemma per columnam",
"Cum deorsum truditur = activa/numerata"
]
},
"earth": {
"title": "🌍 Gemmae Terrestres (Infra)",
"points": [
"Infra tignum horizontale sitae",
"Quaeque gemma 1 repraesentat",
"Quattuor gemmae per columnam",
"Cum sursum truditur = activa/numerata"
]
},
"keyConcept": "💡 Conceptus Clavius: Gemmae activae sunt illae quae tignum horizontale tangunt"
},
"singleDigits": {
"number": "2",
"title": "Digitos Singulos Legere (1-9)",
"description": "Discamus digitos singulos legere intelligendo quomodo gemmae caelestes et terrestres coniunctae numeros 1 usque ad 9 repraesentent.",
"examples": {
"0": "Nullae gemmae activae - omnes a tigno remotae",
"1": "Una gemma terrestris sursum trusa",
"3": "Tres gemmae terrestres sursum trusae",
"5": "Gemma caelestis deorsum trusa",
"7": "Gemma caelestis + duae gemmae terrestres"
}
},
"multiDigit": {
"number": "3",
"title": "Numeri Plurium Digitorum",
"description": "Numeros maiores legere simpliciter est unamquamque columnam a sinstra ad dextram legere, cum quaeque columna diversum valorem loci repraesentet.",
"readingDirection": {
"title": "📍 Directio Lectionis et Valores Locorum",
"readingOrder": {
"title": "Ordo Lectionis:",
"points": [
"Semper a SINISTRA ad DEXTRAM lege",
"Quaeque columna unus digitus est",
"Digitos coniunge ut numerum completum formes"
]
},
"placeValues": {
"title": "Valores Locorum:",
"points": [
"Dextrimus = Unitates (1)",
"Proximus sinister = Decem (10)",
"Perge pro centenis, milibus, etc."
]
}
},
"examples": {
"title": "🔢 Exempla Plurium Digitorum",
"23": "Duo digiti: 2 in loco decadum + 3 in loco unitatum",
"58": "Gemma caelestis in decadis (5) + gemma caelestis + gemmae terrestres in unitatibus (8)",
"147": "Tres digiti: 1 centum + 4 decem + 7 unum"
}
},
"practice": {
"number": "4",
"title": "Consilium Exercitationis",
"learningTips": {
"title": "🎯 Consilia Discendi",
"points": [
"Incipe cum digitis singulis (0-9)",
"Exercita agnitionem gemmarum activarum vs. inactivarum",
"Labora in agnitione celeritatis",
"Gradatim progredere ad numeros plurium digitorum"
]
},
"quickRecognition": {
"title": "⚡ Agnitio Celeris",
"points": [
"Numeri 1-4: Tantum gemmae terrestres",
"Numerus 5: Tantum gemma caelestis",
"Numeri 6-9: Caelestes + gemmae terrestres",
"Nihil: Omnes gemmae a tigno remotae"
]
},
"readyToPractice": {
"title": "🚀 Paratus Exercere?",
"description": "Proba scientiam tuam novam cum chartis interactivis",
"button": "Chartas Exercitationis Crea →"
}
},
"interactive": {
"number": "5",
"title": "Exercitatio Interactiva",
"description": "Proba abacum interactivum infra! Preme gemmas ut eas actives et vide numerum in tempore reali mutari.",
"howToUse": {
"title": "🎮 Quomodo Abaco Interactivo Utaris",
"heaven": {
"title": "Gemmae Caelestes (Supra):",
"points": [
"Valent 5 puncta quaeque",
"Preme ut actives/inactives",
"Caeruleae cum activae, cinerae cum inactivae"
]
},
"earth": {
"title": "Gemmae Terrestres (Infra):",
"points": [
"Valent 1 punctum quaeque",
"Preme ut greges actives",
"Virides cum activae, cinerae cum inactivae"
]
}
},
"readyToPractice": {
"title": "🚀 Paratus Exercere?",
"description": "Proba scientiam tuam novam cum chartis interactivis",
"button": "Chartas Exercitationis Crea →"
}
}
},
"arithmetic": {
"title": "🧮 Operationes Arithmeticae",
"subtitle": "Perfice additionem, subtractionem, multiplicationem et divisionem in sorobano",
"addition": {
"title": "➕ Additio",
"description": "Additio in sorobano principio gemmas ad tignum movendi ut valores augeantur sequitur.",
"basicSteps": {
"title": "Gradus Basici:",
"steps": [
"Pone primum numerum in sorobano",
"Adde secundum numerum gemmas ad tignum movendo",
"Tracta translationes cum columna 9 excedit",
"Lege resultatum finale"
]
},
"example": {
"title": "Exemplum: 3 + 4 = 7",
"start": "Initium: 3",
"result": "Resultatum: 7"
}
},
"guidedTutorial": {
"title": "🎯 Praeceptorium Additionis Ductum",
"description": "Disce additionem gradatim cum directione interactiva, subsidiis et correctione errorum.",
"editableNote": "Hoc praeceptorium nunc edibile est!",
"editableDesc": "Potes hoc praeceptorium nostro novo systemate editoris praeceptoriorum accommodare.",
"editableLink": "Aperi in Editore →"
},
"subtraction": {
"title": "➖ Subtractio",
"description": "Subtractio gemmas a tigno removendo ut valores minuantur continet.",
"basicSteps": {
"title": "Gradus Basici:",
"steps": [
"Pone minuendum (primum numerum) in sorobano",
"Subtrahe gemmas a tigno removendo",
"Tracta mutuum cum necesse sit",
"Lege resultatum finale"
]
},
"example": {
"title": "Exemplum: 8 - 3 = 5",
"start": "Initium: 8",
"result": "Resultatum: 5"
}
},
"multiplicationDivision": {
"title": "✖️➗ Multiplicatio et Divisio",
"description": "Operationes progressae quae additionem/subtractionem cum mutatione positionis coniungunt.",
"multiplication": {
"title": "Multiplicatio",
"points": [
"Divide in additionem repetitam",
"Utere mutationibus positionis pro valoribus locorum",
"Perfice tabulas multiplicationis",
"Primum cum digitis singulis exerce"
]
},
"division": {
"title": "Divisio",
"points": [
"Utere methodo subtractionis repetitae",
"Aestima quotientes caute",
"Tracta residua recte",
"Verifica resultata per multiplicationem"
]
}
},
"practiceTips": {
"title": "💡 Perfice Fundamenta",
"description": "Incipe cum problematis simplicibus et gradatim complexitatem augeas",
"button": "Operationes Arithmeticas Exerce →"
}
}
}
}

15
apps/web/src/i18n/locales/guide/messages.ts Normal file
View File

@@ -0,0 +1,15 @@
import de from './de.json'
import en from './en.json'
import es from './es.json'
import hi from './hi.json'
import ja from './ja.json'
import la from './la.json'
export const guideMessages = {
en: en.guide,
de: de.guide,
ja: ja.guide,
hi: hi.guide,
es: es.guide,
la: la.guide,
} as const

2
apps/web/src/i18n/messages.ts
View File

@@ -1,5 +1,6 @@
import { rithmomachiaMessages } from '@/arcade-games/rithmomachia/messages'
import { gamesMessages } from '@/i18n/locales/games/messages'
import { guideMessages } from '@/i18n/locales/guide/messages'
import { homeMessages } from '@/i18n/locales/home/messages'
import { tutorialMessages } from '@/i18n/locales/tutorial/messages'
@@ -37,6 +38,7 @@ export async function getMessages(locale: Locale) {
common,
{ home: homeMessages[locale] },
{ games: gamesMessages[locale] },
{ guide: guideMessages[locale] },
{ tutorial: tutorialMessages[locale] },
rithmomachiaMessages[locale]
)