56 lines
1.5 KiB
JavaScript
56 lines
1.5 KiB
JavaScript
// lobby.js — lobby page logic
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const input = document.getElementById("username");
|
|
const btn = document.getElementById("btn-start");
|
|
const errMsg = document.getElementById("name-error");
|
|
|
|
// Display the current lobby name
|
|
const lobbyNameEl = document.getElementById("lobby-name-display");
|
|
if (lobbyNameEl) {
|
|
lobbyNameEl.textContent = Storage.getLobbyName();
|
|
}
|
|
|
|
/**
|
|
* Validate the username input and navigate to the game.
|
|
* Shows an inline error message on invalid input.
|
|
*/
|
|
btn.addEventListener("click", () => {
|
|
const name = input.value.trim();
|
|
|
|
if (!name) {
|
|
errMsg.textContent = "Please enter a username to continue.";
|
|
input.classList.add("input--error");
|
|
input.focus();
|
|
return;
|
|
}
|
|
if (name.length < 2) {
|
|
errMsg.textContent = "Username must be at least 2 characters.";
|
|
input.classList.add("input--error");
|
|
input.focus();
|
|
return;
|
|
}
|
|
|
|
Storage.savePlayerName(name);
|
|
Storage.clearGameState();
|
|
location.href = "game.html";
|
|
});
|
|
|
|
// Clear validation state on every keystroke
|
|
input.addEventListener("input", () => {
|
|
errMsg.textContent = "";
|
|
input.classList.remove("input--error");
|
|
});
|
|
|
|
// Allow form submission via Enter key
|
|
input.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") btn.click();
|
|
});
|
|
|
|
// Pre-fill username if the player has played before
|
|
const existing = Storage.getPlayerName();
|
|
if (existing && existing !== "Anonymous") {
|
|
input.value = existing;
|
|
}
|
|
});
|