feat: db export/import

Author: Chris E

src/lib/db.ts

@@ -188,3 +188,137 @@ export async function deleteGame(id: string) {
 	await db.gameHirelings.where('gameId').equals(id).delete();
 	await db.games.delete(id);
 }
+
+// Export/Import functions
+export interface DatabaseExport {
+	version: number;
+	exportedAt: string;
+	games: Game[];
+	players: Player[];
+	gameParticipants: GameParticipant[];
+	gameLandmarks: GameLandmark[];
+	gameHirelings: GameHireling[];
+}
+
+export async function exportDatabase(): Promise<DatabaseExport> {
+	const [games, players, gameParticipants, gameLandmarks, gameHirelings] = await Promise.all([
+		db.games.toArray(),
+		db.players.toArray(),
+		db.gameParticipants.toArray(),
+		db.gameLandmarks.toArray(),
+		db.gameHirelings.toArray()
+	]);
+
+	return {
+		version: 1,
+		exportedAt: new Date().toISOString(),
+		games,
+		players,
+		gameParticipants,
+		gameLandmarks,
+		gameHirelings
+	};
+}
+
+export async function importDatabase(data: DatabaseExport, merge = false): Promise<{ imported: number; skipped: number }> {
+	if (!merge) {
+		// Clear existing data
+		await Promise.all([
+			db.games.clear(),
+			db.players.clear(),
+			db.gameParticipants.clear(),
+			db.gameLandmarks.clear(),
+			db.gameHirelings.clear()
+		]);
+	}
+
+	let imported = 0;
+	let skipped = 0;
+
+	// Import players first (to handle references)
+	for (const player of data.players) {
+		try {
+			if (merge) {
+				const existing = await db.players.get(player.id);
+				if (existing) {
+					skipped++;
+					continue;
+				}
+			}
+			await db.players.add(player);
+			imported++;
+		} catch {
+			skipped++;
+		}
+	}
+
+	// Import games
+	for (const game of data.games) {
+		try {
+			if (merge) {
+				const existing = await db.games.get(game.id);
+				if (existing) {
+					skipped++;
+					continue;
+				}
+			}
+			await db.games.add(game);
+			imported++;
+		} catch {
+			skipped++;
+		}
+	}
+
+	// Import game participants
+	for (const participant of data.gameParticipants) {
+		try {
+			if (merge) {
+				const existing = await db.gameParticipants.get(participant.id);
+				if (existing) {
+					skipped++;
+					continue;
+				}
+			}
+			await db.gameParticipants.add(participant);
+			imported++;
+		} catch {
+			skipped++;
+		}
+	}
+
+	// Import landmarks
+	for (const landmark of data.gameLandmarks) {
+		try {
+			if (merge) {
+				const existing = await db.gameLandmarks.get(landmark.id);
+				if (existing) {
+					skipped++;
+					continue;
+				}
+			}
+			await db.gameLandmarks.add(landmark);
+			imported++;
+		} catch {
+			skipped++;
+		}
+	}
+
+	// Import hirelings
+	for (const hireling of data.gameHirelings) {
+		try {
+			if (merge) {
+				const existing = await db.gameHirelings.get(hireling.id);
+				if (existing) {
+					skipped++;
+					continue;
+				}
+			}
+			await db.gameHirelings.add(hireling);
+			imported++;
+		} catch {
+			skipped++;
+		}
+	}
+
+	return { imported, skipped };
+}

src/routes/+page.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { getAllGames, getAllPlayers } from '$lib/db';
+	import { getAllGames, getAllPlayers, exportDatabase, importDatabase, type DatabaseExport } from '$lib/db';
+	import { resolve } from '$app/paths';
 
 	type GameWithDetails = Awaited<ReturnType<typeof getAllGames>>[number];
 	type Player = Awaited<ReturnType<typeof getAllPlayers>>[number];
 
 	let games = $state<GameWithDetails[]>([]);
 	let players = $state<Player[]>([]);
 	let loading = $state(true);
+	let importMessage = $state<{ type: 'success' | 'error'; text: string } | null>(null);
 
 	function getMapClass(map: string): string {
 		const mapName = map.toLowerCase();
@@ -18,6 +20,61 @@
 		return 'map-autumn';
 	}
 
