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

65 lines
2.0 KiB
Svelte

<article>
{#if $activeCampaign}
<h5>{$activeCampaign.name}</h5>
<h6>Chapter 1</h6>
<Battle {...battles[0]} {campaignId} chapter={1} chapterBattle={1} />
<div class="medium-divider" />
<Battle {...battles[1]} {campaignId} chapter={1} chapterBattle={2} />
<div class="medium-divider" {campaignId} />
<h6>Chapter 2</h6>
<Battle {...battles[2]} {campaignId} chapter={2} chapterBattle={1} />
<div class="medium-divider" />
<Battle {...battles[3]} {campaignId} chapter={2} chapterBattle={2} />
<div class="medium-divider" />
<h6>Chapter 3</h6>
<Battle {...battles[4]} {campaignId} chapter={3} chapterBattle={1} />
<div class="medium-divider" />
<Battle {...battles[5]} {campaignId} chapter={3} chapterBattle={2} />
<div class="medium-divider" />
<h6>Chapter 4</h6>
<Battle {...battles[6]} {campaignId} chapter={4} chapterBattle={1} />
<div class="medium-divider" />
<Battle {...battles[7]} {campaignId} chapter={4} chapterBattle={2} />
<div class="medium-divider" />
<Battle {...battles[8]} {campaignId} chapter={4} chapterBattle={3} />
<div class="medium-divider" />
<Battle {...battles[9]} {campaignId} chapter={4} chapterBattle={4} />
<div class="medium-divider" />
<Battle {...battles[10]} {campaignId} chapter={4} chapterBattle={5} />
<div class="medium-divider" />
<Battle {...battles[11]} {campaignId} chapter={4} chapterBattle={6} />
<div class="medium-divider" />
{/if}
</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 ?? [];
$: while (battles.length <= 12) battles.push({ notYet: true });
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>
</style>