function MainComponent() { const [gameState, setGameState] = useState("menu"); const [gameMode, setGameMode] = useState("classic"); const [score, setScore] = useState(0); const [snake, setSnake] = useState([ { x: 5, y: 5 } ]); const [mirrorSnake, setMirrorSnake] = useState([ { x: 15, y: 15 } ]); const [food, setFood] = useState({ x: 10, y: 10 }); const [direction, setDirection] = useState("right"); const [deathAnimation, setDeathAnimation] = useState(false); const [animationFrame, setAnimationFrame] = useState(0); const [theme, setTheme] = useState("dark"); const [playerName, setPlayerName] = useState(""); const [trainLength, setTrainLength] = useState(1); const [startTime, setStartTime] = useState(null); const canvasRef = useRef(null); const gridSize = 20; const cellSize = 20; const themeColors = { light: { canvas: "#f3f4f6", snake: [ "#4a9eff", "#2563eb" ], food: "#ef4444", wall: "#111827" }, dark: { canvas: "#1a1a1a", snake: [ "#4a9eff", "#2563eb" ], food: "#ef4444", wall: "#e5e7eb" }, train_runner: { canvas: "#2f4858", snake: [ "#ffd700", "#ff8c00" ], food: "#7fff00", wall: "#8b4513" } }; const checkCollision = useCallback(()=>{ const head = snake[0]; const mirrorHead = mirrorSnake[0]; if (gameMode !== "teleportation") { if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize) { setDeathAnimation(true); setTimeout(()=>{ setDeathAnimation(false); setAnimationFrame(0); setGameState("gameover"); }, 1000); return true; } } if (snake.some((segment, index)=>index !== 0 && segment.x === head.x && segment.y === head.y)) { setDeathAnimation(true); setTimeout(()=>{ setDeathAnimation(false); setAnimationFrame(0); setGameState("gameover"); }, 1000); return true; } if (gameMode === "mirror" && (mirrorSnake.some((segment)=>segment.x === head.x && segment.y === head.y) || snake.some((segment)=>segment.x === mirrorHead.x && segment.y === mirrorHead.y))) { setDeathAnimation(true); setTimeout(()=>{ setDeathAnimation(false); setAnimationFrame(0); setGameState("gameover"); }, 1000); return true; } return false; }, [ snake, mirrorSnake, gameMode ]); const gameLoop = useCallback(()=>{ if (!canvasRef.current || gameState !== "playing") return; const ctx = canvasRef.current.getContext("2d"); ctx.clearRect(0, 0, gridSize * cellSize, gridSize * cellSize); ctx.fillStyle = themeColors[theme].canvas; ctx.fillRect(0, 0, gridSize * cellSize, gridSize * cellSize); const head = { ...snake[0] }; const moves = { up: { x: 0, y: -1 }, down: { x: 0, y: 1 }, left: { x: -1, y: 0 }, right: { x: 1, y: 0 } }; head.x += moves[direction].x; head.y += moves[direction].y; if (gameMode === "teleportation") { if (head.x < 0) head.x = gridSize - 1; if (head.x >= gridSize) head.x = 0; if (head.y < 0) head.y = gridSize - 1; if (head.y >= gridSize) head.y = 0; } if (head.x === food.x && head.y === food.y) { setScore((prev)=>prev + 100); setTrainLength((prev)=>prev + 1); setFood({ x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize) }); } else { snake.pop(); } const newSnake = [ head, ...snake.slice(0, -1) ]; setSnake(newSnake); if (gameMode === "mirror") { const mirrorHead = { x: gridSize - 1 - head.x, y: gridSize - 1 - head.y }; const newMirrorSnake = [ mirrorHead, ...mirrorSnake.slice(0, -1) ]; setMirrorSnake(newMirrorSnake); } if (deathAnimation) { if (animationFrame < 5) { ctx.fillStyle = "rgba(255,0,0,0.3)"; ctx.fillRect(0, 0, gridSize * cellSize, gridSize * cellSize); } setAnimationFrame((prev)=>prev + 1); } const drawTrain = (segments, isReverse = false)=>{ segments.forEach((segment, index)=>{ ctx.fillStyle = themeColors[theme].snake[index === 0 ? 0 : 1]; if (gameMode === "lights_out" && !isReverse) { const distance = Math.sqrt(Math.pow(segment.x - head.x, 2) + Math.pow(segment.y - head.y, 2)); if (distance > 3) return; } ctx.fillRect(segment.x * cellSize, segment.y * cellSize, cellSize - 1, cellSize - 1); }); }; drawTrain(snake); if (gameMode === "mirror") { drawTrain(mirrorSnake, true); } ctx.fillStyle = themeColors[theme].food; ctx.fillRect(food.x * cellSize, food.y * cellSize, cellSize - 1, cellSize - 1); checkCollision(); }, [ snake, mirrorSnake, direction, food, gameState, gameMode, theme, deathAnimation, animationFrame, checkCollision ]); useEffect(()=>{ if (gameState === "playing") { const interval = setInterval(gameLoop, gameMode === "super_speed" ? 50 : 100); return ()=>clearInterval(interval); } }, [ gameLoop, gameState, gameMode ]); useEffect(()=>{ const handleKeyPress = (e)=>{ if (gameState !== "playing") return; if (e.key === "Escape") { setGameState("menu"); } if (e.key === " ") { setGameState((prev)=>prev === "playing" ? "paused" : "playing"); } const newDirection = { ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right" }[e.key]; if (newDirection) { const opposites = { up: "down", down: "up", left: "right", right: "left" }; if (opposites[newDirection] !== direction) { setDirection(newDirection); } } }; window.addEventListener("keydown", handleKeyPress); return ()=>window.removeEventListener("keydown", handleKeyPress); }, [ gameState, direction ]); const VersionNumber = ()=>/*#__PURE__*/ React.createElement("div", { className: `fixed bottom-2 right-2 text-sm opacity-50 ${theme === "light" ? "text-gray-600" : theme === "dark" ? "text-gray-400" : "text-amber-200"}`, __source: { fileName: "", lineNumber: 252, columnNumber: 5 }, __self: this }, "v0.02"); if (gameState === "menu") { return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen p-8 transition-colors duration-300 ${theme === "light" ? "bg-gray-100" : theme === "dark" ? "bg-gray-900" : "bg-indigo-600"}`, __source: { fileName: "", lineNumber: 267, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "menu-content", __source: { fileName: "", lineNumber: 276, columnNumber: 9 }, __self: this }, "Menu Content Here"), /*#__PURE__*/ React.createElement(VersionNumber, { __source: { fileName: "", lineNumber: 277, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 278, columnNumber: 9 }, __self: this }, ` @keyframes shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-5px, 5px); } 50% { transform: translate(5px, -5px); } 75% { transform: translate(-5px, -5px); } } .animate-shake { animation: shake 0.5s; } `)); } if (gameState === "gameover") { return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen p-8 transition-colors duration-300 ${theme === "light" ? "bg-gray-100" : theme === "dark" ? "bg-gray-900" : "bg-indigo-600"}`, __source: { fileName: "", lineNumber: 295, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "gameover-content", __source: { fileName: "", lineNumber: 304, columnNumber: 9 }, __self: this }, "Game Over Content Here"), /*#__PURE__*/ React.createElement(VersionNumber, { __source: { fileName: "", lineNumber: 305, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 306, columnNumber: 9 }, __self: this }, ` @keyframes shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-5px, 5px); } 50% { transform: translate(5px, -5px); } 75% { transform: translate(-5px, -5px); } } .animate-shake { animation: shake 0.5s; } `)); } if (gameState === "paused") { return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen p-8 flex items-center justify-center transition-colors duration-300 ${theme === "light" ? "bg-gray-100" : theme === "dark" ? "bg-gray-900" : "bg-indigo-600"}`, __source: { fileName: "", lineNumber: 323, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 332, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: `text-4xl font-bold mb-4 ${theme === "light" ? "text-gray-800" : "text-white"}`, __source: { fileName: "", lineNumber: 333, columnNumber: 11 }, __self: this }, "Paused"), /*#__PURE__*/ React.createElement("p", { className: `text-lg ${theme === "light" ? "text-gray-600" : "text-gray-300"}`, __source: { fileName: "", lineNumber: 338, columnNumber: 11 }, __self: this }, "Press SPACE to resume")), /*#__PURE__*/ React.createElement(VersionNumber, { __source: { fileName: "", lineNumber: 344, columnNumber: 9 }, __self: this })); } return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen p-8 transition-colors duration-300 ${theme === "light" ? "bg-gray-100" : theme === "dark" ? "bg-gray-900" : "bg-indigo-600"}`, __source: { fileName: "", lineNumber: 350, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, width: gridSize * cellSize, height: gridSize * cellSize, __source: { fileName: "", lineNumber: 359, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(VersionNumber, { __source: { fileName: "", lineNumber: 364, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 365, columnNumber: 7 }, __self: this }, ` @keyframes shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-5px, 5px); } 50% { transform: translate(5px, -5px); } 75% { transform: translate(-5px, -5px); } } .animate-shake { animation: shake 0.5s; } `)); }