// Spielfeld, Statusanzeige, Restart-Button und Ergebnis-Anzeige aus dem HTML holen
const board = document.getElementById("board");
const statusText = document.getElementById("status");
const restartBtn = document.getElementById("restart");
const results = document.getElementById("results");

// Variablen für Spieler, Spielfelder, Spielstatus und Punkte
let currentPlayer, cells, gameActive, scoreX = 0, scoreO = 0;

// Gewinnkombinationen (Reihen, Spalten, Diagonalen)
const winConditions = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8],
  [0, 3, 6], [1, 4, 7], [2, 5, 8],
  [0, 4, 8], [2, 4, 6],
];

// Anzeige des Spielstands aktualisieren
function updateResults() {
  results.innerHTML = `Spielstand: <span class="playerX">X - ${scoreX}</span> | <span class="playerO">O - ${scoreO}</span>`;
}

// Neues Spielfeld erstellen / Spiel zurücksetzen
function createBoard() {
  board.innerHTML = "";              // altes Spielfeld leeren
  cells = Array(9).fill("");         // leeres 3x3 Array erzeugen
  gameActive = true;                 // Spiel aktivieren
  currentPlayer = "X";               // Spieler X beginnt
  statusText.textContent = "Spieler X beginnt!";

  // 9 Felder erstellen
  for (let i = 0; i < 9; i++) {
    const cell = document.createElement("div");
    cell.className = "cell";         // Standard CSS-Klasse
    cell.dataset.index = i;          // Index für später speichern
    cell.onclick = handleClick;      // Klick-Event hinzufügen
    board.appendChild(cell);         // Feld ins Board einsetzen
  }
  updateResults();                   // Spielstand einblenden
}

// Klick auf ein Feld
function handleClick(e) {
  const i = e.target.dataset.index;  // Index des Felds
  if (!gameActive || cells[i]) return; // Abbrechen falls Spiel vorbei oder Feld schon belegt

  cells[i] = currentPlayer;          // Feld mit aktuellem Spieler füllen
  e.target.textContent = currentPlayer; 
  e.target.classList.add("taken");   // CSS-Klasse für belegte Felder

  // Prüfen ob gewonnen
  if (checkWin()) {
    statusText.textContent = `Spieler ${currentPlayer} hat gewonnen!`;
    gameActive = false;              // Spiel beenden
    currentPlayer === "X" ? scoreX++ : scoreO++; // Punkte vergeben
    updateResults();                 // Score anzeigen
  } 
  // Prüfen auf Unentschieden
  else if (!cells.includes("")) {
    statusText.textContent = "Unentschieden!";
    gameActive = false;
  } 
  // Spieler wechseln
  else {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    statusText.textContent = `Spieler ${currentPlayer} ist dran!`;
  }
}

// Prüfen ob aktueller Spieler eine Gewinnbedingung erfüllt
function checkWin() {
  return winConditions.some(c => c.every(i => cells[i] === currentPlayer));
}

// Restart-Button mit Spielfeld verbinden
restartBtn.onclick = createBoard;

// Spiel initial starten
createBoard();