<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chess Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        #game-container {
            text-align: center;
        }
        button {
            font-size: 18px;
            margin: 10px;
            padding: 10px 20px;
            cursor: pointer;
        }
        #chessboard {
            display: inline-grid;
            grid-template-columns: repeat(8, 50px);
            grid-template-rows: repeat(8, 50px);
            gap: 1px;
            background-color: #000;
            padding: 10px;
            margin-top: 20px;
        }
        .square {
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            cursor: pointer;
        }
        .white {
            background-color: #f0d9b5;
        }
        .black {
            background-color: #b58863;
        }
        .check {
            background-color: #ff6666 !important;
        }
        #check-message {
            display: none;
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 48px;
            color: red;
            font-weight: bold;
            z-index: 1000;
        }
        #promotion-box {
            display: none;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translateX(-50%);
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        #promotion-box button {
            font-size: 24px;
            margin: 5px;
            padding: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="menu"></div>
        <div id="chessboard" style="display: none;"></div>
        <div id="check-message">Check!</div>
        <div id="promotion-box">
            <button onclick="promotePawn('queen')">Queen</button>
            <button onclick="promotePawn('rook')">Rook</button>
            <button onclick="promotePawn('bishop')">Bishop</button>
            <button onclick="promotePawn('knight')">Knight</button>
        </div>
    </div>

    <script>
        const gameContainer = document.getElementById('game-container');
        const menu = document.getElementById('menu');
        const chessboard = document.getElementById('chessboard');
        const checkMessage = document.getElementById('check-message');
        const promotionBox = document.getElementById('promotion-box');

        let gameMode = '';
        let aiDifficulty = 'hard';
        let selectedPiece = null;
        let currentPlayer = 'white';
        let promotionRow = null;
        let promotionCol = null;

        const initialBoard = [
            ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
            ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
            ['', '', '', '', '', '', '', ''],
            ['', '', '', '', '', '', '', ''],
            ['', '', '', '', '', '', '', ''],
            ['', '', '', '', '', '', '', ''],
            ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
            ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
        ];

        let board = JSON.parse(JSON.stringify(initialBoard));

        function showMainMenu() {
            menu.innerHTML = `
                <button onclick="showGameModes()">Play</button>
                <button onclick="showSettings()">Settings</button>
            `;
        }

        function showGameModes() {
            menu.innerHTML = `
                <button onclick="startGame('1v1')">1 vs 1</button>
                <button onclick="showAIDifficulty()">AI vs 1</button>
                <button onclick="showMainMenu()">Home</button>
            `;
        }

        function showSettings() {
            menu.innerHTML = `
                <h2>Settings</h2>
                <button onclick="showMainMenu()">Home</button>
            `;
        }

        function showAIDifficulty() {
            menu.innerHTML = `
                <button onclick="startGame('ai', 'easy')">Easy</button>
                <button onclick="startGame('ai', 'medium')">Medium</button>
                <button onclick="startGame('ai', 'hard')">Hard</button>
                <button onclick="showGameModes()">Back</button>
            `;
        }

        function startGame(mode, difficulty = 'hard') {
            gameMode = mode;
            aiDifficulty = difficulty;
            menu.style.display = 'none';
            chessboard.style.display = 'inline-grid';
            renderBoard();
            if (gameMode === 'ai') {
                menu.innerHTML = `<button onclick="giveUp()">Give Up</button>`;
            }
        }

        function renderBoard() {
            chessboard.innerHTML = '';
            for (let row = 0; row < 8; row++) {
                for (let col = 0; col < 8; col++) {
                    const square = document.createElement('div');
                    square.className = `square ${(row + col) % 2 === 0 ? 'white' : 'black'}`;
                    square.textContent = board[row][col];
                    square.addEventListener('click', () => handleSquareClick(row, col));
                    chessboard.appendChild(square);
                }
            }
            highlightCheck();
        }

        function handleSquareClick(row, col) {
            const piece = board[row][col];
            if (selectedPiece) {
                if (isValidMove(selectedPiece.row, selectedPiece.col, row, col)) {
                    movePiece(selectedPiece.row, selectedPiece.col, row, col);
                    selectedPiece = null;
                    currentPlayer = currentPlayer === 'white' ? 'black' : 'white';
                    renderBoard();
                    if (gameMode === 'ai' && currentPlayer === 'black') {
                        setTimeout(makeAIMove, 500);
                    }
                }
                selectedPiece = null;
                renderBoard();
            } else if (piece && isPieceOfCurrentPlayer(piece)) {
                selectedPiece = { row, col };
                highlightSquare(row, col);
            }
        }

        function isPieceOfCurrentPlayer(piece) {
            return (currentPlayer === 'white' && piece.charCodeAt(0) >= 9812 && piece.charCodeAt(0) <= 9817) ||
                   (currentPlayer === 'black' && piece.charCodeAt(0) >= 9818 && piece.charCodeAt(0) <= 9823);
        }

        function isValidMove(fromRow, fromCol, toRow, toCol) {
            const piece = board[fromRow][fromCol];
            const targetPiece = board[toRow][toCol];

            if (targetPiece && (targetPiece === '♔' || targetPiece === '♚')) {
                return false; // Kings can't be captured
            }

            if (targetPiece && isPieceOfCurrentPlayer(targetPiece)) {
                return false;
            }

            switch (piece) {
                case '♙': // White pawn
                    if (fromCol === toCol && board[toRow][toCol] === '') {
                        if (toRow === fromRow - 1) return true;
                        if (fromRow === 6 && toRow === fromRow - 2 && board[fromRow - 1][fromCol] === '') return true;
                    }
                    if (Math.abs(toCol - fromCol) === 1 && toRow === fromRow - 1 && targetPiece !== '') return true;
                    if (toRow === 0) {
                        promotionRow = toRow;
                        promotionCol = toCol;
                        showPromotionBox();
                    }
                    return false;
                case '♟': // Black pawn
                    if (fromCol === toCol && board[toRow][toCol] === '') {
                        if (toRow === fromRow + 1) return true;
                        if (fromRow === 1 && toRow === fromRow + 2 && board[fromRow + 1][fromCol] === '') return true;
                    }
                    if (Math.abs(toCol - fromCol) === 1 && toRow === fromRow + 1 && targetPiece !== '') return true;
                    if (toRow === 7) {
                        promotionRow = toRow;
                        promotionCol = toCol;
                        showPromotionBox();
                    }
                    return false;
                case '♖': case '♜': // Rook
                    if (fromRow === toRow || fromCol === toCol) {
                        return checkClearPath(fromRow, fromCol, toRow, toCol);
                    }
                    return false;
                case '♘': case '♞': // Knight
                    return (Math.abs(fromRow - toRow) === 2 && Math.abs(fromCol - toCol) === 1) ||
                           (Math.abs(fromRow - toRow) === 1 && Math.abs(fromCol - toCol) === 2);
                case '♗': case '♝': // Bishop
                    if (Math.abs(fromRow - toRow) === Math.abs(fromCol - toCol)) {
                        return checkClearPath(fromRow, fromCol, toRow, toCol);
                    }
                    return false;
                case '♕': case '♛': // Queen
                    if (fromRow === toRow || fromCol === toCol || Math.abs(fromRow - toRow) === Math.abs(fromCol - toCol)) {
                        return checkClearPath(fromRow, fromCol, toRow, toCol);
                    }
                    return false;
                case '♔': case '♚': // King
                    return Math.abs(fromRow - toRow) <= 1 && Math.abs(fromCol - toCol) <= 1;
                default:
                    return false;
            }
        }

        function checkClearPath(fromRow, fromCol, toRow, toCol) {
            const rowIncrement = Math.sign(toRow - fromRow);
            const colIncrement = Math.sign(toCol - fromCol);
            
            let currentRow = fromRow + rowIncrement;
            let currentCol = fromCol + colIncrement;
            
            while (currentRow !== toRow || currentCol !== toCol) {
                if (board[currentRow][currentCol] !== '') {
                    return false;
                }
                currentRow += rowIncrement;
                currentCol += colIncrement;
            }
            return true;
        }

        function movePiece(fromRow, fromCol, toRow, toCol) {
            board[toRow][toCol] = board[fromRow][fromCol];
            board[fromRow][fromCol] = '';
            if ((toRow === 0 && board[toRow][toCol] === '♙') || (toRow === 7 && board[toRow][toCol] === '♟')) {
                promotionRow = toRow;
                promotionCol = toCol;
                showPromotionBox();
            }
        }

        function highlightSquare(row, col) {
            const square = chessboard.children[row * 8 + col];
            square.style.backgroundColor = 'yellow';
        }

        function makeAIMove() {
            const moves = getAvailableMoves('black');
            if (moves.length > 0) {
                const move = selectAIMove(moves);
                movePiece(move.fromRow, move.fromCol, move.toRow, move.toCol);
                currentPlayer = 'white';
                renderBoard();
                if (isKingInCheck('white', board)) {
                    showCheckMessage();
                }
            }
        }

        function getAvailableMoves(player) {
            const moves = [];
            for (let fromRow = 0; fromRow < 8; fromRow++) {
                for (let fromCol = 0; fromCol < 8; fromCol++) {
                    if (board[fromRow][fromCol] && isPieceOfCurrentPlayer(board[fromRow][fromCol])) {
                        for (let toRow = 0; toRow < 8; toRow++) {
                            for (let toCol = 0; toCol < 8; toCol++) {
                                if (isValidMove(fromRow, fromCol, toRow, toCol)) {
                                    const tempBoard = JSON.parse(JSON.stringify(board));
                                    tempBoard[toRow][toCol] = tempBoard[fromRow][fromCol];
                                    tempBoard[fromRow][fromCol] = '';
                                    if (!isKingInCheck(player, tempBoard)) {
                                        moves.push({ fromRow, fromCol, toRow, toCol });
                                    }
                                }
                            }
                        }
                    }
                }
            }
            return moves;
        }

        function selectAIMove(moves) {
            const capturingMoves = moves.filter(move => board[move.toRow][move.toCol] !== '');
            const checkingMoves = moves.filter(move => {
                const tempBoard = JSON.parse(JSON.stringify(board));
                tempBoard[move.toRow][move.toCol] = tempBoard[move.fromRow][move.fromCol];
                tempBoard[move.fromRow][move.fromCol] = '';
                return isKingInCheck('white', tempBoard);
            });

            if (checkingMoves.length > 0) {
                return checkingMoves[Math.floor(Math.random() * checkingMoves.length)];
            } else if (capturingMoves.length > 0) {
                return capturingMoves[Math.floor(Math.random() * capturingMoves.length)];
            } else {
                return moves[Math.floor(Math.random() * moves.length)];
            }
        }

        function isKingInCheck(player, boardState) {
            const kingSymbol = player === 'white' ? '♔' : '♚';
            let kingRow, kingCol;

            for (let row = 0; row < 8; row++) {
                for (let col = 0; col < 8; col++) {
                    if (boardState[row][col] === kingSymbol) {
                        kingRow = row;
                        kingCol = col;
                        break;
                    }
                }
                if (kingRow !== undefined) break;
            }

            for (let row = 0; row < 8; row++) {
                for (let col = 0; col < 8; col++) {
                    const piece = boardState[row][col];
                    if (piece && !isPieceOfCurrentPlayer(piece)) {
                        if (isValidMove(row, col, kingRow, kingCol)) {
                            return true;
                        }
                    }
                }
            }

            return false;
        }

        function highlightCheck() {
            const kingSymbol = currentPlayer === 'white' ? '♔' : '♚';
            for (let row = 0; row < 8; row++) {
                for (let col = 0; col < 8; col++) {
                    if (board[row][col] === kingSymbol) {
                        const square = chessboard.children[row * 8 + col];
                        if (isKingInCheck(currentPlayer, board)) {
                            square.classList.add('check');
                            showCheckMessage();
                        } else {
                            square.classList.remove('check');
                        }
                        return;
                    }
                }
            }
        }

        function showCheckMessage() {
            checkMessage.style.display = 'block';
            setTimeout(() => {
                checkMessage.style.display = 'none';
            }, 2000);
        }

        function showPromotionBox() {
            promotionBox.style.display = 'block';
        }

        function promotePawn(pieceType) {
            const whitePieces = { queen: '♕', rook: '♖', bishop: '♗', knight: '♘' };
            const blackPieces = { queen: '♛', rook: '♜', bishop: '♝', knight: '♞' };
            const pieces = board[promotionRow][promotionCol] === '♙' ? whitePieces : blackPieces;
            board[promotionRow][promotionCol] = pieces[pieceType];
            promotionBox.style.display = 'none';
            renderBoard();
        }

        function giveUp() {
            chessboard.style.display = 'none';
            showGameModes();
        }

        showMainMenu();
    </script>
</body>
</html>
This is the code. Now make the thing automatically detect if its a check or not. Make it by when it is white turn, make it detect if any of the the black pieces can eat the king at one next move. If that happens, make the message check appear  red letters for two sec then disappear. Vice versa for black