1082 lines
38 KiB
JavaScript
1082 lines
38 KiB
JavaScript
import { api } from "./api.js";
|
|
import { t } from "./i18n.js";
|
|
import { state, getSavedUsername, setSavedUsername } from "./state.js";
|
|
import { $, toast } from "./dom.js";
|
|
import { setupCardVisualHover, triggerCelebration } from "./effects.js";
|
|
import { adminApi } from "./api.js";
|
|
|
|
const sortByName = (items) =>
|
|
(items ?? [])
|
|
.slice()
|
|
.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
|
|
const truncate = (text, max) => {
|
|
if (!text) return "";
|
|
return text.length > max ? `${text.slice(0, max - 1)}…` : text;
|
|
};
|
|
const escapeHtml = (value) =>
|
|
(value ?? "")
|
|
.toString()
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
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;
|
|
};
|
|
const cssEscapeUrl = (url) => url.replace(/['")\\]/g, "\\$&");
|
|
|
|
export function setAuthUI(isAuthed) {
|
|
const main = document.querySelector("main");
|
|
const statusBar = document.querySelector(".status-bar");
|
|
const authCard = $("auth-card");
|
|
[main, statusBar].forEach((el) =>
|
|
el?.classList.toggle("hidden", !isAuthed),
|
|
);
|
|
if (authCard) authCard.classList.toggle("hidden", isAuthed);
|
|
const adminToggle = $("admin-toggle");
|
|
if (adminToggle)
|
|
adminToggle.classList.toggle("hidden", !isAuthed || !state.me?.isAdmin);
|
|
if (!isAuthed) {
|
|
const adminCard = $("admin-card");
|
|
if (adminCard) adminCard.classList.add("hidden");
|
|
const loginUser = $("login-username");
|
|
const cachedUser = getSavedUsername();
|
|
if (
|
|
loginUser &&
|
|
cachedUser &&
|
|
!loginUser.dataset.userEditing &&
|
|
!loginUser.value
|
|
) {
|
|
loginUser.value = cachedUser;
|
|
}
|
|
}
|
|
}
|
|
|
|
export function setAuthMode(mode) {
|
|
state.authMode = mode;
|
|
document.querySelectorAll(".auth-form").forEach((form) => {
|
|
form.classList.toggle("hidden", form.dataset.mode !== mode);
|
|
});
|
|
const title = $("auth-title");
|
|
const toggleBtn = $("auth-toggle");
|
|
if (title) {
|
|
title.textContent =
|
|
mode === "login"
|
|
? t("auth.loginHeading")
|
|
: t("auth.registerHeading");
|
|
}
|
|
if (toggleBtn) {
|
|
toggleBtn.textContent =
|
|
mode === "login"
|
|
? t("auth.switchToRegister")
|
|
: t("auth.switchToLogin");
|
|
}
|
|
}
|
|
|
|
export function handleAuthError(err, clearUserState) {
|
|
if (err?.status === 401) {
|
|
clearUserState();
|
|
state.isAuthenticated = false;
|
|
setAuthUI(false);
|
|
return true;
|
|
}
|
|
toast(err?.message || t("toast.unexpected"), true);
|
|
return false;
|
|
}
|
|
|
|
export function renderPhasePill() {
|
|
const phaseKey = typeof state.phase === "string" ? state.phase.toLowerCase() : null;
|
|
const pill = $("phase-pill");
|
|
if (pill) pill.textContent = phaseKey ? t(`phase.${phaseKey}`) : t("phase.loading");
|
|
document.querySelectorAll(".phase-view").forEach((el) =>
|
|
el.classList.add("hidden"),
|
|
);
|
|
const viewMap = {
|
|
Suggest: "suggest-view",
|
|
Vote: "vote-view",
|
|
Results: "results-view",
|
|
};
|
|
const id = viewMap[state.phase];
|
|
if (id) $(id).classList.remove("hidden");
|
|
|
|
updatePhaseNav();
|
|
}
|
|
|
|
export function renderCounts() {
|
|
if (!state.counts) return;
|
|
$("counts").textContent = t("counts.format", {
|
|
players: state.counts.players,
|
|
suggestions: state.counts.suggestions,
|
|
votes: state.counts.votes,
|
|
});
|
|
}
|
|
|
|
export function renderWelcome() {
|
|
const el = $("welcome-text");
|
|
if (!el) return;
|
|
const name =
|
|
state.me?.displayName?.trim() ||
|
|
state.me?.username ||
|
|
t("auth.defaultName");
|
|
el.textContent = t("auth.welcome", { name });
|
|
}
|
|
|
|
export function renderMySuggestions() {
|
|
const wrap = $("my-suggestions");
|
|
if (!wrap) return;
|
|
wrap.innerHTML = "";
|
|
const allowEdit = true; // own suggestions can always adjust optional data
|
|
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 }),
|
|
),
|
|
);
|
|
}
|
|
|
|
export function renderAllSuggestions() {
|
|
renderAdminLinker();
|
|
const list = $("all-suggestions");
|
|
if (!list) return;
|
|
list.innerHTML = "";
|
|
const allowEdit = true; // allow own edits (optional fields) in vote
|
|
const allowDelete = !!state.me?.isAdmin;
|
|
sortByName(state.allSuggestions).forEach((s) =>
|
|
list.appendChild(
|
|
buildCard(s, { showAuthor: true, allowEdit, allowDelete }),
|
|
),
|
|
);
|
|
renderPhaseTitles();
|
|
}
|
|
|
|
export function renderVotes() {
|
|
const list = $("vote-list");
|
|
if (!list) return;
|
|
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; // start neutral when no prior vote
|
|
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.querySelectorAll("input[type=range]").forEach((input) => {
|
|
input.addEventListener("input", (e) => {
|
|
if (state.votesFinal) return;
|
|
const val = Number(e.target.value);
|
|
$("score-" + e.target.dataset.id).textContent = val;
|
|
const emojiEl = $("emoji-" + e.target.dataset.id);
|
|
if (emojiEl) emojiEl.textContent = scoreToEmoji(val);
|
|
const warn = $("warn-" + e.target.dataset.id);
|
|
if (warn) warn.classList.add("hidden");
|
|
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);
|
|
try {
|
|
await api.vote(suggestionId, score);
|
|
toast(t("vote.saved"));
|
|
await window.loadVoteData();
|
|
} catch (err) {
|
|
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);
|
|
if (slider && score != null) {
|
|
slider.value = score;
|
|
if (scoreLabel) scoreLabel.textContent = score;
|
|
if (emoji) emoji.textContent = scoreToEmoji(score);
|
|
}
|
|
});
|
|
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);
|
|
if (scoreLabel) scoreLabel.textContent = "—";
|
|
if (emoji) emoji.textContent = neutralEmoji();
|
|
});
|
|
}
|
|
|
|
export function renderResults() {
|
|
const container = $("results-list");
|
|
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>`;
|
|
}
|
|
|
|
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 linkTooltip = linked
|
|
? linkedTitles.length > 0
|
|
? t("card.linkedWith", { names: linkedTitles.join(", ") })
|
|
: t("card.linked")
|
|
: "";
|
|
const linkTooltipSafe = escapeHtml(linkTooltip);
|
|
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 window.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>
|
|
<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" />
|
|
</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));
|
|
if (data.screenshotUrl && !isValidImageUrl(data.screenshotUrl)) {
|
|
return toast(t("toast.invalidImageUrl"), true);
|
|
}
|
|
if (!data.name?.trim()) return toast(t("toast.nameRequired"), true);
|
|
try {
|
|
await onSubmit(data, close, submitBtn);
|
|
} catch (err) {
|
|
if (window.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 window.refreshPhaseData();
|
|
} else {
|
|
await window.loadSuggestData();
|
|
}
|
|
},
|
|
});
|
|
}
|
|
|
|
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 actions = document.createElement("div");
|
|
actions.className = "stack horizontal";
|
|
const confirmBtn = document.createElement("button");
|
|
confirmBtn.textContent = confirmLabel ?? t("modal.confirm");
|
|
const cancelBtn = document.createElement("button");
|
|
cancelBtn.className = "ghost";
|
|
cancelBtn.type = "button";
|
|
cancelBtn.textContent = cancelLabel;
|
|
actions.append(confirmBtn, cancelBtn);
|
|
panel.querySelector(".edit-body")?.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);
|
|
confirmBtn.addEventListener("click", async () => {
|
|
try {
|
|
await onConfirm?.(close);
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
});
|
|
|
|
overlay.appendChild(panel);
|
|
document.body.appendChild(overlay);
|
|
}
|
|
|
|
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),
|
|
};
|
|
}
|
|
|
|
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 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)}`;
|
|
}
|
|
|
|
function missingVotesCount() {
|
|
const total = state.allSuggestions?.length ?? 0;
|
|
const mine = state.myVotes?.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 sliders = document.querySelectorAll("#vote-list input[type=range]");
|
|
const missing = Array.from(sliders).some((slider) => {
|
|
const scoreLabel = $("score-" + slider.dataset.id);
|
|
return !scoreLabel || scoreLabel.textContent === "—";
|
|
});
|
|
badge.classList.toggle("hidden", !missing);
|
|
}
|
|
|
|
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";
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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);
|
|
opt.dataset.root = linkRootId(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();
|
|
}
|
|
|
|
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 }, // shallow copy to avoid mutations
|
|
{ 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 window.loadSuggestData();
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
});
|
|
|
|
overlay.appendChild(panel);
|
|
document.body.appendChild(overlay);
|
|
}
|
|
|
|
function isValidImageUrl(url) {
|
|
if (!url) return true;
|
|
try {
|
|
const u = new URL(url);
|
|
const allowed = ["http:", "https:"];
|
|
if (!allowed.includes(u.protocol)) return false;
|
|
const path = u.pathname.toLowerCase();
|
|
return [".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif"].some((ext) =>
|
|
path.endsWith(ext),
|
|
);
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function linkRootId(s) {
|
|
return s?.parentSuggestionId ?? s?.id;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
function isLinked(s) {
|
|
return !!s?.parentSuggestionId || linkedPeerIds(s).length > 0;
|
|
}
|
|
|
|
function linkTooltip(s) {
|
|
const peers = linkedPeerTitles(s);
|
|
if (peers.length === 0) return t("card.linked");
|
|
return t("card.linkedWith", { names: peers.join(", ") });
|
|
}
|
|
|
|
function renderLinkBadge(s) {
|
|
if (!isLinked(s)) return "";
|
|
return `<span class="chip icon link-chip" title="${escapeHtml(linkTooltip(s))}">🔗</span>`;
|
|
}
|
|
|
|
function buildLinkOptionLabel(s) {
|
|
const author = s.author ? ` — ${s.author}` : "";
|
|
const linked = isLinked(s) ? " 🔗" : "";
|
|
return `${s.name}${author}${linked}`;
|
|
}
|
|
|
|
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.add("hidden");
|
|
});
|
|
}
|
|
|
|
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 window.refreshPhaseData();
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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();
|
|
|
|
// Toggle admin-only back buttons
|
|
const backButtons = ["nav-vote-prev"];
|
|
backButtons.forEach((id) => {
|
|
const btn = $(id);
|
|
if (btn) btn.classList.toggle("hidden", !isAdmin);
|
|
});
|
|
|
|
// Disable vote->results next if locked (for non-admins)
|
|
const voteNext = $("nav-vote-next");
|
|
if (voteNext) {
|
|
const locked = !state.resultsOpen && !isAdmin;
|
|
voteNext.disabled = locked;
|
|
voteNext.textContent = locked ? t("nav.waitingForResults") : t("nav.next");
|
|
}
|
|
|
|
// Admin toggle state
|
|
const adminResultsToggle = $("results-open");
|
|
if (adminResultsToggle) {
|
|
adminResultsToggle.checked = !!state.resultsOpen;
|
|
}
|
|
}
|