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

fix: Integrate threshold input into Point Victory card

Browse Source 
- Remove separate threshold grid cell that broke layout
- Add threshold input inside Point Victory card with divider
- Use flexDirection: column for vertical stacking
- Add stopPropagation to prevent input clicks from toggling card
- Maintain golden theme for input border when active
- Fixes layout breakage where threshold appeared as separate cell

🤖 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-30 16:48:43 -05:00
parent 71f0e38e20
commit b29bbeefca
1 changed files with 75 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx
View File

@@ -625,8 +625,8 @@ function SetupPhase() {
onClick={() => toggleSetting('pointWinEnabled')}
className={css({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'column',
gap: '1vh',
p: '1.5vh',
bg: state.pointWinEnabled ? 'rgba(251, 191, 36, 0.25)' : 'rgba(139, 92, 246, 0.1)',
borderRadius: '1vh',
@@ -655,74 +655,88 @@ function SetupPhase() {
},
})}
>
<div className={css({ flex: 1, pointerEvents: 'none' })}>
<div
className={css({
fontWeight: 'bold',
fontSize: '1.6vh',
color: state.pointWinEnabled ? '#92400e' : '#7c2d12',
})}
>
{state.pointWinEnabled && '✓ '}Point Victory
</div>
<div className={css({ fontSize: '1.3vh', color: '#78350f' })}>
Win at {state.pointWinThreshold}pts
</div>
</div>
{state.pointWinEnabled && (
<div
className={css({
position: 'absolute',
top: 0,
right: 0,
width: '4vh',
height: '4vh',
borderRadius: '0 1vh 0 100%',
bg: 'rgba(251, 191, 36, 0.4)',
pointerEvents: 'none',
})}
/>
)}
</div>
{/* Point Threshold (only visible if point win enabled) */}
{state.pointWinEnabled && (
<div
data-setting="point-threshold"
className={css({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
p: '1.5vh',
bg: 'rgba(168, 85, 247, 0.15)',
borderRadius: '1vh',
border: '0.2vh solid',
borderColor: 'rgba(168, 85, 247, 0.4)',
})}
>
<div className={css({ fontWeight: 'bold', fontSize: '1.6vh', color: '#7c2d12' })}>
Threshold
<div className={css({ flex: 1, pointerEvents: 'none' })}>
<div
className={css({
fontWeight: 'bold',
fontSize: '1.6vh',
color: state.pointWinEnabled ? '#92400e' : '#7c2d12',
})}
>
{state.pointWinEnabled && '✓ '}Point Victory
</div>
<div className={css({ fontSize: '1.3vh', color: '#78350f' })}>
Win at {state.pointWinThreshold}pts
</div>
</div>
<input
type="number"
value={state.pointWinThreshold}
onChange={(e) => updateThreshold(Number.parseInt(e.target.value, 10))}
min="1"
className={css({
width: '10vh',
px: '1vh',
py: '0.5vh',
borderRadius: '0.5vh',
border: '0.2vh solid',
borderColor: 'rgba(124, 45, 18, 0.5)',
textAlign: 'center',
fontSize: '1.6vh',
fontWeight: 'bold',
color: '#7c2d12',
})}
/>
{state.pointWinEnabled && (
<div
className={css({
position: 'absolute',
top: 0,
right: 0,
width: '4vh',
height: '4vh',
borderRadius: '0 1vh 0 100%',
bg: 'rgba(251, 191, 36, 0.4)',
pointerEvents: 'none',
})}
/>
)}
</div>
)}
{/* Threshold input - only visible when enabled */}
{state.pointWinEnabled && (
<div
data-element="threshold-input-container"
onClick={(e) => e.stopPropagation()}
className={css({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
pt: '1vh',
borderTop: '0.2vh solid',
borderColor: 'rgba(251, 191, 36, 0.3)',
})}
>
<div className={css({ fontSize: '1.4vh', fontWeight: 'bold', color: '#92400e' })}>
Threshold:
</div>
<input
type="number"
value={state.pointWinThreshold}
onChange={(e) => updateThreshold(Number.parseInt(e.target.value, 10))}
onClick={(e) => e.stopPropagation()}
min="1"
className={css({
width: '10vh',
px: '1vh',
py: '0.5vh',
borderRadius: '0.5vh',
border: '0.2vh solid',
borderColor: 'rgba(251, 191, 36, 0.6)',
bg: 'rgba(255, 255, 255, 0.9)',
textAlign: 'center',
fontSize: '1.6vh',
fontWeight: 'bold',
color: '#7c2d12',
_focus: {
outline: 'none',
borderColor: 'rgba(251, 191, 36, 1)',
boxShadow: '0 0 0.5vh rgba(251, 191, 36, 0.5)',
},
})}
/>
</div>
)}
</div>
{/* Threefold Repetition */}
<div