esthetic work

src/lib/components/Battle.svelte

@@ -1,12 +1,12 @@
 <article class="scroll">
-	<header class="fixed">
+	<header class="fixed fill">
 		<nav>
 			<a href="#/">
 				<button class="circle transparent">
 					<i>menu</i>
 				</button></a
 			>
-			<h5 class="max center-align">
+			<h5 class="max right-align">
 				{#if $activeCampaign}
 					<a href={`#/campaign/${$activeCampaign._id}`}>
 						{$activeCampaign.name}
@@ -16,9 +16,11 @@
 		</nav>
 	</header>
 	<h6>
-		Chapter {chapter},
-		<span class="battleNbr">battle {chapterBattle}</span>
-		-- {status}
+		<span
+			>Chapter {chapter},
+			<span class="battleNbr">battle {chapterBattle}</span></span
+		>
+		<span class="status">{status}</span>
 	</h6>
 	<dl>
 		{#if status === 'ongoing' && chapter !== 4}
@@ -174,7 +176,7 @@
 	const changeCharacter =
 		(index) =>
 		({ target: { value } }) => {
-			event?.setCharacter(params.battleId, index, value);
+			event?.setCharacter(params?.battleId, index, value);
 		};
 
 	const changeCity = ({ target: { value } }) => {
@@ -184,18 +186,19 @@
 
 <style>
 	article {
-		width: 500px;
-	}
-	header {
-		display: flex;
-		align-items: baseline;
+		height: 100vh;
 	}
 	h5 {
 		flex: 1;
 	}
 	h6 {
-		font-style: italic;
-		font-size: 1.25rem;
+		display: flex;
+		margin-bottom: 1em;
+	}
+	h6 .status {
+		flex: 1;
+		text-align: right;
+		padding-right: 1em;
 	}
 	dl {
 		width: 100%;
@@ -222,4 +225,10 @@
 		display: flex;
 		justify-content: space-between;
 	}
+	nav h5 {
+		padding-right: 1em;
+	}
+	header nav {
+		max-width: 100%;
+	}
 </style>

src/lib/components/Campaign.svelte

@@ -1,12 +1,12 @@
 <article class="scroll">
-	<header class="fixed">
+	<header class="fixed fill">
 		<nav>
 			<a href="#/">
 				<button class="circle transparent">
 					<i>menu</i>
 				</button></a
 			>
-			<h5 class="max center-align">
+			<h5 class="max right-align">
 				{#if $activeCampaign}
 					{$activeCampaign.name}
 				{/if}
@@ -15,6 +15,14 @@
 	</header>
 
 	{#if $activeCampaign}
+		{#if status !== 'ongoing'}
+			<h6>{status}</h6>{/if}
+
+		<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" />
@@ -101,7 +109,7 @@
 	{/if}
 	<footer class="fixed">
 		<nav>
-			<a href={`#/campaign/${$activeCampaign._id}/battle/1`}>
+			<a href={`#/campaign/${$activeCampaign?._id}/battle/1`}>
 				<button class="circle transparent">
 					<i>arrow_forward</i>
 				</button>
@@ -128,6 +136,9 @@
 
 	const campaignId = params.campaignId;
 
+	$: score = $activeCampaign?.score;
+	$: status = $activeCampaign?.status;
+
 	$: byChapter = R.pipe(
 		$activeCampaign?.battles ?? [],
 		R.groupBy(({ id }) => R.clamp(1 + parseInt(id / 2), { max: 4 })),
@@ -137,6 +148,9 @@
 </script>
 
 <style>
+	.score {
+		text-align: right;
+	}
 	article {
 		height: 100vh;
 	}
@@ -147,4 +161,7 @@
 	footer nav {
 		text-align: right;
 	}
+	nav h5 {
+		padding-right: 1em;
+	}
 </style>

src/lib/components/Campaign/Battle.svelte

@@ -5,7 +5,19 @@
 		{:else}
 			<a href={`#/campaign/${campaignId}/battle/${id}`}>
 				Battle of {typeof city === 'string' ? city : city.selection}</a
-			><span>, {status}</span>
+			>
+			<div>
+				{#if status === 'ongoing' && wave == 2}
+					<i style="color: yellow">mood_bad</i>
+				{:else if status === 'ongoing' && wave == 1}
+					<i style="color: blue">sentiment_neutral</i>
+				{:else if status === 'lost'}
+					<i style="color: red">sentiment_very_dissatisfied</i>
+				{:else if status === 'won'}
+					<i style="color: green">mood</i>
+				{/if}
+			</div>
+			<div class="difficulty">{difficulty} <i>star</i></div>
 		{/if}
 	</p>
 </div>
@@ -14,10 +26,23 @@
 	export let city = '';
 	export let status = '';
 	export let id = 0;
+	export let wave = 1;
 	export let campaignId;
 	export let chapter;
 	export let chapterBattle;
+	export let difficulty = 0;
 </script>
 
 <style>
+	.row p {
+		display: flex;
+		width: 100%;
+	}
+	.row p a {
+		display: inline-block;
+		flex: 1;
+	}
+	.difficulty {
+		margin-left: 1em;
+	}
 </style>

src/lib/components/Campaigns.svelte

@@ -1,4 +1,4 @@
-<header>
+<header class="fixed fill">
 	<nav>
 		<h5 class="max center-align">Campaigns</h5>
 		<button class="circle small" on:click={newCampaign}>
@@ -32,24 +32,27 @@
 	{/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"
-			/>
+{#if showNewCampaign}
+	<div class="modal active">
+		<h5>New campaign</h5>
+		<div>
+			<div class="field border">
+				<input
+					autofocus
+					type="text"
+					bind:value={newCampaignName}
+					placeholder="Campaign name"
+				/>
+			</div>
 		</div>
+		<nav class="right-align">
+			<button class="border" on:click={() => (showNewCampaign = false)}
+				>Cancel</button
+			>
+			<button type="submit" on:click={saveNewCampaign}>Create</button>
+		</nav>
 	</div>
-	<nav class="right-align">
-		<button class="border" on:click={() => (showNewCampaign = false)}
-			>Cancel</button
-		>
-		<button on:click={saveNewCampaign}>Create</button>
-	</nav>
-</div>
+{/if}
 
 <script>
 	import * as R from 'remeda';
@@ -65,7 +68,10 @@
 
 	const currentChapter = ({ battles }) =>
 		R.clamp(1 + parseInt(battles?.length / 2), { max: 4 });
-	const currentCity = ({ battles }) => R.last(battles).city;
+	const currentCity = ({ battles }) => {
+		const c = R.last(battles).city;
+		return typeof c === 'string' ? c : c.selection;
+	};
 
 	async function deleteCampaign({ name, _id }) {
 		if (!window.confirm(`delete campaign ${name}?`)) return;

src/lib/store/api.js

@@ -4,9 +4,34 @@ import { genNextBattle } from './genNextBattle.js';
 import u from '@yanick/updeep-remeda';
 
 const seedCampaign = {
+	status: 'ongoing', // win, lost
+	score: 0,
 	battles: [],
 };
 
+function campaignStatus(campaign) {
+	if (campaign.battles.length <= 6) return 'ongoing';
+
+	if (R.last(campaign.battles).status === 'won') return 'won';
+
+	if (
+		campaign.battles.length - 6 >=
+		campaign.battles.slice(0, 6).filter(({ status }) => status === 'won')
+	)
+		return 'lost';
+
+	return 'ongoing';
+}
+
+function calculateScore(campaign) {
+	return [
+		// -campaign.battles.slice(0, 6).filter(({ wave }) => wave === 2).length,
+		// -campaign.battles.slice(6).filter(({ status }) => status === 'lost')
+		// 	.length,
+		...campaign.battles.map(({ difficulty }) => parseInt(difficulty)),
+	].reduce((a, b) => a + b, 0);
+}
+
 export function updateBattle(campaign, battleId, status) {
 	const battle = campaign.battles[battleId - 1];
 	if (status === 'lost' && (battle.wave == 1 || battle.id < 7)) {
@@ -17,14 +42,23 @@ export function updateBattle(campaign, battleId, status) {
 	campaign = u.updateIn(campaign, `battles.${battleId - 1}`, {
 		status,
 	});
+
+	campaign = u.updateIn(campaign, 'score', calculateScore(campaign));
+	console.log(campaign);
+
 	campaign = u(campaign, {
-		battles: (battles) => [
-			...battles,
-			u(genNextBattle(battles), {
-				id: battles.length + 1,
-			}),
-		],
+		status: campaignStatus(campaign),
 	});
+	if (campaign.status === 'ongoing') {
+		campaign = u(campaign, {
+			battles: (battles) => [
+				...battles,
+				u(genNextBattle(battles), {
+					id: battles.length + 1,
+				}),
+			],
+		});
+	}
 	return campaign;
 }