navigation

src/lib/components/Battle.svelte

@@ -48,10 +48,10 @@
 						{:else}
 							<AdditionalCharacter
 								on:change={changeCity}
-								selection={city.selection}
+								selection={city?.selection}
 								choices={status !== 'ongoing'
 									? []
-									: city.choices.filter(
+									: city?.choices?.filter(
 											(c) => c !== city.selection,
 									  )}
 							/>
@@ -120,6 +120,8 @@
 					</dd>
 				</dl>
 
+				<div class="space" />
+
 				<div class="actions">
 					{#if status === 'upcoming'}
 						<button>Start battle</button>
@@ -133,10 +135,11 @@
 						>
 					{/if}
 				</div>
+				<div class="space" />
 			</div>
 		{/key}
 
-		<footer class="fixed">
+		<footer class="absolute center bottom">
 			<nav>
 				<a
 					on:click={() =>
@@ -151,26 +154,32 @@
 						<i>arrow_backward</i>
 					</button>
 				</a>
-				{#if battles?.length > battle?.id}
-					<a
-						on:click={() =>
-							transition.goRight(
-								`/campaign/${$activeCampaign?._id}/battle/${
-									battle?.id + 1
-								}`,
-							)}
-					>
-						<button class="circle transparent">
-							<i>arrow_forward</i>
-						</button>
-					</a>
-				{/if}
+
+				<a href={`#/campaign/${$activeCampaign?._id}`}>
+					<button class="circle transparent">
+						<i>arrow_upward</i>
+					</button>
+				</a>
+
+				<button
+					on:click={() =>
+						transition.goRight(
+							`/campaign/${$activeCampaign?._id}/battle/${
+								battle?.id + 1
+							}`,
+						)}
+					disabled={battles?.length <= battle?.id}
+					class="circle transparent"
+				>
+					<i>arrow_forward</i>
+				</button>
 			</nav>
 		</footer>
 	</article>
 {/if}
 
 <script>
+	import { push } from 'svelte-spa-router';
 	import * as R from 'remeda';
 	import { getContext } from 'svelte';
 	import AdditionalCharacter from './Battle/AdditionalCharacter.svelte';
@@ -207,9 +216,34 @@
 			? params.battleId - 6
 			: 1 + ((params.battleId - 1) % 2);
 
-	const battleVerdict = (verdict) => () =>
+	const battleVerdict = (verdict) => () => {
 		event?.setBattleVerdict(params.battleId, verdict);
 
+		if (verdict === 'lost') {
+			if (chapter === 4) {
+				push('/campaign/' + $activeCampaign._id);
+			} else if (wave === 2) {
+				push(
+					'/campaign/' +
+						$activeCampaign._id +
+						'/battle/' +
+						(parseInt(params.battleId) + 1),
+				);
+			}
+		} else {
+			if (chapter === 4) {
+				push('/campaign/' + $activeCampaign._id);
+			} else {
+				push(
+					'/campaign/' +
+						$activeCampaign._id +
+						'/battle/' +
+						(parseInt(params.battleId) + 1),
+				);
+			}
+		}
+	};
+
 	//	$: event.setBattleDifficulty(params.battleId, difficulty);
 
 	const changeCharacter =
@@ -271,6 +305,10 @@
 	input {
 		width: 5em;
 	}
+	footer {
+		width: 100%;
+		padding: 0px 1em;
+	}
 	footer nav {
 		display: flex;
 		justify-content: space-between;

src/lib/components/Campaign.svelte

@@ -17,14 +17,23 @@
 	{#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>
-
+				{#if status === 'won'}
+					<h4 class="blue-text">
+						{status.toUpperCase()}
+						&nbsp; &nbsp;
+						{score}
+						<i>star</i>
+					</h4>
+				{:else if status === 'lost'}
+					<h4 class="red-text">
+						{status.toUpperCase()}
+					</h4>
+				{:else}
+					<div class="score">
+						score {#if status !== 'ongoing'}so far{/if}: {score}
+						<i>star</i>
+					</div>
+				{/if}
 				<h6>Chapter 1</h6>
 				<Battle
 					{...battles[0]}
@@ -173,4 +182,9 @@
 	nav h5 {
 		padding-right: 1em;
 	}
+	h4 {
+		text-align: center;
+		width: 100%;
+		display: inline-block;
+	}
 </style>

src/lib/components/Campaigns.svelte

@@ -74,8 +74,8 @@
 	const currentChapter = ({ battles }) =>
 		R.clamp(1 + parseInt(battles?.length / 2), { max: 4 });
 	const currentCity = ({ battles }) => {
-		const c = R.last(battles).city;
-		return typeof c === 'string' ? c : c.selection;
+		const c = R.last(battles)?.city;
+		return typeof c === 'string' ? c : c?.selection;
 	};
 
 	async function deleteCampaign({ name, _id }) {

src/lib/store/api.js

@@ -46,6 +46,7 @@ export function updateBattle(campaign, battleId, status) {
 		campaign = u.updateIn(campaign, 'score', calculateScore(campaign));
 		return campaign;
 	}
+
 	campaign = u.updateIn(campaign, `battles.${battleId - 1}`, {
 		status,
 	});
@@ -65,6 +66,7 @@ export function updateBattle(campaign, battleId, status) {
 				}),
 			],
 		});
+		console.log('updated', campaign);
 	}
 	return campaign;
 }