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:
parent
5f69fab859
commit
7013a7b068
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue