From d6f07a26e5c9d58b8c6738ac7e4c7478ecde13a6 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Mon, 16 Jan 2023 11:29:05 -0500
Subject: [PATCH] add transitions

---
 src/lib/components/App.svelte      |  14 +++
 src/lib/components/Battle.svelte   | 188 ++++++++++++++++------------
 src/lib/components/Campaign.svelte | 193 +++++++++++++++--------------
 3 files changed, 225 insertions(+), 170 deletions(-)

diff --git a/src/lib/components/App.svelte b/src/lib/components/App.svelte
index 0b630f0..ec762d8 100644
--- a/src/lib/components/App.svelte
+++ b/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,
diff --git a/src/lib/components/Battle.svelte b/src/lib/components/Battle.svelte
index 654283c..1b1d8e2 100644
--- a/src/lib/components/Battle.svelte
+++ b/src/lib/components/Battle.svelte
@@ -25,70 +25,79 @@
 				</h5>
 			</nav>
 		</header>
-		<h6>
-			<span
-				>Chapter {chapter},
-				<span class="battleNbr">battle {chapterBattle}</span></span
-			>
-			<span class="status">{status}</span>
-		</h6>
-		<dl>
-			{#if status === 'ongoing' && chapter !== 4}
-				<dt>wave</dt>
-				<dd>{wave === 2 ? 'second' : 'first'}</dd>
-			{/if}
-			<dt><i>home</i></dt>
-			<dd>
-				{#if typeof city === 'string'}
-					{city}
-				{:else}
-					<AdditionalCharacter
-						on:change={changeCity}
-						selection={city.selection}
-						choices={status !== 'ongoing'
-							? []
-							: city.choices.filter((c) => c !== city.selection)}
-					/>
-				{/if}
-			</dd>
-			<dt><i>view_kanban</i></dt>
-			<dd>{scenario}</dd>
 
-			{#if character}
-				<dt><i>person</i></dt>
-				<dd>{character}</dd>
-			{/if}
-
-			{#if additionalCharacters}
-				{#each additionalCharacters as c, i (c.selection)}
-					<dt><i>person</i><i>star</i></dt>
+		{#key params.battleId}
+			<div in:fly={flyParams} class="body">
+				<h6>
+					<span
+						>Chapter {chapter},
+						<span class="battleNbr">battle {chapterBattle}</span
+						></span
+					>
+					<span class="status">{status}</span>
+				</h6>
+				<dl>
+					{#if status === 'ongoing' && chapter !== 4}
+						<dt>wave</dt>
+						<dd>{wave === 2 ? 'second' : 'first'}</dd>
+					{/if}
+					<dt><i>home</i></dt>
 					<dd>
-						<AdditionalCharacter
-							on:change={changeCharacter(i)}
-							selection={c.selection}
-							choices={minusSelected(
-								status === 'ongoing' && wave == 1
-									? c.choices
-									: [],
-							)}
-						/>
+						{#if typeof city === 'string'}
+							{city}
+						{:else}
+							<AdditionalCharacter
+								on:change={changeCity}
+								selection={city.selection}
+								choices={status !== 'ongoing'
+									? []
+									: city.choices.filter(
+											(c) => c !== city.selection,
+									  )}
+							/>
+						{/if}
 					</dd>
-				{/each}
-			{/if}
+					<dt><i>view_kanban</i></dt>
+					<dd>{scenario}</dd>
 
-			<dt>difficulty</dt>
-			<dd>
-				<div class="field ">
-					<input
-						type="number"
-						step="0.5"
-						value={difficulty}
-						on:change={({ target: { value } }) =>
-							event.setBattleDifficulty(params.battleId, value)}
-					/>
-				</div>
+					{#if character}
+						<dt><i>person</i></dt>
+						<dd>{character}</dd>
+					{/if}
 
-				<!--
+					{#if additionalCharacters}
+						{#each additionalCharacters as c, i (c.selection)}
+							<dt><i>person</i><i>star</i></dt>
+							<dd>
+								<AdditionalCharacter
+									on:change={changeCharacter(i)}
+									selection={c.selection}
+									choices={minusSelected(
+										status === 'ongoing' && wave == 1
+											? c.choices
+											: [],
+									)}
+								/>
+							</dd>
+						{/each}
+					{/if}
+
+					<dt>difficulty</dt>
+					<dd>
+						<div class="field ">
+							<input
+								type="number"
+								step="0.5"
+								value={difficulty}
+								on:change={({ target: { value } }) =>
+									event.setBattleDifficulty(
+										params.battleId,
+										value,
+									)}
+							/>
+						</div>
+
+						<!--
 			<Stars
 				on:change={(e) => (difficulty = e.target.value)}
 				config={{
@@ -108,27 +117,35 @@
 			/>
 			{difficulty}
             -->
-			</dd>
-		</dl>
+					</dd>
+				</dl>
 
-		<div class="actions">
-			{#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
-				>
-			{/if}
-		</div>
+				<div class="actions">
+					{#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
+						>
+					{/if}
+				</div>
+			</div>
+		{/key}
 
 		<footer class="fixed">
 			<nav>
 				<a
-					href={`#/campaign/${$activeCampaign?._id}` +
-						(battle?.id == 1
-							? ''
-							: `/battle/${parseInt(battle?.id) - 1}`)}
+					on:click={() =>
+						transition.goLeft(
+							`#/campaign/${$activeCampaign?._id}` +
+								(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/${
-							battle?.id + 1
-						}`}
+						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>
diff --git a/src/lib/components/Campaign.svelte b/src/lib/components/Campaign.svelte
index 29528d6..b6c2147 100644
--- a/src/lib/components/Campaign.svelte
+++ b/src/lib/components/Campaign.svelte
@@ -14,99 +14,107 @@
 		</nav>
 	</header>
 
-	{#if $activeCampaign}
-		{#if status !== 'ongoing'}
-			<h6>{status}</h6>{/if}
+	{#key params.campaignId}
+		<div in:fly={flyParams} class="body">
+			{#if $activeCampaign}
+				{#if status !== 'ongoing'}
+					<h6>{status}</h6>{/if}
 
-		<div class="score">
-			score {#if status !== 'ongoing'}so far{/if}: {score}
-			<i>star</i>
-		</div>
+				<div class="score">
+					score {#if status !== 'ongoing'}so far{/if}: {score}
+					<i>star</i>
+				</div>
 
-		<h6>Chapter 1</h6>
-		<Battle {...battles[0]} {campaignId} chapter={1} chapterBattle={1} />
-		<div class="medium-divider" />
-		<Battle
-			{...battles[1] ?? { id: 'notYet' }}
-			{campaignId}
-			chapter={1}
-			chapterBattle={2}
-		/>
-		<div class="medium-divider" {campaignId} />
-		<h6>Chapter 2</h6>
-		<Battle
-			{...battles[2] ?? { id: 'notYet' }}
-			{campaignId}
-			chapter={2}
-			chapterBattle={1}
-		/>
-		<div class="medium-divider" />
-		<Battle
-			{...battles[3] ?? { id: 'notYet' }}
-			{campaignId}
-			chapter={2}
-			chapterBattle={2}
-		/>
-		<div class="medium-divider" />
-		<h6>Chapter 3</h6>
-		<Battle
-			{...battles[4] ?? { id: 'notYet' }}
-			{campaignId}
-			chapter={3}
-			chapterBattle={1}
-		/>
-		<div class="medium-divider" />
-		<Battle
-			{...battles[4] ?? { id: 'notYet' }}
-			{campaignId}
-			chapter={3}
-			chapterBattle={2}
-		/>
-		<div class="medium-divider" />
-		<h6>Chapter 4</h6>
-		<Battle
-			{...battles[6] ?? { id: 'notYet' }}
-			{campaignId}
-			chapter={4}
-			chapterBattle={1}
-		/>
-		<div class="medium-divider" />
-		<Battle
-			{...battles[7] ?? { id: 'notYet' }}
-			{campaignId}
-			chapter={4}
-			chapterBattle={2}
-		/>
-		<div class="medium-divider" />
-		<Battle
-			{...battles[8] ?? { id: 'notYet' }}
-			{campaignId}
-			chapter={4}
-			chapterBattle={3}
-		/>
-		<div class="medium-divider" />
-		<Battle
-			{...battles[9] ?? { id: 'notYet' }}
-			{campaignId}
-			chapter={4}
-			chapterBattle={4}
-		/>
-		<div class="medium-divider" />
-		<Battle
-			{...battles[10] ?? { id: 'notYet' }}
-			{campaignId}
-			chapter={4}
-			chapterBattle={5}
-		/>
-		<div class="medium-divider" />
-		<Battle
-			{...battles[11] ?? { id: 'notYet' }}
-			{campaignId}
-			chapter={4}
-			chapterBattle={6}
-		/>
-		<div class="medium-divider" />
-	{/if}
+				<h6>Chapter 1</h6>
+				<Battle
+					{...battles[0]}
+					{campaignId}
+					chapter={1}
+					chapterBattle={1}
+				/>
+				<div class="medium-divider" />
+				<Battle
+					{...battles[1] ?? { id: 'notYet' }}
+					{campaignId}
+					chapter={1}
+					chapterBattle={2}
+				/>
+				<div class="medium-divider" {campaignId} />
+				<h6>Chapter 2</h6>
+				<Battle
+					{...battles[2] ?? { id: 'notYet' }}
+					{campaignId}
+					chapter={2}
+					chapterBattle={1}
+				/>
+				<div class="medium-divider" />
+				<Battle
+					{...battles[3] ?? { id: 'notYet' }}
+					{campaignId}
+					chapter={2}
+					chapterBattle={2}
+				/>
+				<div class="medium-divider" />
+				<h6>Chapter 3</h6>
+				<Battle
+					{...battles[4] ?? { id: 'notYet' }}
+					{campaignId}
+					chapter={3}
+					chapterBattle={1}
+				/>
+				<div class="medium-divider" />
+				<Battle
+					{...battles[4] ?? { id: 'notYet' }}
+					{campaignId}
+					chapter={3}
+					chapterBattle={2}
+				/>
+				<div class="medium-divider" />
+				<h6>Chapter 4</h6>
+				<Battle
+					{...battles[6] ?? { id: 'notYet' }}
+					{campaignId}
+					chapter={4}
+					chapterBattle={1}
+				/>
+				<div class="medium-divider" />
+				<Battle
+					{...battles[7] ?? { id: 'notYet' }}
+					{campaignId}
+					chapter={4}
+					chapterBattle={2}
+				/>
+				<div class="medium-divider" />
+				<Battle
+					{...battles[8] ?? { id: 'notYet' }}
+					{campaignId}
+					chapter={4}
+					chapterBattle={3}
+				/>
+				<div class="medium-divider" />
+				<Battle
+					{...battles[9] ?? { id: 'notYet' }}
+					{campaignId}
+					chapter={4}
+					chapterBattle={4}
+				/>
+				<div class="medium-divider" />
+				<Battle
+					{...battles[10] ?? { id: 'notYet' }}
+					{campaignId}
+					chapter={4}
+					chapterBattle={5}
+				/>
+				<div class="medium-divider" />
+				<Battle
+					{...battles[11] ?? { id: 'notYet' }}
+					{campaignId}
+					chapter={4}
+					chapterBattle={6}
+				/>
+				<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>