/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; type Difficulty = "easy" | "medium" | "hard"; type Player = "X" | "O"; type Board = (Player | null)[]; type MiniBoard = Board; function calculateWinner(board: Board): Player | null { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; for (const [a, b, c] of lines) { if (board[a] && board[a] === board[b] && board[a] === board[c]) { return board[a]; } } return null; } function MiniBoard({ board, onCellClick, disabled }: { board: MiniBoard, onCellClick: (index: number) => void, disabled?: boolean }) { const winner = calculateWinner(board); return (

{board.map((cell, index) => ( ))} {winner &&

{winner}

}

); } function App() { const [metaBoard, setMetaBoard] = useState<(Player | null)[]>(Array(9).fill(null)); const [miniBoardStates, setMiniBoardStates] = useState( Array(9).fill(null).map(() => Array(9).fill(null)) ); const [xIsNext, setXIsNext] = useState(true); const [difficulty, setDifficulty] = useState("medium"); const [gameStatus, setGameStatus] = useState("Start Game"); const [currentMiniBoard, setCurrentMiniBoard] = useState(null); const [isAIThinking, setIsAIThinking] = useState(false); useEffect(() => { const metaWinner = calculateWinner(metaBoard); if (metaWinner) { setGameStatus(`Meta Winner: ${metaWinner} 🏆`); } else if (metaBoard.every(cell => cell !== null)) { setGameStatus("Meta Draw! 🤝"); } else if (!xIsNext) { makeAIMove(); } }, [xIsNext, metaBoard]); async function makeAIMove() { setIsAIThinking(true); try { const response = await fetch("/ai-move", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ metaBoard, miniBoardStates, currentMiniBoard, difficulty }) }); const { miniBoardIndex, cellIndex } = await response.json(); handleMiniMove(miniBoardIndex, cellIndex); } catch (error) { console.error("AI move error:", error); setGameStatus("AI move failed 😱"); } finally { setIsAIThinking(false); } } function handleMiniMove(miniBoardIndex: number, cellIndex: number) { if ( (currentMiniBoard !== null && currentMiniBoard !== miniBoardIndex) || metaBoard[miniBoardIndex] || miniBoardStates[miniBoardIndex][cellIndex] ) return; const newMiniBoardStates = [...miniBoardStates]; const newMiniBoard = [...newMiniBoardStates[miniBoardIndex]]; newMiniBoard[cellIndex] = xIsNext ? "X" : "O"; newMiniBoardStates[miniBoardIndex] = newMiniBoard; const miniWinner = calculateWinner(newMiniBoard); const newMetaBoard = [...metaBoard]; if (miniWinner) { newMetaBoard[miniBoardIndex] = miniWinner; } setMiniBoardStates(newMiniBoardStates); setMetaBoard(newMetaBoard); setXIsNext(!xIsNext); // Determine next allowed mini board const nextAllowedBoard = calculateNextAllowedBoard(cellIndex); setCurrentMiniBoard(nextAllowedBoard); } function calculateNextAllowedBoard(lastMoveCellIndex: number): number | null { // If the corresponding mini board is already won or full, allow any open board if (metaBoard[lastMoveCellIndex] || miniBoardStates[lastMoveCellIndex].every(cell => cell !== null)) { const openBoards = metaBoard.reduce((acc, cell, index) => cell === null ? [...acc, index] : acc, [] as number[]); return openBoards.length > 0 ? openBoards[0] : null; } return lastMoveCellIndex; } function resetGame() { setMetaBoard(Array(9).fill(null)); setMiniBoardStates(Array(9).fill(null).map(() => Array(9).fill(null))); setXIsNext(true); setGameStatus("Start Game"); setCurrentMiniBoard(null); } return (

Meta Tic Tac Toe 🎲

{["easy", "medium", "hard"].map(diff => ( ))}

{isAIThinking ? "AI is thinking... 🤔" : gameStatus}

{miniBoardStates.map((miniBoard, index) => ( handleMiniMove(index, cellIndex)} disabled={ (currentMiniBoard !== null && currentMiniBoard !== index) || !!metaBoard[index] || !xIsNext || isAIThinking } /> ))}

{metaBoard.map((winner, index) => winner && (

{winner}

))}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/ai-move") { const { metaBoard, miniBoardStates, currentMiniBoard, difficulty } = await request.json(); const aiMove = await calculateAIMove( metaBoard, miniBoardStates, currentMiniBoard, difficulty ); return new Response(JSON.stringify(aiMove), { headers: { "Content-Type": "application/json" } }); } return new Response(` Meta Tic Tac Toe

