Implement Tic Tac Toe Game

Implement a Tic Tac Toe component that allows two players to play a full game in the browser.

Tic Tac Toe is a two-player game played on a 3x3 grid. Players take turns marking empty cells with their symbol (commonly X and O). The first player to place three of their marks in a horizontal, vertical, or diagonal row wins the game. If all cells are filled and no player has three in a row, the game ends in a draw.

Requirements

• Grid: Render a 3x3 grid of clickable cells.
• Turns: Alternate turns between two players (for example, X and O).
• Move rules:
  • A player can only mark an empty cell.
  • Once a cell is marked, it cannot be changed for the rest of the game.
• Win detection: Detect when either player has three of their marks in a row horizontally, vertically, or diagonally, and end the game.
• Draw detection: Detect when all cells are filled and there is no winner, and mark the game as a draw.
• Status display: Show clear text indicating:
  • Which player's turn it is while the game is in progress.
  • Which player won, or that the game ended in a draw, once the game is over.
• Reset: Provide a way to reset the board and start a new game without reloading the page.

Constraints

• Use vanilla JavaScript and HTML; do not rely on frameworks or external game libraries.
• Keep all game logic (turns, win/draw detection, reset) in your own code rather than using third-party helpers.
• Structure your code so the Tic Tac Toe behavior can be reused (for example, by wiring it up to a specific root element or by exposing an initialization function).

Extensions (Optional)

These are not required, but you can implement them if you have time:

• Highlight the winning combination of cells when a player wins.
• Allow the user to choose which player goes first.
• Add simple styling or animations to make the game more visually engaging.