chess game

[kawaiiangelxox-oss]

import { useState, useEffect } from "react";
import { initializeApp } from "firebase/app";
import { getDatabase, ref, onValue, set } from "firebase/database";

// 🔑 Replace with your Firebase config
const firebaseConfig = {
apiKey: "YOUR_KEY",
authDomain: "YOUR_DOMAIN",
databaseURL: "YOUR_DB_URL",
projectId: "YOUR_PROJECT_ID",
};

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

const initialBoard = [
["r","n","b","q","k","b","n","r"],
["p","p","p","p","p","p","p","p"],
["","","","","","","",""],
["","","","","","","",""],
["","","","","","","",""],
["","","","","","","",""],
["P","P","P","P","P","P","P","P"],
["R","N","B","Q","K","B","N","R"],
];

const pieces = {
r: "♜", n: "♞", b: "♝", q: "♛", k: "♚", p: "♟",
R: "♖", N: "♘", B: "♗", Q: "♕", K: "♔", P: "♙",
};

export default function ChessGame() {
const [board, setBoard] = useState(initialBoard);
const [selected, setSelected] = useState(null);
const gameId = "public-room"; // same room = multiplayer

useEffect(() => {
const gameRef = ref(db, games/${gameId});
onValue(gameRef, snapshot => {
if (snapshot.exists()) setBoard(snapshot.val());
});
}, []);

function handleClick(row, col) {
if (selected) {
const newBoard = board.map(r => [...r]);
newBoard[row][col] = board[selected.row][selected.col];
newBoard[selected.row][selected.col] = "";
set(ref(db, games/${gameId}), newBoard);
setSelected(null);
} else if (board[row][col]) {
setSelected({ row, col });
}
}

return (

{board.map((row, r) =>
row.map((cell, c) => {
const isLight = (r + c) % 2 === 0;
const isSelected = selected?.row === r && selected?.col === c;
return (
<div
key={${r}-${c}}
onClick={() => handleClick(r, c)}
className={w-16 h-16 flex items-center justify-center text-3xl cursor-pointer transition-all ${isLight ? "bg-amber-100" : "bg-amber-700"} ${isSelected ? "ring-4 ring-red-500" : ""}}
>
{pieces[cell]}

);
})
)}

);
}