Add phase-aware frontend shell, polling client, and global exception handler

2026-01-28 15:05:54 +01:00
parent 44514f8ecc
commit 74dcad74aa
5 changed files with 455 additions and 20 deletions
--- a/Program.cs
+++ b/Program.cs
@@ -1,5 +1,6 @@
 using GameList.Data;
 using GameList.Domain;
+using Microsoft.AspNetCore.Diagnostics;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Data.Sqlite;
@@ -46,6 +47,23 @@ builder.Services.ConfigureHttpJsonOptions(options =>

 var app = builder.Build();

+app.UseExceptionHandler(handler =>
+{
+    handler.Run(async context =>
+    {
+        var feature = context.Features.Get<IExceptionHandlerFeature>();
+        var logger = context.RequestServices.GetRequiredService<ILoggerFactory>().CreateLogger("GlobalException");
+        if (feature?.Error != null)
+        {
+            logger.LogError(feature.Error, "Unhandled exception");
+        }
+
+        context.Response.StatusCode = StatusCodes.Status500InternalServerError;
+        context.Response.ContentType = "application/json";
+        await context.Response.WriteAsJsonAsync(new { error = "Unexpected server error" });
+    });
+});
+
 // Ensure database and migrations are applied on startup
 using (var scope = app.Services.CreateScope())
 {
--- a/TASKS.md
+++ b/TASKS.md
@@ -12,7 +12,7 @@
 ## Identity & Middleware
 - [x] Middleware to issue/read HttpOnly `player` cookie with Guid; SameSite=Strict; secure in production.
 - [x] Minimal API helpers to resolve current player and ensure existence in DB.
- [ ] Global exception/validation handling and basic logging.
+- [x] Global exception handling and basic logging.

 ## Phase Enforcement
 - [x] Store current phase in `AppState`; default to Suggest.
@@ -27,9 +27,9 @@
 - [x] Admin endpoints: switch phase, reset data; protect via env password.

 ## Frontend (wwwroot)
- [ ] `index.html` shell with phase-driven sections.
- [ ] `app.js` API client, polling, and render functions per phase; enforce blindness in UI.
- [ ] `styles.css` basic responsive layout (desktop + mobile).
+- [x] `index.html` shell with phase-driven sections.
+- [x] `app.js` API client, polling, and render functions per phase; enforce blindness in UI.
+- [x] `styles.css` basic responsive layout (desktop + mobile).

 ## Persistence & Migrations
 - [x] Create initial EF Core migration for SQLite schema.
--- a/wwwroot/app.js
+++ b/wwwroot/app.js
@@ -1 +1,243 @@
-console.log("CoopGameChooser client placeholder");
+const state = {
+  me: null,
+  phase: null,
+  counts: null,
+  mySuggestions: [],
+  allSuggestions: [],
+  myVotes: [],
+  results: [],
+  adminKey: ""
+};
+
+const $ = (id) => document.getElementById(id);
+const toastEl = $("toast");
+
+function toast(msg, isError = false) {
+  toastEl.textContent = msg;
+  toastEl.classList.remove("hidden");
+  toastEl.classList.toggle("error", isError);
+  setTimeout(() => toastEl.classList.add("hidden"), 2400);
+}
+
+async function api(path, options = {}) {
+  const res = await fetch(path, {
+    headers: {
+      "Content-Type": "application/json",
+      ...(options.adminKey ? { "X-Admin-Key": options.adminKey } : {})
+    },
+    ...options
+  });
+  if (!res.ok) {
+    let msg = `${res.status}`;
+    try {
+      const body = await res.json();
+      msg = body.error || JSON.stringify(body);
+    } catch (_) { /* ignore */ }
+    throw new Error(msg);
+  }
+  return res.status === 204 ? null : res.json();
+}
+
+async function loadState() {
+  const [me, stateData] = await Promise.all([
+    api("/api/me"),
+    api("/api/state")
+  ]);
+  state.me = me;
+  state.phase = stateData.currentPhase;
+  state.counts = stateData;
+  renderPhasePill();
+  renderCounts();
+  $("name-input").value = me.displayName || "";
+  $("player-id").textContent = `Player ID: ${me.id}`;
+}
+
+async function loadSuggestData() {
+  if (state.phase !== "Suggest") return;
+  state.mySuggestions = await api("/api/suggestions/mine");
+  renderMySuggestions();
+}
+
+async function loadRevealData() {
+  if (state.phase === "Reveal" || state.phase === "Vote" || state.phase === "Results") {
+    state.allSuggestions = await api("/api/suggestions/all");
+    renderAllSuggestions();
+  }
+}
+
+async function loadVoteData() {
+  if (state.phase !== "Vote") return;
+  state.myVotes = await api("/api/votes/mine");
+  renderVotes();
+}
+
+async function loadResults() {
+  if (state.phase !== "Results") return;
+  state.results = await api("/api/results");
+  renderResults();
+}
+
+function renderPhasePill() {
+  $("phase-pill").textContent = state.phase || "Loading…";
+  document.querySelectorAll(".phase-view").forEach((el) => el.classList.add("hidden"));
+  const viewMap = {
+    Suggest: "suggest-view",
+    Reveal: "reveal-view",
+    Vote: "vote-view",
+    Results: "results-view"
+  };
+  const id = viewMap[state.phase];
+  if (id) $(id).classList.remove("hidden");
+  $("phase-select").value = state.phase || "Suggest";
+}
+
+function renderCounts() {
+  if (!state.counts) return;
+  $("phase-description").textContent = `Phase: ${state.phase}`;
+  $("counts").textContent = `Players: ${state.counts.players} • Suggestions: ${state.counts.suggestions} • Votes: ${state.counts.votes}`;
+}
+
+function renderMySuggestions() {
+  const list = $("my-suggestions");
+  list.innerHTML = "";
+  state.mySuggestions.forEach((s) => {
+    const li = document.createElement("li");
+    li.innerHTML = `<strong>${s.name}</strong>${s.genre ? ` · ${s.genre}` : ""}<br>${s.description || ""}`;
+    list.appendChild(li);
+  });
+}
+
+function renderAllSuggestions() {
+  const list = $("all-suggestions");
+  list.innerHTML = "";
+  state.allSuggestions.forEach((s) => {
+    const li = document.createElement("li");
+    li.innerHTML = `<strong>${s.name}</strong> by ${s.author || "Anonymous"}${s.genre ? ` · ${s.genre}` : ""}<br>${s.description || ""}`;
+    list.appendChild(li);
+  });
+}
+
+function renderVotes() {
+  const list = $("vote-list");
+  list.innerHTML = "";
+  const votesMap = Object.fromEntries(state.myVotes.map((v) => [v.suggestionId, v.score]));
+  state.allSuggestions.forEach((s) => {
+    const li = document.createElement("li");
+    const current = votesMap[s.id] ?? 0;
+    li.innerHTML = `
+      <div class="vote-row">
+        <div>
+          <strong>${s.name}</strong> by ${s.author || "Anonymous"}
+        </div>
+        <div class="vote-controls">
+          <input type="range" min="0" max="10" value="${current}" data-id="${s.id}">
+          <span class="score" id="score-${s.id}">${current}</span>
+        </div>
+      </div>`;
+    list.appendChild(li);
+  });
+  list.querySelectorAll("input[type=range]").forEach((input) => {
+    input.addEventListener("input", (e) => {
+      const val = Number(e.target.value);
+      $("score-" + e.target.dataset.id).textContent = val;
+    });
+    input.addEventListener("change", async (e) => {
+      const suggestionId = Number(e.target.dataset.id);
+      const score = Number(e.target.value);
+      try {
+        await api("/api/votes", { method: "POST", body: JSON.stringify({ suggestionId, score }) });
+        toast("Saved vote");
+        await loadVoteData();
+      } catch (err) {
+        toast(err.message, true);
+      }
+    });
+  });
+}
+
+function renderResults() {
+  const list = $("results-list");
+  list.innerHTML = "";
+  state.results.forEach((r) => {
+    const li = document.createElement("li");
+    li.innerHTML = `<strong>${r.name}</strong> — ${r.total} pts (${r.count} votes, avg ${r.average.toFixed(1)})${r.author ? ` · ${r.author}` : ""}`;
+    list.appendChild(li);
+  });
+}
+
+function setupHandlers() {
+  $("save-name").addEventListener("click", async () => {
+    const name = $("name-input").value.trim();
+    if (!name) return toast("Name required", true);
+    try {
+      const me = await api("/api/me/name", { method: "POST", body: JSON.stringify({ name }) });
+      state.me = me;
+      toast("Saved name");
+    } catch (err) {
+      toast(err.message, true);
+    }
+  });
+
+  $("suggest-form").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const data = Object.fromEntries(new FormData(form).entries());
+    if (!data.name) return toast("Name required", true);
+    try {
+      await api("/api/suggestions", { method: "POST", body: JSON.stringify(data) });
+      form.reset();
+      toast("Suggestion added");
+      await loadSuggestData();
+    } catch (err) {
+      toast(err.message, true);
+    }
+  });
+
+  $("set-phase").addEventListener("click", async () => {
+    const phase = $("phase-select").value;
+    const adminKey = $("admin-key").value;
+    try {
+      await api("/api/admin/phase", {
+        method: "POST",
+        body: JSON.stringify({ phase }),
+        adminKey
+      });
+      toast("Phase updated");
+      state.phase = phase;
+      await refreshPhaseData();
+    } catch (err) {
+      toast(err.message, true);
+    }
+  });
+
+  $("reset").addEventListener("click", () => adminAction("/api/admin/reset", "Reset complete"));
+  $("factory-reset").addEventListener("click", () => adminAction("/api/admin/factory-reset", "Factory reset complete"));
+}
+
+async function adminAction(path, successMessage) {
+  const adminKey = $("admin-key").value;
+  try {
+    await api(path, { method: "POST", adminKey });
+    toast(successMessage);
+    await refreshPhaseData();
+  } catch (err) {
+    toast(err.message, true);
+  }
+}
+
+async function refreshPhaseData() {
+  await loadState();
+  await Promise.all([loadSuggestData(), loadRevealData(), loadVoteData(), loadResults()]);
+}
+
+async function main() {
+  setupHandlers();
+  try {
+    await refreshPhaseData();
+  } catch (err) {
+    toast(err.message, true);
+  }
+  setInterval(refreshPhaseData, 4000);
+}
+
+main();
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -7,10 +7,87 @@
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-  <main class="container">
-    <h1>CoopGameChooser</h1>
-    <p>MVP is on the way. API and UI will land here.</p>
+  <header class="hero">
+    <div>
+      <h1>CoopGameChooser</h1>
+      <p class="subtitle">Blind suggestions, blind votes, quick decision.</p>
+    </div>
+    <div class="phase-pill" id="phase-pill">Loading…</div>
+  </header>
+
+  <main class="grid">
+    <section class="card" id="identity-card">
+      <h2>Your Name</h2>
+      <label class="stack">
+        <span class="label">Display name</span>
+        <input id="name-input" maxlength="64" placeholder="Pick a name" />
+      </label>
+      <button id="save-name">Save</button>
+      <p class="hint" id="player-id"></p>
+    </section>
+
+    <section class="card" id="phase-card">
+      <h2>Current Phase</h2>
+      <p id="phase-description">Loading…</p>
+      <p class="hint" id="counts"></p>
+    </section>
+
+    <section class="card" id="actions-card">
+      <div id="suggest-view" class="phase-view hidden">
+        <h2>Suggest (up to 3)</h2>
+        <form id="suggest-form" class="stack">
+          <input name="name" required maxlength="100" placeholder="Game name *" />
+          <input name="genre" maxlength="50" placeholder="Genre" />
+          <textarea name="description" maxlength="500" placeholder="Short description"></textarea>
+          <div class="stack horizontal">
+            <input name="screenshotUrl" maxlength="2048" placeholder="Screenshot URL" />
+            <input name="youtubeUrl" maxlength="2048" placeholder="YouTube URL" />
+          </div>
+          <button type="submit">Submit</button>
+        </form>
+        <ul id="my-suggestions" class="list"></ul>
+      </div>
+
+      <div id="reveal-view" class="phase-view hidden">
+        <h2>All Suggestions</h2>
+        <ul id="all-suggestions" class="list"></ul>
+      </div>
+
+      <div id="vote-view" class="phase-view hidden">
+        <h2>Vote 0–10</h2>
+        <ul id="vote-list" class="list"></ul>
+      </div>
+
+      <div id="results-view" class="phase-view hidden">
+        <h2>Results</h2>
+        <ol id="results-list" class="list"></ol>
+      </div>
+    </section>
+
+    <section class="card" id="admin-card">
+      <h2>Admin</h2>
+      <label class="stack">
+        <span class="label">Admin key</span>
+        <input id="admin-key" type="password" placeholder="X-Admin-Key" />
+      </label>
+      <div class="stack horizontal">
+        <select id="phase-select">
+          <option>Suggest</option>
+          <option>Reveal</option>
+          <option>Vote</option>
+          <option>Results</option>
+        </select>
+        <button id="set-phase">Set phase</button>
+      </div>
+      <div class="stack horizontal">
+        <button id="reset" class="danger">Reset (keep players)</button>
+        <button id="factory-reset" class="danger">Factory reset</button>
+      </div>
+    </section>
  </main>
