[{"_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","6a0c77fa72988191955c8c91d23b3396","versionInt","title","Xadrez 3d Personalizado React","type","code/react","content","import React, { useEffect, useMemo, useState } from 'react';\nimport { Chess } from 'chess.js';\nimport { motion } from 'framer-motion';\nimport { Crown, Timer, Trophy, Users, Bot, RotateCcw } from 'lucide-react';\n\nconst pieces = {\n p: 'https://upload.wikimedia.org/wikipedia/commons/c/c7/Chess_pdt45.svg',\n r: 'https://upload.wikimedia.org/wikipedia/commons/f/ff/Chess_rdt45.svg',\n n: 'https://upload.wikimedia.org/wikipedia/commons/e/ef/Chess_ndt45.svg',\n b: 'https://upload.wikimedia.org/wikipedia/commons/9/98/Chess_bdt45.svg',\n q: 'https://upload.wikimedia.org/wikipedia/commons/4/47/Chess_qdt45.svg',\n k: 'https://upload.wikimedia.org/wikipedia/commons/f/f0/Chess_kdt45.svg',\n P: 'https://upload.wikimedia.org/wikipedia/commons/4/45/Chess_plt45.svg',\n R: 'https://upload.wikimedia.org/wikipedia/commons/7/72/Chess_rlt45.svg',\n N: 'https://upload.wikimedia.org/wikipedia/commons/7/70/Chess_nlt45.svg',\n B: 'https://upload.wikimedia.org/wikipedia/commons/b/b1/Chess_blt45.svg',\n Q: 'https://upload.wikimedia.org/wikipedia/commons/1/15/Chess_qlt45.svg',\n K: 'https://upload.wikimedia.org/wikipedia/commons/4/42/Chess_klt45.svg',\n};\n\nconst INITIAL_TIME = 300;\n\nconst pieceValue = {\n p: 1,\n n: 3,\n b: 3,\n r: 5,\n q: 9,\n k: 20,\n};\n\nexport default function Xadrez3D() {\n const [game] = useState(() => new Chess());\n const [board, setBoard] = useState(game.board());\n const [selected, setSelected] = useState(null);\n const [moves, setMoves] = useState([]);\n const [mode, setMode] = useState('cpu');\n const [winner, setWinner] = useState(null);\n const [whiteTime, setWhiteTime] = useState(INITIAL_TIME);\n const [blackTime, setBlackTime] = useState(INITIAL_TIME);\n const [whitePoints, setWhitePoints] = useState(0);\n const [blackPoints, setBlackPoints] = useState(0);\n const [whitePlayerName, setWhitePlayerName] = useState('Jogador 1');\n const [blackPlayerName, setBlackPlayerName] = useState('Jogador 2');\n\n const currentTurn = game.turn();\n\n const syncBoard = () => {\n setBoard(game.board());\n\n if (game.isCheckmate()) {\n setWinner(game.turn() === 'w' ? 'Pretas' : 'Brancas');\n } else if (game.isDraw()) {\n setWinner('Empate');\n }\n };\n\n useEffect(() => {\n if (winner) return;\n\n const interval = setInterval(() => {\n if (game.turn() === 'w') {\n setWhiteTime((prev) => {\n if (prev <= 1) {\n setWinner('Pretas');\n return 0;\n }\n return prev - 1;\n });\n } else {\n setBlackTime((prev) => {\n if (prev <= 1) {\n setWinner('Brancas');\n return 0;\n }\n return prev - 1;\n });\n }\n }, 1000);\n\n return () => clearInterval(interval);\n }, [winner, game, board]);\n\n useEffect(() => {\n if (mode !== 'cpu') return;\n if (winner) return;\n if (game.turn() !== 'b') return;\n\n const timeout = setTimeout(() => {\n cpuMove();\n }, 600);\n\n return () => clearTimeout(timeout);\n }, [board, mode, winner]);\n\n const formatTime = (seconds) => {\n const minutes = Math.floor(seconds / 60);\n const secs = seconds % 60;\n return `${minutes}:${secs.toString().padStart(2, '0')}`;\n };\n\n const resetGame = () => {\n game.reset();\n setSelected(null);\n setMoves([]);\n setWinner(null);\n setWhiteTime(INITIAL_TIME);\n setBlackTime(INITIAL_TIME);\n setWhitePoints(0);\n setBlackPoints(0);\n syncBoard();\n };\n\n const addPoints = (captured, color) => {\n const value = pieceValue[captured] || 0;\n\n if (color === 'w') {\n setWhitePoints((prev) => prev + value);\n } else {\n setBlackPoints((prev) => prev + value);\n }\n };\n\n const cpuMove = () => {\n const possibleMoves = game.moves({ verbose: true });\n\n if (!possibleMoves.length) return;\n\n let bestMove = possibleMoves[0];\n let bestScore = -999;\n\n possibleMoves.forEach((move) => {\n let score = 0;\n\n if (move.captured) {\n score += pieceValue[move.captured] || 0;\n }\n\n if (move.flags.includes('c')) {\n score += 2;\n }\n\n if (score > bestScore) {\n bestScore = score;\n bestMove = move;\n }\n });\n\n try {\n const result = game.move(bestMove);\n\n if (result?.captured) {\n addPoints(result.captured, result.color);\n }\n\n setSelected(null);\n setMoves([]);\n syncBoard();\n } catch (error) {\n console.error('Erro no movimento da CPU:', error);\n }\n };\n\n const getSquareName = (row, col) => {\n return `${String.fromCharCode(97 + col)}${8 - row}`;\n };\n\n const handleSquareClick = (rowIndex, colIndex) => {\n if (winner) return;\n\n const square = getSquareName(rowIndex, colIndex);\n const clickedPiece = game.get(square);\n\n // Seleciona peça do jogador atual\n if (!selected) {\n if (clickedPiece && clickedPiece.color === game.turn()) {\n setSelected(square);\n\n const legalMoves = game.moves({\n square,\n verbose: true,\n });\n\n setMoves(legalMoves.map((move) => move.to));\n }\n\n return;\n }\n\n // Troca seleção para outra peça da mesma cor\n if (clickedPiece && clickedPiece.color === game.turn()) {\n setSelected(square);\n\n const legalMoves = game.moves({\n square,\n verbose: true,\n });\n\n setMoves(legalMoves.map((move) => move.to));\n return;\n }\n\n // Impede movimentos inválidos antes do game.move()\n if (!moves.includes(square)) {\n setSelected(null);\n setMoves([]);\n return;\n }\n\n try {\n const moveResult = game.move({\n from: selected,\n to: square,\n promotion: 'q',\n });\n\n if (moveResult?.captured) {\n addPoints(moveResult.captured, moveResult.color);\n }\n\n setSelected(null);\n setMoves([]);\n syncBoard();\n } catch (error) {\n console.error('Movimento inválido:', error);\n setSelected(null);\n setMoves([]);\n }\n };\n\n const board3D = useMemo(() => {\n return (\n \n {board.map((row, rowIndex) =>\n row.map((square, colIndex) => {\n const coord = getSquareName(rowIndex, colIndex);\n const isDark = (rowIndex + colIndex) % 2 === 1;\n const isSelected = selected === coord;\n const isMove = moves.includes(coord);\n\n return (\n handleSquareClick(rowIndex, colIndex)}\n className={`\n relative\n w-16 h-16 md:w-20 md:h-20\n flex items-center justify-center\n text-4xl md:text-5xl\n transition-all duration-150\n ${isDark ? 'bg-[#769656]' : 'bg-[#eeeed2]'}\n `}\n >\n {isSelected && (\n

\n )}\n\n {isMove && (\n

\n )}\n\n {square && (\n \n )}\n \n );\n })\n )}\n

