Zauberwald/.planning/phases/04-polish-audio/04-03-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
04-polish-audio	03	execute	1		src/ui/parent.ts index.html src/styles/main.css src/storage/db.ts	true	PRNT-05 PRNT-06 PRNT-07	truths artifacts key_links Export-Button ladet JSON-Datei mit Progress und Settings herunter (keine Blobs) Import-Button oeffnet Dateiauswahl, validiert JSON, ueberschreibt nach Bestaetigung Reset loescht alle 5 IndexedDB Stores nach doppelter Bestaetigung und reloaded path provides exports src/ui/parent.ts Export, Import, Reset functions exportData importData resetAllData path provides contains index.html Daten section in parent screen with Export/Import/Reset buttons export-btn from to via pattern src/ui/parent.ts src/storage/db.ts getProgress, getSettings for export; saveProgress, saveSettings for import; db.clear for reset getProgress.*getSettings|clear

Export/Import/Reset im Elternbereich: Fortschritt als JSON exportieren, JSON importieren mit Validierung, alles zuruecksetzen mit doppelter Bestaetigung.

Purpose: Datensicherung und Reset-Moeglichkeit per D-12 bis D-14 aus CONTEXT.md. Eltern koennen Fortschritt sichern und bei Bedarf wiederherstellen. Output: Daten-Sektion im Parent-Screen mit drei Buttons, Logik in parent.ts.

<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/phases/04-polish-audio/04-CONTEXT.md

@src/ui/parent.ts @src/storage/db.ts @src/types.ts @index.html @src/styles/main.css

From src/types.ts:

export interface Progress {
  id: 1;
  currentLevel: number;
  completedLevels: number[];
  totalSessions: number;
  sessionDates: string[];
  selectedCharacter: CompanionType;
  selectedLayout: KeyboardLayout;
  totalCorrect: number;
  totalErrors: number;
  errorKeyCounts: Record<string, number>;
  lastPlayedLevels: number[];
}

export interface Settings {
  id: 1;
  audioEnabled: boolean;
  apiKey: string;
  apiCallsToday: { text: number; image: number };
  lastApiCallDate: string;
}

From src/storage/db.ts:

export function getProgress(db: IDBDatabase): Promise<Progress | null>;
export function saveProgress(db: IDBDatabase, progress: Progress): Promise<void>;
export function getSettings(db: IDBDatabase): Promise<Settings | null>;
export function saveSettings(db: IDBDatabase, settings: Settings): Promise<void>;

From src/ui/parent.ts:

export function showParentCodePrompt(): void;
export function initParentScreen(db: IDBDatabase, onBack: () => void): void;

Task 1: HTML Daten-Section + Export/Import/Reset buttons index.html, src/styles/main.css index.html, src/styles/main.css 1. In `index.html`: Add a third `

` inside `#parent-content`, after the Einstellungen section (per D-12, D-13, D-14): ```html

Daten

Fortschritt exportieren

Fortschritt importieren

Alles zuruecksetzen

```

2. In src/styles/main.css: Add styles for data section:

   .parent__data-actions {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
     max-width: 300px;
   }
   .parent__action-btn {
     font-family: 'Quicksand', sans-serif;
     font-size: 1rem;
     padding: 0.6rem 1.2rem;
     border: 2px solid var(--accent-green);
     background: var(--bg-cream);
     color: var(--text-dark);
     border-radius: 8px;
     cursor: pointer;
     transition: background 0.2s;
   }
   .parent__action-btn:hover {
     background: var(--bg-forest);
   }
   .parent__action-btn--danger {
     border-color: #D46A6A;
     color: #D46A6A;
   }
   .parent__action-btn--danger:hover {
     background: #FDE8E8;
   }
   .parent__data-info {
     font-size: 0.9rem;
     color: var(--accent-green);
     margin-top: 0.5rem;
   }
   

