Split frontend UI into feature modules

wwwroot/js/admin-ui.js

@@ -0,0 +1,103 @@
+import { t } from "./i18n.js";
+import { state } from "./state.js";
+import { $ } from "./dom.js";
+import { buildLinkOptionLabel, escapeHtml, truncate } from "./ui-utils.js";
+
+function displayPlayerStatus(player) {
+    if (!player) return "";
+    const phase = player.phase;
+    if (phase === "Suggest") return t("admin.statusSuggesting");
+    if (phase === "Vote") return player.finalized ? t("admin.statusFinished") : t("admin.statusVoting");
+    if (phase === "Results") return t("admin.statusFinished");
+    return phase;
+}
+
+export function renderAdminVoteStatus() {
+    if (!state.me?.isAdmin) return;
+    const statusBadge = $("admin-ready-status");
+    const table = $("admin-player-table")?.querySelector("tbody");
+    if (!state.adminVoteStatus || !statusBadge || !table) return;
+
+    table.innerHTML = "";
+    state.adminVoteStatus.voters.forEach((v) => {
+        const tr = document.createElement("tr");
+        const statusText = displayPlayerStatus(v);
+        const gamesTooltip = escapeHtml((v.suggestionTitles || []).join(", "));
+        const nameText = escapeHtml(truncate(v.name, 28));
+        const userText = escapeHtml(truncate(v.username, 24));
+        tr.innerHTML = `
+        <td title="${escapeHtml(v.name)}">${nameText}</td>
+        <td class="muted small" title="${escapeHtml(v.username)}">${userText}</td>
+        <td>${statusText}</td>
+        <td title="${gamesTooltip}">${v.suggestionCount ?? 0}</td>
+        <td><button class="chip" data-grant-joker="${v.playerId}" type="button">${v.hasJoker ? "🎟" : t("admin.grantJokerChip")}</button></td>
+        <td><button class="chip danger-chip" data-delete-player="${v.playerId}" data-name="${v.name}" type="button">✕</button></td>
+      `;
+        table.appendChild(tr);
+    });
+
+    const waiting = state.adminVoteStatus.waiting;
+    const ready = waiting.length === 0;
+    const waitingDisplay = waiting.map((name) =>
+        name?.length > 24 ? `${name.slice(0, 21)}...` : name,
+    );
+    statusBadge.textContent = ready
+        ? t("admin.readyForResults")
+        : t("admin.waitingForPlayers", { names: waitingDisplay.join(", ") });
+    statusBadge.className = ready ? "badge" : "badge warning";
+}
+
+export function renderAdminLinker() {
+    const wrap = $("admin-linker");
+    const source = $("link-source");
+    const target = $("link-target");
+    if (!wrap || !source || !target) return;
+
+    const visible = state.me?.isAdmin && state.phase === "Vote";
+    wrap.classList.toggle("hidden", !visible);
+    if (!visible) return;
+
+    const previousSource = source.value;
+    const previousTarget = target.value;
+    const options = (state.allSuggestions ?? []).slice().sort((a, b) => a.name.localeCompare(b.name));
+
+    const fillSelect = (select, placeholderKey) => {
+        select.innerHTML = "";
+        const placeholder = document.createElement("option");
+        placeholder.value = "";
+        placeholder.textContent = t(placeholderKey);
+        placeholder.disabled = true;
+        placeholder.selected = true;
+        select.appendChild(placeholder);
+
+        options.forEach((s) => {
+            const opt = document.createElement("option");
+            opt.value = s.id;
+            opt.textContent = buildLinkOptionLabel(s);
+            select.appendChild(opt);
+        });
+    };
+
+    fillSelect(source, "admin.linkSourcePlaceholder");
+    fillSelect(target, "admin.linkTargetPlaceholder");
+
+    if (previousSource && options.some((s) => String(s.id) === previousSource)) source.value = previousSource;
+    if (previousTarget && options.some((s) => String(s.id) === previousTarget)) target.value = previousTarget;
+
+    const preventSameSelection = () => {
+        const sourceVal = source.value;
+        const targetVal = target.value;
+        Array.from(target.options).forEach((opt) => {
+            if (!opt.value) return;
+            opt.disabled = opt.value === sourceVal;
+        });
+        Array.from(source.options).forEach((opt) => {
+            if (!opt.value) return;
+            opt.disabled = opt.value === targetVal;
+        });
+    };
+
+    source.onchange = preventSameSelection;
+    target.onchange = preventSameSelection;
+    preventSameSelection();
+}

wwwroot/js/modals-ui.js

