Files
GameList/wwwroot/js/ui.js

129 lines
3.6 KiB
JavaScript

import { t } from "./i18n.js";
import { state, getSavedUsername } from "./state.js";
import { $, toast } from "./dom.js";
import { configureUiRuntime } from "./ui-runtime.js";
import {
renderMySuggestions,
renderAllSuggestions,
renderPhaseTitles,
buildCard,
openNewSuggestionModal,
normalizeSuggestionForm,
} from "./suggestions-ui.js";
import { renderVotes, scoreToEmoji, syncVoteScores, neutralEmoji, updatePhaseNav } from "./votes-ui.js";
import { renderResults } from "./results-ui.js";
import { openConfirmModal, openLightbox, openResultsRelockModal, openSuggestionsChangedModal } from "./modals-ui.js";
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() {
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 {
buildCard,
configureUiRuntime,
neutralEmoji,
normalizeSuggestionForm,
openConfirmModal,
openLightbox,
openNewSuggestionModal,
openResultsRelockModal,
openSuggestionsChangedModal,
renderAllSuggestions,
renderMySuggestions,
renderPhaseTitles,
renderResults,
renderVotes,
scoreToEmoji,
syncVoteScores,
updatePhaseNav,
};