script.js

const board = document.getElementById("board");
const statusText = document.getElementById("status");

let cells = [];
let currentPlayer = "X";
let isGameRunning = true;
let gameMode = "2";

let scoreX = 0;
let scoreO = 0;
let totalGames = 1;

let playerXName = "Player X";
let playerOName = "Player O";

// Start game
function startGame(mode) {
  gameMode = mode;

  // Get player names
  playerXName = document.getElementById("playerX").value || "Player X";

  if (gameMode === "1") {
    playerOName = "Computer 🤖";
  } else {
    playerOName = document.getElementById("playerO").value || "Player O";
  }

  // Show name on screen
  document.getElementById("nameX").textContent = playerXName;
  document.getElementById("nameO").textContent = playerOName;

  // Hide setup and show game

  document.getElementById("setup").style.display = "none";
  document.getElementById("game").style.display = "block";

  resetGame(true);
}

// Create board
function createBoard() {
  board.innerHTML = "";
  cells = [];

  for (let i = 0; i < 9; i++) {
    let cell = document.createElement("div");
    cell.classList.add("cell");

    cell.addEventListener("click", function () {
      handleMove(i);
    });

    board.appendChild(cell);
    cells.push(cell);
  }
}

// Handle player move

function handleMove(index) {
  if (!isGameRunning || cells[index].textContent !== "") return;

  // Put X or O
  cells[index].textContent = currentPlayer;
  cells[index].classList.add(currentPlayer);

  // Check win
  if (checkWinner()) {
    let winnerName = currentPlayer === "X" ? playerXName : playerOName;

    statusText.textContent = winnerName + " Wins! 🎉";

    updateScore(currentPlayer);
    endRound();
    return;
  }

  // Check draw
  if (isBoardFull()) {
    statusText.textContent = "Draw!";
    endRound();
    return;
  }

  // Switch player
  if (currentPlayer === "X") {
    currentPlayer = "O";
  } else {
    currentPlayer = "X";
  }

  // AI move
  if (gameMode === "1" && currentPlayer === "O") {
    setTimeout(makeAIMove, 500);
  }
}

// AI Section

function makeAIMove() {
  let emptyCells = [];

  // find empty cells
  for (let i = 0; i < cells.length; i++) {
    if (cells[i].textContent === "") {
      emptyCells.push(i);
    }
  }

  let randomIndex = emptyCells[Math.floor(Math.random() * emptyCells.length)];

  handleMove(randomIndex);
}

// check winner section
function checkWinner() {
  const patterns = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  for (let pattern of patterns) {
    let a = pattern[0];
    let b = pattern[1];
    let c = pattern[2];

    if (
      cells[a].textContent !== "" &&
      cells[a].textContent === cells[b].textContent &&
      cells[a].textContent === cells[c].textContent
    ) {
      // Highlight winning cells
      cells[a].classList.add("win");
      cells[b].classList.add("win");
      cells[c].classList.add("win");

      return true;
    }
  }

  return false;
}

// Draw section

function isBoardFull() {
  for (let cell of cells) {
    if (cell.textContent === "") {
      return false;
    }
  }
  return true;
}

// Update score section

function updateScore(player) {
  if (player === "X") {
    scoreX++;
    document.getElementById("scoreX").textContent = scoreX;
  } else {
    scoreO++;
    document.getElementById("scoreO").textContent = scoreO;
  }
}

// End round

function endRound() {
  isGameRunning = false;

  //If someone win 3 times or 5 games will end the game
  if (scoreX === 3 || scoreO === 3 || totalGames === 5) {
    setTimeout(showFinalResult, 500);
    return;
  }

  setTimeout(() => {
    totalGames++;
    document.getElementById("gameCount").textContent = totalGames;
    resetBoard();
  }, 1000);
}

// Final result

function showFinalResult() {
  if (scoreX > scoreO) {
    statusText.textContent = "🏆 " + playerXName + " Wins Series!";
  } else if (scoreO > scoreX) {
    statusText.textContent = "🏆 " + playerOName + " Wins Series!";
  } else {
    statusText.textContent = "Series Draw!";
  }
}

// Reset Board

function resetBoard() {
  for (let cell of cells) {
    cell.textContent = "";
    cell.classList.remove("X", "O", "win");
  }

  currentPlayer = "X";
  isGameRunning = true;
  statusText.textContent = "";
}

// Reset Game

function resetGame(fullReset = false) {
  if (fullReset) {
    scoreX = 0;
    scoreO = 0;
    totalGames = 1;

    document.getElementById("scoreX").textContent = 0;
    document.getElementById("scoreO").textContent = 0;
    document.getElementById("gameCount").textContent = 1;
  }

  createBoard();
  resetBoard();
}

createBoard();