Update 2025-04-17_20:32:52

2025-04-17 20:32:52 +02:00
commit a1a4090fa1
7 changed files with 243 additions and 0 deletions
--- a/static/app.js
+++ b/static/app.js
@ -0,0 +1,104 @@
+const username = "guest";
+let currentScore = parseInt(localStorage.getItem("trisolve_score"), 10) || 0;
+
+window.onload = () => {
+  loadHighscore();
+  getChallenge();
+  updateScoreDisplay();
+  focusAnswerField();
+}
+
+function focusAnswerField() {
+  document.getElementById("answer").focus();
+}
+
+function nextRound() {
+  setTimeout(() => {
+    getChallenge();
+    focusAnswerField();
+  }, 3000);
+}
+
+function loadHighscore() {
+  const stored = localStorage.getItem("trisolve_highscore");
+  if (stored === null) {
+    localStorage.setItem("trisolve_highscore", "0");
+  }
+}
+
+function getHighscore() {
+  return parseInt(localStorage.getItem("trisolve_highscore"), 10) || 0;
+}
+
+function maybeUpdateHighscore() {
+  const high = getHighscore();
+  if (currentScore > high) {
+    localStorage.setItem("trisolve_highscore", String(currentScore));
+  }
+  localStorage.setItem("trisolve_score", String(currentScore));
+}
+
+function updateScoreDisplay() {
+  document.getElementById("score").textContent =
+    `📊 Score: ${currentScore} | 🏆 Highscore: ${getHighscore()}`;
+}
+
+async function getChallenge() {
+  try {
+    const r = await fetch(`/api/challenge?username=${username}`);
+    const d = await r.json();
+    document.getElementById("task").textContent = `🎯 ${d.task1} and ${d.task2}`;
+    document.getElementById("feedback").textContent = "";
+    document.getElementById("answer").value = "";
+    focusAnswerField();
+  } catch (e) {
+    console.error("Failed to load challenge:", e);
+  }
+}
+
+async function submitAnswer() {
+  const a = document.getElementById("answer").value;
+  if (!a.trim()) {
+    alert("Enter an answer");
+    return;
+  }
+  const parsed = Number(a);
+  if (isNaN(parsed)) {
+    alert("Please enter a valid number");
+    return;
+  }
+  const f = new FormData();
+  f.append("username", username);
+  f.append("answer", parsed);
+  try {
+    const r = await fetch("/api/submit", { method: "POST", body: f });
+    const text = await r.text();
+
+    let d;
+    try {
+      d = JSON.parse(text);
+    } catch (err) {
+      console.error("Invalid JSON:", text);
+      document.getElementById("feedback").textContent = "⚠️ Unexpected server response.";
+      return;
+    }
+
+    if (d.result === "correct") {
+      currentScore += 1;
+      maybeUpdateHighscore();
+      document.getElementById("feedback").textContent = "✅ Correct!";
+      updateScoreDisplay();
+      nextRound();
+    } else if (d.result === "wrong") {
+      document.getElementById("feedback").textContent = `❌ Wrong. Was ${d.correct}`;
+      updateScoreDisplay();
+      nextRound();
+    } else {
+      document.getElementById("feedback").textContent = `⚠️ ${d.message}`;
+    }
+  } catch (e) {
+    console.error("Submission failed:", e);
+    document.getElementById("feedback").textContent = "⚠️ Submission error.";
+  }
+}
+
--- a/static/index.html
+++ b/static/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>TriSolve</title>
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+  <h1>🧠 TriSolve</h1>
+
+  <div id="game">
+    <p id="task"></p>
+    <form onsubmit="submitAnswer(); return false;">
+      <input id="answer" type="number" placeholder="Your answer" autocomplete="off" />
+      <button type="submit">Submit</button>
+    </form>
+    <p id="score"></p>
+    <p id="feedback"></p>
+  </div>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>
+
--- a/static/style.css
+++ b/static/style.css
@ -0,0 +1,46 @@
+body {
+  padding-top: 1rem;
+  font-family: sans-serif;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background-color: #fff;
+}
+
+h1 {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+#game {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+  max-width: 400px;
+}
+
+input, button {
+  padding: 0.5rem;
+  font-size: 1rem;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 0.5rem;
+}
+
+#task, #feedback, #score {
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+#feedback {
+  margin-top: 0.5em;
+  font-weight: bold;
+}
+