fix(know-your-world): restore Start button character

Bring back the travel-themed design:
- Decorative flag strip at top
- Stacked travel icons (✈️🌍 etc)
- "Start {Region}" text with context
- Region count subtitle
- Gradient background with hover effects

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-29 06:40:03 -06:00
parent 5f69fab859
commit 7013a7b068
2 changed files with 66 additions and 22 deletions

View File

@ -515,7 +515,7 @@ export function SetupPhase() {
</Select.Portal>
</Select.Root>
{/* Start Button - Travel-themed, compact for panel */}
{/* Start Button - Travel-themed with character */}
<button
data-action="start-game"
onClick={startGame}
@ -527,7 +527,7 @@ export function SetupPhase() {
gap: '2',
padding: '2 3',
width: { base: '160px', sm: '220px' },
height: { base: '48px', sm: '72px' },
height: { base: '64px', sm: '72px' },
fontSize: { base: 'sm', sm: 'md' },
fontWeight: 'bold',
color: 'white',
@ -555,37 +555,82 @@ export function SetupPhase() {
e.currentTarget.style.background = regionTheme.gradient
}}
>
{/* Travel icon */}
<span className={css({ fontSize: { base: 'lg', sm: 'xl' } })}>
{regionTheme.icons[0]}
</span>
{/* Decorative flag strip at top */}
<div
className={css({
position: 'absolute',
top: '0',
left: '0',
right: '0',
height: '14px',
display: 'flex',
justifyContent: 'center',
gap: '0.5',
fontSize: '2xs',
bg: 'rgba(0,0,0,0.15)',
paddingTop: '1px',
overflow: 'hidden',
})}
>
{regionTheme.flagEmojis.slice(0, 4).map((flag, i) => (
<span key={i} className={css({ opacity: 0.9 })}>
{flag}
</span>
))}
</div>
{/* Text content */}
{/* Main content */}
<div
className={css({
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
alignItems: 'center',
gap: '2',
marginTop: '6px',
})}
>
<span
{/* Travel icons */}
<div
className={css({
fontSize: { base: 'sm', sm: 'md' },
fontWeight: 'bold',
textShadow: '0 1px 2px rgba(0,0,0,0.2)',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
fontSize: { base: 'md', sm: 'lg' },
lineHeight: 1,
})}
>
Start
</span>
<span
<span>{regionTheme.icons[0]}</span>
<span className={css({ fontSize: 'xs', marginTop: '-2px' })}>
{regionTheme.icons[1]}
</span>
</div>
{/* Text content */}
<div
className={css({
fontSize: { base: '2xs', sm: 'xs' },
fontWeight: 'normal',
opacity: 0.9,
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
})}
>
{totalRegionCount} regions
</span>
<span
className={css({
fontSize: { base: 'sm', sm: 'md' },
fontWeight: 'bold',
textShadow: '0 1px 2px rgba(0,0,0,0.2)',
})}
>
Start {contextLabel}
</span>
<span
className={css({
fontSize: { base: '2xs', sm: 'xs' },
fontWeight: 'normal',
opacity: 0.9,
})}
>
{totalRegionCount} regions
</span>
</div>
</div>
</button>
</div>

View File

@ -15,7 +15,6 @@ export interface CropOverrides {
export const customCrops: CropOverrides = {
world: {
africa: '394.40 344.29 254.23 229.00',
oceania: '785.47 464.88 216.32 133.43',
'south-america': '204.64 424.60 185.09 230.17',
'north-america': '-17.45 150.31 444.57 299.97',
europe: '399.21 102.01 198.44 266.44',