function MainComponent() { const [gameState, setGameState] = React.useState("menu"); const [snake, setSnake] = React.useState([ { x: 2, y: 2 } ]); const [food, setFood] = React.useState({ x: 5, y: 5 }); const [direction, setDirection] = React.useState("RIGHT"); const gridSize = 10; React.useEffect(()=>{ const handleKeyPress = (e)=>{ switch(e.key){ case "ArrowUp": if (direction !== "DOWN") setDirection("UP"); break; case "ArrowDown": if (direction !== "UP") setDirection("DOWN"); break; case "ArrowLeft": if (direction !== "RIGHT") setDirection("LEFT"); break; case "ArrowRight": if (direction !== "LEFT") setDirection("RIGHT"); break; default: break; } }; window.addEventListener("keydown", handleKeyPress); return ()=>{ window.removeEventListener("keydown", handleKeyPress); }; }, [ direction ]); React.useEffect(()=>{ const moveSnake = ()=>{ const newSnake = [ ...snake ]; let head = { ...newSnake[newSnake.length - 1] }; switch(direction){ case "UP": head.y -= 1; break; case "DOWN": head.y += 1; break; case "LEFT": head.x -= 1; break; case "RIGHT": head.x += 1; break; default: return; } if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize || snake.some((segment)=>segment.x === head.x && segment.y === head.y)) { setGameState("exit"); return; } newSnake.push(head); newSnake.shift(); setSnake(newSnake); if (head.x === food.x && head.y === food.y) { newSnake.push({ x: head.x, y: head.y }); setSnake(newSnake); placeFood(); } }; const placeFood = ()=>{ let x, y; do { x = Math.floor(Math.random() * gridSize); y = Math.floor(Math.random() * gridSize); }while (snake.some((segment)=>segment.x === x && segment.y === y)) setFood({ x, y }); }; if (gameState === "play") { const gameLoop = setInterval(()=>{ moveSnake(); }, 200); return ()=>clearInterval(gameLoop); } }, [ gameState, snake, direction, food.x, food.y ]); const handlePlay = ()=>{ setGameState("play"); }; const handleExit = ()=>{ setGameState("exit"); }; const getGrid = ()=>{ let grid = []; for(let y = 0; y < gridSize; y++){ for(let x = 0; x < gridSize; x++){ const isSnake = snake.some((segment)=>segment.x === x && segment.y === y); const isFood = food.x === x && food.y === y; grid.push(/*#__PURE__*/ React.createElement("div", { key: `${x}-${y}`, className: `w-6 h-6 ${isSnake ? "bg-[#4CAF50]" : isFood ? "bg-[#f44336]" : "bg-[#f0f0f0]"} border border-[#e0e0e0]`, __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this })); } } return grid; }; let content; if (gameState === "menu") { content = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "play", onClick: handlePlay, className: "bg-[#4CAF50] text-white p-2 rounded-md font-roboto", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "Грати"), /*#__PURE__*/ React.createElement("button", { name: "exit", onClick: handleExit, className: "bg-[#f44336] text-white p-2 ml-4 rounded-md font-roboto", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, "Вийти")); } else if (gameState === "play") { content = /*#__PURE__*/ React.createElement("div", { className: "w-[240px] h-[240px] flex flex-wrap", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, getGrid()); } else if (gameState === "exit") { content = /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, "Гра закрита. Дякуємо за гру!"); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-[#f0f0f0] gap-4", __source: { fileName: "", lineNumber: 152, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#121212]", __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this }, 'Гра "Змійка"'), content); }