Tic Tac Toe game totalTurns calculation

JavaScript
1

Hi, there’s a lot of code in this one, but I’'l highlight the code I’m talking about. The question is: I want to calculate the totalTurns by:

const allTiles = [tile1, tile2, tile3, tile4, tile5, tile6, tile7, tile8, tile9];
let allTilesSingle = [tile1, tile2, tile3, tile4, tile5, tile6, tile7, tile8, tile9];
 let totalTurns = allTiles.length - allTilesSingle.length + 1;

And after each turn I want to remove the chosen tile out of allTilesSingle
allTilesSingle = allTilesSingle.filter(element => element !== tile);
But it don’t work obviously, How can I best do this in this way?
This is the whole js code:

const tile2 = document.getElementById('tile2');
const tile3 = document.getElementById('tile3');
const tile4 = document.getElementById('tile4');
const tile5 = document.getElementById('tile5');
const tile6 = document.getElementById('tile6');
const tile7 = document.getElementById('tile7');
const tile8 = document.getElementById('tile8');
const tile9 = document.getElementById('tile9');

const rulesBtn = document.getElementById('rules-btn');
const rules = document.getElementById('rules-container');

const resetBtn = document.getElementById('reset-btn');
const singlePlayerBtn = document.getElementById('singleplayer-btn');

const scoreBoard = document.getElementById('score-container')

const allTiles = [tile1, tile2, tile3, tile4, tile5, tile6, tile7, tile8, tile9];
let allTilesSingle = [tile1, tile2, tile3, tile4, tile5, tile6, tile7, tile8, tile9];

const winningCombinations = [
    [tile1, tile2, tile3],
    [tile4, tile5, tile6],
    [tile7, tile8, tile9],
    [tile1, tile4, tile7],
    [tile2, tile5, tile8],
    [tile3, tile6, tile9],
    [tile1, tile5, tile9],
    [tile3, tile5, tile7]
]

const checkForWin = (player) => {
    return winningCombinations.some(combination => combination.every(tile => player.includes(tile)));
}

let singlePlayer = false;

let player1 = [];
let player2 = [];
let computer = [];
let totalTurns = allTiles.length - allTilesSingle.length + 1;

let player1Score = 0;
let player2Score = 0;
let computerBotScore = 0;

const resetBoard = () => {
    player1 = [];
    player2 = [];
    totalTurns = 0;
    allTiles.forEach(e => e.innerHTML = "");
    allTilesSingle = allTiles;
}

const setScoreBoard = () => {
    if (singlePlayer === false){
    scoreBoard.innerHTML = `<p>Player1: ${player1Score}</p>\n<p>Player2: ${player2Score}</p>`;
    } else {
    scoreBoard.innerHTML = `<p>You: ${player1Score}</p>\n<p>Computer: ${computerBotScore}</p>`;
}
totalTurns = 0;
}
setScoreBoard()

const resetScoreBoard = () => {
    player1Score = 0;
    player2Score = 0;
    computerBotScore = 0;
    setScoreBoard();
}

//multiplayer
const drawFunction = (e) => {
    
    const tile = e.target;
    
    if (singlePlayer === false){
    if (tile.innerHTML === ""){
        if (totalTurns % 2 === 0){
            player1.push(tile);
            tile.innerHTML = `<h3 class="xo">X</h3>`;
            allTilesSingle = allTilesSingle.filter(element => element !== tile);
        } if (totalTurns % 2 === 1){
            player2.push(tile);
            tile.innerHTML = `<h3 class="xo">O</h3>`;
            allTilesSingle = allTilesSingle.filter(element => element !== tile);
        } 

        if (checkForWin(player1)){
            setTimeout(() => {
            alert("Player1 wins!");
            resetBoard();
            }, 500);
            player1Score++;
        } if (checkForWin(player2)) {
            setTimeout(() => {
            alert("Player2 wins!");
            resetBoard();
            }, 500);
            player2Score++;
        }
        }
        setScoreBoard();
        console.log(allTiles);

        if (totalTurns === 9 && !checkForWin(player1) && !checkForWin(player2)){
            alert("It's a tie, no one wins b*tch");
            setTimeout(() => {
                resetBoard();
            }, 500)
        }}

}

const hideShowRules = () => {
    if (rules.style.display === 'none'){
        rules.style.display = 'block';
    } else {
        rules.style.display = 'none';
    }
}

rulesBtn.addEventListener('click', hideShowRules);
resetBtn.addEventListener('click', resetScoreBoard);
singlePlayerBtn.addEventListener('click', () => {

    if (singlePlayer === false){
        singlePlayerBtn.innerText = "MultiPlayer";
        singlePlayer = true;
        resetBoard();
        resetScoreBoard();
    } else {
        singlePlayerBtn.textContent = "SinglePlayer";
        singlePlayer = false;
        resetBoard();
        resetScoreBoard();
    }
});

allTiles.forEach(tile => {
    tile.addEventListener("click", drawFunction);
})```
2

Maybe updating the totalTurns after the calculations would be a smart idea… ahum… Instead of calculating it only once in the global scope outside the function…
Feeling smart today boys :confounded: