yanick/under-falling-skies
1
0
Fork 0
Code Issues 8 Pull Requests Projects Releases Wiki Activity

the apps

Browse Source
This commit is contained in:
Yanick Champoux 2023-01-14 13:25:46 -05:00
parent 59d4856904
commit 6bbba634c8
9 changed files with 259 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/lib/components/Battle.svelte
View File

@ -1,6 +1,22 @@
<h5><a href={`#/campaign/${params.campaignId}`}>{$activeCampaign?.name}</a></h5>
<h6>Chapter {chapter}, battle {chapterBattle} -- {status}</h6>
<dl>
<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}
<a href={`#/campaign/${$activeCampaign._id}`}>
{$activeCampaign.name}
</a>
{/if}
</h5>
</nav>
</header>
<h6>Chapter {chapter}, battle {chapterBattle} -- {status}</h6>
<dl>
{#if status === 'ongoing'}
<dt>wave</dt>
<dd>{wave === 2 ? 'second' : 'first'}</dd>
@ -45,14 +61,41 @@
{difficulty}
-->
</dd>
</dl>
</dl>
{#if status === 'upcoming'}
{#if status === 'upcoming'}
<button>Start battle</button>
{:else if status === 'ongoing'}
{:else if status === 'ongoing'}
<button on:click={battleVerdict('won')}>Battle won</button>
<button on:click={battleVerdict('lost')}>Battle lost</button>
{/if}
{/if}
<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 $activeCampaign.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>
<script>
import { getContext } from 'svelte';
@ -79,7 +122,7 @@
let chapter = 1 + parseInt(params.battleId / 2);
let chapterBattle = params.battleId % 2;
const battleVerdict = (verdict) =>
const battleVerdict = (verdict) => () =>
event.setBattleVerdict(params.battleId, verdict);
// $: event.setBattleDifficulty(params.battleId, difficulty);
@ -121,4 +164,8 @@
input {
width: 5em;
}
footer nav {
display: flex;
justify-content: space-between;
}
</style>

116
src/lib/components/Campaign.svelte
View File

@ -1,35 +1,113 @@
<article>
<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}
<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} />
<Battle
{...battles[1] ?? { id: 'notYet' }}
{campaignId}
chapter={1}
chapterBattle={2}
/>
<div class="medium-divider" {campaignId} />
<h6>Chapter 2</h6>
<Battle {...battles[2]} {campaignId} chapter={2} chapterBattle={1} />
<Battle
{...battles[2] ?? { id: 'notYet' }}
{campaignId}
chapter={2}
chapterBattle={1}
/>
<div class="medium-divider" />
<Battle {...battles[3]} {campaignId} chapter={2} chapterBattle={2} />
<Battle
{...battles[3] ?? { id: 'notYet' }}
{campaignId}
chapter={2}
chapterBattle={2}
/>
<div class="medium-divider" />
<h6>Chapter 3</h6>
<Battle {...battles[4]} {campaignId} chapter={3} chapterBattle={1} />
<Battle
{...battles[4] ?? { id: 'notYet' }}
{campaignId}
chapter={3}
chapterBattle={1}
/>
<div class="medium-divider" />
<Battle {...battles[5]} {campaignId} chapter={3} chapterBattle={2} />
<Battle
{...battles[4] ?? { id: 'notYet' }}
{campaignId}
chapter={3}
chapterBattle={2}
/>
<div class="medium-divider" />
<h6>Chapter 4</h6>
<Battle {...battles[6]} {campaignId} chapter={4} chapterBattle={1} />
<Battle
{...battles[6] ?? { id: 'notYet' }}
{campaignId}
chapter={4}
chapterBattle={1}
/>
<div class="medium-divider" />
<Battle {...battles[7]} {campaignId} chapter={4} chapterBattle={2} />
<Battle
{...battles[7] ?? { id: 'notYet' }}
{campaignId}
chapter={4}
chapterBattle={2}
/>
<div class="medium-divider" />
<Battle {...battles[8]} {campaignId} chapter={4} chapterBattle={3} />
<Battle
{...battles[8] ?? { id: 'notYet' }}
{campaignId}
chapter={4}
chapterBattle={3}
/>
<div class="medium-divider" />
<Battle {...battles[9]} {campaignId} chapter={4} chapterBattle={4} />
<Battle
{...battles[9] ?? { id: 'notYet' }}
{campaignId}
chapter={4}
chapterBattle={4}
/>
<div class="medium-divider" />
<Battle {...battles[10]} {campaignId} chapter={4} chapterBattle={5} />
<Battle
{...battles[10] ?? { id: 'notYet' }}
{campaignId}
chapter={4}
chapterBattle={5}
/>
<div class="medium-divider" />
<Battle {...battles[11]} {campaignId} chapter={4} chapterBattle={6} />
<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>
@ -48,8 +126,6 @@
$: battles = $activeCampaign?.battles ?? [];
$: while (battles.length <= 12) battles.push({ notYet: true });
const campaignId = params.campaignId;
$: byChapter = R.pipe(
@ -61,4 +137,14 @@
</script>
<style>
article {
height: 100vh;
}
footer {
display: flex;
justify-content: end;
}
footer nav {
text-align: right;
}
</style>

3
src/lib/components/Campaign/Battle.svelte
View File

@ -1,6 +1,6 @@
<div class="row">
<p>
{#if notYet}
{#if id == 'notYet'}
???
{:else}
<a href={`#/campaign/${campaignId}/battle/${id}`}>
@ -14,7 +14,6 @@
export let city = '';
export let status = '';
export let id = 0;
export let notYet = false;
export let campaignId;
export let chapter;
export let chapterBattle;

23
src/lib/components/Campaigns.svelte
View File

@ -1,10 +1,14 @@
<article>
<header>
<h5>Campaigns</h5>
<button on:click={newCampaign}>new campaign</button>
</header>
<header>
<nav>
<h5 class="max center-align">Campaigns</h5>
<button class="circle small" on:click={newCampaign}>
<i>add</i>
</button>
</nav>
</header>
{#each $campaigns as campaign (campaign.id)}
<article>
{#each $campaigns as campaign (campaign._id)}
<div class="row">
<i class="light-green-text">south_america</i>
<div class="max">
@ -63,9 +67,9 @@
R.clamp(1 + parseInt(battles?.length / 2), { max: 4 });
const currentCity = ({ battles }) => R.last(battles).city;
async function deleteCampaign({ name, id }) {
async function deleteCampaign({ name, _id }) {
if (!window.confirm(`delete campaign ${name}?`)) return;
api.event.deleteCampaign(id);
api.event.deleteCampaign(_id);
}
const newCampaign = () => {
@ -80,6 +84,9 @@
</script>
<style>
nav {
width: 100%;
}
header {
display: flex;
}

3
src/lib/store/api.js
View File

@ -4,14 +4,13 @@ import Dexie, { liveQuery } from 'dexie';
import { writable, derived, get } from 'svelte/store';
import { genNextBattle } from './genNextBattle.js';
import u from '@yanick/updeep-remeda';
import pouchMem from 'pouchdb-adapter-memory';
const seedCampaign = {
battles: [],
};
export function genApi(options = {}) {
if (options.local) PouchDB.plugin(pouchMem);
// if (options.local) MyPouch.plugin(pouchMem);
const pouchdb = new PouchDB(
'Campaigns',