Add joker support during voting

This commit is contained in:
2026-02-05 13:09:45 +01:00
parent 434a0f05fc
commit 41d88016ea
16 changed files with 407 additions and 7 deletions

View File

@@ -124,6 +124,14 @@ function setupHandlers() {
openNewSuggestionModal();
});
}
const openJokerBtn = $("open-joker-modal");
if (openJokerBtn) {
openJokerBtn.addEventListener("click", (e) => {
e.preventDefault();
if (state.phase !== "Vote" || !state.hasJoker) return;
openNewSuggestionModal();
});
}
bindNavButtons();
@@ -195,6 +203,21 @@ function setupHandlers() {
}
});
}
const grantJokerBtn = $("grant-joker");
if (grantJokerBtn) {
grantJokerBtn.addEventListener("click", async () => {
const playerId = $("joker-player")?.value;
if (!playerId) return toast(t("admin.jokerSelectFirst"), true);
try {
await adminApi.grantJoker(playerId);
toast(t("admin.jokerGranted"));
await refreshPhaseData();
} catch (err) {
toast(err.message, true);
}
});
}
}
async function adminAction(fn, successMessage) {

View File

@@ -113,6 +113,7 @@
<div id="vote-view" class="phase-view hidden">
<div class="phase-header">
<h2 id="vote-title" data-i18n="section.vote">Vote 010</h2>
<button id="open-joker-modal" class="ghost hidden" data-i18n="suggest.jokerAddButton">Use joker: suggest a game</button>
</div>
<div id="vote-list" class="card-grid"></div>
<div class="card subcard phase-nav" id="nav-vote">
@@ -151,6 +152,15 @@
<input type="checkbox" id="results-open" />
<span data-i18n="admin.resultsOpenToggle">Allow results phase</span>
</label>
<div class="stack hidden" id="admin-joker">
<h4 data-i18n="admin.jokerTitle">Jokers</h4>
<p class="muted small" data-i18n="admin.jokerHint">Grant a player one extra suggestion slot during voting.</p>
<label class="stack">
<span class="label" data-i18n="admin.jokerSelect">Player</span>
<select id="joker-player"></select>
</label>
<button id="grant-joker" class="secondary" type="button" data-i18n="admin.jokerGive">Grant joker</button>
</div>
<div class="stack hidden" id="admin-linker">
<h4 data-i18n="admin.linkTitle">Link games</h4>
<p class="muted small" data-i18n="admin.linkHint">Use during voting to merge duplicates. Linking clears votes and unfinalizes voters.</p>

View File

@@ -56,6 +56,7 @@ export const adminApi = {
voteStatus: () => request("/api/admin/vote-status"),
reset: () => request("/api/admin/reset", { method: "POST" }),
factoryReset: () => request("/api/admin/factory-reset", { method: "POST" }),
grantJoker: (playerId) => request("/api/admin/joker", { method: "POST", body: { playerId } }),
linkSuggestions: (sourceSuggestionId, targetSuggestionId) =>
request("/api/admin/link-suggestions", { method: "POST", body: { sourceSuggestionId, targetSuggestionId } }),
unlinkSuggestions: (suggestionId) =>

View File

@@ -6,6 +6,7 @@ export async function loadState() {
const [me, stateData] = await Promise.all([api.me(), api.state()]);
state.isAuthenticated = true;
state.me = me;
state.hasJoker = me.hasJoker ?? false;
state.prevPhase = state.phase;
state.phase = stateData.currentPhase;
state.resultsOpen = stateData.resultsOpen;

View File

@@ -44,6 +44,7 @@ const translations = {
"suggest.title": "Suggest games (up to 5)",
"suggest.new": "Add new suggestion",
"suggest.addButton": "Suggest a game",
"suggest.jokerAddButton": "Use joker: suggest a game",
"suggest.hint": "Only you can see your suggestions until voting starts.",
"form.gameName": "Game name *",
"form.genre": "Genre",
@@ -109,6 +110,13 @@ const translations = {
"admin.factoryResetDone": "Factory reset complete",
"admin.readyForResults": "Ready for results",
"admin.waitingForPlayers": "Waiting for players: {names}",
"admin.jokerTitle": "Jokers",
"admin.jokerHint": "Grant a player one extra suggestion during voting.",
"admin.jokerSelect": "Player",
"admin.jokerGive": "Grant joker",
"admin.jokerGranted": "Joker granted",
"admin.jokerSelectFirst": "Pick a player first.",
"admin.jokerPlaceholder": "Pick a player",
"admin.linkTitle": "Link games",
"admin.linkHint": "Use during voting to merge duplicates. Linking clears votes and unfinalizes voters.",
"admin.linkSource": "Game to link",
@@ -189,6 +197,7 @@ const translations = {
"suggest.title": "Schlage Spiele vor (bis zu 5)",
"suggest.new": "Neuen Vorschlag hinzufügen",
"suggest.addButton": "Spiel vorschlagen",
"suggest.jokerAddButton": "Joker nutzen: Spiel vorschlagen",
"suggest.hint": "Nur du siehst deine Vorschläge bis zum Start der Abstimmung.",
"form.gameName": "Spielname *",
"form.genre": "Genre",
@@ -254,6 +263,13 @@ const translations = {
"admin.factoryResetDone": "Werkseinstellung abgeschlossen",
"admin.readyForResults": "Bereit für Ergebnisse",
"admin.waitingForPlayers": "Warten auf: {names}",
"admin.jokerTitle": "Joker",
"admin.jokerHint": "Gib einem Spieler einen Joker für einen zusätzlichen Vorschlag in der Bewertungsphase.",
"admin.jokerSelect": "Spieler",
"admin.jokerGive": "Joker vergeben",
"admin.jokerGranted": "Joker vergeben",
"admin.jokerSelectFirst": "Wähle zuerst einen Spieler.",
"admin.jokerPlaceholder": "Spieler wählen",
"admin.linkTitle": "Spiele verknüpfen",
"admin.linkHint": "Nutze dies in der Bewertungsphase, um Duplikate zu verbinden. Das löscht die Stimmen der verknüpften Spiele und hebt Finalisierungen auf.",
"admin.linkSource": "Spiel verknüpfen",

View File

@@ -6,6 +6,7 @@ export const state = {
prevPhase: null,
resultsOpen: false,
votesFinal: false,
hasJoker: false,
counts: null,
mySuggestions: [],
allSuggestions: [],
@@ -22,6 +23,7 @@ export function clearUserState() {
state.prevPhase = null;
state.resultsOpen = false;
state.votesFinal = false;
state.hasJoker = false;
state.counts = null;
state.mySuggestions = [];
state.allSuggestions = [];

View File

@@ -565,11 +565,16 @@ export function openNewSuggestionModal() {
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();
await window.loadSuggestData();
if (wasVotePhase) {
await window.refreshPhaseData();
} else {
await window.loadSuggestData();
}
},
});
}
@@ -712,13 +717,16 @@ function renderAdminVoteStatus() {
if (!state.me?.isAdmin) return;
const list = $("admin-voter-list");
const status = $("admin-ready-status");
const jokerWrap = $("admin-joker");
const jokerSelect = $("joker-player");
if (!state.adminVoteStatus || !list || !status) return;
list.innerHTML = "";
state.adminVoteStatus.voters.forEach((v) => {
const li = document.createElement("li");
const name = v.name?.length > 24 ? `${v.name.slice(0, 21)}` : v.name;
li.textContent = `${name}${v.finalized ? "" : "⏳"}`;
const jokerMark = v.hasJoker ? " 🎟" : "";
li.textContent = `${name}${jokerMark}${v.finalized ? "✅" : "⏳"}`;
li.title = v.name;
list.appendChild(li);
});
@@ -732,6 +740,29 @@ function renderAdminVoteStatus() {
? t("admin.readyForResults")
: t("admin.waitingForPlayers", { names: waitingDisplay.join(", ") });
status.className = ready ? "badge" : "badge warning";
if (jokerWrap) jokerWrap.classList.toggle("hidden", state.phase !== "Vote");
if (jokerSelect && state.phase === "Vote") {
const previous = jokerSelect.value;
jokerSelect.innerHTML = "";
const placeholder = document.createElement("option");
placeholder.value = "";
placeholder.disabled = true;
placeholder.selected = true;
placeholder.textContent = t("admin.jokerPlaceholder");
jokerSelect.appendChild(placeholder);
state.adminVoteStatus.voters.forEach((v) => {
const opt = document.createElement("option");
opt.value = v.playerId;
opt.textContent = v.hasJoker ? `${v.name} — 🎟` : v.name;
jokerSelect.appendChild(opt);
});
if (previous && Array.from(jokerSelect.options).some((o) => o.value === previous)) {
jokerSelect.value = previous;
}
}
}
function renderAdminLinker() {
@@ -961,6 +992,12 @@ export function updatePhaseNav() {
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) {