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:
+32
@@ -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");
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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
@@ -1,3 +1,4 @@
|
|||||||
import "./styles/main.css";
|
import "./styles/main.css";
|
||||||
|
import { initApp } from "./app";
|
||||||
|
|
||||||
console.log("Zauberwald loaded");
|
document.addEventListener("DOMContentLoaded", initApp);
|
||||||
|
|||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import type { ScreenName } from "../types";
|
||||||
|
|
||||||
|
export function initWelcomeScreen(
|
||||||
|
_db: IDBDatabase,
|
||||||
|
_navigateTo: (screen: ScreenName) => void,
|
||||||
|
): void {
|
||||||
|
// Implemented in Task 2
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user