add transitions

src/lib/components/App.svelte

@@ -5,17 +5,31 @@
 
 <script>
 	import { genApi } from '$lib/store/api.js';
+	import { writable } from 'svelte/store';
 	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';
+	import { push } from 'svelte-spa-router';
 
 	const api = genApi();
 
 	setContext('api', api);
 
+	const transition = writable('');
+	transition.goRight = (uri) => {
+		transition.set('right');
+		push(uri);
+	};
+	transition.goLeft = (uri) => {
+		transition.set('left');
+		push(uri);
+	};
+
+	setContext('transition', transition);
+
 	const routes = {
 		// Exact path
 		'/': Campaigns,

src/lib/components/Battle.svelte

@@ -25,10 +25,14 @@
 				</h5>
 			</nav>
 		</header>
+
+		{#key params.battleId}
+			<div in:fly={flyParams} class="body">
 				<h6>
 					<span
 						>Chapter {chapter},
-				<span class="battleNbr">battle {chapterBattle}</span></span
+						<span class="battleNbr">battle {chapterBattle}</span
+						></span
 					>
 					<span class="status">{status}</span>
 				</h6>
@@ -47,7 +51,9 @@
 								selection={city.selection}
 								choices={status !== 'ongoing'
 									? []
-							: city.choices.filter((c) => c !== city.selection)}
+									: city.choices.filter(
+											(c) => c !== city.selection,
+									  )}
 							/>
 						{/if}
 					</dd>
@@ -84,7 +90,10 @@
 								step="0.5"
 								value={difficulty}
 								on:change={({ target: { value } }) =>
-							event.setBattleDifficulty(params.battleId, value)}
+									event.setBattleDifficulty(
+										params.battleId,
+										value,
+									)}
 							/>
 						</div>
 
@@ -115,20 +124,28 @@
 					{#if status === 'upcoming'}
 						<button>Start battle</button>
 					{:else if status === 'ongoing'}
-				<button on:click={battleVerdict('won')}>Battle won</button>
-				<button class="tertiary" on:click={battleVerdict('lost')}
-					>Battle lost</button
+						<button on:click={battleVerdict('won')}
+							>Battle won</button
+						>
+						<button
+							class="tertiary"
+							on:click={battleVerdict('lost')}>Battle lost</button
 						>
 					{/if}
 				</div>
+			</div>
+		{/key}
 
 		<footer class="fixed">
 			<nav>
 				<a
-					href={`#/campaign/${$activeCampaign?._id}` +
+					on:click={() =>
+						transition.goLeft(
+							`#/campaign/${$activeCampaign?._id}` +
 								(battle?.id == 1
 									? ''
-							: `/battle/${parseInt(battle?.id) - 1}`)}
+									: `/battle/${parseInt(battle?.id) - 1}`),
+						)}
 				>
 					<button class="circle transparent">
 						<i>arrow_backward</i>
@@ -136,9 +153,12 @@
 				</a>
 				{#if battles?.length > battle?.id}
 					<a
-						href={`#/campaign/${$activeCampaign?._id}/battle/${
+						on:click={() =>
+							transition.goRight(
+								`/campaign/${$activeCampaign?._id}/battle/${
 									battle?.id + 1
-						}`}
+								}`,
+							)}
 					>
 						<button class="circle transparent">
 							<i>arrow_forward</i>
@@ -155,6 +175,8 @@
 	import { getContext } from 'svelte';
 	import AdditionalCharacter from './Battle/AdditionalCharacter.svelte';
 
+	import { fly } from 'svelte/transition';
+
 	export let params;
 
 	export let api = getContext('api');
@@ -199,6 +221,16 @@
 	const changeCity = ({ target: { value } }) => {
 		event?.setCity(params.battleId, value);
 	};
+
+	const transition = getContext('transition');
+	let flyParams = { x: 200, duration: 0 };
+	$: if ($transition) {
+		flyParams.duration = 200;
+		flyParams.x = $transition === 'right' ? 200 : -200;
+		transition.set('');
+	} else {
+		flyParams.duration = 0;
+	}
 </script>
 
 <style>

src/lib/components/Campaign.svelte

@@ -14,6 +14,8 @@
 		</nav>
 	</header>
 
+	{#key params.campaignId}
+		<div in:fly={flyParams} class="body">
 			{#if $activeCampaign}
 				{#if status !== 'ongoing'}
 					<h6>{status}</h6>{/if}
@@ -24,7 +26,12 @@
 				</div>
 
 				<h6>Chapter 1</h6>
-		<Battle {...battles[0]} {campaignId} chapter={1} chapterBattle={1} />
+				<Battle
+					{...battles[0]}
+					{campaignId}
+					chapter={1}
+					chapterBattle={1}
+				/>
 				<div class="medium-divider" />
 				<Battle
 					{...battles[1] ?? { id: 'notYet' }}
@@ -107,6 +114,7 @@
 				/>
 				<div class="medium-divider" />
 			{/if}
+		</div>{/key}
 	<footer class="fixed">
 		<nav>
 			<a href={`#/campaign/${$activeCampaign?._id}/battle/1`}>
@@ -121,6 +129,7 @@
 <script>
 	import * as R from 'remeda';
 	import Battle from './Campaign/Battle.svelte';
+	import { fly } from 'svelte/transition';
 
 	import { getContext } from 'svelte';
 
@@ -144,7 +153,7 @@
 		R.groupBy(({ id }) => R.clamp(1 + parseInt(id / 2), { max: 4 })),
 	);
 
-	$: console.log(byChapter);
+	let flyParams = { x: 200, duration: 200 };
 </script>
 
 <style>