feat(01-02): screen management and companion definitions

- Create companion/characters.ts with 4 companion definitions (fee, einhorn, fuchs, eule)
- Create app.ts with showScreen, getDB, initApp (routes to welcome or forest)
- Update main.ts to call initApp on DOMContentLoaded
- Add stub ui/screens.ts for initWelcomeScreen

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-29 11:05:59 +02:00
co-authored by Claude Opus 4.6
parent 3462a6704e
commit 4b5502f5fa
4 changed files with 77 additions and 1 deletions
+32
View File
@@ -0,0 +1,32 @@
import type { ScreenName } from "./types";
import { openDB, getProgress } from "./storage/db";
import { initWelcomeScreen } from "./ui/screens";
let db: IDBDatabase;
export function showScreen(name: ScreenName): void {
document.querySelectorAll(".screen").forEach((el) => {
el.classList.remove("screen--active");
});
const target = document.getElementById(`screen-${name}`);
if (target) {
target.classList.add("screen--active");
}
}
export function getDB(): IDBDatabase {
return db;
}
export async function initApp(): Promise<void> {
db = await openDB();
const progress = await getProgress(db);
if (progress && progress.selectedCharacter) {
// Returning user — skip welcome, go to forest
showScreen("forest");
} else {
// First time — show welcome
initWelcomeScreen(db, showScreen);
showScreen("welcome");
}
}
+35
View File
@@ -0,0 +1,35 @@
import type { CompanionType } from "../types";
export interface CompanionDefinition {
type: CompanionType;
name: string;
emoji: string;
personality: string;
}
export const companions: CompanionDefinition[] = [
{
type: "fee",
name: "Lila",
emoji: "🧚",
personality: "Sanft, ermutigend, ein bisschen vertraeumt",
},
{
type: "einhorn",
name: "Stella",
emoji: "🦄",
personality: "Froehlich, enthusiastisch, feiert jeden kleinen Erfolg",
},
{
type: "fuchs",
name: "Finn",
emoji: "🦊",
personality: "Ruhig, weise, humorvoll",
},
{
type: "eule",
name: "Elsa",
emoji: "🦉",
personality: "Geduldig, warm, grossmuetterlich",
},
];
+2 -1
View File
@@ -1,3 +1,4 @@
import "./styles/main.css";
import { initApp } from "./app";
console.log("Zauberwald loaded");
document.addEventListener("DOMContentLoaded", initApp);
+8
View File
@@ -0,0 +1,8 @@
import type { ScreenName } from "../types";
export function initWelcomeScreen(
_db: IDBDatabase,
_navigateTo: (screen: ScreenName) => void,
): void {
// Implemented in Task 2
}