diff --git a/index.html b/index.html index 6b95e31..67f127c 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,21 @@ /> -
+
+
+

Willkommen im Zauberwald!

+

Waehle deine Begleitfigur:

+
+ +
+

Tastatur-Layout:

+
+ + +
+ +
+
diff --git a/src/styles/main.css b/src/styles/main.css index 66edc0c..4e9fee9 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -55,3 +55,109 @@ h3 { opacity: 1; min-height: 100vh; } + +/* Welcome screen */ +.welcome { + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem; + max-width: 600px; + margin: 0 auto; +} + +.welcome h1 { + font-family: "Quicksand", sans-serif; + font-size: 2rem; + color: var(--text-dark); +} + +.welcome__subtitle, +.welcome__layout-label { + font-size: 1.1rem; + color: var(--text-warm); + margin-bottom: 0.5rem; +} + +.welcome__companions { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + width: 100%; +} + +.companion-card { + background: white; + border: 3px solid transparent; + border-radius: 16px; + padding: 1.5rem; + cursor: pointer; + transition: border-color 0.2s; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; +} + +.companion-card:hover { + border-color: var(--accent-gold); +} + +.companion-card--selected { + border-color: var(--accent-green); + background: var(--bg-forest); +} + +.companion-card__emoji { + font-size: 3rem; +} + +.companion-card__name { + font-family: "Quicksand", sans-serif; + font-weight: 600; + font-size: 1.2rem; + color: var(--text-dark); +} + +.welcome__layout-toggle { + display: flex; + gap: 0.5rem; + margin-top: 0.5rem; +} + +.layout-btn { + padding: 0.5rem 1.5rem; + border-radius: 8px; + border: 2px solid var(--text-light); + background: white; + cursor: pointer; + font-family: "Nunito", sans-serif; + font-size: 1rem; +} + +.layout-btn--active { + background: var(--accent-green); + color: white; + border-color: var(--accent-green); +} + +.welcome__start-btn { + margin-top: 1.5rem; + padding: 1rem 3rem; + border-radius: 12px; + background: var(--accent-green); + color: white; + border: none; + font-family: "Quicksand", sans-serif; + font-weight: 700; + font-size: 1.3rem; + cursor: pointer; + opacity: 1; + transition: opacity 0.2s; +} + +.welcome__start-btn:disabled { + opacity: 0.4; + cursor: not-allowed; +} diff --git a/src/ui/screens.ts b/src/ui/screens.ts index 0a0350f..a281418 100644 --- a/src/ui/screens.ts +++ b/src/ui/screens.ts @@ -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 = ` + ${c.emoji} + ${c.name} + `; + 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"); + }); }