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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | type GameMode = 'none' | 'single' | 'battle' | 'tournament'
interface GameModeIndicatorProps {
gameMode: GameMode
shouldEmphasize: boolean
showFullscreenSelection: boolean
/** Custom label to override the default mode label */
customModeLabel?: string
/** Custom emoji to override the default mode emoji */
customModeEmoji?: string
/** Custom color to override the default mode color */
customModeColor?: string
}
const gameModeConfig = {
none: { label: 'Select Players', emoji: '👥', color: '#6b7280' },
single: { label: 'Solo', emoji: '🎯', color: '#3b82f6' },
battle: { label: 'Battle', emoji: '⚔️', color: '#8b5cf6' },
tournament: { label: 'Tournament', emoji: '🏆', color: '#f59e0b' },
}
export function GameModeIndicator({
gameMode,
shouldEmphasize,
showFullscreenSelection,
customModeLabel,
customModeEmoji,
customModeColor,
}: GameModeIndicatorProps) {
const defaultModeInfo = gameModeConfig[gameMode]
// Use custom overrides if provided, otherwise fall back to defaults
const modeInfo = {
label: customModeLabel ?? defaultModeInfo.label,
emoji: customModeEmoji ?? defaultModeInfo.emoji,
color: customModeColor ?? defaultModeInfo.color,
}
return (
<div
style={{
display: 'inline-flex',
alignItems: 'center',
gap: shouldEmphasize ? '10px' : '4px',
padding: shouldEmphasize ? '12px 24px' : '4px 8px',
background: shouldEmphasize
? `linear-gradient(135deg, ${modeInfo.color}25, ${modeInfo.color}35)`
: `${modeInfo.color}20`,
border: `${shouldEmphasize ? '3px' : '2px'} solid ${modeInfo.color}${shouldEmphasize ? '70' : '40'}`,
borderRadius: shouldEmphasize ? '16px' : '6px',
fontSize: shouldEmphasize ? '20px' : '12px',
fontWeight: 'bold',
color: modeInfo.color,
boxShadow: shouldEmphasize
? `0 6px 20px ${modeInfo.color}40, inset 0 1px 0 rgba(255,255,255,0.3)`
: 'none',
transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
transform: shouldEmphasize ? 'scale(1.05)' : 'scale(1)',
lineHeight: 1,
}}
>
<span
style={{
fontSize: shouldEmphasize ? '28px' : '12px',
transition: 'font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
lineHeight: 1,
}}
>
{modeInfo.emoji}
</span>
<span style={{ lineHeight: 1 }}>{modeInfo.label}</span>
</div>
)
}
|