// index.js - landing page logic

import { createLobby } from "./api.js";
import { saveLobbyName } from "./storage.js";

/**
 * Handle the "Create game" button click.
 * Validates the lobby name, persists it, and navigates to the lobby page.
 */
document.getElementById("reg-btn")?.addEventListener("click", async () => {
	const lobbyInput = /** @type {HTMLInputElement|null} */ (
		document.getElementById("username")
	);
	const button = /** @type {HTMLButtonElement|null} */ (
		document.getElementById("reg-btn")
	);
	const lobbyName = lobbyInput ? lobbyInput.value.trim() : "";

	if (!lobbyName) {
		lobbyInput?.focus();
		return;
	}

	try {
		if (button) button.disabled = true;
		await createLobby(lobbyName);
		saveLobbyName(lobbyName);
		window.location.href = "lobby.html";
	} catch (error) {
		alert(error instanceof Error ? error.message : "Could not create lobby.");
		if (button) button.disabled = false;
	}
});

// Scroll reveal - animate elements into view as they enter the viewport
const reveals = document.querySelectorAll(".reveal");
const observer = new IntersectionObserver(
	(entries) => {
		entries.forEach((entry) => {
			if (entry.isIntersecting) {
				entry.target.classList.add("visible");
				observer.unobserve(entry.target);
			}
		});
	},
	{ threshold: 0.12 },
);

reveals.forEach((el) => {
	observer.observe(el);
});