app.js

"use strict";  


const cells = document.querySelectorAll(".x");
const reset = document.querySelector(".reset");
const h1 = document.querySelector(".h1")
const player = document.querySelector(".turn");
class clickTracker{
    // number of total clicks
    numclick;
    // boolean whether last click was odd in nth time
    clickNumOdd;

    //constructor
    constructor(){
        this.numclick = 0;
    }

      /*
  updates the values of variables upon a click
  */
  registerClick() {
    // 1. update totalClicks
    this.numclick += 1;
  }

  setText(){
    //if it is 2n-1 th turn, insert 'x'
    if (this.numclick % 2 === 1) {
        return "X";
    }
    // if not, insert 'O'
    else {
        return "O";
    }
  }
  
  setTurn(){
   //if it is 2n-1 th turn, insert 'x'
    if (this.numclick % 2 === 1) {
        return "Player O's turn";
    }
    // if not, insert 'O'
    else {
        return "Player X's turn";
    }
  }

   checkDraw() {
   if (this.numclick === 9) {
      return true;
   }
  }
}


function checkWin() {

   // Get each cell
   const a = document.querySelector(".x.a");
   const b = document.querySelector(".x.b");
   const c = document.querySelector(".x.c");
   const d = document.querySelector(".x.d");
   const e = document.querySelector(".x.e");
   const f = document.querySelector(".x.f");
   const g = document.querySelector(".x.g");
   const h = document.querySelector(".x.h");
   const i = document.querySelector(".x.i");

   // Get the text in it
   const aa = a.textContent;
   const bb = b.textContent;
   const cc = c.textContent;
   const dd = d.textContent;
   const ee = e.textContent;
   const ff = f.textContent;
   const gg = g.textContent;
   const hh = h.textContent;
   const ii = i.textContent;


   // check if there is three in a row
   // case 1
   if (aa === bb && bb === cc && aa !== ""){
     if (aa === "X") {
        h1.textContent = "Player X win!";
     }
     else if (aa === "O"){
        h1.textContent = "Player O win!";
     }
   }
   // case 2
   else if (aa === dd && dd === gg && aa !== ""){
     if (aa === "X") {
        h1.textContent = "Player X win!";
     }
     else if (aa === "O"){
        h1.textContent = "Player O win!";
     }
   }
   // case 3
   else if (aa === ee && ee === ii && aa !== ""){
     if (aa === "X") {
        h1.textContent = "Player X win!";
     }
     else if (aa === "O"){
        h1.textContent = "Player O win!";
     }
   }
   // case 4
   else if (dd === ee && ee === ff && dd !== ""){
     if (dd === "X") {
        h1.textContent = "Player X win!";
     }
     else if (dd === "O"){
        h1.textContent = "Player O win!";
     }
   }
   // case 5
   else if (gg === hh && hh === ii && gg !== ""){
     if (gg === "X") {
        h1.textContent = "Player X win!";
     }
     else if (gg === "O"){
        h1.textContent = "Player O win!";
     }
   }
   // case 6
   else if (bb === ee && ee === hh && hh !== ""){
     if (bb === "X") {
        h1.textContent = "Player X win!";
     }
     else if (bb === "O"){
        h1.textContent = "Player O win!";
     }
   }
   // case 8
   else if (cc === ff && ff === ii && ii !== ""){
     if (cc === "X") {
        h1.textContent = "Player X win!";
     }
     else if (cc === "O"){
        h1.textContent = "Player O win!";
     }
   }
   // case 9
   else if (gg === ee && ee === cc && cc !== ""){
     if (cc === "X") {
        h1.textContent = "Player X win!";
     }
     else if (cc === "O"){
        h1.textContent = "Player O win!";
     }
   }
}


// Create the tracker object
const tracker = new clickTracker();

cells.forEach(cell =>{
    cell.addEventListener("click", () => {
        // check if the cell is played or not
        if (cell.textContent === "" && h1.textContent === "Tic-Tac-Toe") {
          // 1. when there is a click, update the status of the tracker
          tracker.registerClick();
          // 2. insert O or X
          cell.textContent = tracker.setText();
          player.textContent = tracker.setTurn();
        }
         if (tracker.numclick === 9) {
         h1.textContent = "Draw";
         console.log(tracker.numclick);
        }
        checkWin();

    });
    
});

cells.forEach(cell =>{
    cell.addEventListener("keydown", (e) => {
      if (e.key === " " || e.key === "Enter") {
         // check if the cell is played or not
        if (cell.textContent === "" && h1.textContent === "Tic-Tac-Toe") {
          // 1. when there is a click, update the status of the tracker
          tracker.registerClick();
          // 2. insert O or X
          cell.textContent = tracker.setText();
          player.textContent = tracker.setTurn();
        }
         if (tracker.numclick === 9) {
         h1.textContent = "Draw";
         console.log(tracker.numclick);
        }
        checkWin();
      }
    });
    
});


function resetGame() {
   cells.forEach(cell => {
    cell.textContent = "";
  })
  tracker.numclick = 0;
  h1.textContent = "Tic-Tac-Toe";
  player.textContent = "Player X starts";
}


reset.addEventListener("click", resetGame)


cells.forEach((cell, index)=> {
   cell.addEventListener("keydown", (e) => {
      let newIndex = index;

   if (e.key === "ArrowRight") {
      newIndex = index + 1;
    } else if (e.key === "ArrowLeft") {
      newIndex = index - 1;
    } else if (e.key === "ArrowDown") {
      newIndex = index + 3; 
    } else if (e.key === "ArrowUp") {
      newIndex = index - 3; 
    }

    // Prevent page from scrolling
    if (["ArrowRight","ArrowLeft","ArrowUp","ArrowDown"].includes(e.key)) {
      e.preventDefault();
    }

    if (newIndex >= 0 && newIndex < cells.length) {
      cells[newIndex].focus();
    }    
   })
});


reset.addEventListener("keydown", (e) => {
  if (e.key === " ") {   
    e.preventDefault();  
  }
});