\n );\n }, [board, selected, moves]);\n\n return (\n

\n \n Xadrez 3D\n

\n\n

\n Professor Giovani - 2026\n

\n\n

\n Jogue contra o computador ou desafie um amigo.\n

\n\n

\n setMode('cpu')}\n className={`px-5 py-3 rounded-2xl font-bold flex items-center gap-2 transition-all ${\n mode === 'cpu'\n ? 'bg-cyan-500 text-black'\n : 'bg-zinc-800 hover:bg-zinc-700'\n }`}\n >\n \n CPU\n \n\n setMode('friend')}\n className={`px-5 py-3 rounded-2xl font-bold flex items-center gap-2 transition-all ${\n mode === 'friend'\n ? 'bg-white text-black border border-black'\n : 'bg-white text-black border border-black hover:bg-zinc-100'\n }`}\n >\n \n 2 Jogadores\n \n\n \n \n Reiniciar\n \n

\n\n {mode === 'friend' && (\n

\n Nome dos Jogadores\n

\n\n

\n \n Jogador das Brancas\n \n setWhitePlayerName(e.target.value)}\n placeholder=\"Digite o nome\"\n className=\"w-full border border-[#8b5a2b] rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-[#8b5a2b]\"\n />\n

\n\n

\n \n Jogador das Pretas\n \n setBlackPlayerName(e.target.value)}\n placeholder=\"Digite o nome\"\n className=\"w-full border border-[#8b5a2b] rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-[#8b5a2b]\"\n />\n

\n )}\n\n

\n \n

Tempo

\n\n

\n ♔ {mode === 'friend' ? whitePlayerName : 'Brancas'}\n \n {formatTime(whiteTime)}\n \n

\n\n

\n ♚ {mode === 'friend' ? blackPlayerName : 'Pretas'}\n \n {formatTime(blackTime)}\n \n

\n\n

\n \n

Pontuação

\n\n

\n {mode === 'friend' ? whitePlayerName : 'Brancas'}\n {whitePoints}\n

\n\n

\n {mode === 'friend' ? blackPlayerName : 'Pretas'}\n {blackPoints}\n

\n\n

O jogador da vez!

\n {currentTurn === 'w'\n ? `♔ ${mode === 'friend' ? whitePlayerName : 'Brancas'}`\n : `♚ ${mode === 'friend' ? blackPlayerName : 'Pretas'}`}\n

\n\n

\n {board3D}\n\n {winner && (\n \n

\n Fim da Partida\n

\n\n

\n {winner === 'Empate'\n ? 'A partida terminou empatada.'\n : `${winner} venceram!`}\n

\n \n )}\n

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