478 lines
14 KiB
JavaScript
478 lines
14 KiB
JavaScript
import { api, adminApi } from "./js/api.js";
|
|
import { t, setLanguage, getLanguage, initI18n, onLanguageChange } from "./js/i18n.js";
|
|
import { state, clearUserState, getSavedUsername, setSavedUsername } from "./js/state.js";
|
|
import { $, toast } from "./js/dom.js";
|
|
import {
|
|
setAuthUI,
|
|
setAuthMode,
|
|
handleAuthError,
|
|
renderWelcome,
|
|
renderPhasePill,
|
|
renderCounts,
|
|
renderMySuggestions,
|
|
renderAllSuggestions,
|
|
renderVotes,
|
|
syncVoteScores,
|
|
renderResults,
|
|
renderPhaseTitles,
|
|
openNewSuggestionModal,
|
|
updatePhaseNav,
|
|
openConfirmModal,
|
|
} from "./js/ui.js";
|
|
import {
|
|
loadState,
|
|
loadSuggestData,
|
|
loadRevealData,
|
|
loadVoteData,
|
|
loadResults,
|
|
refreshPhaseData,
|
|
} from "./js/data.js";
|
|
|
|
initI18n();
|
|
|
|
function setupHandlers() {
|
|
const toggleAuth = $("auth-toggle");
|
|
if (toggleAuth) {
|
|
toggleAuth.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
setAuthMode(state.authMode === "login" ? "register" : "login");
|
|
});
|
|
}
|
|
setAuthMode(state.authMode);
|
|
|
|
const loginUser = $("login-username");
|
|
if (loginUser) {
|
|
const markEditing = () => { loginUser.dataset.userEditing = "1"; };
|
|
["focus", "input", "keydown"].forEach((evt) => loginUser.addEventListener(evt, markEditing));
|
|
loginUser.addEventListener("blur", () => { delete loginUser.dataset.userEditing; });
|
|
}
|
|
|
|
setupLanguageSwitchers();
|
|
|
|
onLanguageChange(() => {
|
|
updateLanguageButtons();
|
|
renderWelcome();
|
|
renderPhasePill();
|
|
renderCounts();
|
|
renderPhaseTitles();
|
|
renderMySuggestions();
|
|
renderAllSuggestions();
|
|
if (state.phase === "Vote") {
|
|
renderVotes();
|
|
state.votesRendered = true;
|
|
syncVoteScores();
|
|
}
|
|
if (state.phase === "Results") {
|
|
renderResults();
|
|
}
|
|
updatePhaseNav();
|
|
});
|
|
|
|
const loginForm = $("login-form");
|
|
if (loginForm) {
|
|
loginForm.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
const username = $("login-username").value.trim();
|
|
const password = $("login-password").value;
|
|
if (username.length > 24) return toast("Username must be 24 characters or fewer.", true);
|
|
if (!username || !password) return toast(t("auth.needCredentials"), true);
|
|
try {
|
|
await api.login({ username, password });
|
|
setSavedUsername(username);
|
|
state.isAuthenticated = true;
|
|
setAuthUI(true);
|
|
await refreshPhaseData();
|
|
toast(t("toast.loggedIn"));
|
|
} catch (err) {
|
|
if (err?.status === 401) return toast(t("auth.invalidCredentials"), true);
|
|
if (handleAuthError(err, clearUserState)) return;
|
|
}
|
|
});
|
|
}
|
|
|
|
const registerForm = $("register-form");
|
|
if (registerForm) {
|
|
registerForm.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
const username = $("register-username").value.trim();
|
|
const password = $("register-password").value;
|
|
const displayName = $("register-displayName").value.trim();
|
|
const adminKey = $("register-adminkey").value.trim();
|
|
if (!displayName) return toast(t("toast.displayNameRequired") || "Display name is required.", true);
|
|
if (username.length > 24) return toast("Username must be 24 characters or fewer.", true);
|
|
if (displayName.length > 16) return toast("Display name must be 16 characters or fewer.", true);
|
|
if (!username || !password) return toast(t("auth.needCredentials"), true);
|
|
try {
|
|
await api.register({ username, password, displayName, adminKey });
|
|
setSavedUsername(username);
|
|
state.isAuthenticated = true;
|
|
setAuthUI(true);
|
|
await refreshPhaseData();
|
|
toast(t("toast.registered"));
|
|
} catch (err) {
|
|
if (handleAuthError(err, clearUserState)) return;
|
|
toast(err.message, true);
|
|
}
|
|
});
|
|
}
|
|
|
|
const openSuggestBtn = $("open-suggest-modal");
|
|
if (openSuggestBtn) {
|
|
openSuggestBtn.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
if (state.phase !== "Suggest") return;
|
|
openNewSuggestionModal();
|
|
});
|
|
}
|
|
const openJokerBtn = $("open-joker-modal");
|
|
if (openJokerBtn) {
|
|
openJokerBtn.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
if (state.phase !== "Vote" || !state.hasJoker) return;
|
|
openNewSuggestionModal();
|
|
});
|
|
}
|
|
|
|
bindNavButtons();
|
|
|
|
$("reset").addEventListener("click", () => adminAction(adminApi.reset, t("admin.resetDone")));
|
|
$("factory-reset").addEventListener("click", () => adminAction(adminApi.factoryReset, t("admin.factoryResetDone")));
|
|
|
|
const logoutBtn = $("logout");
|
|
if (logoutBtn) {
|
|
logoutBtn.addEventListener("click", async (e) => {
|
|
e.preventDefault();
|
|
const lastUser = state.me?.username;
|
|
try {
|
|
await api.logout();
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
clearUserState();
|
|
state.isAuthenticated = false;
|
|
setAuthUI(false);
|
|
if (lastUser) {
|
|
setSavedUsername(lastUser);
|
|
const loginUser = $("login-username");
|
|
if (loginUser) loginUser.value = lastUser;
|
|
const loginPass = $("login-password");
|
|
if (loginPass) loginPass.value = "";
|
|
}
|
|
});
|
|
}
|
|
|
|
const adminToggle = $("admin-toggle");
|
|
const adminCard = $("admin-card");
|
|
const adminClose = $("admin-close");
|
|
if (adminToggle && adminCard && adminClose) {
|
|
const togglePanel = (show) => adminCard.classList.toggle("hidden", !show);
|
|
adminToggle.addEventListener("click", () => togglePanel(adminCard.classList.contains("hidden")));
|
|
adminClose.addEventListener("click", () => togglePanel(false));
|
|
}
|
|
|
|
const helpChip = $("help-chip");
|
|
if (helpChip) {
|
|
helpChip.addEventListener("click", () => openFaqModal());
|
|
}
|
|
|
|
const resultsToggle = $("results-open");
|
|
if (resultsToggle) {
|
|
resultsToggle.addEventListener("change", async (e) => {
|
|
const desired = !!e.target.checked;
|
|
try {
|
|
const resp = await adminApi.setResultsOpen(desired);
|
|
state.resultsOpen = resp.resultsOpen;
|
|
renderPhasePill();
|
|
toast(t("admin.resultsUpdated"));
|
|
} catch (err) {
|
|
e.target.checked = !desired;
|
|
toast(err.message, true);
|
|
}
|
|
});
|
|
}
|
|
|
|
const linkApply = $("link-apply");
|
|
if (linkApply) {
|
|
linkApply.addEventListener("click", async () => {
|
|
const source = Number($("link-source")?.value);
|
|
const target = Number($("link-target")?.value);
|
|
if (!source || !target || source === target) {
|
|
return toast(t("admin.linkValidation"), true);
|
|
}
|
|
try {
|
|
await adminApi.linkSuggestions(source, target);
|
|
toast(t("admin.linkDone"));
|
|
await refreshPhaseData();
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
});
|
|
}
|
|
|
|
const playerTable = $("admin-player-table");
|
|
if (playerTable) {
|
|
playerTable.addEventListener("click", async (e) => {
|
|
const grantBtn = e.target.closest("[data-grant-joker]");
|
|
const deleteBtn = e.target.closest("[data-delete-player]");
|
|
if (grantBtn) {
|
|
const playerId = grantBtn.dataset.grantJoker;
|
|
try {
|
|
await adminApi.grantJoker(playerId);
|
|
toast(t("admin.jokerGranted"));
|
|
await refreshPhaseData();
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
} else if (deleteBtn) {
|
|
const playerId = deleteBtn.dataset.deletePlayer;
|
|
const name = deleteBtn.dataset.name || "";
|
|
openConfirmModal({
|
|
title: t("admin.deleteTitle"),
|
|
body: t("admin.deleteBody", { name }),
|
|
confirmLabel: t("admin.deleteConfirm"),
|
|
onConfirm: async (close) => {
|
|
try {
|
|
await adminApi.deletePlayer(playerId);
|
|
toast(t("admin.deleteDone"));
|
|
close();
|
|
await refreshPhaseData();
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
},
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async function adminAction(fn, successMessage) {
|
|
try {
|
|
await fn();
|
|
toast(successMessage);
|
|
await refreshPhaseData();
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
}
|
|
|
|
async function main() {
|
|
setupHandlers();
|
|
try {
|
|
await refreshPhaseData();
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
setInterval(() => {
|
|
refreshPhaseData().catch((err) => {
|
|
if (!handleAuthError(err, clearUserState)) toast(err.message, true);
|
|
});
|
|
}, 4000);
|
|
}
|
|
|
|
main();
|
|
|
|
function updateLanguageButtons() {
|
|
document.querySelectorAll(".lang-button").forEach((btn) => {
|
|
btn.textContent = "🌐";
|
|
btn.title = t("lang.label");
|
|
btn.setAttribute("aria-label", t("lang.label"));
|
|
});
|
|
}
|
|
|
|
function setupLanguageSwitchers() {
|
|
const switches = document.querySelectorAll(".lang-switch");
|
|
const closeAll = () =>
|
|
switches.forEach((wrap) => wrap.querySelector(".lang-menu")?.classList.add("hidden"));
|
|
|
|
switches.forEach((wrap) => {
|
|
const btn = wrap.querySelector(".lang-button");
|
|
const menu = wrap.querySelector(".lang-menu");
|
|
if (!btn || !menu) return;
|
|
btn.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
const isHidden = menu.classList.contains("hidden");
|
|
closeAll();
|
|
if (isHidden) menu.classList.remove("hidden");
|
|
});
|
|
menu.querySelectorAll("[data-lang]").forEach((item) =>
|
|
item.addEventListener("click", () => {
|
|
const lang = item.dataset.lang;
|
|
if (lang) setLanguage(lang);
|
|
closeAll();
|
|
}),
|
|
);
|
|
});
|
|
|
|
document.addEventListener("click", (e) => {
|
|
if (!e.target.closest(".lang-switch")) closeAll();
|
|
});
|
|
|
|
updateLanguageButtons();
|
|
}
|
|
|
|
function bindNavButtons() {
|
|
const makeForward = (id, before) => {
|
|
const btn = $(id);
|
|
if (!btn) return;
|
|
btn.addEventListener("click", async () => {
|
|
try {
|
|
if (before) {
|
|
const proceed = await before();
|
|
if (!proceed) return;
|
|
}
|
|
const resp = await api.nextPhase();
|
|
state.prevPhase = state.phase;
|
|
state.phase = resp.currentPhase;
|
|
state.resultsOpen = resp.resultsOpen ?? state.resultsOpen;
|
|
state.votesRendered = false;
|
|
renderPhasePill();
|
|
await refreshPhaseData();
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
});
|
|
};
|
|
|
|
const makeBack = (id) => {
|
|
const btn = $(id);
|
|
if (!btn) return;
|
|
btn.addEventListener("click", async () => {
|
|
try {
|
|
const resp = await api.prevPhase();
|
|
state.prevPhase = state.phase;
|
|
state.phase = resp.currentPhase;
|
|
state.resultsOpen = resp.resultsOpen ?? state.resultsOpen;
|
|
state.votesRendered = false;
|
|
renderPhasePill();
|
|
await refreshPhaseData();
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
});
|
|
};
|
|
|
|
makeForward("nav-suggest-next", async () => {
|
|
return await new Promise((resolve) => {
|
|
openConfirmModal({
|
|
title: t("nav.freezeModalTitle"),
|
|
body: t("nav.freezeModalBody"),
|
|
confirmLabel: t("nav.next"),
|
|
onConfirm: (close) => {
|
|
close();
|
|
resolve(true);
|
|
},
|
|
});
|
|
});
|
|
});
|
|
makeBack("nav-vote-prev");
|
|
|
|
const finalizeBtn = $("finalize-votes");
|
|
if (finalizeBtn) {
|
|
finalizeBtn.addEventListener("click", async () => {
|
|
try {
|
|
const desired = !state.votesFinal;
|
|
await api.finalizeVotes(desired);
|
|
state.votesFinal = desired;
|
|
renderPhasePill();
|
|
renderVotes();
|
|
toast(desired ? t("vote.finalize") : t("vote.unfinalize"));
|
|
} catch (err) {
|
|
toast(err.message, true);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function faqTree() {
|
|
return [
|
|
{
|
|
title: t("help.cat.gettingStarted"),
|
|
items: [
|
|
{ q: t("help.q.join"), a: t("help.a.join") },
|
|
{ q: t("help.q.adminKey"), a: t("help.a.adminKey") },
|
|
{ q: t("help.q.displayName"), a: t("help.a.displayName") },
|
|
],
|
|
},
|
|
{
|
|
title: t("help.cat.suggest"),
|
|
items: [
|
|
{ q: t("help.q.limit"), a: t("help.a.limit") },
|
|
{ q: t("help.q.editNames"), a: t("help.a.editNames") },
|
|
{ q: t("help.q.mediaRules"), a: t("help.a.mediaRules") },
|
|
{ q: t("help.q.cantAdd"), a: t("help.a.cantAdd") },
|
|
],
|
|
},
|
|
{
|
|
title: t("help.cat.vote"),
|
|
items: [
|
|
{ q: t("help.q.howVote"), a: t("help.a.howVote") },
|
|
{ q: t("help.q.finalize"), a: t("help.a.finalize") },
|
|
{ q: t("help.q.voteBlocked"), a: t("help.a.voteBlocked") },
|
|
{ q: t("help.q.jokerAfterFreeze"), a: t("help.a.jokerAfterFreeze") },
|
|
{ q: t("help.q.linkedVotes"), a: t("help.a.linkedVotes") },
|
|
{ q: t("help.q.newGameAfterFinal"), a: t("help.a.newGameAfterFinal") },
|
|
{ q: t("help.q.scoreRange"), a: t("help.a.scoreRange") },
|
|
],
|
|
},
|
|
{
|
|
title: t("help.cat.results"),
|
|
items: [
|
|
{ q: t("help.q.resultsLocked"), a: t("help.a.resultsLocked") },
|
|
{ q: t("help.q.resultsContent"), a: t("help.a.resultsContent") },
|
|
{ q: t("help.q.editInResults"), a: t("help.a.editInResults") },
|
|
],
|
|
},
|
|
];
|
|
}
|
|
|
|
function openFaqModal() {
|
|
const overlay = document.createElement("div");
|
|
overlay.className = "edit-modal";
|
|
const panel = document.createElement("div");
|
|
panel.className = "edit-panel faq-panel";
|
|
panel.innerHTML = `
|
|
<div class="edit-header">
|
|
<h3>${t("help.title")}</h3>
|
|
<button class="lightbox-close" aria-label="${t("modal.close")}">x</button>
|
|
</div>
|
|
<div class="edit-body">
|
|
<p class="faq-intro">${t("help.intro")}</p>
|
|
<div class="faq-list"></div>
|
|
</div>
|
|
`;
|
|
|
|
const list = panel.querySelector(".faq-list");
|
|
faqTree().forEach((section) => {
|
|
const sec = document.createElement("details");
|
|
sec.className = "faq-section";
|
|
const summary = document.createElement("summary");
|
|
summary.textContent = section.title;
|
|
sec.appendChild(summary);
|
|
|
|
const itemsWrap = document.createElement("div");
|
|
itemsWrap.className = "faq-items";
|
|
section.items.forEach((item) => {
|
|
const qd = document.createElement("details");
|
|
qd.className = "faq-item";
|
|
const qs = document.createElement("summary");
|
|
qs.textContent = item.q;
|
|
const ans = document.createElement("p");
|
|
ans.textContent = item.a;
|
|
qd.append(qs, ans);
|
|
itemsWrap.appendChild(qd);
|
|
});
|
|
|
|
sec.appendChild(itemsWrap);
|
|
list.appendChild(sec);
|
|
});
|
|
|
|
const close = () => overlay.remove();
|
|
overlay.addEventListener("click", (e) => {
|
|
if (e.target.classList.contains("edit-modal") || e.target.classList.contains("lightbox-close")) close();
|
|
});
|
|
|
|
overlay.appendChild(panel);
|
|
document.body.appendChild(overlay);
|
|
}
|