script.js

const cells = Array.from(document.querySelectorAll("[data-cell]"));
const statusText = document.querySelector("#game-status");
const newGameButton = document.querySelector("#new-game");
const scoreX = document.querySelector("#score-x");
const scoreO = document.querySelector("#score-o");
const roundCount = document.querySelector("#round-count");
const playerX = document.querySelector("#player-x");
const playerO = document.querySelector("#player-o");

const winningLines = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8],
  [0, 3, 6], [1, 4, 7], [2, 5, 8],
  [0, 4, 8], [2, 4, 6],
];

let board = Array(9).fill("");
let currentPlayer = "X";
let gameOver = false;
let round = 1;
const scores = { X: 0, O: 0 };

function setCurrentPlayer(player) {
  currentPlayer = player;
  playerX.classList.toggle("is-active", player === "X");
  playerO.classList.toggle("is-active", player === "O");
  statusText.textContent = `${player} to play`;
}

function findWinningLine() {
  return winningLines.find(([first, second, third]) =>
    board[first] && board[first] === board[second] && board[first] === board[third]
  );
}

function playCell(event) {
  const cell = event.currentTarget;
  const index = Number(cell.dataset.cell);
  if (gameOver || board[index]) return;

  board[index] = currentPlayer;
  cell.textContent = currentPlayer;
  cell.dataset.mark = currentPlayer;
  cell.setAttribute("aria-label", `Row ${Math.floor(index / 3) + 1}, column ${(index % 3) + 1}, ${currentPlayer}`);

  const winningLine = findWinningLine();
  if (winningLine) {
    gameOver = true;
    winningLine.forEach((winningIndex) => cells[winningIndex].classList.add("is-winning"));
    scores[currentPlayer] += 1;
    scoreX.textContent = scores.X;
    scoreO.textContent = scores.O;
    statusText.textContent = `${currentPlayer} wins this round`;
    playerX.classList.remove("is-active");
    playerO.classList.remove("is-active");
    cells.forEach((boardCell) => { boardCell.disabled = true; });
  } else if (board.every(Boolean)) {
    gameOver = true;
    statusText.textContent = "It's a draw";
    playerX.classList.remove("is-active");
    playerO.classList.remove("is-active");
    cells.forEach((boardCell) => { boardCell.disabled = true; });
  } else {
    setCurrentPlayer(currentPlayer === "X" ? "O" : "X");
  }
}

function startNewGame() {
  board = Array(9).fill("");
  gameOver = false;
  round += 1;
  roundCount.textContent = String(round).padStart(2, "0");
  cells.forEach((cell, index) => {
    cell.textContent = "";
    cell.disabled = false;
    cell.classList.remove("is-winning");
    delete cell.dataset.mark;
    cell.setAttribute("aria-label", `Row ${Math.floor(index / 3) + 1}, column ${(index % 3) + 1}, empty`);
  });
  setCurrentPlayer("X");
}

cells.forEach((cell) => cell.addEventListener("click", playCell));
newGameButton.addEventListener("click", startNewGame);