Zauberwald/src/ui/screens.ts

import type {
	CompanionType,
	KeyboardLayout,
	ScreenName,
	Progress,
} from "../types";
import { companions } from "../companion/characters";
import { saveProgress } from "../storage/db";

export function initWelcomeScreen(
	db: IDBDatabase,
	navigateTo: (screen: ScreenName) => void,
): void {
	let selectedCompanion: CompanionType | null = null;
	let selectedLayout: KeyboardLayout = "de";

	const grid = document.getElementById("companion-grid")!;
	const startBtn = document.getElementById("start-btn") as HTMLButtonElement;
	const layoutToggle = document.getElementById("layout-toggle")!;

	// Render companion cards
	companions.forEach((c) => {
		const card = document.createElement("button");
		card.className = "companion-card";
		card.dataset.companion = c.type;
		card.innerHTML = `
			<span class="companion-card__emoji">${c.emoji}</span>
			<span class="companion-card__name">${c.name}</span>
		`;
		card.addEventListener("click", () => {
			grid.querySelectorAll(".companion-card").forEach((el) =>
				el.classList.remove("companion-card--selected"),
			);
			card.classList.add("companion-card--selected");
			selectedCompanion = c.type;
			startBtn.disabled = false;
		});
		grid.appendChild(card);
	});

	// Layout toggle
	layoutToggle.addEventListener("click", (e) => {
		const btn = (e.target as HTMLElement).closest(
			".layout-btn",
		) as HTMLButtonElement | null;
		if (!btn) return;
		layoutToggle
			.querySelectorAll(".layout-btn")
			.forEach((el) => el.classList.remove("layout-btn--active"));
		btn.classList.add("layout-btn--active");
		selectedLayout = btn.dataset.layout as KeyboardLayout;
	});

	// Start button
	startBtn.addEventListener("click", async () => {
		if (!selectedCompanion) return;
		const progress: Progress = {
			id: 1,
			currentLevel: 1,
			completedLevels: [],
			totalSessions: 0,
			sessionDates: [],
			selectedCharacter: selectedCompanion,
			selectedLayout: selectedLayout,
		};
		await saveProgress(db, progress);
		navigateTo("forest");
	});
}