96 lines
3.0 KiB
JavaScript
96 lines
3.0 KiB
JavaScript
// index.js - landing page logic
|
|
|
|
import { createLobby } from "./api.js";
|
|
import { saveLobbyName } from "./storage.js";
|
|
|
|
// ── DOM refs
|
|
const formCreate = document.getElementById("form-create");
|
|
const formJoin = document.getElementById("form-join");
|
|
const createInput = /** @type {HTMLInputElement|null} */ (document.getElementById("lobby-create"));
|
|
const joinInput = /** @type {HTMLInputElement|null} */ (document.getElementById("lobby-join"));
|
|
const createBtn = /** @type {HTMLButtonElement|null} */ (document.getElementById("reg-btn"));
|
|
const joinBtn = /** @type {HTMLButtonElement|null} */ (document.getElementById("join-btn"));
|
|
const createError = document.getElementById("lobby-error");
|
|
const joinError = document.getElementById("join-error");
|
|
const toggleCreateBtn = /** @type {HTMLButtonElement|null} */ (document.getElementById("toggle-create-btn"));
|
|
const toggleJoinBtn = /** @type {HTMLButtonElement|null} */ (document.getElementById("toggle-join-btn"));
|
|
|
|
// ── Toggle switch
|
|
function showCreate() {
|
|
formCreate?.removeAttribute("hidden");
|
|
formJoin?.setAttribute("hidden", "");
|
|
toggleCreateBtn?.classList.add("lobby-toggle__btn--active");
|
|
toggleJoinBtn?.classList.remove("lobby-toggle__btn--active");
|
|
createInput?.focus();
|
|
}
|
|
|
|
function showJoin() {
|
|
formJoin?.removeAttribute("hidden");
|
|
formCreate?.setAttribute("hidden", "");
|
|
toggleJoinBtn?.classList.add("lobby-toggle__btn--active");
|
|
toggleCreateBtn?.classList.remove("lobby-toggle__btn--active");
|
|
joinInput?.focus();
|
|
}
|
|
|
|
toggleCreateBtn?.addEventListener("click", showCreate);
|
|
toggleJoinBtn?.addEventListener("click", showJoin);
|
|
|
|
// ── Create lobby
|
|
createBtn?.addEventListener("click", async () => {
|
|
if (!createInput || !createError) return;
|
|
|
|
const lobbyName = createInput.value.trim();
|
|
createError.textContent = "";
|
|
|
|
if (!lobbyName) {
|
|
createInput.focus();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
createBtn.disabled = true;
|
|
await createLobby(lobbyName);
|
|
saveLobbyName(lobbyName);
|
|
window.location.href = "lobby.html";
|
|
} catch (error) {
|
|
createError.textContent =
|
|
error instanceof Error ? error.message : "Could not create lobby.";
|
|
createBtn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// ── Join lobby — actual joinLobby() API call happens in lobby.js
|
|
joinBtn?.addEventListener("click", () => {
|
|
if (!joinInput || !joinError) return;
|
|
|
|
const lobbyName = joinInput.value.trim();
|
|
joinError.textContent = "";
|
|
|
|
if (!lobbyName) {
|
|
joinInput.focus();
|
|
return;
|
|
}
|
|
|
|
saveLobbyName(lobbyName);
|
|
window.location.href = "lobby.html";
|
|
});
|
|
|
|
// Allow Enter key on both inputs
|
|
createInput?.addEventListener("keydown", (e) => { if (e.key === "Enter") createBtn?.click(); });
|
|
joinInput?.addEventListener("keydown", (e) => { if (e.key === "Enter") joinBtn?.click(); });
|
|
|
|
// ── Scroll reveal
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add("visible");
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.12 },
|
|
);
|
|
|
|
document.querySelectorAll(".reveal").forEach((el) => observer.observe(el));
|