[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","67d6efeb14708191ab59fca1a72090d4","versionInt","title","Tic Tac Toe","type","code/react","content","import { useState, useEffect } from \"react\";\n\nconst TicTacToe = () => {\n const [board, setBoard] = useState(Array(9).fill(null));\n const [isXNext, setIsXNext] = useState(true);\n\n const checkWinner = (squares) => {\n const lines = [\n [0, 1, 2], [3, 4, 5], [6, 7, 8],\n [0, 3, 6], [1, 4, 7], [2, 5, 8],\n [0, 4, 8], [2, 4, 6]\n ];\n for (let line of lines) {\n const [a, b, c] = line;\n if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {\n return squares[a];\n }\n }\n return null;\n };\n\n const getAvailableMoves = (squares) => {\n return squares.map((val, idx) => (val === null ? idx : null)).filter(idx => idx !== null);\n };\n\n const minimax = (newBoard, isMaximizing) => {\n const winner = checkWinner(newBoard);\n if (winner === \"X\") return -10;\n if (winner === \"O\") return 10;\n if (!newBoard.includes(null)) return 0;\n\n if (isMaximizing) {\n let bestScore = -Infinity;\n for (let move of getAvailableMoves(newBoard)) {\n newBoard[move] = \"O\";\n let score = minimax(newBoard, false);\n newBoard[move] = null;\n bestScore = Math.max(score, bestScore);\n }\n return bestScore;\n } else {\n let bestScore = Infinity;\n for (let move of getAvailableMoves(newBoard)) {\n newBoard[move] = \"X\";\n let score = minimax(newBoard, true);\n newBoard[move] = null;\n bestScore = Math.min(score, bestScore);\n }\n return bestScore;\n }\n };\n\n const bestMove = () => {\n let bestScore = -Infinity;\n let move = null;\n for (let idx of getAvailableMoves(board)) {\n const newBoard = board.slice();\n newBoard[idx] = \"O\";\n let score = minimax(newBoard, false);\n if (score > bestScore) {\n bestScore = score;\n move = idx;\n }\n }\n return move;\n };\n\n const handleClick = (index) => {\n if (board[index] || checkWinner(board)) return;\n const newBoard = board.slice();\n newBoard[index] = \"X\";\n setBoard(newBoard);\n setIsXNext(false);\n };\n\n useEffect(() => {\n if (!isXNext && !checkWinner(board)) {\n setTimeout(() => {\n const move = bestMove();\n if (move !== null) {\n const newBoard = board.slice();\n newBoard[move] = \"O\";\n setBoard(newBoard);\n setIsXNext(true);\n }\n }, 500);\n }\n }, [isXNext, board]);\n\n const winner = checkWinner(board);\n const status = winner ? `Winner: ${winner}` : `Next player: ${isXNext ? \"X\" : \"O\"}`;\n\n return (\n

Tic-Tac-Toe

\n {board.map((value, index) => (\n isXNext && handleClick(index)}\n className=\"w-16 h-16 flex items-center justify-center text-2xl font-bold border border-gray-500\"\n disabled={value !== null}\n >\n {value}\n \n ))}\n

{status}

\n {\n setBoard(Array(9).fill(null));\n setIsXNext(true);\n }}\n className=\"mt-4 px-4 py-2 bg-blue-500 text-white rounded\"\n >\n Reset Game\n \n

\n );\n};\n\nexport default TicTacToe;\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","13337256309032298870","traceTime",1780065498698]