Tic Tac Toe

tic_tac_toe.js

// In Action: https://codepen.io/jeesunikim/pen/wxOObg

const HUMAN_01 = "X";
const HUMAN_02 = "O";
const TIE = "TIE";

class Board {
    constructor(originalBoard) {
        this.board = new Array(originalBoard.length);
        this.winner;

        this.onReset = this.onReset.bind(this);

        this.init();
    }

    init() {
        this.onReset();
    }

    onSelect(currentPlayer, index) {
        this.board[index] = currentPlayer;

        if (this.isWinning(this.board, currentPlayer)) {
            this.winner = currentPlayer;
        } else if (this.availableSpots(this.board).length === 0) {
            this.winner = TIE;
        }
    }

    onReset() {
        for (var i = 0; i < this.board.length; i++) {
            this.board[i] = "isEmpty";
        }

        this.winner = false;
    }

    availableSpots(board) {
        let emptyIndexes = [];

        for (var i = 0; i < board.length; i++) {
            if (board[i] === "isEmpty") {
                emptyIndexes.push(i);
            }
        }

        return emptyIndexes;
    }

    isWinning(currentBoard, player) {
        if (
            (currentBoard[0] == player &&
                currentBoard[1] == player &&
                currentBoard[2] == player) ||
            (currentBoard[0] == player &&
                currentBoard[4] == player &&
                currentBoard[8] == player) ||
            (currentBoard[0] == player &&
                currentBoard[3] == player &&
                currentBoard[6] == player) ||
            (currentBoard[1] == player &&
                currentBoard[4] == player &&
                currentBoard[7] == player) ||
            (currentBoard[2] == player &&
                currentBoard[5] == player &&
                currentBoard[8] == player) ||
            (currentBoard[3] == player &&
                currentBoard[4] == player &&
                currentBoard[5] == player) ||
            (currentBoard[6] == player &&
                currentBoard[7] == player &&
                currentBoard[8] == player) ||
            (currentBoard[2] == player &&
                currentBoard[4] == player &&
                currentBoard[6] == player)
        ) {
            return true;
        } else {
            return false;
        }
    }
}

class TicTacToe {
    constructor() {
        const board = document.querySelector(".board");

        this.currentPlayer = HUMAN_01;
        this.gameOver = false;
        this.newBoard;

        this.originalDomBoard = board.querySelectorAll("li");
        this.resetBtn = document.querySelector(".js-reset");
        this.winnerText = document.querySelector(".js-winner");

        this.onGridSelect = this.onGridSelect.bind(this);
        this.onReset = this.onReset.bind(this);

        this.init();
    }

    init() {
        this.newBoard = new Board(this.originalDomBoard);

        this.originalDomBoard.forEach((grid, index) => {
            grid.addEventListener("click", () => {
                this.onGridSelect(grid, index);
            });
        });

        this.resetBtn.addEventListener("click", this.onReset);
    }

    onReset() {
        this.originalDomBoard.forEach(eachGrid => {
            eachGrid.innerHTML = "";
        });

        this.gameOver = false;
        this.removeMessage();
        this.newBoard.onReset();
    }

    onChangePlayer() {
        this.currentPlayer = this.currentPlayer === HUMAN_01 ? HUMAN_02 : HUMAN_01;
    }

    onGridSelect(selectedGrid, selectedIndex) {
        if (this.newBoard.board[selectedIndex] !== "isEmpty") {
            return;
        }

        if (!this.gameOver) {
            this.originalDomBoard[selectedIndex].innerHTML = this.currentPlayer;
            this.newBoard.onSelect(this.currentPlayer, selectedIndex);
            this.onChangePlayer();

            if (this.newBoard.winner) {
                this.gameOver = true;
                this.displayMessage(this.newBoard.winner);
            }
        } else {
            return;
        }
    }

    removeMessage() {
        this.winnerText.innerHTML = "";
    }

    displayMessage(result) {
        if (result === TIE) {
            this.winnerText.innerHTML = `${this.newBoard.winner}`;
        } else {
            this.winnerText.innerHTML = `The Winner is ${this.newBoard.winner}`;
        }
    }
}

const GAME = new TicTacToe();