<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive Chess Game</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #2e7d32;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #chess-board {
            display: grid;
            grid-template-columns: repeat(8, 60px);
            grid-template-rows: repeat(8, 60px);
            border: 4px solid #444;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            background-color: #444;
            position: relative;
            user-select: none;
        }
        .square {
            width: 60px;
            height: 60px;
            box-sizing: border-box;
            position: relative;
            transition: background-color 0.3s;
        }
        .light {
            background-color: #f0d9b5;
        }
        .dark {
            background-color: #b58863;
        }
        .highlight {
            background-color: #a9d18e !important;
            border: 2px solid #ffd700;
            border-radius: 50%;
        }
        .piece {
            width: 100%;
            height: 100%;
            cursor: pointer;
            user-select: none;
            font-size: 48px;
            text-align: center;
            line-height: 60px;
            transition: transform 0.2s, top 0.3s, left 0.3s;
            position: absolute;
            top: 0;
            left: 0;
        }
        .piece.selected {
            transform: scale(1.2);
            z-index: 2;
        }
        #status {
            margin-top: 20px;
            text-align: center;
            font-size: 24px;
            color: #fff;
            text-shadow: 1px 1px 2px #000;
        }
    </style>
</head>
<body>
<div>
    <div id="chess-board"></div>
    <div id="status">White's turn</div>
</div>

