<Beer />
<main class="center">
	<Router {routes} />
</main>

<script>
	import { genApi } from '$lib/store/api.js';
	import { setContext } from 'svelte';
	import Beer from '$lib/components/Beer.svelte';
	import Router from 'svelte-spa-router';
	import Campaigns from '$lib/components/Campaigns.svelte';
	import Campaign from '$lib/components/Campaign.svelte';
	import Battle from '$lib/components/Battle.svelte';

	const api = genApi();

	setContext('api', api);
	console.log('api set, sucka');

	const routes = {
		// Exact path
		'/': Campaigns,
		'/campaign/:campaignId': Campaign,
		'/campaign/:campaignId/battle/:battleId': Battle,
	};
</script>

<style>
	main {
		max-width: 720px;
		height: 100vh;
	}
</style>