@@ -0,0 +1,97 @@
+import { t } from "./i18n.js";
+import { toast } from "./dom.js";
+import { escapeHtml } from "./ui-utils.js";
+
+export function openLightbox(url, title) {
+    const overlay = document.createElement("div");
+    overlay.className = "lightbox";
+    const safeTitle = escapeHtml(title || "");
+    overlay.innerHTML = `
+    <div class="lightbox-content">
+      <button class="lightbox-close" aria-label="${t("lightbox.close")}">✕</button>
+      <img src="${url}" alt="${safeTitle}" />
+      <p>${safeTitle}</p>
+    </div>
+  `;
+    overlay.addEventListener("click", (e) => {
+        if (
+            e.target.classList.contains("lightbox") ||
+            e.target.classList.contains("lightbox-close")
+        ) {
+            overlay.remove();
+        }
+    });
+    document.body.appendChild(overlay);
+}
+
+export function openConfirmModal({ title, body, confirmLabel, cancelLabel = t("modal.cancel"), onConfirm }) {
+    const overlay = document.createElement("div");
+    overlay.className = "edit-modal";
+    const panel = document.createElement("div");
+    panel.className = "edit-panel";
+    panel.innerHTML = `
+      <div class="edit-header">
+        <h3>${title}</h3>
+        <button class="lightbox-close" aria-label="${t("modal.close")}">x</button>
+      </div>
+      <div class="edit-body">
+        <p>${body}</p>
+      </div>
+    `;
+    const close = () => overlay.remove();
+    const actions = document.createElement("div");
+    actions.className = "stack horizontal";
+    const confirmBtn = document.createElement("button");
+    confirmBtn.textContent = confirmLabel ?? t("modal.confirm");
+    actions.append(confirmBtn);
+    if (cancelLabel !== null && cancelLabel !== undefined) {
+        const cancelBtn = document.createElement("button");
+        cancelBtn.className = "ghost";
+        cancelBtn.type = "button";
+        cancelBtn.textContent = cancelLabel;
+        actions.append(cancelBtn);
+        cancelBtn.addEventListener("click", close);
+    }
+    panel.querySelector(".edit-body")?.appendChild(actions);
+
+    overlay.addEventListener("click", (e) => {
+        if (
+            e.target.classList.contains("edit-modal") ||
+            e.target.classList.contains("lightbox-close")
+        ) {
+            close();
+        }
+    });
+    confirmBtn.addEventListener("click", async () => {
+        try {
+            await onConfirm?.(close);
+        } catch (err) {
+            toast(err.message, true);
+        }
+    });
+
+    overlay.appendChild(panel);
+    document.body.appendChild(overlay);
+}
+
+export function openResultsRelockModal() {
+    openConfirmModal({
+        title: t("results.relockedTitle"),
+        body: t("results.relockedBody"),
+        confirmLabel: t("results.relockedConfirm"),
+        cancelLabel: null,
+        onConfirm: (close) => close(),
+    });
+}
+
+export function openSuggestionsChangedModal(names) {
+    const uniq = Array.from(new Set(names)).filter(Boolean);
+    if (uniq.length === 0) return;
+    openConfirmModal({
+        title: t("vote.listUpdatedTitle"),
+        body: t("vote.listUpdatedBody", { names: uniq.join(", ") }),
+        confirmLabel: t("vote.listUpdatedConfirm"),
+        cancelLabel: null,
+        onConfirm: (close) => close(),
+    });
+}

wwwroot/js/results-ui.js

@@ -0,0 +1,98 @@
+import { t } from "./i18n.js";
+import { state } from "./state.js";
+import { $ } from "./dom.js";
+import { linkRootId, renderLinkBadge, escapeHtml, safeUrl } from "./ui-utils.js";
+import { scoreToEmoji } from "./votes-ui.js";
+import { openLightbox } from "./modals-ui.js";
+
+export function renderResults() {
+    const container = $("results-list");
+    if (!container) return;
+    container.innerHTML = "";
+    const table = document.createElement("table");
+    table.className = "results-table";
+    table.innerHTML = `
+    <thead>
+      <tr>
+        <th>${t("results.rank")}</th>
+        <th>${t("results.game")}</th>
+        <th>${t("results.author")}</th>
+        <th>${t("results.average")}</th>
+        <th>${t("results.votesList")}</th>
+        <th>${t("results.myVote")}</th>
+        <th>${t("results.links")}</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  `;
+    const tbody = table.querySelector("tbody");
+    const rankByRoot = new Map();
+    let nextRank = 1;
+    state.results.forEach((r) => {
+        const root = linkRootId(r);
+        let rank = rankByRoot.get(root);
+        if (!rank) {
+            rank = nextRank++;
+            rankByRoot.set(root, rank);
+        }
+        const medal = rank === 1 ? "🥇" : rank === 2 ? "🥈" : rank === 3 ? "🥉" : `${rank}`;
+        const row = document.createElement("tr");
+        const podiumClass = rank === 1 ? "podium podium-1" : rank === 2 ? "podium podium-2" : rank === 3 ? "podium podium-3" : "";
+        row.className = podiumClass;
+        const safeName = escapeHtml(r.name);
+        const safeAuthor = escapeHtml(r.author ?? "—");
+        const safeShot = safeUrl(r.screenshotUrl);
+        const safeGameUrl = safeUrl(r.gameUrl);
+        const safeYoutubeUrl = safeUrl(r.youtubeUrl);
+        row.innerHTML = `
+      <td class="rank-cell"><span class="medal">${medal}</span></td>
+      <td class="game-cell">
+         ${safeShot ? `<img class="thumb clickable-thumb" src="${safeShot}" alt="${safeName}">` : ""}
+         <div class="game-meta">
+           <div class="title-line">
+             <span class="title-text">${safeName}</span>
+             ${renderLinkBadge(r)}
+           </div>
+           ${buildResultMeta(r)}
+         </div>
+      </td>
+      <td class="author-cell">${safeAuthor || "—"}</td>
+      <td>${r.average?.toFixed ? r.average.toFixed(1) : r.average}</td>
+      <td>${formatVotes(r.votes)}</td>
+      <td>${formatMyVote(r.myVote)}</td>
+      <td>
+        ${safeGameUrl ? `<a class="link compact" href="${safeGameUrl}" target="_blank" rel="noopener">${t("results.link.site")}</a><br>` : ""}
+        ${safeYoutubeUrl ? `<a class="link compact" href="${safeYoutubeUrl}" target="_blank" rel="noopener">${t("results.link.youtube")}</a>` : ""}
+      </td>
+    `;
+        tbody.appendChild(row);
+    });
+    const frame = document.createElement("div");
+    frame.className = "results-frame";
+    frame.appendChild(table);
+    container.appendChild(frame);
+    container.querySelectorAll(".clickable-thumb").forEach((img) => {
+        img.addEventListener("click", () => openLightbox(img.src, img.alt));
+    });
+}
+
+function buildResultMeta(r) {
+    const hasPlayers = r.minPlayers || r.maxPlayers;
+    const players = hasPlayers
+        ? t("card.players", { min: r.minPlayers ?? "?", max: r.maxPlayers ?? "?" })
+        : null;
+    const bits = [r.genre ? escapeHtml(r.genre) : null, players].filter(Boolean);
+    if (bits.length === 0) return "";
+    return `<div class="muted small">${bits.join(" • ")}</div>`;
+}
+
+function formatVotes(votes) {
+    if (!Array.isArray(votes) || votes.length === 0) return "⚠️";
+    const sorted = [...votes].sort((a, b) => a - b);
+    return sorted.map((v) => scoreToEmoji(v)).join("");
+}
+
+function formatMyVote(score) {
+    if (score == null || Number.isNaN(score)) return "—";
+    return `${score} ${scoreToEmoji(score)}`;
+}

