Bootstrap & Page Composition

Vom Title-Screen bis zur Spielseite

Jede Seite ist eine eigene HTML-Navigation. Gemeinsame Zustände werden daher vor dem Aufbau jeder Raum- oder App-Oberfläche synchronisiert.

Start-Lifecycle

index.htmlMAIN_TITLE_SCREENScaler, User, Startup, Audio

InteraktionGAME_START_UPSprache, Startbuttons, Name, Lizenz

SpielstandGAME_SAVE_MANAGERNeu, Laden, Reset, Konflikt

SchemaSAVE_SCHEMALocalStorage v1–v3 + IDB-Bedarf

Weiterleitunghome_screen.htmlautoritativen Stand booten

Neues Spiel

startNew(name) validiert 3–20 Zeichen, setzt den Namen, legt einen frischen IDB-State an, markiert den Start und bindet die aktuelle epoch.

Vorhandenes Spiel

loadExisting() migriert LocalStorage, führt IDB-Upgrade aus, hält bei widersprüchlichen Alt-Salden an und synchronisiert danach den Mirror.

Reset

reset() erhöht die Spielstandgeneration, leert benutzerspezifische Belege und Archive und entfernt die zugehörigen LocalStorage-Felder.

Lizenz-Gate

LICENSE_GATE speichert die akzeptierte Lizenzversion. LICENSE_ENTRY_GUARD.js blockiert direkte Seiteneinstiege ohne gültige Annahme.

Seiten und ihre Kompositionswurzeln

Seite	Einstieg	Zusammengesetzte Systeme
`index.html`	MAIN_TITLE_SCREEN.js	Start, Sprache, Save, Lizenz, Audio, Scaler
`home_screen.html`	MAIN_HOME_SCREEN.js	6 Pflanzen, 6 Lampen, Tür, Materialfenster, Weed-Inventar, Slots
`drying_room_screen.html`	MAIN_DRYING_ROOM_SCREEN.js	Raumslots und Navigation; Trocknungsraum derzeit primär Ausbaufläche
`office_screen.html`	MAIN_OFFICE_SCREEN.js	Office-Slots und Mining-Rig
`labor_screen.html`	MAIN_LABOR_SCREEN.js	Labor-Slots, Chemietischzugang, Canis-Theme-Synchronisierung
`phone_screen.html`	MAIN_PHONE_SCREEN.js	Phone-Shell, App-Icons, Zugriffsmatrix, Inline-Apps
`phone_apk_*_screen.html`	Hub / Trading / Call / Chemistry UI	je nach App eigene UI-Wurzel
`setup_screen.html`	MAIN_SETUP_SCREEN.js	Audio, Sprache und Navigation
`canis_shop_screen.html`	CANIS_SHOP_UI.js	Demo-Pakete, Perks, Theme, Belegverlauf

Pflichtreihenfolge pro Spielseite

await prepareEconomy(User);
// Erst danach: Räume, Fachobjekte und DOM-Events erzeugen.
const room = new BACKGROUND(mask, scene);
const feature = new Feature(...);
bindMenuNavigation(...);

Warum die Reihenfolge wichtig istprepareEconomy() repariert und migriert Daten, bindet die Seiten-epoch, aktiviert die Billing-Sitzung und schreibt den IDB-Stand in den Legacy-Mirror. Eine vorher erzeugte UI kann sonst veraltete Besitz- oder Saldenwerte cachen.

Gemeinsame Infrastruktur

Klasse	Startpunkt	Lebenszyklus
`GAME_SCALER`	`GameScaler.start()`	skaliert 800×400 Viewport bei Resize
`BACKGROUND`	`draw()`	wählt Tageszeitbild und Audio-Szene
`GAME_CLOCK`	Subscription beim ersten System	pausiert/resümiert mit Visibility/Page Cache
`SOUND_MANAGER`	Benutzerinteraktion / Unlock	verwaltet aktive Effekte und Loop-Fades
`LANGUAGE_MANAGER`	Singleton + seitenlokale Instanz	`applyPage()` und Subscriber
`GAME_ASSISTANT`	separates Modul je Seite	kontextuelle Tipps über Seitenkennung