I am making a simple tic tac toe game in order to practice the module pattern and factory pattern. i have implemented event listeners on the fields to mark x and o. but i need the x's and o's to also go inside the board array in order to compare with the winning combinations array.

i need to ultimately be able to find the winner after.

```js
//player factory function
const createPlayer = (name,marker) => {
    return {name,marker}
}

//gameboard object
const gameBoard = (() => {
   //create board array
    let board = []
    for (i=0; i<9; i++) {
        board.push("")
    }

    //add event listeners on each field that will mark field and change player's turn state
    const fields = document.querySelectorAll(".field") 
    const nextTurn = document.querySelector(".message")

    let turn = 0

    fields.forEach((field) => {
        field.addEventListener('click',handleClick,{once:true})

        function handleClick() {

                if(turn %= 2) {
                    field.innerHTML = "O"
                    field.classList.toggle("marker")
                    nextTurn.innerHTML= "Player X's turn"}

                    else {
                    field.innerHTML = "X"
                    field.classList.toggle("marker")
                    nextTurn.innerHTML= "Player O's turn"}

                    turn ++

        }

    })

    //restart game
    const restart = document.getElementById("restart-button")

    restart.addEventListener("click",clicke)

    function clicke() {
        const fields = document.querySelectorAll(".field").innerHTML=""
    }

    return {
        board, 
    }
})()

// game object
const game = (() => {

    //declare players
    const playerOne = createPlayer("player x", "x")
    const playerTwo = createPlayer("player o", "o")

    //starting point
    let activePlayer = playerOne
    let winnerDeclared = false
    let remainingSpots = 9

    //selectors
    let playerName = document.querySelector('.message') //alert next turn

    //winning conditons
    const winningConditons = [
        [0,1,2]
        [3,4,5]
        [6,7,8]
        [0,3,8]
        [1,4,7]
        [2,5,8]
        [0,4,8]
        [2,4,6]
    ];

    //check for winner
    function checkWinner() {

    }

    function declareTie(){
        playerName.innerHTML = "Its a tie!"
    }

}
)()
```

```css
.gameboard{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 5px;
}
.field{
    width: 150px;
    height: 150px;
    background-color:  #ededee;

}
```

```html
  <div class="container">
        <div class="header">
            <div class="header-text">
                Tic-Tac-Toe
            </div>
        </div>
        <div class="body-container">
            <div class="message">Player X's turn</div>
            <div class="gameboard">
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
            </div>
            <div class="center">
                <button id="restart-button">Restart</button>
            </div>

        </div>
    </div>
```