fs2026-Frontend-Semesterarbeit/frontend/scripts/game.js

// game.js — round management, timer, submit

const TOTAL_ROUNDS   = 3;
const ROUND_DURATION = 60; // seconds

let roundCountries = [];
let currentRound   = 0;
let scores         = [];
let timerInterval  = null;
let timeLeft       = ROUND_DURATION;

// ── DOM refs
const elCountryName = document.getElementById("country-name");
const elCountryHint = document.getElementById("country-hint");
const elRoundNum    = document.getElementById("round-num");
const elTimerNum    = document.getElementById("timer-num");
const elTimerBar    = document.getElementById("timer-bar");
const elBtnClear    = document.getElementById("btn-clear");
const elBtnSubmit   = document.getElementById("btn-submit");
const elCanvas      = document.getElementById("draw-canvas");

// ── Init
async function initGame() {
  await Countries.loadCountries();
  roundCountries = Countries.getRandomCountries(TOTAL_ROUNDS);
  currentRound   = 0;
  scores         = [];
  startRound();
}

// ── Round
function startRound() {
  const country = roundCountries[currentRound];

  // Update UI
  elRoundNum.textContent    = currentRound + 1;
  elCountryName.textContent = country.name;
  elCountryHint.textContent = country.hint || "";

  // Round pips
  if (typeof window.updateRoundPips === "function") {
    window.updateRoundPips(currentRound + 1);
  }

  // Reset canvas placeholder
  document.getElementById("canvas-wrap")?.classList.remove("has-drawing");

  // Cities on canvas
  Drawing.clear();
  Drawing.setCities(country.cities || []);

  // Timer
  timeLeft = ROUND_DURATION;
  updateTimerUI();
  clearInterval(timerInterval);
  timerInterval = setInterval(tickTimer, 1000);

  // Button state
  elBtnSubmit.disabled = false;
  elBtnSubmit.textContent = currentRound < TOTAL_ROUNDS - 1
    ? "Submit & Next Round →"
    : "Submit & See Results →";
}

function tickTimer() {
  timeLeft--;
  updateTimerUI();
  if (timeLeft <= 0) {
    clearInterval(timerInterval);
    submitRound(true); // auto-submit
  }
}

function updateTimerUI() {
  elTimerNum.textContent = timeLeft;
  const pct = (timeLeft / ROUND_DURATION) * 100;
  elTimerBar.style.width = pct + "%";

  // Colour shift
  if (timeLeft <= 10) {
    elTimerBar.style.background = "#e05c5c";
    elTimerNum.style.color      = "#e05c5c";
  } else if (timeLeft <= 20) {
    elTimerBar.style.background = "#f0b429";
    elTimerNum.style.color      = "#f0b429";
  } else {
    elTimerBar.style.background = "";
    elTimerNum.style.color      = "";
  }
}

function submitRound(auto = false) {
  clearInterval(timerInterval);
  elBtnSubmit.disabled = true;

  const points = Drawing.getPoints();
  const score  = Scoring.calculateScore(points);
  scores.push(score);

  // Update sidebar score row
  if (typeof window.updateScoreDisplay === "function") {
    window.updateScoreDisplay(currentRound, score);
  }

  // Flash score feedback
  showScoreFeedback(score);

  const delay = auto ? 400 : 1200;
  setTimeout(() => {
    if (currentRound < TOTAL_ROUNDS - 1) {
      currentRound++;
      startRound();
    } else {
      finishGame();
    }
  }, delay);
}

function showScoreFeedback(score) {
  const grade  = Scoring.getGrade(score);
  const el     = document.getElementById("score-feedback");
  el.textContent  = `${score}%  ${grade.label}`;
  el.style.color  = grade.color;
  el.style.opacity = "1";
  el.style.transform = "translateY(0)";
  setTimeout(() => {
    el.style.opacity  = "0";
    el.style.transform = "translateY(-10px)";
  }, 900);
}

function finishGame() {
  const totalScore = scores.reduce((a, b) => a + b, 0);
  const state = {
    currentRound: TOTAL_ROUNDS,
    scores,
    totalScore,
    countries: roundCountries.map(c => c.name),
  };
  Storage.saveGameState(state);

  // Save to leaderboard
  Storage.saveLeaderboard({
    name:       Storage.getPlayerName(),
    totalScore,
    scores,
    date:       new Date().toISOString(),
  });

  location.href = "results.html";
}

// ── Events
elBtnClear.addEventListener("click", () => Drawing.clear());
elBtnSubmit.addEventListener("click", () => submitRound(false));

// ── Boot
window.addEventListener("DOMContentLoaded", initGame);