script.js

window.addEventListener('DOMContentLoaded', () =>{

    const tiles = Array.from(document.querySelectorAll('.tile'));
    const playerDisplay = document.querySelector('.display-player');
    const resetButton = document.querySelector('#reset');
    const announcer = document.querySelector('.announcer');
    
    let board = ['','','','','','','','',''];
    let currentPlayer = 'X';
    let isGameActive = true;

    const PLAYERX_WON = 'PLAYERX_WON';
    const PLAYERO_WON = 'PLAYERO_WON';
    const TIE = 'TIE';
    
    const winningConditions = [
        [0,1,2],
        [3,4,5],
        [6,7,8],
        [0,3,6],
        [1,4,7],
        [2,5,8],
        [0,4,8],
        [2,4,6]
    ]

    function handleResultValidation() {
        let roundWon = false;
        for(let i = 0;i<=7 ; i++)
        {
            const winCondition = winningConditions[i];
            const a = board[winCondition[0]];
            const b = board[winCondition[1]];
            const c = board[winCondition[2]];
            if(a === '' || b === '' || c===''){
                continue;
            }
            if(a === b && b === c)
            {
                roundWon = true;
                break;
            }

        }
        if(roundWon)
        {
            announce(currentPlayer === 'X' ? PLAYERX_WON : PLAYERO_WON);
            isGameActive = false;
            return;
        }
        if(!board.includes(''))
        {
            announce(TIE);
        }
    }
    const announce = (type) => {
        switch(type)
        {
            case PLAYERO_WON:
                announcer.innerHTML = 'Player <span class="playerO">O</span> Won';
                break;
            case PLAYERX_WON:
                announcer.innerHTML = 'Player <span class="playerX">X</span> Won';
                break;
            case TIE:
                announcer.innerText = 'Tie';
        }
        announcer.classList.remove('hide');    
    };

    const isValidAction = (tile) => {
        if(tile.innerText === 'X' || tile.innerText === 'O')
        {
            return false;
        }
        return true;
    }
    const updateBoard = (index) => {
        board[index] = currentPlayer;
    }


    const changePlayer = () => {
        playerDisplay.classList.remove(`player${currentPlayer}`);
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        playerDisplay.innerText = currentPlayer;
        playerDisplay.classList.add(`player${currentPlayer}`);
    }

   const userAction = (tile,index) =>{
        if(isValidAction(tile) && isGameActive){
            tile.innerText = currentPlayer;
            tile.classList.add(`player${currentPlayer}`);
            updateBoard(index);
            handleResultValidation();
            changePlayer();
        }
    }

    const resetBoard = () => {
        board = ['', '' , '','','','','','','']
        isGameActive = true;
        announcer.classList.add('hide');
        if(currentPlayer === 'O')
        {
            changePlayer();
        }
        tiles.forEach(tile => {
            tile.innerText = '';
            tile.classList.remove('playerX');
            tile.classList.remove('playerO');
        });
    }
    tiles.forEach((tile,index) => {
        tile.addEventListener('click', () => userAction(tile,index));
    });
    resetButton.addEventListener('click', resetBoard);

});