/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { renderToString } from "https://esm.sh/react-dom/server"; // Hexagon component const Hexagon = ({ x, y, size, fill, onClick, isEdge }) => { const points = []; for (let i = 0; i < 6; i++) { const angle = (Math.PI / 3) * i; points.push(`${x + size * Math.cos(angle)},${y + size * Math.sin(angle)}`); } return ( ); }; // Game component function Game() { const gridSize = 5; // This creates a grid with 61 hexagons const hexSize = 30; const [grid, setGrid] = useState([]); const [catPosition, setCatPosition] = useState(null); const [gameStatus, setGameStatus] = useState("playing"); // Initialize grid const initializeGame = () => { const newGrid = []; for (let q = -gridSize; q <= gridSize; q++) { for (let r = Math.max(-gridSize, -q - gridSize); r <= Math.min(gridSize, -q + gridSize); r++) { const s = -q - r; const isEdge = Math.abs(q) === gridSize || Math.abs(r) === gridSize || Math.abs(s) === gridSize; newGrid.push({ q, r, s, state: "empty", isEdge }); } } setGrid(newGrid); const centerHex = newGrid.find(h => h.q === 0 && h.r === 0 && h.s === 0); setCatPosition(centerHex); setGameStatus("playing"); }; useEffect(initializeGame, []); // Convert cube coordinates to pixel coordinates const cubeToPixel = (q, r) => { const x = hexSize * (3/2 * q); const y = hexSize * (Math.sqrt(3)/2 * q + Math.sqrt(3) * r); return { x, y }; }; // Check if the cat can escape const checkCatEscape = () => { return catPosition && catPosition.isEdge; }; // Move the cat const moveCat = () => { if (gameStatus !== "playing") return; const neighbors = [ { q: 1, r: 0, s: -1 }, { q: 1, r: -1, s: 0 }, { q: 0, r: -1, s: 1 }, { q: -1, r: 0, s: 1 }, { q: -1, r: 1, s: 0 }, { q: 0, r: 1, s: -1 } ]; const possibleMoves = neighbors .map(n => ({ q: catPosition.q + n.q, r: catPosition.r + n.r, s: catPosition.s + n.s })) .filter(pos => { const hex = grid.find(h => h.q === pos.q && h.r === pos.r && h.s === pos.s); return hex && hex.state === "empty"; }); if (possibleMoves.length === 0) { setGameStatus("playerWin"); return; } // Find the move closest to an edge const newPos = possibleMoves.reduce((closest, move) => { const closestEdgeDist = Math.min( gridSize - Math.abs(closest.q), gridSize - Math.abs(closest.r), gridSize - Math.abs(closest.s) ); const moveDist = Math.min( gridSize - Math.abs(move.q), gridSize - Math.abs(move.r), gridSize - Math.abs(move.s) ); return moveDist < closestEdgeDist ? move : closest; }); const newCatPosition = grid.find(h => h.q === newPos.q && h.r === newPos.r && h.s === newPos.s); setCatPosition(newCatPosition); if (checkCatEscape()) { setGameStatus("catWin"); } }; // Handle hex click const handleHexClick = (hex) => { if (gameStatus !== "playing" || hex.state !== "empty") return; if (hex.q === catPosition.q && hex.r === catPosition.r && hex.s === catPosition.s) return; // Prevent blocking the cat's current position setGrid(prevGrid => { const newGrid = prevGrid.map(h => h.q === hex.q && h.r === hex.r && h.s === hex.s ? { ...h, state: "blocked" } : h ); return newGrid; }); setTimeout(moveCat, 300); }; return (

Trap the Cat!

{gameStatus === "playerWin" &&

You Win! The cat is trapped.

} {gameStatus === "catWin" &&

The cat escaped! You lose.

} {gameStatus === "playing" &&

Click on hexagons to block the cat's path!

} {gameStatus !== "playing" && ( )}

); } // Client-side rendering function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } // Server-side code async function server(request: Request): Promise { return new Response( renderToString( Trap the Cat Game

), { headers: { "Content-Type": "text/html", }, } ); } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } #root { background-color: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } h1 { color: #333; } `; const retryButtonStyle = { padding: '10px 20px', fontSize: '16px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginTop: '20px', }; export default server;

valenchiaga