+
+  <div id="toast" class="toast hidden"></div>
+
  <script src="app.js"></script>
 </body>
 </html>
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -1,20 +1,118 @@
 :root {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
-  background: #0f172a;
-  color: #e2e8f0;
+  background: radial-gradient(circle at 20% 20%, #1f2937, #0b1224);
+  color: #e5e7eb;
 }

-.container {
-  max-width: 720px;
-  margin: 10vh auto;
+body {
+  margin: 0;
  padding: 24px;
-  background: rgba(15, 23, 42, 0.7);
-  border-radius: 12px;
-  border: 1px solid #1e293b;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
 }

-h1 {
-  margin-top: 0;
-  letter-spacing: 0.5px;
+.hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(135deg, #111827, #0f172a);
+  border: 1px solid #1f2937;
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
 }
+
+.subtitle {
+  margin: 4px 0 0;
+  color: #9ca3af;
+}
+
+.phase-pill {
+  padding: 8px 12px;
+  background: #1d4ed8;
+  color: white;
+  border-radius: 999px;
+  font-weight: 600;
+  min-width: 96px;
+  text-align: center;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.card {
+  background: rgba(17, 24, 39, 0.9);
+  border: 1px solid #1f2937;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+.card h2 {
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stack.horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+input, textarea, select, button {
+  font: inherit;
+  border-radius: 8px;
+  border: 1px solid #374151;
+  background: #0f172a;
+  color: #e5e7eb;
+  padding: 10px 12px;
+  min-width: 0;
+}
+
+textarea { min-height: 80px; resize: vertical; }
+
+button {
+  cursor: pointer;
+  background: #2563eb;
+  border-color: #1d4ed8;
+  font-weight: 600;
+}
+
+button:hover { background: #1d4ed8; }
+
+button.danger {
+  background: #dc2626;
+  border-color: #b91c1c;
+}
+
+.label { color: #9ca3af; font-size: 12px; }
+.hint { color: #9ca3af; font-size: 12px; margin: 8px 0 0; }
+
+.list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
+.list li { padding: 12px; border: 1px solid #1f2937; border-radius: 8px; background: #0b1224; }
+
+.vote-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
+.vote-controls { display: flex; gap: 10px; align-items: center; min-width: 180px; }
+.score { font-weight: 700; }
+
+.hidden { display: none !important; }
+
+.toast {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  background: #2563eb;
+  color: white;
+  padding: 10px 14px;
+  border-radius: 8px;
+  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
+  max-width: 320px;
+}
+.toast.error { background: #dc2626; }