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:
@@ -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',
|
||||
|
||||
@@ -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."
|
||||
},
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user