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> <article class="scroll">
<h6>Chapter {chapter}, battle {chapterBattle} -- {status}</h6> <header class="fixed">
<dl> <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'} {#if status === 'ongoing'}
<dt>wave</dt> <dt>wave</dt>
<dd>{wave === 2 ? 'second' : 'first'}</dd> <dd>{wave === 2 ? 'second' : 'first'}</dd>
@ -45,14 +61,41 @@
{difficulty} {difficulty}
--> -->
</dd> </dd>
</dl> </dl>
{#if status === 'upcoming'} {#if status === 'upcoming'}
<button>Start battle</button> <button>Start battle</button>
{:else if status === 'ongoing'} {:else if status === 'ongoing'}
<button on:click={battleVerdict('won')}>Battle won</button> <button on:click={battleVerdict('won')}>Battle won</button>
<button on:click={battleVerdict('lost')}>Battle lost</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> <script>
import { getContext } from 'svelte'; import { getContext } from 'svelte';
@ -79,7 +122,7 @@
let chapter = 1 + parseInt(params.battleId / 2); let chapter = 1 + parseInt(params.battleId / 2);
let chapterBattle = params.battleId % 2; let chapterBattle = params.battleId % 2;
const battleVerdict = (verdict) => const battleVerdict = (verdict) => () =>
event.setBattleVerdict(params.battleId, verdict); event.setBattleVerdict(params.battleId, verdict);
// $: event.setBattleDifficulty(params.battleId, difficulty); // $: event.setBattleDifficulty(params.battleId, difficulty);
@ -121,4 +164,8 @@
input { input {
width: 5em; width: 5em;
} }
footer nav {
display: flex;
justify-content: space-between;
}
</style> </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} {#if $activeCampaign}
<h5>{$activeCampaign.name}</h5>
<h6>Chapter 1</h6> <h6>Chapter 1</h6>
<Battle {...battles[0]} {campaignId} chapter={1} chapterBattle={1} /> <Battle {...battles[0]} {campaignId} chapter={1} chapterBattle={1} />
<div class="medium-divider" /> <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} /> <div class="medium-divider" {campaignId} />
<h6>Chapter 2</h6> <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" /> <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" /> <div class="medium-divider" />
<h6>Chapter 3</h6> <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" /> <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" /> <div class="medium-divider" />
<h6>Chapter 4</h6> <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" /> <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" /> <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" /> <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" /> <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" /> <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" /> <div class="medium-divider" />
{/if} {/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> </article>
<script> <script>
@ -48,8 +126,6 @@
$: battles = $activeCampaign?.battles ?? []; $: battles = $activeCampaign?.battles ?? [];
$: while (battles.length <= 12) battles.push({ notYet: true });
const campaignId = params.campaignId; const campaignId = params.campaignId;
$: byChapter = R.pipe( $: byChapter = R.pipe(
@ -61,4 +137,14 @@
</script> </script>
<style> <style>
article {
height: 100vh;
}
footer {
display: flex;
justify-content: end;
}
footer nav {
text-align: right;
}
</style> </style>

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

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

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

@ -1,10 +1,14 @@
<article> <header>
<header> <nav>
<h5>Campaigns</h5> <h5 class="max center-align">Campaigns</h5>
<button on:click={newCampaign}>new campaign</button> <button class="circle small" on:click={newCampaign}>
</header> <i>add</i>
</button>
</nav>
</header>
{#each $campaigns as campaign (campaign.id)} <article>
{#each $campaigns as campaign (campaign._id)}
<div class="row"> <div class="row">
<i class="light-green-text">south_america</i> <i class="light-green-text">south_america</i>
<div class="max"> <div class="max">
@ -63,9 +67,9 @@
R.clamp(1 + parseInt(battles?.length / 2), { max: 4 }); R.clamp(1 + parseInt(battles?.length / 2), { max: 4 });
const currentCity = ({ battles }) => R.last(battles).city; const currentCity = ({ battles }) => R.last(battles).city;
async function deleteCampaign({ name, id }) { async function deleteCampaign({ name, _id }) {
if (!window.confirm(`delete campaign ${name}?`)) return; if (!window.confirm(`delete campaign ${name}?`)) return;
api.event.deleteCampaign(id); api.event.deleteCampaign(_id);
} }
const newCampaign = () => { const newCampaign = () => {
@ -80,6 +84,9 @@
</script> </script>
<style> <style>
nav {
width: 100%;
}
header { header {
display: flex; 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 { writable, derived, get } from 'svelte/store';
import { genNextBattle } from './genNextBattle.js'; import { genNextBattle } from './genNextBattle.js';
import u from '@yanick/updeep-remeda'; import u from '@yanick/updeep-remeda';
import pouchMem from 'pouchdb-adapter-memory';
const seedCampaign = { const seedCampaign = {
battles: [], battles: [],
}; };
export function genApi(options = {}) { export function genApi(options = {}) {
if (options.local) PouchDB.plugin(pouchMem); // if (options.local) MyPouch.plugin(pouchMem);
const pouchdb = new PouchDB( const pouchdb = new PouchDB(
'Campaigns', 'Campaigns',