'use client' import * as React from 'react' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Kbd } from '@/components/ui/kbd' import type { SnakeGameProps, SnakeGameConfig, CanvasDimensions, GameSnapshot, Direction, } from './types' import { DEFAULT_CONFIG, KEY_BINDINGS, GAME_CONSTANTS } from './config' import { useSnakeGame } from './use-snake-game' import { mergeConfig, resolveCssColor } from './utils' /** * Render game to canvas */ function renderGame( ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, snapshot: GameSnapshot, config: SnakeGameConfig, dimensions: CanvasDimensions ): void { const { size, cellSize, dpr } = dimensions // Clear canvas ctx.clearRect(0, 0, size * dpr, size * dpr) // Reset transform and scale for DPR ctx.setTransform(1, 0, 0, 1, 0, 0) ctx.scale(dpr, dpr) // Disable image smoothing for crisp pixels ctx.imageSmoothingEnabled = false // Resolve colors const snakeColor = resolveCssColor(config.colors.snake, canvas) const foodColor = resolveCssColor(config.colors.food, canvas) // Use integer cell size for crisp rendering const cell = Math.floor(cellSize) // Draw snake ctx.fillStyle = snakeColor snapshot.snake.segments.forEach((segment) => { ctx.fillRect(segment.x * cell, segment.y * cell, cell, cell) }) // Draw food ctx.fillStyle = foodColor ctx.fillRect( snapshot.food.position.x * cell, snapshot.food.position.y * cell, cell, cell ) } /** * Snake Game Component * * A minimal, themeable snake game that uses shadcn CSS variables * for automatic light/dark theme support. * * @example * ```tsx * console.log('Game over!', score)} * className="w-full" * /> * ``` */ export function SnakeGame({ config: configOverrides, onGameEnd, onScoreChange, onStateChange, className, showControls = true, showHighscores = true, }: SnakeGameProps) { const containerRef = React.useRef(null) const canvasRef = React.useRef(null) const [dimensions, setDimensions] = React.useState({ size: 180, cellSize: 9, dpr: 1, }) const [theme, setTheme] = React.useState('') // Merge config with defaults const config = React.useMemo( () => mergeConfig(DEFAULT_CONFIG, configOverrides), [configOverrides] ) // Use game hook const { gameState, snapshot, startGame, pauseGame, resumeGame, resetGame, setDirection, } = useSnakeGame({ config, onGameEnd, onScoreChange, onStateChange, }) // Handle responsive sizing React.useEffect(() => { const container = containerRef.current if (!container) return const updateSize = () => { const rect = container.getBoundingClientRect() // Round down to nearest multiple of grid size for clean pixels const size = Math.floor(rect.width / config.grid.size) * config.grid.size || config.grid.size * 9 const cellSize = size / config.grid.size const dpr = window.devicePixelRatio || 1 setDimensions({ size, cellSize, dpr }) } updateSize() const resizeObserver = new ResizeObserver(updateSize) resizeObserver.observe(container) return () => resizeObserver.disconnect() }, [config.grid.size]) // Listen for theme changes React.useEffect(() => { const html = document.documentElement setTheme(html.className) const observer = new MutationObserver((mutations) => { for (const mutation of mutations) { if (mutation.attributeName === 'class') { setTheme(html.className) } } }) observer.observe(html, { attributes: true, attributeFilter: ['class'] }) return () => observer.disconnect() }, []) // Render game React.useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext('2d') if (!ctx) return // Set canvas size for DPR canvas.width = dimensions.size * dimensions.dpr canvas.height = dimensions.size * dimensions.dpr renderGame(ctx, canvas, snapshot, config, dimensions) }, [snapshot, config, dimensions, theme]) // Keyboard controls React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { const key = e.key const code = e.code if (gameState === 'playing') { let newDirection: Direction | null = null if (KEY_BINDINGS.UP.includes(key) || KEY_BINDINGS.UP.includes(code)) { newDirection = 'UP' } else if ( KEY_BINDINGS.DOWN.includes(key) || KEY_BINDINGS.DOWN.includes(code) ) { newDirection = 'DOWN' } else if ( KEY_BINDINGS.LEFT.includes(key) || KEY_BINDINGS.LEFT.includes(code) ) { newDirection = 'LEFT' } else if ( KEY_BINDINGS.RIGHT.includes(key) || KEY_BINDINGS.RIGHT.includes(code) ) { newDirection = 'RIGHT' } if (newDirection) { setDirection(newDirection) e.preventDefault() } if ( KEY_BINDINGS.PAUSE.includes(key) || KEY_BINDINGS.PAUSE.includes(code) ) { pauseGame() e.preventDefault() } } else if (gameState === 'paused') { if ( KEY_BINDINGS.PAUSE.includes(key) || KEY_BINDINGS.PAUSE.includes(code) || KEY_BINDINGS.START.includes(key) || KEY_BINDINGS.START.includes(code) ) { resumeGame() e.preventDefault() } } else if (gameState === 'idle' || gameState === 'gameOver') { if ( KEY_BINDINGS.START.includes(key) || KEY_BINDINGS.START.includes(code) ) { startGame() e.preventDefault() } } } window.addEventListener('keydown', handleKeyDown) return () => window.removeEventListener('keydown', handleKeyDown) }, [gameState, setDirection, startGame, pauseGame, resumeGame]) // Touch/swipe controls React.useEffect(() => { const canvas = canvasRef.current if (!canvas) return let touchStart: { x: number; y: number } | null = null const handleTouchStart = (e: TouchEvent) => { const touch = e.touches[0] touchStart = { x: touch.clientX, y: touch.clientY } } const handleTouchEnd = (e: TouchEvent) => { if (!touchStart || gameState !== 'playing') return const touch = e.changedTouches[0] const deltaX = touch.clientX - touchStart.x const deltaY = touch.clientY - touchStart.y if (Math.abs(deltaX) > Math.abs(deltaY)) { // Horizontal swipe if (deltaX > GAME_CONSTANTS.MIN_SWIPE_DISTANCE) { setDirection('RIGHT') } else if (deltaX < -GAME_CONSTANTS.MIN_SWIPE_DISTANCE) { setDirection('LEFT') } } else { // Vertical swipe if (deltaY > GAME_CONSTANTS.MIN_SWIPE_DISTANCE) { setDirection('DOWN') } else if (deltaY < -GAME_CONSTANTS.MIN_SWIPE_DISTANCE) { setDirection('UP') } } touchStart = null } canvas.addEventListener('touchstart', handleTouchStart, { passive: true }) canvas.addEventListener('touchend', handleTouchEnd, { passive: true }) return () => { canvas.removeEventListener('touchstart', handleTouchStart) canvas.removeEventListener('touchend', handleTouchEnd) } }, [gameState, setDirection]) const handlePlayClick = () => { if (gameState === 'idle' || gameState === 'gameOver') { startGame() } } return (

{/* Game Canvas */}

{/* Controls Bar */} {showControls && (

{gameState === 'gameOver' ? (

F*ck! Score:{' '} {snapshot.score}

) : gameState === 'playing' ? (

Score: {' '} {snapshot.score}

{[ { desktop: 'W', mobile: '↑' }, { desktop: 'A', mobile: '←' }, { desktop: 'S', mobile: '↓' }, { desktop: 'D', mobile: '→' }, ].map(({ desktop, mobile }) => ( {desktop} {mobile} ))}

) : gameState === 'paused' ? ( ) : ( )}

)} {/* High Scores */} {showHighscores && snapshot.highscores.length > 0 && (

Highscores {snapshot.highscores.map((entry, i) => (

{entry.score}{' '} pts {entry.date}

))}

)} {/* Screen reader announcements */}

{gameState === 'gameOver' && `Game over. Final score: ${snapshot.score}`}

) }