wwwroot/js/suggestions-ui.js

@@ -0,0 +1,470 @@
+import { api, adminApi } from "./api.js";
+import { t } from "./i18n.js";
+import { state } from "./state.js";
+import { $, toast } from "./dom.js";
+import { setupCardVisualHover, triggerCelebration } from "./effects.js";
+import { renderAdminLinker } from "./admin-ui.js";
+import { getUiRuntime } from "./ui-runtime.js";
+import {
+    cssEscapeUrl,
+    escapeHtml,
+    isLinked,
+    linkedPeerTitles,
+    renderLinkBadge,
+    safeUrl,
+    sortByName,
+} from "./ui-utils.js";
+import { openConfirmModal, openLightbox } from "./modals-ui.js";
+
+function updateSuggestButtonState() {
+    const btn = $("open-suggest-modal");
+    if (!btn) return;
+    const limit = 5;
+    const count = state.mySuggestions?.length ?? 0;
+    const blocked = count >= limit;
+    btn.disabled = blocked || state.phase !== "Suggest";
+    btn.textContent = blocked ? t("suggest.maxReached") : t("suggest.addButton");
+}
+
+export function renderMySuggestions() {
+    const wrap = $("my-suggestions");
+    if (!wrap) return;
+    wrap.innerHTML = "";
+    const allowEdit = true;
+    const lockTitle = state.phase !== "Suggest" && !state.me?.isAdmin;
+    const allowDelete = state.phase === "Suggest" || state.me?.isAdmin;
+    sortByName(state.mySuggestions).forEach((s) =>
+        wrap.appendChild(
+            buildCard(s, { showAuthor: false, allowDelete, allowEdit, lockTitle }),
+        ),
+    );
+    updateSuggestButtonState();
+}
+
+export function renderAllSuggestions() {
+    renderAdminLinker();
+    const list = $("all-suggestions");
+    if (!list) return;
+    list.innerHTML = "";
+    const allowEdit = true;
+    const allowDelete = !!state.me?.isAdmin;
+    sortByName(state.allSuggestions).forEach((s) =>
+        list.appendChild(
+            buildCard(s, { showAuthor: true, allowEdit, allowDelete }),
+        ),
+    );
+    renderPhaseTitles();
+}
+
+export function renderPhaseTitles() {
+    const voteTitle = $("vote-title");
+    const totalGames = state.allSuggestions?.length ?? 0;
+    if (voteTitle) {
+        voteTitle.textContent =
+            totalGames > 0
+                ? t("section.vote.count", { count: totalGames })
+                : t("section.vote");
+    }
+}
+
+export function buildCard(
+    s,
+    { showAuthor = false, allowDelete = false, allowEdit = false, lockTitle = false },
+) {
+    const card = document.createElement("article");
+    card.className = "game-card";
+    const hasImage = !!s.screenshotUrl;
+    const safeShot = safeUrl(s.screenshotUrl);
+    const nameText = escapeHtml(s.name);
+    const genreText = escapeHtml(s.genre);
+    const descText = escapeHtml(s.description);
+    const authorText = escapeHtml(s.author);
+    const safeGameUrl = safeUrl(s.gameUrl);
+    const safeYoutubeUrl = safeUrl(s.youtubeUrl);
+    const linkedTitles = linkedPeerTitles(s);
+    const linked = isLinked(s);
+    const linkTooltipText = linked
+        ? linkedTitles.length > 0
+            ? t("card.linkedWith", { names: linkedTitles.join(", ") })
+            : t("card.linked")
+        : "";
+    const linkTooltipSafe = escapeHtml(linkTooltipText);
+    const linkChip = linked
+        ? `<button class="chip icon link-chip${state.me?.isAdmin ? " link-chip-action" : ""}" data-unlink="${s.id}" type="button" title="${linkTooltipSafe}">🔗</button>`
+        : "";
+    const visual = hasImage && safeShot
+        ? `<button class="card-visual" data-img="${safeShot}" aria-label="${t("card.openScreenshot")}" style="background-image:url('${cssEscapeUrl(safeShot)}')"></button>`
+        : `<div class="card-visual"></div>`;
+    const hasPlayers = s.minPlayers || s.maxPlayers;
+    const players = hasPlayers
+        ? `${t("card.players", {
+              min: s.minPlayers ?? "?",
+              max: s.maxPlayers ?? "?",
+          })}`
+        : "";
+    const genreAndPlayers = s.genre
+        ? hasPlayers
+            ? `${genreText} • ${players}`
+            : genreText
+        : hasPlayers
+          ? players
+          : undefined;
+    const hasExtraInfo = genreAndPlayers || safeGameUrl || safeYoutubeUrl;
+    card.innerHTML = `
+    ${visual}
+    <div class="card-body">
+      <div class="card-title-row">
+        <h3 class="card-title" title="${nameText}">${nameText}</h3>
+        <div class="title-meta">
+          ${linkChip}
+          ${showAuthor && s.author ? `<span class="chip">${authorText}</span>` : ""}
+          ${allowEdit ? `<button class="chip icon" data-edit="${s.id}" type="button" title="${t("card.edit")}">✏️</button>` : ""}
+          ${allowDelete ? `<button class="chip icon danger-chip" data-delete="${s.id}" type="button" title="${t("card.delete")}">✕</button>` : ""}
+        </div>
+      </div>
+      ${hasExtraInfo ? `<p class="muted">` : ""}
+      ${genreAndPlayers ? genreAndPlayers : ""}
+      ${safeGameUrl ? `<a class="link compact" href="${safeGameUrl}" target="_blank" rel="noopener">${t("card.site")}</a>` : ""}
+      ${safeYoutubeUrl ? `<a class="link compact" href="${safeYoutubeUrl}" target="_blank" rel="noopener">${t("card.youtube")}</a>` : ""}
+      ${hasExtraInfo ? `</p>` : ""}
+      ${s.description ? `<p>${descText}</p>` : ""}
+    </div>
+  `;
+    if (hasImage) {
+        const btn = card.querySelector(".card-visual");
+        setupCardVisualHover(btn, safeShot);
+        btn.addEventListener("click", () => openLightbox(safeShot, s.name));
+    }
+    if (linked && state.me?.isAdmin) {
+        const unlinkBtn = card.querySelector("[data-unlink]");
+        unlinkBtn?.addEventListener("click", () => openUnlinkConfirm(s));
+    }
+    if (allowEdit) {
+        const editBtn = card.querySelector("[data-edit]");
+        editBtn?.addEventListener("click", () =>
+            openSuggestionModal({
+                title: t("modal.editTitle"),
+                submitLabel: t("modal.save"),
+                initial: s,
+                onSubmit: async (data, close) => {
+                    await api.updateSuggestion(s.id, data);
+                    toast(t("toast.savedChanges"));
+                    close();
+                    await getUiRuntime().refreshPhaseData();
+                },
+                lockTitle,
+            }),
+        );
+    }
+    if (allowDelete) {
+        const del = card.querySelector("[data-delete]");
+        del.addEventListener("click", async () => {
+            openDeleteConfirmModal(s);
+        });
+    }
+    return card;
+}
+
+function buildSuggestionForm(initial = {}, lockTitle = false) {
+    const form = document.createElement("form");
+    form.className = "stack suggestion-form";
+    form.innerHTML = `
+      <label class="stack">
+        <span class="label-row">
+          <span class="label" data-i18n="form.gameName">${t("form.gameName")}</span>
+          <span class="char-counter" data-for="name"></span>
+        </span>
+        <input name="name" required maxlength="100" />
+      </label>
+      <label class="stack">
+        <span class="label-row">
+          <span class="label" data-i18n="form.genre">${t("form.genre")}</span>
+          <span class="char-counter" data-for="genre"></span>
+        </span>
+        <input name="genre" maxlength="50" />
+      </label>
+      <label class="stack">
+        <span class="label-row">
+          <span class="label" data-i18n="form.description">${t("form.description")}</span>
+          <span class="char-counter" data-for="description"></span>
+        </span>
+        <textarea name="description" maxlength="500"></textarea>
+      </label>
+      <div class="stack">
+        <span class="label">${t("form.players")}</span>
+        <div class="stack horizontal">
+          <label class="stack">
+            <span class="label">${t("form.min")}</span>
+            <input name="minPlayers" type="number" min="1" max="32" inputmode="numeric" />
+          </label>
+          <label class="stack">
+            <span class="label">${t("form.max")}</span>
+            <input name="maxPlayers" type="number" min="1" max="32" inputmode="numeric" />
+          </label>
+        </div>
+        <div class="form-error hidden" data-error="players"></div>
+      </div>
+      <label class="stack">
+        <span class="label-row">
+          <span class="label" data-i18n="form.screenshot">${t("form.screenshot")}</span>
+          <span class="char-counter" data-for="screenshotUrl"></span>
+        </span>
+        <input name="screenshotUrl" maxlength="2048" />
+        <p class="hint" data-i18n="form.screenshotHint">${t("form.screenshotHint")}</p>
+        <div class="form-error hidden" data-error="screenshot"></div>
+      </label>
+      <label class="stack">
+        <span class="label-row">
+          <span class="label" data-i18n="form.youtube">${t("form.youtube")}</span>
+          <span class="char-counter" data-for="youtubeUrl"></span>
+        </span>
+        <input name="youtubeUrl" maxlength="2048" />
+      </label>
+      <label class="stack">
+        <span class="label-row">
+          <span class="label" data-i18n="form.gameUrl">${t("form.gameUrl")}</span>
+          <span class="char-counter" data-for="gameUrl"></span>
+        </span>
+        <input name="gameUrl" maxlength="2048" />
+      </label>
+  `;
+
+    const setVal = (name, value) => {
+        const input = form.querySelector(`[name="${name}"]`);
+        if (input) {
+            input.value = value ?? "";
+            if (name === "name" && lockTitle) {
+                input.readOnly = true;
+                input.classList.add("readonly");
+            }
+        }
+    };
+    setVal("name", initial.name ?? "");
+    setVal("genre", initial.genre ?? "");
+    const desc = form.querySelector("textarea[name=description]");
+    if (desc) desc.value = initial.description ?? "";
+    setVal("minPlayers", initial.minPlayers ?? "");
+    setVal("maxPlayers", initial.maxPlayers ?? "");
+    setVal("screenshotUrl", initial.screenshotUrl ?? "");
+    setVal("youtubeUrl", initial.youtubeUrl ?? "");
+    setVal("gameUrl", initial.gameUrl ?? "");
+    initCharCounters(form);
+    return form;
+
+    function initCharCounters(formEl) {
+        const inputs = formEl.querySelectorAll("input[maxlength], textarea[maxlength]");
+        inputs.forEach((input) => {
+            const counter = formEl.querySelector(`.char-counter[data-for="${input.name}"]`);
+            if (!counter) return;
+            const update = () => {
+                const max = input.maxLength;
+                if (!max || max < 0) return;
+                const used = input.value?.length ?? 0;
+                counter.textContent = `${used}/${max}`;
+            };
+            input.addEventListener("input", update);
+            update();
+        });
+    }
+}
+
+function openSuggestionModal({ title, submitLabel, initial = {}, onSubmit, lockTitle = false }) {
+    const overlay = document.createElement("div");
+    overlay.className = "edit-modal";
+    const panel = document.createElement("div");
+    panel.className = "edit-panel";
+    panel.innerHTML = `
+      <div class="edit-header">
+        <h3>${title}</h3>
+        <button class="lightbox-close" aria-label="${t("modal.close")}">x</button>
+      </div>
+      <div class="edit-body"></div>
+    `;
+
+    const form = buildSuggestionForm(initial, lockTitle);
+    const actions = document.createElement("div");
+    actions.className = "stack horizontal";
+    const submitBtn = document.createElement("button");
+    submitBtn.type = "submit";
+    submitBtn.textContent = submitLabel;
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.className = "ghost";
+    cancelBtn.textContent = t("modal.cancel");
+    actions.append(submitBtn, cancelBtn);
+    form.appendChild(actions);
+
+    const close = () => overlay.remove();
+    overlay.addEventListener("click", (e) => {
+        if (
+            e.target.classList.contains("edit-modal") ||
+            e.target.classList.contains("lightbox-close")
+        ) {
+            close();
+        }
+    });
+    cancelBtn.addEventListener("click", close);
+
+    form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const data = normalizeSuggestionForm(new FormData(form));
+        const errorBox = form.querySelector('[data-error="players"]');
+        const minInput = form.querySelector('input[name="minPlayers"]');
+        const maxInput = form.querySelector('input[name="maxPlayers"]');
+        const markError = (msg) => {
+            if (errorBox) {
+                errorBox.textContent = msg;
+                errorBox.classList.remove("hidden");
+            }
+        };
+        const clearError = () => {
+            if (errorBox) errorBox.classList.add("hidden");
+        };
+        clearError();
+        const min = data.minPlayers;
+        const max = data.maxPlayers;
+        const inRange = (v) => v == null || (Number.isInteger(v) && v >= 1 && v <= 32);
+        const valid =
+            inRange(min) &&
+            inRange(max) &&
+            (min == null || max == null || min <= max);
+        [minInput, maxInput].forEach((el) =>
+            el?.classList.toggle("input-error", !valid),
+        );
+        if (!valid) {
+            markError(t("form.playersInvalid"));
+            return;
+        }
+        if (!data.name?.trim()) return toast(t("toast.nameRequired"), true);
+        try {
+            await onSubmit(data, close, submitBtn);
+        } catch (err) {
+            if (getUiRuntime().handleAuthError?.(err)) return;
+            toast(err.message, true);
+        }
+    });
+
+    panel.querySelector(".edit-body")?.appendChild(form);
+    overlay.appendChild(panel);
+    document.body.appendChild(overlay);
+    return overlay;
+}
+
+export function openNewSuggestionModal() {
+    openSuggestionModal({
+        title: t("modal.addTitle") || t("suggest.new"),
+        submitLabel: t("form.submit"),
+        initial: {},
+        onSubmit: async (data, close, submitBtn) => {
+            const wasVotePhase = state.phase === "Vote";
+            await api.createSuggestion(data);
+            toast(t("toast.suggestionAdded"));
+            if (submitBtn) triggerCelebration(submitBtn);
+            close();
+            if (wasVotePhase) {
+                await getUiRuntime().refreshPhaseData();
+            } else {
+                await getUiRuntime().loadSuggestData();
+            }
+        },
+    });
+}
+
+export function normalizeSuggestionForm(formData) {
+    const obj = Object.fromEntries(formData.entries());
+    const parseNum = (v) => {
+        if (v === undefined || v === null || v === "") return null;
+        const n = Number(v);
+        return Number.isFinite(n) ? n : null;
+    };
+    return {
+        name: obj.name?.trim(),
+        genre: obj.genre?.trim() || null,
+        description: obj.description?.trim() || null,
+        screenshotUrl: obj.screenshotUrl?.trim() || null,
+        youtubeUrl: obj.youtubeUrl?.trim() || null,
+        gameUrl: obj.gameUrl?.trim() || null,
+        minPlayers: parseNum(obj.minPlayers),
+        maxPlayers: parseNum(obj.maxPlayers),
+    };
+}
+
+function openDeleteConfirmModal(s) {
+    const overlay = document.createElement("div");
+    overlay.className = "edit-modal";
+    const panel = document.createElement("div");
+    panel.className = "edit-panel";
+    panel.innerHTML = `
+      <div class="edit-header">
+        <h3>${t("modal.confirmDeleteTitle")}</h3>
+        <button class="lightbox-close" aria-label="${t("modal.close")}">x</button>
+      </div>
+      <div class="edit-body delete-body"></div>
+    `;
+
+    const preview = buildCard(
+        { ...s, id: s.id },
+        { showAuthor: true, allowDelete: false, allowEdit: false },
+    );
+    preview.classList.add("preview-card");
+
+    const actions = document.createElement("div");
+    actions.className = "stack horizontal";
+    const confirmBtn = document.createElement("button");
+    confirmBtn.className = "danger";
+    confirmBtn.textContent = t("modal.confirmDelete");
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.className = "ghost";
+    cancelBtn.textContent = t("modal.cancel");
+    actions.append(confirmBtn, cancelBtn);
+
+    const body = panel.querySelector(".delete-body");
+    body?.append(preview, actions);
+
+    const close = () => overlay.remove();
+    overlay.addEventListener("click", (e) => {
+        if (
+            e.target.classList.contains("edit-modal") ||
+            e.target.classList.contains("lightbox-close")
+        ) {
+            close();
+        }
+    });
+    cancelBtn.addEventListener("click", close);
+
+    confirmBtn.addEventListener("click", async () => {
+        try {
+            await api.deleteSuggestion(s.id);
+            toast(t("toast.suggestionDeleted"));
+            close();
+            await getUiRuntime().loadSuggestData();
+        } catch (err) {
+            toast(err.message, true);
+        }
+    });
+
+    overlay.appendChild(panel);
+    document.body.appendChild(overlay);
+}
+
+function openUnlinkConfirm(s) {
+    const peers = linkedPeerTitles(s);
+    const names = peers.length ? peers.join(", ") : t("admin.unlinkUnknownPeers");
+    openConfirmModal({
+        title: t("admin.unlinkTitle"),
+        body: t("admin.unlinkBody", { name: s.name, peers: names }),
+        confirmLabel: t("admin.unlinkConfirm"),
+        cancelLabel: t("modal.cancel"),
+        onConfirm: async (close) => {
+            try {
+                await adminApi.unlinkSuggestions(s.id);
+                toast(t("admin.unlinkDone"));
+                close();
+                await getUiRuntime().refreshPhaseData();
+            } catch (err) {
+                toast(err.message, true);
+            }
+        },
+    });
+}

