Initial commit

static/app.js

@@ -0,0 +1,177 @@
+(() => {
+  const startBtn = document.getElementById('startBtn');
+  const timeEl = document.getElementById('time');
+  const progressEl = document.getElementById('progress');
+  const problemEl = document.getElementById('problem');
+  const optionsEl = document.getElementById('options');
+  const gameEl = document.getElementById('game');
+  const statusEl = document.getElementById('status');
+  const resultEl = document.getElementById('result');
+  const fxLayer = document.getElementById('fxLayer');
+
+  let sessionId = null;
+  let totalQuestions = 20;
+  let remaining = 60;
+  let countdown = null;
+  let inFlight = false;
+
+  function setStatus(msg) {
+    statusEl.textContent = msg || '';
+  }
+
+  function showGame(show) {
+    gameEl.classList.toggle('hidden', !show);
+  }
+
+  function showResult(score) {
+    const { correct, total_answered, total } = score;
+    resultEl.innerHTML = `
+      <div class="score">Результат: <strong>${correct}</strong> из <strong>${total}</strong></div>
+      <div class="small">Отвечено: ${total_answered}</div>
+      <button class="again" id="againBtn">Сыграть ещё</button>
+    `;
+    resultEl.classList.remove('hidden');
+    document.getElementById('againBtn')?.addEventListener('click', () => {
+      resultEl.classList.add('hidden');
+      start();
+    });
+  }
+
+  function renderQuestion(q) {
+    if (!q) return;
+    problemEl.textContent = `${q.a} × ${q.b}`;
+    optionsEl.innerHTML = '';
+    q.options.forEach(value => {
+      const btn = document.createElement('button');
+      btn.className = 'option-btn';
+      btn.textContent = String(value);
+      btn.addEventListener('click', () => answer(value, btn));
+      optionsEl.appendChild(btn);
+    });
+    progressEl.textContent = `${q.index}/${totalQuestions}`;
+  }
+
+  function stopTimer() {
+    if (countdown) {
+      clearInterval(countdown);
+      countdown = null;
+    }
+  }
+
+  function startTimer(seconds) {
+    remaining = seconds;
+    timeEl.textContent = String(remaining);
+    stopTimer();
+    countdown = setInterval(() => {
+      remaining -= 1;
+      if (remaining <= 0) {
+        remaining = 0;
+        timeEl.textContent = '0';
+        stopTimer();
+      } else {
+        timeEl.textContent = String(remaining);
+      }
+    }, 1000);
+  }
+
+  async function start() {
+    if (inFlight) return;
+    inFlight = true;
+    setStatus('');
+    showGame(false);
+    startBtn.disabled = true;
+    resultEl.classList.add('hidden');
+    try {
+      const res = await fetch('/api/session/start', { method: 'POST' });
+      if (!res.ok) throw new Error('Не удалось начать сессию');
+      const data = await res.json();
+      sessionId = data.session_id;
+      totalQuestions = data.total_questions;
+      startTimer(data.remaining_seconds);
+      renderQuestion(data.question);
+      showGame(true);
+      setStatus('Отвечайте как можно быстрее!');
+    } catch (e) {
+      console.error(e);
+      setStatus('Ошибка старта. Попробуйте ещё раз.');
+    } finally {
+      startBtn.disabled = false;
+      inFlight = false;
+    }
+  }
+
+  function celebrateFromElement(el) {
+    if (!fxLayer) return;
+    const rect = el.getBoundingClientRect();
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    const count = 40;
+    for (let i = 0; i < count; i++) {
+      const p = document.createElement('span');
+      p.className = 'confetti';
+      // origin
+      p.style.left = `${x}px`;
+      p.style.top = `${y}px`;
+      // random trajectory
+      const angle = Math.random() * Math.PI * 2;
+      const distance = 60 + Math.random() * 80;
+      const tx = Math.cos(angle) * distance;
+      const ty = Math.sin(angle) * distance + 40 + Math.random() * 60; // gravity pull
+      const rot = (Math.random() * 720 - 360).toFixed(0) + 'deg';
+      p.style.setProperty('--tx', `${tx.toFixed(0)}px`);
+      p.style.setProperty('--ty', `${ty.toFixed(0)}px`);
+      p.style.setProperty('--rot', rot);
+      const hue = Math.floor(Math.random() * 360);
+      p.style.backgroundColor = `hsl(${hue} 90% 55%)`;
+      p.style.animation = `confetti ${650 + Math.random() * 400}ms ease-out forwards`;
+      fxLayer.appendChild(p);
+      setTimeout(() => p.remove(), 1200);
+    }
+  }
+
+  async function answer(value, clickedBtn) {
+    if (!sessionId || inFlight) return;
+    inFlight = true;
+    // Disable all buttons to prevent double clicks
+    const buttons = Array.from(optionsEl.querySelectorAll('button'));
+    buttons.forEach(b => b.disabled = true);
+    try {
+      const res = await fetch(`/api/session/${sessionId}/answer`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ answer: value }),
+      });
+      if (!res.ok) throw new Error('Не удалось отправить ответ');
+      const data = await res.json();
+
+      // feedback
+      if (data.correct) {
+        clickedBtn.classList.add('correct');
+        celebrateFromElement(clickedBtn);
+      } else {
+        clickedBtn.classList.add('wrong');
+      }
+
+      // Small pause to show feedback
+      await new Promise(r => setTimeout(r, data.correct ? 350 : 250));
+
+      if (data.finished) {
+        stopTimer();
+        showGame(false);
+        const reason = data.reason === 'timeout' ? 'Время вышло.' : 'Завершено!';
+        setStatus(reason);
+        showResult(data.score);
+      } else {
+        timeEl.textContent = String(data.remaining_seconds);
+        renderQuestion(data.question);
+      }
+    } catch (e) {
+      console.error(e);
+      setStatus('Ошибка ответа. Перезапустите сессию.');
+    } finally {
+      inFlight = false;
+    }
+  }
+
+  startBtn.addEventListener('click', start);
+})();