Chat Room

\n {messages.map((msg, index) => (\n

{msg.username}: {msg.message}

\n ))}\n

\n setUsername(e.target.value)}\n style={{ marginRight: '10px' }}\n />\n setInputMessage(e.target.value)}\n style={{ marginRight: '10px' }}\n />\n \n

\n );\n}\n\nfunction SnakeGame() {\n const [snake, setSnake] = useState([{ x: 10, y: 10 }]);\n const [food, setFood] = useState({ x: 15, y: 15 });\n const [direction, setDirection] = useState({ x: 1, y: 0 });\n const [gameOver, setGameOver] = useState(false);\n const canvasRef = useRef(null);\n\n useEffect(() => {\n const handleKeyPress = (e) => {\n switch (e.key) {\n case 'w': setDirection({ x: 0, y: -1 }); break;\n case 's': setDirection({ x: 0, y: 1 }); break;\n case 'a': setDirection({ x: -1, y: 0 }); break;\n case 'd': setDirection({ x: 1, y: 0 }); break;\n }\n };\n window.addEventListener('keydown', handleKeyPress);\n return () => window.removeEventListener('keydown', handleKeyPress);\n }, []);\n\n useEffect(() => {\n if (gameOver) return;\n\n const moveSnake = () => {\n setSnake(prevSnake => {\n const newSnake = [...prevSnake];\n const head = { ...newSnake[0] };\n head.x += direction.x;\n head.y += direction.y;\n\n if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {\n setGameOver(true);\n return prevSnake;\n }\n\n newSnake.unshift(head);\n\n if (head.x === food.x && head.y === food.y) {\n setFood({\n x: Math.floor(Math.random() * GRID_SIZE),\n y: Math.floor(Math.random() * GRID_SIZE)\n });\n } else {\n newSnake.pop();\n }\n\n return newSnake;\n });\n };\n\n const gameLoop = setInterval(moveSnake, 100);\n return () => clearInterval(gameLoop);\n }, [direction, food, gameOver]);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const ctx = canvas.getContext('2d');\n\n ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);\n\n // Draw snake\n ctx.fillStyle = 'green';\n snake.forEach(segment => {\n ctx.fillRect(segment.x * CELL_SIZE, segment.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);\n });\n\n // Draw food\n ctx.fillStyle = 'red';\n ctx.fillRect(food.x * CELL_SIZE, food.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);\n\n }, [snake, food]);\n\n return (\n

Snake Game

\n );\n}\n\nfunction App() {\n const [currentView, setCurrentView] = useState('menu');\n\n const renderView = () => {\n switch (currentView) {\n case 'chat':\n return ;\n case 'game':\n return ;\n default:\n return (\n

Welcome to Snake Game and Chat

\n \n \n

\n );\n }\n };\n\n return (\n

\n {currentView !== 'menu' && (\n \n )}\n {renderView()}\n

\n );\n}\n\nfunction mountApp() {\n const root = document.getElementById(\"root\");\n if (root) {\n createRoot(root).render();\n } else {\n console.error(\"Root element not found\");\n }\n}\n\nasync function server(request: Request): Promise {\n return new Response(`\n \n \n Snake Game and Chat\n \n \n

\n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" },\n });\n}\n\nexport default server;\nexport { mountApp };","deleted","label",[98],"permalink","https://www.val.town/x/veddevv/snakeclone/code/main.tsx","extension","actionData","errors"]