cd /home/dev/workspace/zauberwald && grep -c "export-btn\|import-btn\|reset-btn\|import-file\|parent__action-btn" index.html src/styles/main.css - index.html contains section with h2 "Daten" inside parent-content - index.html contains buttons with ids export-btn, import-btn, reset-btn - index.html contains hidden input#import-file with accept=".json" - main.css contains .parent__action-btn and .parent__action-btn--danger styles Daten section visible in parent area with Export, Import, Reset buttons properly styled Task 2: Export/Import/Reset logic in parent.ts src/ui/parent.ts, src/storage/db.ts src/ui/parent.ts, src/storage/db.ts, src/types.ts 1. In `src/ui/parent.ts`, add Export function (per D-12): - `async function exportData(db: IDBDatabase)`: Get progress + settings via existing functions. Build JSON object `{ version: 1, exportedAt: new Date().toISOString(), progress, settings }`. Create Blob, create object URL, create temporary `` link with download="zauberwald-backup.json", click it, revoke URL. Show feedback "Exportiert!" in `#data-feedback`.

2. Add Import function (per D-13):

   • async function importData(db: IDBDatabase, file: File): Read file as text. Parse JSON. Validate structure:
     • Must have progress object with required fields (currentLevel: number, completedLevels: array, totalSessions: number, selectedCharacter: string, selectedLayout: string)
     • Must have settings object with required fields (audioEnabled: boolean)
     • If validation fails, show error in #data-feedback ("Ungueltige Datei") and return
   • Show confirm dialog: confirm("Fortschritt ueberschreiben? Aktuelle Daten gehen verloren.")
   • If confirmed: saveProgress(db, { ...parsed.progress, id: 1 }), saveSettings(db, { ...parsed.settings, id: 1 }). Show "Importiert!" feedback. Reload after 1.5s.

3. Add Reset function (per D-14):

   • async function resetAllData(db: IDBDatabase): First confirm: confirm("Wirklich alles loeschen?"). Second confirm: confirm("Alle Fortschritte und Einstellungen werden geloescht. Bist du sicher?"). If both confirmed:
     • Clear all 5 stores: db.transaction(storeName, 'readwrite').objectStore(storeName).clear() for each of: progress, companionAssets, styleReference, forestElements, settings
     • After all clear: location.reload()
   • Optionally add a helper clearStore(db, name) returning a Promise.

4. Wire buttons in loadParentData() (called after code entry):

   • document.getElementById('export-btn')!.onclick = () => exportData(db)
   • document.getElementById('import-btn')!.onclick = () => document.getElementById('import-file')!.click()
   • document.getElementById('import-file')!.addEventListener('change', (e) => { const file = (e.target as HTMLInputElement).files?.[0]; if (file) importData(db, file); })
   • document.getElementById('reset-btn')!.onclick = () => resetAllData(db) cd /home/dev/workspace/zauberwald && npx tsc --noEmit 2>&1 | head -20 <acceptance_criteria>
   • parent.ts contains exportData function that creates JSON download
   • parent.ts contains importData function that validates and confirms before overwriting
   • parent.ts contains resetAllData function with double confirmation
   • Export excludes Blobs (only progress + settings)
   • Import validates required fields before saving
   • Reset clears all 5 IndexedDB stores
   • All three buttons wired in loadParentData
   • TypeScript compiles without errors </acceptance_criteria> Export downloads zauberwald-backup.json, Import validates+confirms+overwrites, Reset double-confirms+clears+reloads

- `npx tsc --noEmit` passes - `npm run lint` passes - grep confirms export-btn, import-btn, reset-btn in index.html - grep confirms exportData, importData, resetAllData in parent.ts

<success_criteria> Parent area has working Export (JSON download), Import (file upload + validation + confirmation), and Reset (double confirmation + full wipe). </success_criteria>

After completion, create `.planning/phases/04-polish-audio/04-03-SUMMARY.md`