wwwroot/js/ui-runtime.js

@@ -0,0 +1,14 @@
+const runtime = {
+    refreshPhaseData: async () => {},
+    loadSuggestData: async () => {},
+    loadVoteData: async () => {},
+    handleAuthError: () => false,
+};
+
+export function configureUiRuntime(deps) {
+    Object.assign(runtime, deps ?? {});
+}
+
+export function getUiRuntime() {
+    return runtime;
+}

wwwroot/js/ui-utils.js

@@ -0,0 +1,83 @@
+import { t } from "./i18n.js";
+import { state } from "./state.js";
+
+export const sortByName = (items) =>
+    (items ?? [])
+        .slice()
+        .sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
+
+export const truncate = (text, max) => {
+    if (!text) return "";
+    return text.length > max ? `${text.slice(0, max - 1)}...` : text;
+};
+
+export const escapeHtml = (value) =>
+    (value ?? "")
+        .toString()
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+
+export const safeUrl = (url) => {
+    if (!url) return null;
+    try {
+        const u = new URL(url);
+        if (u.protocol === "http:" || u.protocol === "https:") return u.href;
+    } catch {
+        return null;
+    }
+    return null;
+};
+
+export const cssEscapeUrl = (url) => url.replace(/['")\\]/g, "\\$&");
+
+export function linkRootId(s) {
+    return s?.parentSuggestionId ?? s?.id;
+}
+
+export function linkedPeerIds(s) {
+    if (!s) return [];
+    if (Array.isArray(s.linkedIds) && s.linkedIds.length > 0) {
+        return s.linkedIds.filter((id) => id !== s.id);
+    }
+    if (!state.allSuggestions?.length) return [];
+    const root = linkRootId(s);
+    return state.allSuggestions
+        .filter((other) => linkRootId(other) === root && other.id !== s.id)
+        .map((other) => other.id);
+}
+
+export function linkedPeerTitles(s) {
+    if (!s) return [];
+    if (Array.isArray(s.linkedTitles) && s.linkedTitles.length > 0) {
+        return s.linkedTitles;
+    }
+    if (!state.allSuggestions?.length) return [];
+    const root = linkRootId(s);
+    return state.allSuggestions
+        .filter((other) => linkRootId(other) === root && other.id !== s.id)
+        .map((other) => other.name);
+}
+
+export function isLinked(s) {
+    return !!s?.parentSuggestionId || linkedPeerIds(s).length > 0;
+}
+
+export function linkTooltip(s) {
+    const peers = linkedPeerTitles(s);
+    if (peers.length === 0) return t("card.linked");
+    return t("card.linkedWith", { names: peers.join(", ") });
+}
+
+export function renderLinkBadge(s) {
+    if (!isLinked(s)) return "";
+    return `<span class="chip icon link-chip" title="${escapeHtml(linkTooltip(s))}">🔗</span>`;
+}
+
+export function buildLinkOptionLabel(s) {
+    const author = s.author ? ` - ${s.author}` : "";
+    const linked = isLinked(s) ? " 🔗" : "";
+    return `${s.name}${author}${linked}`;
+}

wwwroot/js/votes-ui.js

@@ -0,0 +1,253 @@
+import { api } from "./api.js";
+import { t } from "./i18n.js";
+import { state } from "./state.js";
+import { $, toast } from "./dom.js";
+import { renderAdminLinker, renderAdminVoteStatus } from "./admin-ui.js";
+import { getUiRuntime } from "./ui-runtime.js";
+import { linkedPeerIds, linkRootId, sortByName } from "./ui-utils.js";
+import { buildCard } from "./suggestions-ui.js";
+
+export function renderVotes() {
+    const list = $("vote-list");
+    if (!list) return;
+    const prevScroll = list.scrollTop;
+    list.innerHTML = "";
+    const votesMap = Object.fromEntries(
+        state.myVotes.map((v) => [v.suggestionId, v.score]),
+    );
+    sortByName(state.allSuggestions).forEach((s) => {
+        const canEdit = !!state.me?.isAdmin || s.isOwner;
+        const lockTitle = state.phase !== "Suggest" && !state.me?.isAdmin;
+        const li = buildCard(s, {
+            showAuthor: true,
+            allowEdit: canEdit,
+            allowDelete: !!state.me?.isAdmin,
+            lockTitle,
+        });
+        const hasVote = Object.prototype.hasOwnProperty.call(votesMap, s.id);
+        const current = hasVote ? votesMap[s.id] : 5;
+        const displayScore = hasVote ? current : "—";
+        const displayEmoji = hasVote ? scoreToEmoji(current) : "⚠️";
+        const linkedIds = linkedPeerIds(s);
+        const rootId = linkRootId(s);
+        const footer = document.createElement("div");
+        footer.className = "vote-controls";
+        footer.innerHTML = `
+      <div class="warning-text ${hasVote ? "hidden" : ""}" id="warn-${s.id}">${state.votesFinal ? t("vote.missingFinalWarn") : t("vote.missingWarn")}</div>
+      <div class="vote-row">
+        <input class="full-slider" type="range" min="0" max="10" value="${current}" data-id="${s.id}" data-root="${rootId}" data-linked="${linkedIds.join(",")}" ${state.votesFinal ? "disabled" : ""}>
+        <span class="score" id="score-${s.id}">${displayScore}</span>
+        <span class="score-emoji" id="emoji-${s.id}">${displayEmoji}</span>
+      </div>`;
+        li.querySelector(".card-body").appendChild(footer);
+        list.appendChild(li);
+    });
+    updatePhaseNav();
+    updateMissingBadgeFromDom();
+    list.scrollTop = prevScroll;
+    list.querySelectorAll("input[type=range]").forEach((input) => {
+        input.addEventListener("input", (e) => {
+            if (state.votesFinal) return;
+            const val = Number(e.target.value);
+            const id = e.target.dataset.id;
+            $("score-" + id).textContent = val;
+            const emojiEl = $("emoji-" + id);
+            if (emojiEl) emojiEl.textContent = scoreToEmoji(val);
+            const warn = $("warn-" + id);
+            if (warn) warn.classList.remove("hidden");
+            e.target.dataset.pending = "1";
+            syncLinkedSliders(e.target, val);
+            updateMissingBadgeFromDom();
+        });
+        input.addEventListener("change", async (e) => {
+            if (state.votesFinal) return;
+            const suggestionId = Number(e.target.dataset.id);
+            const score = Number(e.target.value);
+            const prevScore = votesMap[suggestionId];
+            const linkedIds = (e.target.dataset.linked || "")
+                .split(",")
+                .filter(Boolean)
+                .map((x) => Number(x));
+            const resetUi = () => {
+                const label = $("score-" + suggestionId);
+                const emoji = $("emoji-" + suggestionId);
+                const warn = $("warn-" + suggestionId);
+                const fallbackValue = prevScore ?? 5;
+                const fallbackDisplay = prevScore ?? "—";
+                const fallbackEmoji = prevScore != null ? scoreToEmoji(prevScore) : "⚠️";
+                e.target.value = fallbackValue;
+                if (label) label.textContent = fallbackDisplay;
+                if (emoji) emoji.textContent = fallbackEmoji;
+                if (warn) warn.classList.remove("hidden");
+            };
+            try {
+                await api.vote(suggestionId, score);
+                toast(t("vote.saved"));
+                delete e.target.dataset.pending;
+                const warn = $("warn-" + suggestionId);
+                if (warn) warn.classList.add("hidden");
+                linkedIds.forEach((id) => {
+                    const peerWarn = $("warn-" + id);
+                    if (peerWarn) peerWarn.classList.add("hidden");
+                    const peerSlider = document.querySelector(`input[type=range][data-id="${id}"]`);
+                    if (peerSlider) delete peerSlider.dataset.pending;
+                });
+                await getUiRuntime().loadVoteData();
+                updateMissingBadgeFromDom();
+            } catch (err) {
+                delete e.target.dataset.pending;
+                resetUi();
+                toast(err.message, true);
+            }
+        });
+    });
+}
+
+export function syncVoteScores() {
+    const votesMap = Object.fromEntries(
+        state.myVotes.map((v) => [v.suggestionId, v.score]),
+    );
+    Object.entries(votesMap).forEach(([id, score]) => {
+        const slider = document.querySelector(
+            `input[type=range][data-id="${id}"]`,
+        );
+        const scoreLabel = $("score-" + id);
+        const emoji = $("emoji-" + id);
+        const warn = $("warn-" + id);
+        if (slider && score != null) {
+            slider.value = score;
+            if (scoreLabel) scoreLabel.textContent = score;
+            if (emoji) emoji.textContent = scoreToEmoji(score);
+            if (warn) warn.classList.add("hidden");
+            delete slider.dataset.pending;
+        }
+    });
+    document
+        .querySelectorAll("input[type=range][data-id]")
+        .forEach((slider) => {
+            const id = slider.dataset.id;
+            if (Object.prototype.hasOwnProperty.call(votesMap, Number(id)))
+                return;
+            const scoreLabel = $("score-" + id);
+            const emoji = $("emoji-" + id);
+            const warn = $("warn-" + id);
+            if (scoreLabel) scoreLabel.textContent = "—";
+            if (emoji) emoji.textContent = neutralEmoji();
+            if (warn) warn.classList.remove("hidden");
+        });
+}
+
+export function scoreToEmoji(score) {
+    if (score == null || Number.isNaN(score)) return neutralEmoji();
+    if (score < 1) return "😡";
+    if (score <= 3) return "😠";
+    if (score <= 6) return "😐";
+    if (score <= 8) return "🙂";
+    if (score <= 9) return "😃";
+    return "🤩";
+}
+
+export function neutralEmoji() {
+    return "😐";
+}
+
+function missingVotesCount() {
+    const total = state.allSuggestions?.length ?? 0;
+    const votedIds = new Set(state.myVotes?.map((v) => v.suggestionId));
+    const missing = total - votedIds.size;
+    return missing < 0 ? 0 : missing;
+}
+
+function updateMissingBadgeFromDom() {
+    const badge = $("vote-missing");
+    if (!badge) return;
+    if (state.votesFinal || state.phase !== "Vote") {
+        badge.classList.add("hidden");
+        return;
+    }
+    const missing = missingVotesCount();
+    badge.classList.toggle("hidden", missing === 0);
+}
+
+function syncLinkedSliders(sourceEl, value) {
+    const linkedAttr = sourceEl?.dataset?.linked;
+    if (!linkedAttr) return;
+    const ids = linkedAttr.split(",").filter(Boolean);
+    ids.forEach((id) => {
+        const slider = document.querySelector(`input[type=range][data-id="${id}"]`);
+        if (!slider || slider === sourceEl) return;
+        slider.value = value;
+        const scoreLabel = $("score-" + id);
+        if (scoreLabel) scoreLabel.textContent = value;
+        const emojiEl = $("emoji-" + id);
+        if (emojiEl) emojiEl.textContent = scoreToEmoji(Number(value));
+        const warn = $("warn-" + id);
+        if (warn) warn.classList.remove("hidden");
+        slider.dataset.pending = "1";
+    });
+}
+
+export function updatePhaseNav() {
+    const isAdmin = !!state.me?.isAdmin;
+    const phase = state.phase;
+    const showNav = (id, visible) => {
+        const el = $(id);
+        if (el) el.classList.toggle("hidden", !visible);
+    };
+
+    showNav("nav-suggest", phase === "Suggest");
+    showNav("nav-vote", phase === "Vote");
+    const jokerBtn = $("open-joker-modal");
+    if (jokerBtn) {
+        const showJoker = phase === "Vote" && state.hasJoker;
+        jokerBtn.classList.toggle("hidden", !showJoker);
+        jokerBtn.disabled = !showJoker;
+    }
+
+    const finalizeBtn = $("finalize-votes");
+    if (finalizeBtn) {
+        finalizeBtn.textContent = state.votesFinal ? t("vote.unfinalize") : t("vote.finalize");
+    }
+
+    const voteMissingBadge = $("vote-missing");
+    if (voteMissingBadge) {
+        const missing = missingVotesCount();
+        const showMissing = !state.votesFinal && missing > 0;
+        voteMissingBadge.classList.toggle("hidden", !showMissing);
+        voteMissingBadge.textContent = t("vote.missingFooter");
+    }
+
+    const waitAdmin = $("vote-wait-admin");
+    if (waitAdmin) {
+        const show = state.votesFinal && phase === "Vote" && !state.resultsOpen;
+        waitAdmin.classList.toggle("hidden", !show);
+        waitAdmin.textContent = t("vote.waitAdmin");
+    }
+
+    const voteStatusText = $("vote-status-text");
+    if (voteStatusText) {
+        voteStatusText.textContent = state.votesFinal ? t("nav.voteFinalized") : t("nav.voteHint");
+    }
+
+    renderAdminVoteStatus();
+    renderAdminLinker();
+    updateMissingBadgeFromDom();
+
+    const backButtons = ["nav-vote-prev"];
+    backButtons.forEach((id) => {
+        const btn = $(id);
+        if (btn) btn.classList.toggle("hidden", !isAdmin);
+    });
+
+    const voteNext = $("nav-vote-next");
+    if (voteNext) {
+        const locked = !state.resultsOpen && !isAdmin;
+        voteNext.disabled = locked;
+        voteNext.textContent = locked ? t("nav.waitingForResults") : t("nav.next");
+    }
+
+    const adminResultsToggle = $("results-open");
+    if (adminResultsToggle) {
+        adminResultsToggle.checked = !!state.resultsOpen;
+    }
+}