add the api store

src/lib/components/Campaigns.svelte

@@ -4,11 +4,15 @@
 		<button on:click={newCampaign}>new campaign</button>
 	</header>
 
-	{#each campaigns as campaign (campaign.name)}
+	{#each campaigns as campaign (campaign.id)}
 		<div class="row">
 			<i class="light-green-text">south_america</i>
 			<div class="max">
-				<h6>{campaign.name}</h6>
+				<h6>
+					<a href={`/campaign/${campaign.id}`}>
+						{campaign.name}
+					</a>
+				</h6>
 				<p>chapter 2, second battle.</p>
 			</div>
 			<button on:click={deleteCampaign(campaign)} class="none"
@@ -18,15 +22,48 @@
 	{/each}
 </article>
 
+<div class="modal" class:active={showNewCampaign}>
+	<h5>New campaign</h5>
+	<div>
+		<div class="field border">
+			<input
+				type="text"
+				bind:value={newCampaignName}
+				placeholder="Campaign name"
+			/>
+		</div>
+	</div>
+	<nav class="right-align">
+		<button class="border" on:click={() => (showNewCampaign = false)}
+			>Cancel</button
+		>
+		<button on:click={saveNewCampaign}>Create</button>
+	</nav>
+</div>
+
 <script>
+	import { getContext } from 'svelte';
+	import { goto } from '$app/navigation';
+
 	export let campaigns = [];
+	export let api = getContext('api');
+
+	let showNewCampaign = false;
+	let newCampaignName = '';
 
 	async function deleteCampaign({ name, id }) {
 		if (!window.confirm(`delete campaign ${name}?`)) return;
+		api.event.deleteCampaign(id);
 	}
 
 	const newCampaign = () => {
-		console.log('TODO');
+		showNewCampaign = true;
+	};
+
+	const saveNewCampaign = () => {
+		api.event.addCampaign(newCampaignName);
+		newCampaignName = '';
+		showNewCampaign = false;
 	};
 </script>
 
@@ -37,4 +74,7 @@
 	h5 {
 		flex: 1;
 	}
+	article {
+		height: 90vh;
+	}
 </style>

src/lib/store/api.js

@@ -1,5 +1,5 @@
 import Dexie, { liveQuery } from 'dexie';
-import { writable } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
 
 const seedCampaign = {
     battles: [],
@@ -20,13 +20,25 @@ export function genApi(options = {}) {
         return c;
     });
 
+    const activeCampaignId = writable();
+
+    const activeCampaign = derived(activeCampaignId, async (id, set) => {
+        const x = await storage.campaigns.get({ id });
+        console.log({ x });
+        set(x);
+    });
+
     return {
         campaigns,
+        activeCampaign,
         storage,
         event: {
             addCampaign: (name) =>
                 storage.campaigns.add({ name, ...seedCampaign }),
             deleteCampaign: (id) => storage.campaigns.delete(id),
+            setActiveCampaign: async (id) => {
+                activeCampaignId.set(id);
+            },
         },
     };
 }

src/routes/+layout.svelte

@@ -0,0 +1,21 @@
+<Beer />
+<main class="center">
+	<slot />
+</main>
+
+<script>
+	import { genApi } from '$lib/store/api.js';
+	import { setContext } from 'svelte';
+	import Beer from '$lib/components/Beer.svelte';
+
+	const api = genApi();
+
+	setContext('api', api);
+</script>
+
+<style>
+	main {
+		max-width: 720px;
+		height: 100vh;
+	}
+</style>

src/routes/+page.svelte

@@ -0,0 +1,12 @@
+<Campaigns campaigns={$campaigns} />
+
+<script>
+	import Campaigns from '$lib/components/Campaigns.svelte';
+
+	import { getContext } from 'svelte';
+
+	const { campaigns } = getContext('api');
+</script>
+
+<style>
+</style>

src/routes/campaign/[campaignId]/+layout.js

@@ -0,0 +1,4 @@
+export function load({ params }) {
+    params.campaignId = parseInt(params?.campaignId);
+    return params;
+}

src/routes/campaign/[campaignId]/+layout.svelte

@@ -0,0 +1,14 @@
+<slot />
+
+<script>
+	import { getContext } from 'svelte';
+
+	export let data;
+
+	const api = getContext('api');
+
+	api.event.setActiveCampaign(data.campaignId);
+</script>
+
+<style>
+</style>

src/routes/campaign/[campaignId]/+page.svelte

@@ -0,0 +1,12 @@
+<article>
+	<h5>{$activeCampaign.name}</h5>
+	<h6>Chapter 1</h6>
+</article>
+
+<script>
+	import { getContext } from 'svelte';
+
+	const { activeCampaign } = getContext('api');
+
+	$: console.log({ activeCampaign: $activeCampaign });
+</script>