`, { headers: { "Content-Type": "text/html" } }); } function calculateWinningMoves(board: Board): number[] { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; const winningMoves: number[] = []; for (const [a, b, c] of lines) { if (board[a] === board[b] && board[a] !== null && board[c] === null) winningMoves.push(c); if (board[a] === board[c] && board[a] !== null && board[b] === null) winningMoves.push(b); if (board[b] === board[c] && board[b] !== null && board[a] === null) winningMoves.push(a); } return winningMoves; } async function calculateAIMove( metaBoard: Board, miniBoardStates: MiniBoard[], currentMiniBoard: number | null, difficulty: Difficulty ): Promise<{ miniBoardIndex: number, cellIndex: number }> { // Determine available mini boards const availableMetaBoards = metaBoard.reduce((acc, cell, index) => cell === null ? [...acc, index] : acc, [] as number[]); // If a specific mini board is required const allowedBoards = currentMiniBoard !== null ? [currentMiniBoard] : availableMetaBoards; // Possible moves tracking const possibleMoves: { miniBoardIndex: number, cellIndex: number }[] = []; for (const miniBoardIndex of allowedBoards) { const miniBoard = miniBoardStates[miniBoardIndex]; const availableCells = miniBoard.reduce((acc, cell, index) => cell === null ? [...acc, index] : acc, [] as number[]); possibleMoves.push( ...availableCells.map(cellIndex => ({ miniBoardIndex, cellIndex })) ); } // Difficulty-based move selection switch (difficulty) { case "easy": return possibleMoves[Math.floor(Math.random() * possibleMoves.length)]; case "medium": // 70% smart move, 30% random if (Math.random() < 0.7) { // Try to win or block for (const move of possibleMoves) { const newBoard = [...miniBoardStates[move.miniBoardIndex]]; newBoard[move.cellIndex] = "O"; if (calculateWinner(newBoard)) return move; } for (const move of possibleMoves) { const newBoard = [...miniBoardStates[move.miniBoardIndex]]; newBoard[move.cellIndex] = "X"; if (calculateWinner(newBoard)) return move; } } return possibleMoves[Math.floor(Math.random() * possibleMoves.length)]; case "hard": // Minimax-like strategic selection let bestMove = possibleMoves[0]; let bestScore = -Infinity; for (const move of possibleMoves) { const newMiniBoardStates = [...miniBoardStates]; const newMiniBoard = [...newMiniBoardStates[move.miniBoardIndex]]; newMiniBoard[move.cellIndex] = "O"; newMiniBoardStates[move.miniBoardIndex] = newMiniBoard; const miniWinner = calculateWinner(newMiniBoard); const score = miniWinner ? 10 : calculateWinningMoves(newMiniBoard).length; if (score > bestScore) { bestScore = score; bestMove = move; } } return bestMove; } } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; } .game-container { text-align: center; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); position: relative; } .meta-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; } .mini-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background-color: #e0e0e0; position: relative; } .mini-cell { aspect-ratio: 1; background-color: white; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; transition: background-color 0.3s; } .mini-cell:hover:not(:disabled) { background-color: #f0f0f0; } .mini-cell:disabled { cursor: not-allowed; opacity: 0.5; } .mini-board.disabled { opacity: 0.5; pointer-events: none; } .mini-board-winner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; color: rgba(0,0,0,0.2); } .mini-board.winner-X .mini-board-winner, .meta-board-overlay .meta-winner-X { color: blue; } .mini-board.winner-O .mini-board-winner, .meta-board-overlay .meta-winner-O { color: red; } .meta-board-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); pointer-events: none; } .meta-board-cell { display: flex; justify-content: center; align-items: center; font-size: 72px; opacity: 0.2; } .difficulty-selector { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; } .difficulty-selector button { padding: 5px 10px; background-color: #f0f0f0; border: none; cursor: pointer; } .difficulty-selector button.active { background-color: #4CAF50; color: white; } .reset-btn { margin-top: 15px; padding: 10px 20px; background-color: #2196F3; color: white; border: none; cursor: pointer; } .source-link { display: block; margin-top: 15px; color: #666; text-decoration: none; } `;

xoGameWithDifficultyLevels