under-falling-skies/src/lib/components/Campaign.svelte

<article class="scroll">
	<header class="fixed">
		<nav>
			<a href="#/">
				<button class="circle transparent">
					<i>menu</i>
				</button></a
			>
			<h5 class="max center-align">
				{#if $activeCampaign}
					{$activeCampaign.name}
				{/if}
			</h5>
		</nav>
	</header>

	{#if $activeCampaign}
		<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}
	<footer class="fixed">
		<nav>
			<a href={`#/campaign/${$activeCampaign._id}/battle/1`}>
				<button class="circle transparent">
					<i>arrow_forward</i>
				</button>
			</a>
		</nav>
	</footer>
</article>

<script>
	import * as R from 'remeda';
	import Battle from './Campaign/Battle.svelte';

	import { getContext } from 'svelte';

	export let params;

	const api = getContext('api');

	api.event.setActiveCampaign(params.campaignId);

	const { activeCampaign } = getContext('api');

	$: battles = $activeCampaign?.battles ?? [];

	const campaignId = params.campaignId;

	$: byChapter = R.pipe(
		$activeCampaign?.battles ?? [],
		R.groupBy(({ id }) => R.clamp(1 + parseInt(id / 2), { max: 4 })),
	);

	$: console.log(byChapter);
</script>

<style>
	article {
		height: 100vh;
	}
	footer {
		display: flex;
		justify-content: end;
	}
	footer nav {
		text-align: right;
	}
</style>