<!doctype html>
<html>
  <head>
    <title>Tic Tac Toe</title>

    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}"
    />
  </head>

  <body>
    <h1>Tic Tac Toe</h1>

    <div class="board">
      <div class="cell" onclick="play(this, 0)"></div>
      <div class="cell" onclick="play(this, 1)"></div>
      <div class="cell" onclick="play(this, 2)"></div>

      <div class="cell" onclick="play(this, 3)"></div>
      <div class="cell" onclick="play(this, 4)"></div>
      <div class="cell" onclick="play(this, 5)"></div>

      <div class="cell" onclick="play(this, 6)"></div>
      <div class="cell" onclick="play(this, 7)"></div>
      <div class="cell" onclick="play(this, 8)"></div>
    </div>

    <h2 id="status">Player X Turn</h2>

    <script>
      let board = ["", "", "", "", "", "", "", "", ""];
      let current = "X";

      const win = [
        [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 play(cell, index) {
        if (board[index] != "") return;

        board[index] = current;
        cell.innerText = current;

        if (checkWinner()) {
          document.getElementById("status").innerText = current + " Wins!";
          return;
        }

        current = current === "X" ? "O" : "X";

        document.getElementById("status").innerText =
          "Player " + current + " Turn";
      }

      function checkWinner() {
        for (let c of win) {
          if (
            board[c[0]] &&
            board[c[0]] === board[c[1]] &&
            board[c[1]] === board[c[2]]
          )
            return true;
        }

        return false;
      }
    </script>
  </body>
</html>
