91:I[903690,["/chat-static/_next/static/immutable/chunks/10wpt-vzxn5i1.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/0wp9iyt7gqj9c.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/3su8b9kn4mbaa.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/179p_vj82jpro.js","/chat-static/_next/static/immutable/chunks/2d_83taslaz9s.js","/chat-static/_next/static/immutable/chunks/1r_xlti2nupgd.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/0v6za4mu6mmch.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/2s3rmbgvk5alc.js","/chat-static/_next/static/immutable/chunks/2ihe2cde8-h-m.js","/chat-static/_next/static/immutable/chunks/34pqinj9axzi3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2aqaq-qj4jd04.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/2wi4f19gpmjmu.js","/chat-static/_next/static/immutable/chunks/3f0qksrmwbx5_.js","/chat-static/_next/static/immutable/chunks/2p_xpxyq5ao8y.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/2i-ulz8g4wtdk.js"],"ExplicitChatIdProvider"] 92:I[838238,["/chat-static/_next/static/immutable/chunks/10wpt-vzxn5i1.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/0wp9iyt7gqj9c.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/3su8b9kn4mbaa.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/179p_vj82jpro.js","/chat-static/_next/static/immutable/chunks/2d_83taslaz9s.js","/chat-static/_next/static/immutable/chunks/1r_xlti2nupgd.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/0v6za4mu6mmch.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/2s3rmbgvk5alc.js","/chat-static/_next/static/immutable/chunks/2ihe2cde8-h-m.js","/chat-static/_next/static/immutable/chunks/34pqinj9axzi3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2aqaq-qj4jd04.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/2wi4f19gpmjmu.js","/chat-static/_next/static/immutable/chunks/3f0qksrmwbx5_.js","/chat-static/_next/static/immutable/chunks/2p_xpxyq5ao8y.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/2i-ulz8g4wtdk.js"],"SWRDataProvider"] 93:T7ee8,[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Chess game elegant theme with warm wood tones and rich blacks */ --background: oklch(0.98 0.005 90); --foreground: oklch(0.15 0.01 90); --card: oklch(0.99 0 0); --card-foreground: oklch(0.15 0.01 90); --popover: oklch(0.99 0 0); --popover-foreground: oklch(0.15 0.01 90); --primary: oklch(0.35 0.08 60); --primary-foreground: oklch(0.98 0.005 90); --secondary: oklch(0.92 0.01 80); --secondary-foreground: oklch(0.15 0.01 90); --muted: oklch(0.94 0.005 90); --muted-foreground: oklch(0.5 0.01 90); --accent: oklch(0.55 0.12 45); --accent-foreground: oklch(0.98 0.005 90); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0.005 90); --border: oklch(0.88 0.01 90); --input: oklch(0.88 0.01 90); --ring: oklch(0.55 0.12 45); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.12 0.01 90); --foreground: oklch(0.95 0.005 90); --card: oklch(0.15 0.01 90); --card-foreground: oklch(0.95 0.005 90); --popover: oklch(0.15 0.01 90); --popover-foreground: oklch(0.95 0.005 90); --primary: oklch(0.65 0.12 50); --primary-foreground: oklch(0.12 0.01 90); --secondary: oklch(0.25 0.02 90); --secondary-foreground: oklch(0.95 0.005 90); --muted: oklch(0.22 0.01 90); --muted-foreground: oklch(0.6 0.01 90); --accent: oklch(0.6 0.15 45); --accent-foreground: oklch(0.12 0.01 90); --destructive: oklch(0.55 0.2 27); --destructive-foreground: oklch(0.95 0.005 90); --border: oklch(0.25 0.02 90); --input: oklch(0.25 0.02 90); --ring: oklch(0.6 0.15 45); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import ChessGame from "@/components/chess-game" export default function Home() { return (

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "chess.js": "1.4.0", "chessboardjs": "0.0.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="lib/translations.ts" export const translations = { es: { title: "Juego de Ajedrez", subtitle: "Partida clásica con chess.js", white: "Blancas", black: "Negras", turn: "Turno", check: "¡Jaque!", checkmate: "¡Jaque mate!", draw: "Empate - Tablas", stalemate: "Empate - Ahogado", threefold: "Empate - Triple repetición", insufficient: "Empate - Material insuficiente", timeout: "¡Tiempo agotado!", wins: "ganan", gameOver: "¡Juego Terminado!", winner: "Ganador", gameStatus: "Estado del Juego", offerDraw: "Ofrecer Tablas", resign: "Rendirse", newGame: "Nueva Partida", moveHistory: "Historial de Movimientos", noMoves: "No hay movimientos aún", capturedPieces: "Piezas capturadas", offeredDraw: "ofrece tablas", accept: "Aceptar", decline: "Rechazar", resignedBy: "se rinde", agreedDraw: "Aceptado por ambos jugadores", language: "Idioma", theme: "Tema", light: "Claro", dark: "Oscuro", }, en: { title: "Chess Game", subtitle: "Classic game with chess.js", white: "White", black: "Black", turn: "Turn", check: "Check!", checkmate: "Checkmate!", draw: "Draw - Stalemate", stalemate: "Draw - Stalemate", threefold: "Draw - Threefold repetition", insufficient: "Draw - Insufficient material", timeout: "Time out!", wins: "wins", gameOver: "Game Over!", winner: "Winner", gameStatus: "Game Status", offerDraw: "Offer Draw", resign: "Resign", newGame: "New Game", moveHistory: "Move History", noMoves: "No moves yet", capturedPieces: "Captured pieces", offeredDraw: "offers draw", accept: "Accept", decline: "Decline", resignedBy: "resigns", agreedDraw: "Agreed by both players", language: "Language", theme: "Theme", light: "Light", dark: "Dark", }, } export type Language = keyof typeof translations export type TranslationKey = keyof typeof translations.es [V0_FILE]typescriptreact:file="contexts/game-settings-context.tsx" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" import { translations, type Language } from "@/lib/translations" type Theme = "light" | "dark" interface GameSettingsContextType { language: Language setLanguage: (lang: Language) => void theme: Theme setTheme: (theme: Theme) => void t: (key: keyof typeof translations.es) => string } const GameSettingsContext = createContext(undefined) export function GameSettingsProvider({ children }: { children: ReactNode }) { const [language, setLanguage] = useState("es") const [theme, setTheme] = useState("dark") useEffect(() => { const savedLanguage = localStorage.getItem("chess-language") as Language const savedTheme = localStorage.getItem("chess-theme") as Theme if (savedLanguage && translations[savedLanguage]) { setLanguage(savedLanguage) } if (savedTheme) { setTheme(savedTheme) } }, []) useEffect(() => { document.documentElement.classList.remove("light", "dark") document.documentElement.classList.add(theme) localStorage.setItem("chess-theme", theme) }, [theme]) useEffect(() => { localStorage.setItem("chess-language", language) }, [language]) const t = (key: keyof typeof translations.es) => { return translations[language][key] || translations.es[key] } return ( {children} ) } export function useGameSettings() { const context = useContext(GameSettingsContext) if (!context) { throw new Error("useGameSettings must be used within GameSettingsProvider") } return context } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" import { GameSettingsProvider } from "@/contexts/game-settings-context" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Juego de Ajedrez - Chess Game", description: "Juego de ajedrez completo con chess.js", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/chess-game.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { RotateCcw, Crown, AlertCircle, Clock, History, Flag, Globe, Sun, Moon } from "lucide-react" import { Chess, type Square, type PieceSymbol, type Color } from "chess.js" import { useGameSettings } from "@/contexts/game-settings-context" type ChessPiece = { type: PieceSymbol color: Color } const pieceUnicode: Record = { wP: "♙", wN: "♘", wB: "♗", wR: "♖", wQ: "♕", wK: "♔", bP: "♟", bN: "♞", bB: "♝", bR: "♜", bQ: "♛", bK: "♚", } export default function ChessGame() { const { language, setLanguage, theme, setTheme, t } = useGameSettings() const [game, setGame] = useState(new Chess()) const [selectedSquare, setSelectedSquare] = useState(null) const [possibleMoves, setPossibleMoves] = useState([]) const [status, setStatus] = useState("") const [gameOver, setGameOver] = useState(false) const [winner, setWinner] = useState(null) const [moveHistory, setMoveHistory] = useState([]) const [capturedPieces, setCapturedPieces] = useState<{ white: PieceSymbol[]; black: PieceSymbol[] }>({ white: [], black: [], }) const [whiteTime, setWhiteTime] = useState(600) const [blackTime, setBlackTime] = useState(600) const [timerActive, setTimerActive] = useState(false) const [drawOffered, setDrawOffered] = useState(false) const [drawOfferedBy, setDrawOfferedBy] = useState(null) const updateStatus = () => { let statusText = "" const moveColor = game.turn() === "w" ? t("white") : t("black") if (game.isGameOver()) { setTimerActive(false) if (game.isCheckmate()) { statusText = `${t("checkmate")} - ${moveColor === t("white") ? t("black") : t("white")} ${t("wins")}` setGameOver(true) setWinner(moveColor === t("white") ? t("black") : t("white")) } else if (game.isDraw()) { statusText = t("draw") setGameOver(true) setWinner(null) } else if (game.isStalemate()) { statusText = t("stalemate") setGameOver(true) setWinner(null) } else if (game.isThreefoldRepetition()) { statusText = t("threefold") setGameOver(true) setWinner(null) } else if (game.isInsufficientMaterial()) { statusText = t("insufficient") setGameOver(true) setWinner(null) } } else { statusText = `${t("turn")}: ${moveColor}` if (game.isCheck()) { statusText += ` - ${t("check")}` } } setStatus(statusText) } useEffect(() => { updateStatus() }, [game, language]) useEffect(() => { if (!timerActive || gameOver) return const interval = setInterval(() => { if (game.turn() === "w") { setWhiteTime((prev) => { if (prev <= 1) { setGameOver(true) setWinner(t("black")) setStatus(`${t("timeout")} - ${t("black")} ${t("wins")}`) setTimerActive(false) return 0 } return prev - 1 }) } else { setBlackTime((prev) => { if (prev <= 1) { setGameOver(true) setWinner(t("white")) setStatus(`${t("timeout")} - ${t("white")} ${t("wins")}`) setTimerActive(false) return 0 } return prev - 1 }) } }, 1000) return () => clearInterval(interval) }, [timerActive, game, gameOver, t]) const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs.toString().padStart(2, "0")}` } const handleSquareClick = (square: Square) => { if (gameOver) return const piece = game.get(square) // If a piece is already selected if (selectedSquare) { // Try to move try { const move = game.move({ from: selectedSquare, to: square, promotion: "q", }) if (move) { if (!timerActive) { setTimerActive(true) } if (move.captured) { setCapturedPieces((prev) => ({ ...prev, [move.color === "w" ? "white" : "black"]: [ ...prev[move.color === "w" ? "white" : "black"], move.captured, ], })) } setMoveHistory((prev) => [...prev, move.san]) setDrawOffered(false) setDrawOfferedBy(null) setGame(new Chess(game.fen())) setSelectedSquare(null) setPossibleMoves([]) updateStatus() return } } catch (e) { // Invalid move, continue to selection logic } // If clicked on own piece, select it instead if (piece && piece.color === game.turn()) { setSelectedSquare(square) const moves = game.moves({ square, verbose: true }) setPossibleMoves(moves.map((m) => m.to as Square)) } else { setSelectedSquare(null) setPossibleMoves([]) } } else { // Select piece if it belongs to current player if (piece && piece.color === game.turn()) { setSelectedSquare(square) const moves = game.moves({ square, verbose: true }) setPossibleMoves(moves.map((m) => m.to as Square)) } } } const offerDraw = () => { setDrawOffered(true) setDrawOfferedBy(game.turn()) } const acceptDraw = () => { setGameOver(true) setWinner(null) setStatus(`${t("draw")} - ${t("agreedDraw")}`) setTimerActive(false) setDrawOffered(false) setDrawOfferedBy(null) } const declineDraw = () => { setDrawOffered(false) setDrawOfferedBy(null) } const resign = () => { const currentPlayer = game.turn() === "w" ? t("white") : t("black") const opponent = game.turn() === "w" ? t("black") : t("white") setGameOver(true) setWinner(opponent) setStatus(`${currentPlayer} ${t("resignedBy")} - ${opponent} ${t("wins")}`) setTimerActive(false) } const resetGame = () => { const newGame = new Chess() setGame(newGame) setSelectedSquare(null) setPossibleMoves([]) setGameOver(false) setWinner(null) setMoveHistory([]) setCapturedPieces({ white: [], black: [] }) setWhiteTime(600) setBlackTime(600) setTimerActive(false) setDrawOffered(false) setDrawOfferedBy(null) updateStatus() } const renderSquare = (square: Square, piece: ChessPiece | null, row: number, col: number) => { const isLight = (row + col) % 2 === 0 const isSelected = selectedSquare === square const isPossibleMove = possibleMoves.includes(square) const isKingInCheck = game.isCheck() && piece?.type === "k" && piece?.color === game.turn() return ( ) } const renderBoard = () => { const board = [] const files = ["a", "b", "c", "d", "e", "f", "g", "h"] const ranks = ["8", "7", "6", "5", "4", "3", "2", "1"] for (let row = 0; row < 8; row++) { for (let col = 0; col < 8; col++) { const square = (files[col] + ranks[row]) as Square const piece = game.get(square) board.push(renderSquare(square, piece, row, col)) } } return board } return (

{t("title")}

{t("subtitle")}

{/* Chess Board */}

♚

{t("black")}

{formatTime(blackTime)}

{capturedPieces.white.map((piece, i) => ( {pieceUnicode["b" + piece.toUpperCase()]} ))}

{/* Board with coordinates */}

{/* Top rank numbers */}

{["8", "7", "6", "5", "4", "3", "2", "1"].map((rank) => (

{rank}

))}

{/* Left file letters */}

{["a", "b", "c", "d", "e", "f", "g", "h"].map((file) => (

{file}

))}

{/* Chess board */}

{renderBoard()}

{/* Right file letters */}

{["a", "b", "c", "d", "e", "f", "g", "h"].map((file) => (

{file}

))}

{/* Bottom rank numbers */}

{["8", "7", "6", "5", "4", "3", "2", "1"].map((rank) => (

{rank}

))}

♔

{t("white")}

{formatTime(whiteTime)}

{capturedPieces.black.map((piece, i) => ( {pieceUnicode["w" + piece.toUpperCase()]} ))}

{/* Game Info Panel */}

{t("gameStatus")}

{gameOver ? (

{t("gameOver")}

{winner && (

{t("winner")}: {winner}

)} {!winner &&

{t("draw")}

}

) : ( <>

{status}

{drawOffered && drawOfferedBy !== game.turn() && (

{drawOfferedBy === "w" ? t("white") : t("black")} {t("offeredDraw")}

)}

{t("moveHistory")}

{moveHistory.length === 0 ? (

{t("noMoves")}

) : (

{moveHistory.map((move, index) => { if (index % 2 === 0) { return (

{Math.floor(index / 2) + 1}. {move} {moveHistory[index + 1] || ""}

) } return null })}

)}

) }8a:["$","$L91",null,{"chatId":"uryj4NHqdIP","children":["$","$L92",null,{"data":{"@\"active-block\",\"uryj4NHqdIP\",":{"id":"b_58sh8jHe86X","messageId":"DHDj4QAj0a8emRaTT49PgJhgU4tDL4Pn","source":"$93","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Agregando i18n y tema","taskNameComplete":"i18n y tema agregados"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"uryj4NHqdIP\",":false,"":null},"children":"$L94"}]}]

About

Tags

Share

About

Tags

Share

About

Tags

Share

More Templates Like This