I’m developing a Tic-Tac-Toe game in JavaScript and facing a few issues:

Switching Players: The currentPlayer isn’t switching correctly after each move. I expect playGame to alternate between player1 and player2.

Updating Game Board State: I have a gameBoard array to track game state, but it’s not updating as expected when a player makes a move.

Game Logic for Winning Conditions: I’m struggling to implement logic for checking winning conditions.

Specific Issues:
Player Switching: How can I ensure currentPlayer switches properly in the playGame function?

Game Board State: How do I correctly update and access the gameBoard array to reflect moves?

Winning Conditions: What’s the best way to structure the logic to check for wins?

Here’s a snippet of my code for context:

    // DOM elements
    const playerInput1 = document.querySelector("#player-select1");
    const playerButton = document.querySelector(".add-player");
    const playerInput2 = document.querySelector("#player-select2");
    const playerPara1 = document.querySelector(".player1");
    const playerPara2 = document.querySelector(".player2");
    const showPlayers = document.querySelector(".player-shows");
    const boxes = document.querySelectorAll(".box");

    // Game state
    const gameBoard = [
        [null, null, null],
        [null, null, null],
        [null, null, null]
    ];
    let currentPlayer;
    let player1, player2;

    // Player factory function
    const playerSelection = (name, marker) => {
        let score = 0;
        return {
            name,
            marker,
            getScore: () => score,
            scorePlus: () => ++score
        };
    };

    // Initialize players
    player1 = playerSelection("Name", "X");
    player2 = playerSelection("Name", "O");

    // Event listener for player names
    playerButton.addEventListener("click", () => {
        player2.name = playerInput2.value.trim();
        player1.name = playerInput1.value.trim();

        if (!player1.name || !player2.name) {
            alert("Please enter a name");
            return;
        }
        
        playerPara1.textContent = `First Player is: ${player1.name} (${player1.marker})`;
        playerPara2.textContent = `Second Player is: ${player2.name} (${player2.marker})`;
        showPlayers.innerHTML = "";
        showPlayers.append(playerPara1);
        showPlayers.append(playerPara2);

        playGame();
    });

    // Box event listeners
    boxes.forEach(box => {
        box.addEventListener("click", () => {
            if (!box.textContent && currentPlayer) {
                box.textContent = currentPlayer.marker;
                box.style.color = "white";
                box.style.textAlign = "center";
                box.style.fontSize = "55px";
                box.style.cursor = "pointer";

                playGame();
            }
        });
    });

    // Switch current player
    const playGame = () => {
        currentPlayer = currentPlayer === player1 ? player2 : player1;

        // Check game board state (this part is problematic)
        if (gameBoard[0][0] === currentPlayer.marker) {
            console.log("Testing if it works");
        }
    };

    return {
        playerSelection,
        playGame
    };
})();