[{"_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","69aa8f2d3b0081918de24f985f7b1c28","versionInt","title","Marble Glass 3d Chess Game","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { motion } from \"framer-motion\";\nimport { Timer, RotateCcw, Sparkles, Palette, Mountain, Moon, Sun } from \"lucide-react\";\n\nconst files = [\"a\", \"b\", \"c\", \"d\", \"e\", \"f\", \"g\", \"h\"];\nconst ranks = [8, 7, 6, 5, 4, 3, 2, 1];\n\nconst PIECES = {\n wp: \"♙\",\n wr: \"♖\",\n wn: \"♘\",\n wb: \"♗\",\n wq: \"♕\",\n wk: \"♔\",\n bp: \"♟\",\n br: \"♜\",\n bn: \"♞\",\n bb: \"♝\",\n bq: \"♛\",\n bk: \"♚\",\n};\n\nconst THEMES = {\n marble: {\n name: \"Marble + Glass\",\n light: \"linear-gradient(145deg, rgba(255,255,255,0.95), rgba(214,224,235,0.88))\",\n dark: \"linear-gradient(145deg, rgba(102,114,138,0.95), rgba(57,66,83,0.95))\",\n boardGlow: \"0 30px 80px rgba(130,170,255,0.18)\",\n accent: \"rgba(190, 225, 255, 0.65)\",\n pieceWhite: \"linear-gradient(180deg, #ffffff, #d7e4f2)\",\n pieceBlack: \"linear-gradient(180deg, #535d70, #1f2530)\",\n },\n obsidian: {\n name: \"Obsidian Luxe\",\n light: \"linear-gradient(145deg, rgba(238,232,224,0.96), rgba(206,196,187,0.9))\",\n dark: \"linear-gradient(145deg, rgba(28,31,39,0.98), rgba(7,10,16,0.98))\",\n boardGlow: \"0 30px 80px rgba(255,201,107,0.16)\",\n accent: \"rgba(255, 216, 138, 0.45)\",\n pieceWhite: \"linear-gradient(180deg, #f9f3ec, #cabfb3)\",\n pieceBlack: \"linear-gradient(180deg, #313744, #0d1017)\",\n },\n jade: {\n name: \"Jade Palace\",\n light: \"linear-gradient(145deg, rgba(227,248,239,0.95), rgba(182,221,206,0.92))\",\n dark: \"linear-gradient(145deg, rgba(41,90,80,0.98), rgba(18,48,43,0.98))\",\n boardGlow: \"0 30px 80px rgba(63,255,193,0.14)\",\n accent: \"rgba(110, 255, 213, 0.4)\",\n pieceWhite: \"linear-gradient(180deg, #f2fff8, #b9d9cf)\",\n pieceBlack: \"linear-gradient(180deg, #365d58, #173632)\",\n },\n};\n\nconst BACKGROUNDS = {\n aurora: \"radial-gradient(circle at top left, rgba(112,212,255,0.24), transparent 25%), radial-gradient(circle at top right, rgba(186,120,255,0.22), transparent 25%), linear-gradient(180deg, #09111f, #060b14 52%, #02050b)\",\n sunset: \"radial-gradient(circle at top, rgba(255,187,120,0.26), transparent 28%), radial-gradient(circle at 70% 20%, rgba(255,105,180,0.18), transparent 22%), linear-gradient(180deg, #27131d, #14111a 40%, #090b11)\",\n alpine: \"radial-gradient(circle at 50% 0%, rgba(181,239,255,0.18), transparent 24%), linear-gradient(180deg, #0b1a24, #112838 45%, #061018)\",\n};\n\nconst initialBoard = () => {\n const b = {};\n files.forEach((f) => {\n b[`${f}2`] = \"wp\";\n b[`${f}7`] = \"bp\";\n });\n b.a1 = \"wr\"; b.h1 = \"wr\"; b.a8 = \"br\"; b.h8 = \"br\";\n b.b1 = \"wn\"; b.g1 = \"wn\"; b.b8 = \"bn\"; b.g8 = \"bn\";\n b.c1 = \"wb\"; b.f1 = \"wb\"; b.c8 = \"bb\"; b.f8 = \"bb\";\n b.d1 = \"wq\"; b.d8 = \"bq\";\n b.e1 = \"wk\"; b.e8 = \"bk\";\n return b;\n};\n\nconst posToCoords = (square) => ({\n x: files.indexOf(square[0]),\n y: parseInt(square[1], 10) - 1,\n});\n\nconst coordsToPos = (x, y) => `${files[x]}${y + 1}`;\n\nconst inBounds = (x, y) => x >= 0 && x < 8 && y >= 0 && y < 8;\n\nfunction clone(obj) {\n return JSON.parse(JSON.stringify(obj));\n}\n\nfunction rayMoves(board, from, side, deltas) {\n const out = [];\n const { x, y } = posToCoords(from);\n for (const [dx, dy] of deltas) {\n let cx = x + dx;\n let cy = y + dy;\n while (inBounds(cx, cy)) {\n const target = coordsToPos(cx, cy);\n const piece = board[target];\n if (!piece) {\n out.push(target);\n } else {\n if (piece[0] !== side) out.push(target);\n break;\n }\n cx += dx;\n cy += dy;\n }\n }\n return out;\n}\n\nfunction pseudoMoves(board, square, state) {\n const piece = board[square];\n if (!piece) return [];\n const side = piece[0];\n const type = piece[1];\n const { x, y } = posToCoords(square);\n const dir = side === \"w\" ? 1 : -1;\n const moves = [];\n\n if (type === \"p\") {\n const one = coordsToPos(x, y + dir);\n if (inBounds(x, y + dir) && !board[one]) moves.push(one);\n const startRank = side === \"w\" ? 1 : 6;\n const two = coordsToPos(x, y + dir * 2);\n if (y === startRank && !board[one] && !board[two]) moves.push(two);\n for (const dx of [-1, 1]) {\n const cx = x + dx;\n const cy = y + dir;\n if (!inBounds(cx, cy)) continue;\n const target = coordsToPos(cx, cy);\n if (board[target] && board[target][0] !== side) moves.push(target);\n if (state.enPassant === target) moves.push(target);\n }\n }\n\n if (type === \"n\") {\n const deltas = [[1,2],[2,1],[2,-1],[1,-2],[-1,-2],[-2,-1],[-2,1],[-1,2]];\n for (const [dx, dy] of deltas) {\n const cx = x + dx, cy = y + dy;\n if (!inBounds(cx, cy)) continue;\n const target = coordsToPos(cx, cy);\n if (!board[target] || board[target][0] !== side) moves.push(target);\n }\n }\n\n if (type === \"b\") moves.push(...rayMoves(board, square, side, [[1,1],[1,-1],[-1,1],[-1,-1]]));\n if (type === \"r\") moves.push(...rayMoves(board, square, side, [[1,0],[-1,0],[0,1],[0,-1]]));\n if (type === \"q\") moves.push(...rayMoves(board, square, side, [[1,1],[1,-1],[-1,1],[-1,-1],[1,0],[-1,0],[0,1],[0,-1]]));\n\n if (type === \"k\") {\n for (let dx = -1; dx <= 1; dx++) {\n for (let dy = -1; dy <= 1; dy++) {\n if (dx === 0 && dy === 0) continue;\n const cx = x + dx, cy = y + dy;\n if (!inBounds(cx, cy)) continue;\n const target = coordsToPos(cx, cy);\n if (!board[target] || board[target][0] !== side) moves.push(target);\n }\n }\n const rights = state.castling;\n if (side === \"w\" && square === \"e1\") {\n if (rights.wK && !board.f1 && !board.g1) moves.push(\"g1\");\n if (rights.wQ && !board.d1 && !board.c1 && !board.b1) moves.push(\"c1\");\n }\n if (side === \"b\" && square === \"e8\") {\n if (rights.bK && !board.f8 && !board.g8) moves.push(\"g8\");\n if (rights.bQ && !board.d8 && !board.c8 && !board.b8) moves.push(\"c8\");\n }\n }\n\n return moves;\n}\n\nfunction applyMove(board, from, to, state) {\n const next = clone(board);\n const piece = next[from];\n if (!piece) return { board: next, state };\n const side = piece[0];\n const type = piece[1];\n const ns = {\n ...state,\n enPassant: null,\n castling: { ...state.castling },\n };\n\n if (type === \"p\") {\n const { x: fx, y: fy } = posToCoords(from);\n const { x: tx, y: ty } = posToCoords(to);\n if (Math.abs(ty - fy) === 2) {\n ns.enPassant = coordsToPos(fx, fy + (side === \"w\" ? 1 : -1));\n }\n if (tx !== fx && !next[to]) {\n const cap = coordsToPos(tx, ty + (side === \"w\" ? -1 : 1));\n delete next[cap];\n }\n }\n\n if (piece === \"wk\") {\n ns.castling.wK = false; ns.castling.wQ = false;\n if (from === \"e1\" && to === \"g1\") { next.f1 = next.h1; delete next.h1; }\n if (from === \"e1\" && to === \"c1\") { next.d1 = next.a1; delete next.a1; }\n }\n if (piece === \"bk\") {\n ns.castling.bK = false; ns.castling.bQ = false;\n if (from === \"e8\" && to === \"g8\") { next.f8 = next.h8; delete next.h8; }\n if (from === \"e8\" && to === \"c8\") { next.d8 = next.a8; delete next.a8; }\n }\n if (from === \"a1\" || to === \"a1\") ns.castling.wQ = false;\n if (from === \"h1\" || to === \"h1\") ns.castling.wK = false;\n if (from === \"a8\" || to === \"a8\") ns.castling.bQ = false;\n if (from === \"h8\" || to === \"h8\") ns.castling.bK = false;\n\n next[to] = next[from];\n delete next[from];\n\n if (type === \"p\") {\n const promoteRank = side === \"w\" ? \"8\" : \"1\";\n if (to[1] === promoteRank) next[to] = `${side}q`;\n }\n\n return { board: next, state: ns };\n}\n\nfunction isSquareAttacked(board, square, bySide, state) {\n for (const [pos, piece] of Object.entries(board)) {\n if (piece[0] !== bySide) continue;\n const moves = pseudoMoves(board, pos, { ...state, castling: { wK: false, wQ: false, bK: false, bQ: false } });\n if (piece[1] === \"p\") {\n const { x, y } = posToCoords(pos);\n const dir = bySide === \"w\" ? 1 : -1;\n for (const dx of [-1, 1]) {\n const cx = x + dx; const cy = y + dir;\n if (inBounds(cx, cy) && coordsToPos(cx, cy) === square) return true;\n }\n } else if (moves.includes(square)) {\n return true;\n }\n }\n return false;\n}\n\nfunction isInCheck(board, side, state) {\n const kingSquare = Object.keys(board).find((sq) => board[sq] === `${side}k`);\n if (!kingSquare) return false;\n return isSquareAttacked(board, kingSquare, side === \"w\" ? \"b\" : \"w\", state);\n}\n\nfunction legalMoves(board, square, state) {\n const piece = board[square];\n if (!piece) return [];\n const side = piece[0];\n const raw = pseudoMoves(board, square, state);\n const filtered = [];\n for (const target of raw) {\n if (piece[1] === \"k\" && (target === \"g1\" || target === \"c1\" || target === \"g8\" || target === \"c8\")) {\n const enemy = side === \"w\" ? \"b\" : \"w\";\n const path = target[0] === \"g\" ? [square, coordsToPos(posToCoords(square).x + 1, posToCoords(square).y), target] : [square, coordsToPos(posToCoords(square).x - 1, posToCoords(square).y), target];\n if (path.some((sq) => isSquareAttacked(board, sq, enemy, state))) continue;\n }\n const applied = applyMove(board, square, target, state);\n if (!isInCheck(applied.board, side, applied.state)) filtered.push(target);\n }\n return filtered;\n}\n\nfunction hasAnyLegalMove(board, side, state) {\n return Object.keys(board).some((sq) => board[sq][0] === side && legalMoves(board, sq, state).length > 0);\n}\n\nfunction formatTime(seconds) {\n const m = Math.floor(seconds / 60).toString().padStart(2, \"0\");\n const s = (seconds % 60).toString().padStart(2, \"0\");\n return `${m}:${s}`;\n}\n\nexport default function MarbleGlassChess() {\n const [board, setBoard] = useState(initialBoard());\n const [turn, setTurn] = useState(\"w\");\n const [selected, setSelected] = useState(null);\n const [status, setStatus] = useState(\"White to move\");\n const [validTargets, setValidTargets] = useState([]);\n const [theme, setTheme] = useState(\"marble\");\n const [background, setBackground] = useState(\"aurora\");\n const [boardTilt, setBoardTilt] = useState([56]);\n const [state, setState] = useState({\n castling: { wK: true, wQ: true, bK: true, bQ: true },\n enPassant: null,\n });\n const [timers, setTimers] = useState({ w: 600, b: 600 });\n const [running, setRunning] = useState(true);\n const [winner, setWinner] = useState(null);\n const tickRef = useRef(null);\n const current = THEMES[theme];\n\n useEffect(() => {\n if (winner || !running) return;\n tickRef.current = setInterval(() => {\n setTimers((prev) => {\n const next = { ...prev, [turn]: Math.max(0, prev[turn] - 1) };\n if (next[turn] === 0) {\n setWinner(turn === \"w\" ? \"Black wins on time\" : \"White wins on time\");\n setStatus(turn === \"w\" ? \"Black wins on time\" : \"White wins on time\");\n setRunning(false);\n }\n return next;\n });\n }, 1000);\n return () => clearInterval(tickRef.current);\n }, [turn, running, winner]);\n\n const resetGame = () => {\n setBoard(initialBoard());\n setTurn(\"w\");\n setSelected(null);\n setValidTargets([]);\n setState({ castling: { wK: true, wQ: true, bK: true, bQ: true }, enPassant: null });\n setTimers({ w: 600, b: 600 });\n setWinner(null);\n setRunning(true);\n setStatus(\"White to move\");\n };\n\n const movePiece = (from, to) => {\n const applied = applyMove(board, from, to, state);\n const nextTurn = turn === \"w\" ? \"b\" : \"w\";\n setBoard(applied.board);\n setState(applied.state);\n setTurn(nextTurn);\n setSelected(null);\n setValidTargets([]);\n\n const check = isInCheck(applied.board, nextTurn, applied.state);\n const legal = hasAnyLegalMove(applied.board, nextTurn, applied.state);\n\n if (!legal && check) {\n const msg = `${turn === \"w\" ? \"White\" : \"Black\"} wins by checkmate`;\n setStatus(msg);\n setWinner(msg);\n setRunning(false);\n return;\n }\n if (!legal && !check) {\n setStatus(\"Draw by stalemate\");\n setWinner(\"Draw by stalemate\");\n setRunning(false);\n return;\n }\n if (check) {\n setStatus(`${nextTurn === \"w\" ? \"White\" : \"Black\"} is in check`);\n } else {\n setStatus(`${nextTurn === \"w\" ? \"White\" : \"Black\"} to move`);\n }\n };\n\n const clickSquare = (square) => {\n if (winner) return;\n const piece = board[square];\n if (selected && validTargets.includes(square)) {\n movePiece(selected, square);\n return;\n }\n if (piece && piece[0] === turn) {\n setSelected(square);\n setValidTargets(legalMoves(board, square, state));\n } else {\n setSelected(null);\n setValidTargets([]);\n }\n };\n\n const boardArray = useMemo(() => {\n const out = [];\n for (let r = 0; r < 8; r++) {\n for (let c = 0; c < 8; c++) {\n const square = `${files[c]}${8 - r}`;\n const dark = (r + c) % 2 === 1;\n out.push({ square, dark, piece: board[square] || null, file: files[c], rank: 8 - r });\n }\n }\n return out;\n }, [board]);\n\n return (\n \n

\n\n

\n \n \n \n

Luxury 3D Chess

Marble, glass, lighting, and playable moves

\n {winner || status}\n

\n \n \n\n \n \n

White

{formatTime(timers.w)}

Black

{formatTime(timers.b)}

\n \n \n

\n \n \n \n\n

\n \n

\n \n \n {boardArray.map(({ square, dark, piece, file, rank }) => {\n const isSelected = selected === square;\n const isTarget = validTargets.includes(square);\n return (\n clickSquare(square)}\n className=\"group relative aspect-square outline-none\"\n title={square}\n >\n \n\n {isTarget && (\n

\n )}\n\n {piece && (\n \n \n {PIECES[piece]}\n

\n \n )}\n\n

{rank === 1 ? file : \"\"}

{file === \"a\" ? rank : \"\"}

\n \n );\n })}\n

\n \n\n

\n \n \n

Chess design

\n \n\n

Background

\n \n\n

\n Board tilt\n {boardTilt[0]}°\n

\n \n

\n \n \n\n \n \n

Game details

\n Click one of your pieces to highlight legal moves, then click a glowing target square to move it.\n Castling, en passant, pawn promotion to queen, check, checkmate, stalemate, and a live timer are supported.\n

\n 3 visual themes\n 3 backgrounds\n 10 min timers\n Playable now\n

\n \n \n\n \n \n

Lighting mood

\n \n \n \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","13380456451926870666","traceTime",1777680495702]