Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | import { useTranslations } from 'next-intl' import { css } from '../../../../../styled-system/css' import { RithmomachiaBoard, type ExamplePiece } from '../RithmomachiaBoard' export function OverviewSection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: boolean }) { const t = useTranslations('rithmomachia.guide') // Initial board setup - full starting position const initialSetup: ExamplePiece[] = [ // BLACK - Column A { square: 'A1', type: 'S', color: 'B', value: 28 }, { square: 'A2', type: 'S', color: 'B', value: 66 }, { square: 'A7', type: 'S', color: 'B', value: 225 }, { square: 'A8', type: 'S', color: 'B', value: 361 }, // BLACK - Column B { square: 'B1', type: 'S', color: 'B', value: 28 }, { square: 'B2', type: 'S', color: 'B', value: 66 }, { square: 'B3', type: 'T', color: 'B', value: 36 }, { square: 'B4', type: 'T', color: 'B', value: 30 }, { square: 'B5', type: 'T', color: 'B', value: 56 }, { square: 'B6', type: 'T', color: 'B', value: 64 }, { square: 'B7', type: 'S', color: 'B', value: 120 }, { square: 'B8', type: 'P', color: 'B', value: 36 }, // BLACK - Column C { square: 'C1', type: 'T', color: 'B', value: 16 }, { square: 'C2', type: 'T', color: 'B', value: 12 }, { square: 'C3', type: 'C', color: 'B', value: 9 }, { square: 'C4', type: 'C', color: 'B', value: 25 }, { square: 'C5', type: 'C', color: 'B', value: 49 }, { square: 'C6', type: 'C', color: 'B', value: 81 }, { square: 'C7', type: 'T', color: 'B', value: 90 }, { square: 'C8', type: 'T', color: 'B', value: 100 }, // BLACK - Column D { square: 'D3', type: 'C', color: 'B', value: 3 }, { square: 'D4', type: 'C', color: 'B', value: 5 }, { square: 'D5', type: 'C', color: 'B', value: 7 }, { square: 'D6', type: 'C', color: 'B', value: 9 }, // WHITE - Column M { square: 'M3', type: 'C', color: 'W', value: 8 }, { square: 'M4', type: 'C', color: 'W', value: 6 }, { square: 'M5', type: 'C', color: 'W', value: 4 }, { square: 'M6', type: 'C', color: 'W', value: 2 }, // WHITE - Column N { square: 'N1', type: 'T', color: 'W', value: 81 }, { square: 'N2', type: 'T', color: 'W', value: 72 }, { square: 'N3', type: 'C', color: 'W', value: 64 }, { square: 'N4', type: 'C', color: 'W', value: 16 }, { square: 'N5', type: 'C', color: 'W', value: 16 }, { square: 'N6', type: 'C', color: 'W', value: 4 }, { square: 'N7', type: 'T', color: 'W', value: 6 }, { square: 'N8', type: 'T', color: 'W', value: 9 }, // WHITE - Column O { square: 'O1', type: 'S', color: 'W', value: 153 }, { square: 'O2', type: 'P', color: 'W', value: 64 }, { square: 'O3', type: 'T', color: 'W', value: 72 }, { square: 'O4', type: 'T', color: 'W', value: 20 }, { square: 'O5', type: 'T', color: 'W', value: 20 }, { square: 'O6', type: 'T', color: 'W', value: 25 }, { square: 'O7', type: 'S', color: 'W', value: 45 }, { square: 'O8', type: 'S', color: 'W', value: 15 }, // WHITE - Column P { square: 'P1', type: 'S', color: 'W', value: 289 }, { square: 'P2', type: 'S', color: 'W', value: 169 }, { square: 'P7', type: 'S', color: 'W', value: 81 }, { square: 'P8', type: 'S', color: 'W', value: 25 }, ] return ( <div data-section="overview"> <h3 className={css({ fontSize: { base: '20px', md: '24px' }, fontWeight: 'bold', color: '#7c2d12', mb: '16px', })} > {t('overview.goalTitle')} </h3> <p className={css({ fontSize: '16px', lineHeight: '1.6', mb: '20px', color: '#374151', })} > {t('overview.goal')} </p> <h3 className={css({ fontSize: { base: '18px', md: '20px' }, fontWeight: 'bold', color: '#7c2d12', mb: '12px', mt: '24px', })} > {t('overview.boardTitle')} </h3> <div className={css({ mb: '20px' })}> <RithmomachiaBoard pieces={initialSetup} scale={0.6} showLabels={true} useNativeAbacusNumbers={useNativeAbacusNumbers} /> </div> <p className={css({ fontSize: '14px', color: '#6b7280', mb: '20px', fontStyle: 'italic', })} > {t('overview.boardCaption')} </p> <ul className={css({ fontSize: '15px', lineHeight: '1.8', pl: '20px', mb: '20px', color: '#374151', })} > <li>{t('overview.boardSize')}</li> <li>{t('overview.territory')}</li> <li>{t('overview.enemyTerritory')}</li> </ul> <h3 className={css({ fontSize: { base: '18px', md: '20px' }, fontWeight: 'bold', color: '#7c2d12', mb: '12px', mt: '24px', })} > {t('overview.howToPlayTitle')} </h3> <ol className={css({ fontSize: '15px', lineHeight: '1.8', pl: '20px', color: '#374151', })} > <li>{t('overview.step1')}</li> <li>{t('overview.step2')}</li> <li>{t('overview.step3')}</li> <li>{t('overview.step4')}</li> <li>{t('overview.step5')}</li> </ol> </div> ) } |