feat(01-02): welcome screen UI with onboarding flow

- Implement initWelcomeScreen with companion card rendering, layout toggle, start button - Update index.html with welcome screen structure (companion-grid, layout-toggle, start-btn) - Add CSS for companion cards, layout buttons, start button with hover/selected/disabled states - Selecting a companion enables start, clicking start saves progress to IndexedDB and navigates to forest Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 11:06:54 +02:00
parent afae18decc
commit 20a7670ef9
3 changed files with 186 additions and 5 deletions
@@ -1,8 +1,69 @@
-import type { ScreenName } from "../types";
+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,
+	db: IDBDatabase,
+	navigateTo: (screen: ScreenName) => void,
 ): void {
-	// Implemented in Task 2
+	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");
+	});
 }