<script>
    const boardElement = document.getElementById('chess-board');
    const statusElement = document.getElementById('status');

    const pieceUnicode = {
        'wP': '♙',
        'wR': '♖',
        'wN': '♘',
        'wB': '♗',
        'wQ': '♕',
        'wK': '♔',
        'bP': '♟︎',
        'bR': '♜',
        'bN': '♞',
        'bB': '♝',
        'bQ': '♛',
        'bK': '♚',
    };

    let board = [];
    let currentTurn = 'w';
    let selectedPiece = null;
    let possibleMoves = [];

    // Initialize the board
    function initBoard() {
        board = [
            ['bR','bN','bB','bQ','bK','bB','bN','bR'],
            ['bP','bP','bP','bP','bP','bP','bP','bP'],
            [null,null,null,null,null,null,null,null],
            [null,null,null,null,null,null,null,null],
            [null,null,null,null,null,null,null,null],
            [null,null,null,null,null,null,null,null],
            ['wP','wP','wP','wP','wP','wP','wP','wP'],
            ['wR','wN','wB','wQ','wK','wB','wN','wR']
        ];
        renderBoard();
    }

    // Render the board
    function renderBoard() {
        boardElement.innerHTML = '';
        for(let row=0; row<8; row++) {
            for(let col=0; col<8; col++) {
                const square = document.createElement('div');
                square.classList.add('square');
                if((row + col) % 2 === 0){
                    square.classList.add('light');
                }
                else{
                    square.classList.add('dark');
                }
                square.dataset.row = row;
                square.dataset.col = col;

                // Highlight possible move squares
                if(possibleMoves.some(m => m.row === row && m.col === col)){
                    square.classList.add('highlight');
                    square.addEventListener('click', onSquareClick);
                }

                if(board[row][col]){
                    const piece = document.createElement('div');
                    piece.classList.add('piece');
                    piece.textContent = pieceUnicode[board[row][col]];
                    piece.dataset.piece = board[row][col];
                    piece.dataset.row = row;
                    piece.dataset.col = col;
                    piece.style.transition = 'transform 0.3s';
                    piece.addEventListener('click', onPieceClick);
                    square.appendChild(piece);
                }

                boardElement.appendChild(square);
            }
        }
    }

    // Handle piece click
    function onPieceClick(e) {
        e.stopPropagation();
        const piece = e.currentTarget;
        const row = parseInt(piece.dataset.row);
        const col = parseInt(piece.dataset.col);
        const pieceColor = piece.dataset.piece.charAt(0);

        if(pieceColor !== currentTurn){
            return;
        }

        if(selectedPiece){
            // Deselect if clicking the same piece
            if(selectedPiece === piece){
                selectedPiece.classList.remove('selected');
                selectedPiece = null;
                possibleMoves = [];
                renderBoard();
                return;
            }
            else{
                selectedPiece.classList.remove('selected');
            }
        }

        selectedPiece = piece;
        selectedPiece.classList.add('selected');
        possibleMoves = getLegalMoves(row, col);
        renderBoard();
    }

    // Handle square click for moving piece
    function onSquareClick(e){
        const square = e.currentTarget;
        const targetRow = parseInt(square.dataset.row);
        const targetCol = parseInt(square.dataset.col);

        const originRow = parseInt(selectedPiece.dataset.row);
        const originCol = parseInt(selectedPiece.dataset.col);

        // Move the piece
        board[targetRow][targetCol] = board[originRow][originCol];
        board[originRow][originCol] = null;

        // Update turn
        currentTurn = currentTurn === 'w' ? 'b' : 'w';
        statusElement.textContent = (currentTurn === 'w' ? "White's turn" : "Black's turn");

        // Reset selection
        selectedPiece.classList.remove('selected');
        selectedPiece = null;
        possibleMoves = [];
        renderBoard();
    }

    // Get legal moves for a piece at (row, col)
    function getLegalMoves(row, col){
        const piece = board[row][col];
        if(!piece) return [];
        const color = piece.charAt(0);
        const type = piece.charAt(1);
        let moves = [];

        const directions = {
            'P': color === 'w' ? -1 : 1,
            'R': [[-1,0],[1,0],[0,-1],[0,1]],
            'N': [[-2,-1],[-2,1],[-1,-2],[-1,2],[1,-2],[1,2],[2,-1],[2,1]],
            'B': [[-1,-1],[-1,1],[1,-1],[1,1]],
            'Q': [[-1,0],[1,0],[0,-1],[0,1],[-1,-1],[-1,1],[1,-1],[1,1]],
            'K': [[-1,0],[1,0],[0,-1],[0,1],[-1,-1],[-1,1],[1,-1],[1,1]]
        };

        switch(type){
            case 'P':
                const forwardRow = row + directions['P'];
                // Move forward
                if(isInside(forwardRow, col) && !board[forwardRow][col]){
                    moves.push({row: forwardRow, col});
                    // Initial double move
                    if((color === 'w' && row ===6) || (color === 'b' && row ===1)){
                        const doubleForward = forwardRow + directions['P'];
                        if(isInside(doubleForward, col) && !board[doubleForward][col]){
                            moves.push({row: doubleForward, col});
                        }
                    }
                }
                // Captures
                for(let dc of [-1, 1]){
                    const captureCol = col + dc;
                    if(isInside(forwardRow, captureCol) && board[forwardRow][captureCol] && board[forwardRow][captureCol].charAt(0) !== color){
                        moves.push({row: forwardRow, col: captureCol});
                    }
                }
                break;
            case 'R':
            case 'B':
            case 'Q':
                const dirs = directions[type];
                for(let dir of dirs){
                    let r = row + dir[0];
                    let c = col + dir[1];
                    while(isInside(r, c)){
                        if(board[r][c]){
                            if(board[r][c].charAt(0) !== color){
                                moves.push({row: r, col: c});
                            }
                            break;
                        }
                        moves.push({row: r, col: c});
                        if(type === 'K') break; // King moves only one square
                        r += dir[0];
                        c += dir[1];
                    }
                }
                break;
            case 'N':
                const knightMoves = directions['N'];
                for(let m of knightMoves){
                    const r = row + m[0];
                    const c = col + m[1];
                    if(isInside(r, c)){
                        if(!board[r][c] || board[r][c].charAt(0) !== color){
                            moves.push({row: r, col: c});
                        }
                    }
                }
                break;
            case 'K':
                const kingMoves = directions['K'];
                for(let m of kingMoves){
                    const r = row + m[0];
                    const c = col + m[1];
                    if(isInside(r, c)){
                        if(!board[r][c] || board[r][c].charAt(0) !== color){
                            moves.push({row: r, col: c});
                        }
                    }
                }
                break;
        }

        // Filter out moves that would leave king in check (Not implemented)
        // To implement check/checkmate accurately, additional logic is required.

        return moves;
    }

    function isInside(row, col){
        return row >=0 && row <8 && col >=0 && col <8;
    }

    // Initialize the game
    initBoard();
</script>
</body>
</html>


here is my code. make it so that
1. pieces can take other pieces
2. implement all the unimplemented necessary features like castling, check, checkmate, etc etc