Help me fix one bug in the following HTML+javascript game code. The problem is that placing a new player marker should remove previous markers of that player, but it doesn't remove them. I'd also like to update one feature: When Flood button is activated, allow optional drawing of one standard wall (with usual conditions applied as normal), but don't end the turn if wall gets drawn this way, allow the flood action and only after it pass the turn. CODE: <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Interactive Game Board</title>
    <style>
        /* Game board container */
        #game-container {
            display: grid;
            /* Define alternating wall and cell sizes: Walls are 2px, cells are 20px */
            grid-template-columns: 10px repeat(9, 50px 10px);
            grid-template-rows: 10px repeat(9, 50px 10px);
            gap: 0;
            position: relative;
            width: calc(10px + 9 * (50px + 10px)); /* 2 + 9*(20+2) = 2 + 198 = 200px */
            height: calc(10px + 9 * (50px + 10px)); /* 200px */
            margin: 50px auto;
            border: 10px solid #333;
            background-color: #fff;
        }

        /* Cells */
        .cell {
            width: 100%;
            height: 100%;
            background-color: white;
            border: none; /* Borders are handled by grid walls */
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }

        /* Marker container */
        .marker-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            font-size: 16px;
            pointer-events: none; /* Allows clicks to pass through to the cell */
        }

        /* Number container */
        .number-container {
            position: absolute;
            top: 2px;
            left: 2px;
            font-size: 12px;
            pointer-events: none; /* Allows clicks to pass through to the cell */
        }

        /* Corners */
        .corner {
            width: 100%;
            height: 100%;
            background-color: #666;
            cursor: pointer;
        }

        /* Horizontal walls */
        .h-wall {
            width: 100%;
            height: 100%;
            background-color: transparent; /* Initially no wall */
            cursor: pointer;
        }

        /* Vertical walls */
        .v-wall {
            width: 100%;
            height: 100%;
            background-color: transparent; /* Initially no wall */
            cursor: pointer;
        }

        /* Hover effect */
        .cell:hover,
        .corner:hover,
        .h-wall:hover,
        .v-wall:hover {
            background-color: #ffd700;
        }

        /* Controls */
        #controls {
            text-align: center;
            margin: 20px;
        }

        #controls button {
            padding: 10px 20px;
            margin: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        /* Status display */
        #status {
            text-align: center;
            font-size: 18px;
            margin-bottom: 10px;
        }

        /* Message display */
        #message {
            text-align: center;
            font-size: 16px;
            margin-bottom: 10px;
            color: green;
        }

        /* Filled area */
        .filled {
            background-color: rgba(0, 0, 255, 0.2);
        }

        .filled-red {
            background-color: rgba(255, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <div id="status">Current Player: <span id="current-player" style="color: blue;">Blue (O)</span></div>
    <div id="message"></div>
    <div id="game-container"></div>
    <div id="controls">
        <button id="flood-button" disabled>Flood</button>
        <button id="count-button" disabled>Count</button>
        <button id="pass-button" disabled>Pass Turn</button>
        <button id="reset-button">Reset Game</button>
    </div>
    <script>
        const N = 9; // Grid size
        const gameContainer = document.getElementById('game-container');
        const statusDisplay = document.getElementById('current-player');
        const messageDisplay = document.getElementById('message');
        const floodButton = document.getElementById('flood-button');
        const countButton = document.getElementById('count-button');
        const passButton = document.getElementById('pass-button');
        const resetButton = document.getElementById('reset-button');

        let currentPlayer = 'blue'; // 'blue' or 'red'
        let turnPhase = 1; // 1: Place marker, 2: Choose action
        let actionMode = null; // 'flood' or 'count'
        let wallMode = false; // Indicates if in wall drawing mode
        let firstCorner = null; // Stores first corner selected for wall
        let countNumber = {
            blue: 1,
            red: 1
        };

        const players = {
            blue: {
                name: 'Blue',
                color: 'blue',
                marker: 'O',
                count: 0,
                markerPosition: null
            },
            red: {
                name: 'Red',
                color: 'red',
                marker: 'X',
                count: 0,
                markerPosition: null
            }
        };

        // Initialize game board elements
        function initGameBoard() {
            gameContainer.innerHTML = '';
            // Create cells
            for (let i = 0; i < N; i++) {
                for (let j = 0; j < N; j++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.style.gridRowStart = 2 + i * 2; // Cells are on even grid lines
                    cell.style.gridColumnStart = 2 + j * 2;

                    // Create marker and number containers
                    const markerContainer = document.createElement('div');
                    markerContainer.classList.add('marker-container');
                    markerContainer.id = `marker-${i}-${j}`;

                    const numberContainer = document.createElement('div');
                    numberContainer.classList.add('number-container');
                    numberContainer.id = `number-${i}-${j}`;

                    cell.appendChild(markerContainer);
                    cell.appendChild(numberContainer);

                    cell.addEventListener('click', onCellClick);
                    gameContainer.appendChild(cell);
                }
            }

            // Create corners
            for (let i = 0; i <= N; i++) {
                for (let j = 0; j <= N; j++) {
                    const corner = document.createElement('div');
                    corner.classList.add('corner');
                    corner.dataset.row = i;
                    corner.dataset.col = j;
                    corner.style.gridRowStart = 1 + i * 2;
                    corner.style.gridColumnStart = 1 + j * 2;
                    corner.addEventListener('click', onCornerClick);
                    gameContainer.appendChild(corner);
                }
            }

            // Create horizontal walls
            for (let i = 0; i <= N; i++) {
                for (let j = 0; j < N; j++) {
                    const hWall = document.createElement('div');
                    hWall.classList.add('h-wall');
                    hWall.dataset.row = i;
                    hWall.dataset.col = j;
                    hWall.style.gridRowStart = 1 + i * 2;
                    hWall.style.gridColumnStart = 2 + j * 2;
                    hWall.addEventListener('click', onWallClick);
                    gameContainer.appendChild(hWall);
                }
            }

            // Create vertical walls
            for (let i = 0; i < N; i++) {
                for (let j = 0; j <= N; j++) {
                    const vWall = document.createElement('div');
                    vWall.classList.add('v-wall');
                    vWall.dataset.row = i;
                    vWall.dataset.col = j;
                    vWall.style.gridRowStart = 2 + i * 2;
                    vWall.style.gridColumnStart = 1 + j * 2;
                    vWall.addEventListener('click', onWallClick);
                    gameContainer.appendChild(vWall);
                }
            }
        }

        // Reset Game
        function resetGame() {
            currentPlayer = 'blue';
            turnPhase = 1;
            wallMode = false;
            firstCorner = null;
            actionMode = null;
            countNumber = {
                blue: 1,
                red: 1
            };
            players.blue.markerPosition = null;
            players.red.markerPosition = null;
            updateStatus();
            setMessage('');
            disableButtons();
            initGameBoard();
        }

        // Update status display
        function updateStatus() {
            statusDisplay.textContent = `${players[currentPlayer].name} (${players[currentPlayer].marker})`;
            statusDisplay.style.color = players[currentPlayer].color;
        }

        // Set message display
        function setMessage(msg, color = 'green') {
            messageDisplay.textContent = msg;
            messageDisplay.style.color = color;
        }

        // Disable action buttons
        function disableButtons() {
            floodButton.disabled = true;
            countButton.disabled = true;
            passButton.disabled = true;
        }

        // Enable action buttons
        function enableButtons() {
            floodButton.disabled = false;
            countButton.disabled = false;
            passButton.disabled = false;
        }

        // Cell click handler
        function onCellClick(e) {
            const cell = e.currentTarget;
            const row = parseInt(cell.dataset.row);
            const col = parseInt(cell.dataset.col);

            if (turnPhase === 1) {
                // Place marker
                // Update marker container without affecting numbers
                const markerContainer = document.getElementById(`marker-${row}-${col}`);
                // If markers can coexist, we might need to handle multiple markers.
                // However, assuming only one marker per player per cell,
                // but both players can have markers on the same cell.

                // Add the marker for the current player
                const existingMarker = markerContainer.querySelector(`span[data-player="${currentPlayer}"]`);
                if (!existingMarker) {
                    const marker = document.createElement('span');
                    marker.textContent = players[currentPlayer].marker;
                    marker.style.color = players[currentPlayer].color;
                    marker.dataset.player = currentPlayer;
                    markerContainer.appendChild(marker);
                }

                // Update marker position for the player
                players[currentPlayer].markerPosition = { row, col };

                // Enable action buttons
                enableButtons();

                // Move to next turn phase
                turnPhase = 2;
                setMessage('Marker placed. Choose an action.');
            } else if (turnPhase === 2) {
                if (actionMode === 'flood') {
                    performFloodFill(row, col);
                    actionMode = null;
                    // Automatically pass the turn after flood action
                    endTurn();
                } else if (actionMode === 'count') {
                    placeCount(cell);
                }
            }
        }

        // Corner click handler
        function onCornerClick(e) {
            if (turnPhase !== 2 || actionMode !== null) {
                return;
            }
            const corner = e.currentTarget;
            const row = parseInt(corner.dataset.row);
            const col = parseInt(corner.dataset.col);

            if (!wallMode) {
                // Check if corner is adjacent to any of the current player's marker positions
                // Allow multiple markers per player
                const markerPos = players[currentPlayer].markerPosition;
                if (markerPos && isCornerAdjacentToCell(row, col, markerPos.row, markerPos.col)) {
                    wallMode = true;
                    firstCorner = { row, col, element: corner };
                    corner.style.backgroundColor = players[currentPlayer].color;
                    setMessage('Select the second corner to draw the wall.', 'blue');
                } else {
                    setMessage('Select a corner adjacent to your marker cell.', 'red');
                }
            } else {
                // Second corner click
                const dist = Math.abs(firstCorner.row - row) + Math.abs(firstCorner.col - col);
                if ((firstCorner.row === row || firstCorner.col === col) && (dist === 1 || dist === 2)) {
                    drawWallBetweenCorners(firstCorner, { row, col }, currentPlayer);
                    // Reset
                    wallMode = false;
                    firstCorner.element.style.backgroundColor = '#666';
                    firstCorner = null;
                    setMessage('Wall drawn successfully.', 'green');
                    // Automatically pass the turn after drawing a wall
                    endTurn();
                } else {
                    setMessage('Second corner must be adjacent horizontally or vertically.', 'red');
                }
            }
        }

        // Wall click handler (optional additional functionalities)
        function onWallClick(e) {
            // Placeholder for wall click actions if needed
        }

        // Check if corner is adjacent to cell
        function isCornerAdjacentToCell(cornerRow, cornerCol, cellRow, cellCol) {
            const cellCorners = getCellCorners(cellRow, cellCol);
            return cellCorners.some(c => c.row === cornerRow && c.col === cornerCol);
        }

        // Get corners of a cell
        function getCellCorners(cellRow, cellCol) {
            const topLeft = { row: cellRow, col: cellCol };
            const topRight = { row: cellRow, col: cellCol + 1 };
            const bottomLeft = { row: cellRow + 1, col: cellCol };
            const bottomRight = { row: cellRow + 1, col: cellCol + 1 };
            return [topLeft, topRight, bottomLeft, bottomRight];
        }

        // Draw wall between two corners
        function drawWallBetweenCorners(corner1, corner2, player) {
            if (corner1.row === corner2.row) {
                // Horizontal wall(s)
                const minCol = Math.min(corner1.col, corner2.col);
                const maxCol = Math.max(corner1.col, corner2.col);
                for (let col = minCol; col < maxCol; col++) {
                    const hWall = document.querySelector(`.h-wall[data-row="${corner1.row}"][data-col="${col}"]`);
                    if (hWall) {
                        hWall.style.backgroundColor = players[player].color;
                    }
                }
            } else if (corner1.col === corner2.col) {
                // Vertical wall(s)
                const minRow = Math.min(corner1.row, corner2.row);
                const maxRow = Math.max(corner1.row, corner2.row);
                for (let row = minRow; row < maxRow; row++) {
                    const vWall = document.querySelector(`.v-wall[data-row="${row}"][data-col="${corner1.col}"]`);
                    if (vWall) {
                        vWall.style.backgroundColor = players[player].color;
                    }
                }
            }
        }

        // Flood button handler
        floodButton.addEventListener('click', () => {
            if (actionMode !== null) return;
            actionMode = 'flood';
            setMessage('Click on a square field to attempt a Flood Fill.', 'blue');
        });

        // Count button handler
        countButton.addEventListener('click', () => {
            if (actionMode !== null) return;
            actionMode = 'count';
            setMessage('Click on square fields to place counts. Click Pass Turn when done.', 'blue');
        });

        // Pass button handler
        passButton.addEventListener('click', () => {
            endTurn();
        });

        // Reset button handler
        resetButton.addEventListener('click', () => {
            resetGame();
        });

        // Perform Flood Fill
        function performFloodFill(startRow, startCol) {
            const visited = new Set();
            const fillColor = currentPlayer === 'blue' ? 'filled' : 'filled-red';
            const queue = [{ row: startRow, col: startCol }];
            let isEnclosed = true;

            while (queue.length > 0) {
                const { row, col } = queue.shift();
                const key = `${row},${col}`;
                if (visited.has(key)) continue;
                visited.add(key);

                // Check if cell is on boundary
                if (row === 0 || row === N - 1 || col === 0 || col === N - 1) {
                    isEnclosed = false;
                }

                // Check all four directions
                const walls = getCellWalls(row, col);

                // Top
                if (!walls.top || !isWallPresent(walls.top)) {
                    if (row > 0) {
                        queue.push({ row: row - 1, col });
                    } else {
                        isEnclosed = false;
                    }
                }

                // Bottom
                if (!walls.bottom || !isWallPresent(walls.bottom)) {
                    if (row < N - 1) {
                        queue.push({ row: row + 1, col });
                    } else {
                        isEnclosed = false;
                    }
                }

                // Left
                if (!walls.left || !isWallPresent(walls.left)) {
                    if (col > 0) {
                        queue.push({ row, col: col - 1 });
                    } else {
                        isEnclosed = false;
                    }
                }

                // Right
                if (!walls.right || !isWallPresent(walls.right)) {
                    if (col < N - 1) {
                        queue.push({ row, col: col + 1 });
                    } else {
                        isEnclosed = false;
                    }
                }
            }

            if (isEnclosed) {
                // Fill the area
                visited.forEach(key => {
                    const [row, col] = key.split(',').map(Number);
                    const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
                    if (cell) {
                        cell.classList.add(fillColor);
                    }
                });
                setMessage('Area is enclosed. Filled!', 'green');
            } else {
                setMessage('Area is not fully enclosed.', 'red');
            }
        }

        // Get walls around a cell
        function getCellWalls(row, col) {
            const walls = {};

            // Top wall
            walls.top = document.querySelector(`.h-wall[data-row="${row}"][data-col="${col}"]`);

            // Bottom wall
            walls.bottom = document.querySelector(`.h-wall[data-row="${row + 1}"][data-col="${col}"]`);

            // Left wall
            walls.left = document.querySelector(`.v-wall[data-row="${row}"][data-col="${col}"]`);

            // Right wall
            walls.right = document.querySelector(`.v-wall[data-row="${row}"][data-col="${col + 1}"]`);

            return walls;
        }

        // Check if wall is present (colored)
        function isWallPresent(wall) {
            if (!wall) return false;
            return wall.style.backgroundColor !== '' && wall.style.backgroundColor !== 'transparent';
        }

        // Place count on cell
        function placeCount(cell) {
            const row = parseInt(cell.dataset.row);
            const col = parseInt(cell.dataset.col);
            const numberContainer = document.getElementById(`number-${row}-${col}`);

            if (numberContainer.textContent) {
                setMessage('Cell already has a number.', 'red');
                return;
            }

            const number = countNumber[currentPlayer]++;
            numberContainer.textContent = number;
            numberContainer.style.color = players[currentPlayer].color;
            setMessage('Count placed.', 'green');
        }

        // End turn
        function endTurn() {
            // Reset variables
            turnPhase = 1;
            wallMode = false;
            firstCorner = null;
            actionMode = null;
            disableButtons();

            // Swap player
            currentPlayer = currentPlayer === 'blue' ? 'red' : 'blue';
            updateStatus();
            setMessage('Turn passed to the next player.', 'blue');
        }

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