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

feat(card-sorting): optimize results screen for mobile

Browse Source 
- Switch layout from side-by-side to vertical stack on mobile
- Use column-reverse to show score panel at top, cards below
- Change cards grid from 3 to 2 columns on mobile
- Make cards fluid-sized with aspect ratio instead of fixed pixels
- Reduce score circle: 120px (mobile) to 160px (desktop)
- Reduce all font sizes, padding, and gaps for mobile
- Make buttons more compact on mobile
- Fix leftover revealNumbers reference in PlayingPhase

🤖 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-24 07:50:43 -05:00
parent 8d4faa7f17
commit d188789069
2 changed files with 86 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx
View File

@@ -13,7 +13,6 @@ export function PlayingPhase() {
insertCard,
removeCard,
checkSolution,
revealNumbers,
goToSetup,
canCheckSolution,
placedCount,

162
apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx
View File

@@ -95,31 +95,34 @@ export function ResultsPhase() {
width: '100%',
height: '100%',
display: 'flex',
flexDirection: { base: 'column-reverse', md: 'row' },
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'linear-gradient(135deg, #f0f9ff, #e0f2fe)',
overflow: 'auto',
})}
>
{/* Cards Grid Area */}
<div
className={css({
flex: 1,
flex: { base: '0 0 auto', md: 1 },
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '40px',
overflow: 'auto',
padding: { base: '16px 12px', md: '40px' },
overflow: { base: 'visible', md: 'auto' },
})}
>
<div
className={css({
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gap: '16px',
gridTemplateColumns: { base: 'repeat(2, 1fr)', sm: 'repeat(3, 1fr)', md: 'repeat(3, 1fr)' },
gap: { base: '12px', md: '16px' },
maxWidth: '600px',
width: '100%',
})}
>
{userSequence.map((card, userIndex) => {
@@ -131,25 +134,27 @@ export function ResultsPhase() {
key={card.id}
className={css({
position: 'relative',
width: '160px',
height: '200px',
width: '100%',
paddingBottom: '125%', // 5:4 aspect ratio
})}
>
{/* Card */}
<div
className={css({
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'white',
borderRadius: '8px',
border: '3px solid',
borderRadius: { base: '6px', md: '8px' },
border: { base: '2px solid', md: '3px solid' },
borderColor: isCorrect ? '#22c55e' : showCorrections ? '#ef4444' : '#0369a1',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '8px',
padding: { base: '4px', md: '8px' },
boxSizing: 'border-box',
position: 'relative',
boxShadow: isCorrect
? '0 0 20px rgba(34, 197, 94, 0.4)'
: showCorrections
@@ -165,16 +170,16 @@ export function ResultsPhase() {
<div
className={css({
position: 'absolute',
top: '-12px',
right: '-12px',
width: '32px',
height: '32px',
top: { base: '-8px', md: '-12px' },
right: { base: '-8px', md: '-12px' },
width: { base: '24px', md: '32px' },
height: { base: '24px', md: '32px' },
borderRadius: '50%',
background: isCorrect ? '#22c55e' : '#ef4444',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '20px',
fontSize: { base: '16px', md: '20px' },
color: 'white',
fontWeight: 'bold',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
@@ -189,14 +194,14 @@ export function ResultsPhase() {
<div
className={css({
position: 'absolute',
bottom: '-8px',
bottom: { base: '-6px', md: '-8px' },
left: '50%',
transform: 'translateX(-50%)',
background: isCorrect ? '#22c55e' : showCorrections ? '#ef4444' : '#0369a1',
color: 'white',
padding: '4px 8px',
borderRadius: '12px',
fontSize: '12px',
padding: { base: '3px 6px', md: '4px 8px' },
borderRadius: { base: '8px', md: '12px' },
fontSize: { base: '10px', md: '12px' },
fontWeight: 'bold',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
})}
@@ -209,18 +214,22 @@ export function ResultsPhase() {
</div>
</div>
{/* Right side: Score panel */}
{/* Score panel */}
<div
className={css({
width: '400px',
width: { base: '100%', md: '400px' },
background: 'rgba(255, 255, 255, 0.95)',
borderLeft: '3px solid rgba(59, 130, 246, 0.3)',
padding: '40px',
borderLeft: { base: 'none', md: '3px solid rgba(59, 130, 246, 0.3)' },
borderBottom: { base: '3px solid rgba(59, 130, 246, 0.3)', md: 'none' },
padding: { base: '20px 16px', md: '40px' },
overflow: 'auto',
display: 'flex',
flexDirection: 'column',
gap: '24px',
boxShadow: '-4px 0 20px rgba(0, 0, 0, 0.1)',
gap: { base: '16px', md: '24px' },
boxShadow: {
base: '0 4px 20px rgba(0, 0, 0, 0.1)',
md: '-4px 0 20px rgba(0, 0, 0, 0.1)',
},
})}
>
{/* Score Circle */}
@@ -229,13 +238,13 @@ export function ResultsPhase() {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '16px',
gap: { base: '12px', md: '16px' },
})}
>
<div
className={css({
width: '160px',
height: '160px',
width: { base: '120px', md: '160px' },
height: { base: '120px', md: '160px' },
borderRadius: '50%',
background: isPerfect
? 'linear-gradient(135deg, #fbbf24, #f59e0b)'
@@ -259,7 +268,7 @@ export function ResultsPhase() {
>
<div
className={css({
fontSize: '64px',
fontSize: { base: '48px', md: '64px' },
fontWeight: 'bold',
color: 'white',
lineHeight: 1,
@@ -270,7 +279,7 @@ export function ResultsPhase() {
</div>
<div
className={css({
fontSize: '20px',
fontSize: { base: '16px', md: '20px' },
fontWeight: '600',
color: 'white',
opacity: 0.9,
@@ -284,10 +293,10 @@ export function ResultsPhase() {
{isCollaborative && (
<div
className={css({
padding: '6px 16px',
padding: { base: '5px 12px', md: '6px 16px' },
background: 'linear-gradient(135deg, #a78bfa, #8b5cf6)',
borderRadius: '20px',
fontSize: '13px',
fontSize: { base: '12px', md: '13px' },
fontWeight: '700',
color: 'white',
textTransform: 'uppercase',
@@ -302,9 +311,10 @@ export function ResultsPhase() {
<div
className={css({
textAlign: 'center',
fontSize: '18px',
fontSize: { base: '15px', md: '18px' },
fontWeight: '600',
color: '#0c4a6e',
lineHeight: 1.3,
})}
>
{getMessage(scoreBreakdown.finalScore)}
@@ -313,11 +323,11 @@ export function ResultsPhase() {
{/* Time Badge */}
<div
className={css({
padding: '8px 20px',
padding: { base: '6px 16px', md: '8px 20px' },
background: 'rgba(59, 130, 246, 0.1)',
border: '2px solid rgba(59, 130, 246, 0.3)',
borderRadius: '20px',
fontSize: '16px',
fontSize: { base: '14px', md: '16px' },
fontWeight: '600',
color: '#0c4a6e',
})}
@@ -331,18 +341,18 @@ export function ResultsPhase() {
<div
className={css({
background: 'white',
borderRadius: '12px',
padding: '16px',
borderRadius: { base: '10px', md: '12px' },
padding: { base: '12px', md: '16px' },
border: '2px solid rgba(139, 92, 246, 0.2)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
})}
>
<div
className={css({
fontSize: '13px',
fontSize: { base: '11px', md: '13px' },
fontWeight: '700',
color: '#64748b',
marginBottom: '12px',
marginBottom: { base: '8px', md: '12px' },
textTransform: 'uppercase',
letterSpacing: '0.5px',
})}
@@ -353,7 +363,7 @@ export function ResultsPhase() {
className={css({
display: 'flex',
flexWrap: 'wrap',
gap: '8px',
gap: { base: '6px', md: '8px' },
})}
>
{state.activePlayers
@@ -365,17 +375,17 @@ export function ResultsPhase() {
className={css({
display: 'flex',
alignItems: 'center',
gap: '6px',
padding: '6px 12px',
gap: { base: '4px', md: '6px' },
padding: { base: '5px 10px', md: '6px 12px' },
background: 'rgba(139, 92, 246, 0.1)',
border: '1px solid rgba(139, 92, 246, 0.2)',
borderRadius: '20px',
fontSize: '14px',
fontSize: { base: '13px', md: '14px' },
fontWeight: '500',
color: '#5b21b6',
})}
>
<span style={{ fontSize: '18px' }}>{player.emoji}</span>
<span style={{ fontSize: '16px' }}>{player.emoji}</span>
<span>{player.name}</span>
</div>
))}
@@ -388,25 +398,25 @@ export function ResultsPhase() {
className={css({
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gap: '12px',
gap: { base: '8px', md: '12px' },
})}
>
{/* Exact Matches */}
<div
className={css({
background: 'white',
borderRadius: '12px',
padding: '12px',
borderRadius: { base: '10px', md: '12px' },
padding: { base: '10px 8px', md: '12px' },
border: '2px solid rgba(59, 130, 246, 0.2)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
})}
>
<div
className={css({
fontSize: '11px',
fontSize: { base: '9px', md: '11px' },
fontWeight: '600',
color: '#64748b',
marginBottom: '4px',
marginBottom: { base: '3px', md: '4px' },
textTransform: 'uppercase',
letterSpacing: '0.5px',
})}
@@ -415,7 +425,7 @@ export function ResultsPhase() {
</div>
<div
className={css({
fontSize: '28px',
fontSize: { base: '22px', md: '28px' },
fontWeight: 'bold',
color: '#0c4a6e',
})}
@@ -423,7 +433,7 @@ export function ResultsPhase() {
{scoreBreakdown.exactMatches}
<span
className={css({
fontSize: '14px',
fontSize: { base: '12px', md: '14px' },
color: '#64748b',
fontWeight: '500',
})}
@@ -437,18 +447,18 @@ export function ResultsPhase() {
<div
className={css({
background: 'white',
borderRadius: '12px',
padding: '12px',
borderRadius: { base: '10px', md: '12px' },
padding: { base: '10px 8px', md: '12px' },
border: '2px solid rgba(59, 130, 246, 0.2)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
})}
>
<div
className={css({
fontSize: '11px',
fontSize: { base: '9px', md: '11px' },
fontWeight: '600',
color: '#64748b',
marginBottom: '4px',
marginBottom: { base: '3px', md: '4px' },
textTransform: 'uppercase',
letterSpacing: '0.5px',
})}
@@ -457,7 +467,7 @@ export function ResultsPhase() {
</div>
<div
className={css({
fontSize: '28px',
fontSize: { base: '22px', md: '28px' },
fontWeight: 'bold',
color: '#0c4a6e',
})}
@@ -465,7 +475,7 @@ export function ResultsPhase() {
{scoreBreakdown.lcsLength}
<span
className={css({
fontSize: '14px',
fontSize: { base: '12px', md: '14px' },
color: '#64748b',
fontWeight: '500',
})}
@@ -479,18 +489,18 @@ export function ResultsPhase() {
<div
className={css({
background: 'white',
borderRadius: '12px',
padding: '12px',
borderRadius: { base: '10px', md: '12px' },
padding: { base: '10px 8px', md: '12px' },
border: '2px solid rgba(59, 130, 246, 0.2)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
})}
>
<div
className={css({
fontSize: '11px',
fontSize: { base: '9px', md: '11px' },
fontWeight: '600',
color: '#64748b',
marginBottom: '4px',
marginBottom: { base: '3px', md: '4px' },
textTransform: 'uppercase',
letterSpacing: '0.5px',
})}
@@ -499,7 +509,7 @@ export function ResultsPhase() {
</div>
<div
className={css({
fontSize: '28px',
fontSize: { base: '22px', md: '28px' },
fontWeight: 'bold',
color: '#0c4a6e',
})}
@@ -514,7 +524,7 @@ export function ResultsPhase() {
className={css({
display: 'flex',
flexDirection: 'column',
gap: '10px',
gap: { base: '8px', md: '10px' },
marginTop: 'auto',
})}
>
@@ -522,11 +532,11 @@ export function ResultsPhase() {
type="button"
onClick={startGame}
className={css({
padding: '14px 24px',
padding: { base: '12px 20px', md: '14px 24px' },
background: 'linear-gradient(135deg, #86efac, #22c55e)',
border: '3px solid #22c55e',
borderRadius: '12px',
fontSize: '16px',
border: { base: '2px solid #22c55e', md: '3px solid #22c55e' },
borderRadius: { base: '10px', md: '12px' },
fontSize: { base: '14px', md: '16px' },
fontWeight: '700',
color: 'white',
cursor: 'pointer',
@@ -547,11 +557,11 @@ export function ResultsPhase() {
type="button"
onClick={goToSetup}
className={css({
padding: '12px 20px',
padding: { base: '10px 16px', md: '12px 20px' },
background: 'white',
border: '2px solid rgba(59, 130, 246, 0.3)',
borderRadius: '12px',
fontSize: '14px',
borderRadius: { base: '10px', md: '12px' },
fontSize: { base: '13px', md: '14px' },
fontWeight: '700',
color: '#0c4a6e',
cursor: 'pointer',
@@ -571,11 +581,11 @@ export function ResultsPhase() {
type="button"
onClick={exitSession}
className={css({
padding: '12px 20px',
padding: { base: '10px 16px', md: '12px 20px' },
background: 'white',
border: '2px solid rgba(239, 68, 68, 0.3)',
borderRadius: '12px',
fontSize: '14px',
borderRadius: { base: '10px', md: '12px' },
fontSize: { base: '13px', md: '14px' },
fontWeight: '700',
color: '#991b1b',
cursor: 'pointer',