feat(rithmomachia): add ratio capture example to guide

Add complete ratio capture example with visual board demonstration:
- Added ratioExample with 3 pieces showing White Triangle (20) capturing Black Circle (5) using helper Circle (4)
- Added ratio UI section with explanation and board visualization
- Added translation keys for ratio title, example, and caption in English and German
- Completes the full set of mathematical capture relations (equality, multiple, sum, difference, product, ratio)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-10-31 17:35:22 -05:00
parent 9fde1ef9e7
commit 9150b0c678
3 changed files with 53 additions and 0 deletions

View File

@@ -34,6 +34,12 @@ export function CaptureSection({ useNativeAbacusNumbers }: { useNativeAbacusNumb
{ square: 'G4', type: 'C', color: 'B', value: 25 }, // Black's 25 (target: 5×5=25)
]
const ratioExample: ExamplePiece[] = [
{ square: 'F4', type: 'T', color: 'W', value: 20 }, // White's 20 (attacker)
{ square: 'E5', type: 'C', color: 'W', value: 4 }, // White's 4 (helper)
{ square: 'G4', type: 'C', color: 'B', value: 5 }, // Black's 5 (target: 20÷4=5)
]
return (
<div data-section="capture">
<h3
@@ -282,6 +288,47 @@ export function CaptureSection({ useNativeAbacusNumbers }: { useNativeAbacusNumb
</p>
</div>
{/* Ratio */}
<div
className={css({
mb: '20px',
p: '16px',
bg: '#f9fafb',
borderRadius: '8px',
border: '2px solid #e5e7eb',
})}
>
<p className={css({ fontSize: '14px', fontWeight: 'bold', color: '#111827', mb: '8px' })}>
{t('guide.capture.ratio', 'Ratio')}
</p>
<p className={css({ fontSize: '13px', color: '#6b7280', mb: '12px' })}>
{t('guide.capture.ratioExample', 'Your 20 ÷ helper 4 = enemy 5')}
</p>
<div className={css({ display: 'flex', justifyContent: 'center' })}>
<RithmomachiaBoard
pieces={ratioExample}
scale={0.4}
cropToSquares={['D3', 'H6']}
showLabels={true}
useNativeAbacusNumbers={useNativeAbacusNumbers}
/>
</div>
<p
className={css({
fontSize: '12px',
color: '#9ca3af',
mt: '8px',
textAlign: 'center',
fontStyle: 'italic',
})}
>
{t(
'guide.capture.ratioCaption',
'White Triangle (20) can capture Black Circle (5) using helper Circle (4): 20 ÷ 4 = 5'
)}
</p>
</div>
<div
className={css({
mt: '24px',

View File

@@ -86,6 +86,9 @@
"product": "Produkt",
"productExample": "Ihre 5 × Helfer 5 = Gegner 25",
"productCaption": "Weißer Kreis (5) kann schwarzen Kreis (25) mit Helfer-Kreis (5) schlagen: 5 × 5 = 25",
"ratio": "Verhältnis",
"ratioExample": "Ihre 20 ÷ Helfer 4 = Gegner 5",
"ratioCaption": "Weißes Dreieck (20) kann schwarzen Kreis (5) mit Helfer-Kreis (4) schlagen: 20 ÷ 4 = 5",
"helpersTitle": "💡 Was sind Helfer?",
"helpersDescription": "Helfer sind Ihre anderen Steine, die noch auf dem Brett sind. Sie bleiben, wo sie sind, und stellen nur ihren Wert für die Mathematik zur Verfügung. Das Spiel zeigt Ihnen gültige Schlagzüge, wenn Sie einen Stein auswählen."
},

View File

@@ -134,6 +134,9 @@
"product": "Product",
"productExample": "Your 5 × helper 5 = enemy 25",
"productCaption": "White Circle (5) can capture Black Circle (25) using helper Circle (5): 5 × 5 = 25",
"ratio": "Ratio",
"ratioExample": "Your 20 ÷ helper 4 = enemy 5",
"ratioCaption": "White Triangle (20) can capture Black Circle (5) using helper Circle (4): 20 ÷ 4 = 5",
"advancedSum": {
"name": "Sum",
"desc": "Your 9 + helper 16 = enemy 25"