+	async function handleExport() {
+		try {
+			const data = await exportDatabase();
+			const json = JSON.stringify(data, null, 2);
+			const blob = new Blob([json], { type: 'application/json' });
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = `root-games-${new Date().toISOString().split('T')[0]}.json`;
+			a.click();
+			URL.revokeObjectURL(url);
+		} catch (error) {
+			alert('Failed to export data');
+		}
+	}
+
+	async function handleImport(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+
+		try {
+			const text = await file.text();
+			const data = JSON.parse(text) as DatabaseExport;
+			
+			if (!data.version || !data.games || !data.players) {
+				throw new Error('Invalid file format');
+			}
+
+			const merge = confirm('Do you want to merge with existing data?\n\nClick OK to merge (keep existing + add new)\nClick Cancel to replace all data');
+			
+			const result = await importDatabase(data, merge);
+			
+			// Refresh data
+			games = await getAllGames();
+			players = await getAllPlayers();
+			
+			importMessage = {
+				type: 'success',
+				text: `Imported ${result.imported} records${result.skipped > 0 ? `, skipped ${result.skipped} duplicates` : ''}`
+			};
+			
+			setTimeout(() => importMessage = null, 5000);
+		} catch (error) {
+			importMessage = {
+				type: 'error',
+				text: 'Failed to import: Invalid file format'
+			};
+			setTimeout(() => importMessage = null, 5000);
+		}
+		
+		// Reset input
+		input.value = '';
+	}
+
 	onMount(async () => {
 		games = await getAllGames();
 		players = await getAllPlayers();
@@ -38,13 +95,13 @@
 
 		<div class="mb-8 flex justify-center gap-4">
 			<a
-				href="/games/new"
+				href="{resolve("/games/new")}"
 				class="rounded-lg bg-amber-600 px-6 py-3 font-semibold text-white shadow-md transition hover:bg-amber-700"
 			>
 				+ New Game
 			</a>
 			<a
-				href="/stats"
+				href="{resolve("/stats")}"
 				class="rounded-lg bg-amber-100 px-6 py-3 font-semibold text-amber-800 shadow-md transition hover:bg-amber-200"
 			>
 				📊 Stats
@@ -66,7 +123,7 @@
 				{:else}
 					<div class="space-y-4">
 						{#each games as game}
-							<a href="/games/{game.id}" class="block">
+							<a href="{resolve(`/games/${game.id}`)}" class="block">
 							<div class="map-card-bg {getMapClass(game.map)} rounded-lg bg-white p-6 shadow transition hover:shadow-lg">
 									<div class="mb-4 flex items-center justify-between">
 										<span class="font-medium text-amber-800">{game.map}</span>
@@ -129,6 +186,37 @@
 					{/if}
 				</div>
 			</section>
+
+			<section class="mt-8">
+				<h2 class="mb-4 text-2xl font-semibold text-amber-800">Data Management</h2>
+				<div class="rounded-lg bg-white p-6 shadow">
+					{#if importMessage}
+						<div class="mb-4 rounded-lg p-3 {importMessage.type === 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
+							{importMessage.text}
+						</div>
+					{/if}
+					<div class="flex flex-wrap gap-4">
+						<button
+							onclick={handleExport}
+							class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition hover:bg-blue-700"
+						>
+							📤 Export Data
+						</button>
+						<label class="cursor-pointer rounded-lg bg-green-600 px-4 py-2 font-medium text-white transition hover:bg-green-700">
+							📥 Import Data
+							<input
+								type="file"
+								accept=".json"
+								onchange={handleImport}
+								class="hidden"
+							/>
+						</label>
+					</div>
+					<p class="mt-3 text-sm text-gray-500">
+						Export your game data as JSON to backup or transfer to another device.
+					</p>
+				</div>
+			</section>
 		{/if}
 	</div>
 </div>

src/routes/games/[id]/+page.svelte

@@ -3,6 +3,7 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { getGame, deleteGame as deleteGameFromDb } from '$lib/db';
+	import { resolve } from '$app/paths';
 
 	type GameWithDetails = NonNullable<Awaited<ReturnType<typeof getGame>>>;
 
@@ -14,6 +15,10 @@
 
 	onMount(async () => {
 		const id = $page.params.id;
+		if (!id) {
+			loading = false;
+			return;
+		}
 		game = await getGame(id);
 		loading = false;
 	});
@@ -37,7 +42,7 @@
 <div class="page-background min-h-screen bg-amber-50">
 	<div class="mx-auto max-w-4xl px-4 py-8">
 		<header class="mb-8">
-			<a href="/" class="text-amber-600 hover:text-amber-800">← Back to Home</a>
+			<a href="{resolve("/")}"  class="text-amber-600 hover:text-amber-800">← Back to Home</a>
 			{#if game}
 				<div class="mt-4 flex items-center justify-between">
 					<h1 class="text-3xl font-bold text-amber-900">Game Details</h1>

src/routes/games/new/+page.svelte

@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { factions, maps, landmarks, hirelings } from '$lib/gameData';
 	import { getAllPlayers, createGame } from '$lib/db';
+	import { resolve } from '$app/paths';
 
 	interface Participant {
 		playerName: string;
@@ -77,7 +78,7 @@
 <div class="page-background min-h-screen bg-amber-50">
 	<div class="mx-auto max-w-4xl px-4 py-8">
 		<header class="mb-8">
-			<a href="/" class="text-amber-600 hover:text-amber-800">← Back to Home</a>
+			<a href="{resolve("/")}" class="text-amber-600 hover:text-amber-800">← Back to Home</a>
 			<h1 class="mt-4 text-3xl font-bold text-amber-900">Record New Game</h1>
 		</header>