From 8779d8ae31a10702b1f539a13ad71c87753c53af Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Mon, 16 Jan 2023 10:20:54 -0500
Subject: [PATCH] sky26: can load straight from battle

---
 src/lib/components/Battle.svelte | 233 ++++++++++++++++---------------
 1 file changed, 123 insertions(+), 110 deletions(-)

diff --git a/src/lib/components/Battle.svelte b/src/lib/components/Battle.svelte
index 41292aa..654283c 100644
--- a/src/lib/components/Battle.svelte
+++ b/src/lib/components/Battle.svelte
@@ -1,82 +1,94 @@
-<article class="scroll">
-	<header class="fixed fill">
-		<nav>
-			<a href="#/">
-				<button class="circle transparent">
-					<i>menu</i>
-				</button></a
-			>
-			<h5 class="max right-align">
-				{#if $activeCampaign}
-					<a href={`#/campaign/${$activeCampaign._id}`}>
-						{$activeCampaign.name}
-					</a>
-				{/if}
-			</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>
-				<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)}
-				/>
+{#if !$activeCampaign}
+	<div class="fill medium-height middle-align center-align">
+		<div class="center-align">
+			<h5>Loading...</h5>
+			<div class="space">
+				<a class="loader large" />
 			</div>
+		</div>
+	</div>
+{:else}
+	<article class="scroll">
+		<header class="fixed fill">
+			<nav>
+				<a href="#/">
+					<button class="circle transparent">
+						<i>menu</i>
+					</button></a
+				>
+				<h5 class="max right-align">
+					{#if $activeCampaign}
+						<a href={`#/campaign/${$activeCampaign._id}`}>
+							{$activeCampaign.name}
+						</a>
+					{/if}
+				</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>
+					<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={{
@@ -96,46 +108,47 @@
 			/>
 			{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>
 
-	<footer class="fixed">
-		<nav>
-			<a
-				href={`#/campaign/${$activeCampaign?._id}` +
-					(battle?.id == 1
-						? ''
-						: `/battle/${parseInt(battle?.id) - 1}`)}
-			>
-				<button class="circle transparent">
-					<i>arrow_backward</i>
-				</button>
-			</a>
-			{#if battles?.length > battle?.id}
+		<footer class="fixed">
+			<nav>
 				<a
-					href={`#/campaign/${$activeCampaign?._id}/battle/${
-						battle?.id + 1
-					}`}
+					href={`#/campaign/${$activeCampaign?._id}` +
+						(battle?.id == 1
+							? ''
+							: `/battle/${parseInt(battle?.id) - 1}`)}
 				>
 					<button class="circle transparent">
-						<i>arrow_forward</i>
+						<i>arrow_backward</i>
 					</button>
 				</a>
-			{/if}
-		</nav>
-	</footer>
-</article>
+				{#if battles?.length > battle?.id}
+					<a
+						href={`#/campaign/${$activeCampaign?._id}/battle/${
+							battle?.id + 1
+						}`}
+					>
+						<button class="circle transparent">
+							<i>arrow_forward</i>
+						</button>
+					</a>
+				{/if}
+			</nav>
+		</footer>
+	</article>
+{/if}
 
 <script>
 	import * as R from 'remeda';