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

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

@ -1,30 +1,46 @@
<h5><a href={`#/campaign/${params.campaignId}`}>{$activeCampaign?.name}</a></h5>
<h6>Chapter {chapter}, battle {chapterBattle} -- {status}</h6>
<dl>
{#if status === 'ongoing'}
<dt>wave</dt>
<dd>{wave === 2 ? 'second' : 'first'}</dd>
{/if}
<dt>city</dt>
<dd>{city}</dd>
<dt>scenario</dt>
<dd>{scenario}</dd>
<dt>character</dt>
<dd>{character}</dd>
<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>
{/if}
<dt>city</dt>
<dd>{city}</dd>
<dt>scenario</dt>
<dd>{scenario}</dd>
<dt>character</dt>
<dd>{character}</dd>
<dt>difficulty</dt>
<dd>
<div class="field border">
<input
type="number"
step="0.5"
value={difficulty}
on:change={({ target: { value } }) =>
event.setBattleDifficulty(params.battleId, value)}
/>
</div>
<dt>difficulty</dt>
<dd>
<div class="field border">
<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={{
@ -44,15 +60,42 @@
/>
{difficulty}
-->
</dd>
</dl>
</dd>
</dl>
{#if status === 'upcoming'}
<button>Start battle</button>
{:else if status === 'ongoing'}
<button on:click={battleVerdict('won')}>Battle won</button>
<button on:click={battleVerdict('lost')}>Battle lost</button>
{/if}
{#if status === 'upcoming'}
<button>Start battle</button>
{:else if status === 'ongoing'}
<button on:click={battleVerdict('won')}>Battle won</button>
<button on:click={battleVerdict('lost')}>Battle lost</button>
{/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',

76
src/lib/store/chapters.js
View File

@ -1,40 +1,40 @@
export default [
{
cities: ['Havana', 'Montreal', 'Mexico City', 'Rio de Janeiro'],
characters: [
'Clinton Harper',
'Jackson Moss',
'Lucia Ortego',
'Samantha Legrand',
],
scenarios: [
'Evacuation',
'Reinforcements',
'Battle for the sky',
'Satellites',
],
},
{
cities: ['Johannesburg', 'Moscow', 'Cairo', 'London', 'Paris'],
characters: [
'Jaroslav Ruzicka',
'Karima Almasi',
'Shanti Aumann',
'Pieter Bernstein',
],
scenarios: [
'Command ship',
'Reactor leak',
'Dangerous research',
'Repairing the base',
],
},
{
cities: ['Seoul', 'Beijing', 'Tokyo', 'Sydney', 'Singapore'],
characters: ['Wang Lin', "Iz'ox", 'Jang Chanwook', 'Archie Bell'],
scenarios: ['Storm', 'Contamination', 'Kamikaze', 'Saboteur'],
},
{
scenarios: ['The final battle'],
},
{
cities: ['Havana', 'Montreal', 'Mexico City', 'Rio de Janeiro'],
characters: [
'Clinton Harper',
'Jackson Moss',
'Lucia Ortego',
'Samantha Legrand',
],
scenarios: [
'Evacuation',
'Reinforcements',
'Battle for the sky',
'Satellites',
],
},
{
cities: ['Johannesburg', 'Moscow', 'Cairo', 'London', 'Paris'],
characters: [
'Jaroslav Ruzicka',
'Karima Almasi',
'Shanti Aumann',
'Pieter Bernstein',
],
scenarios: [
'Command ship',
'Reactor leak',
'Dangerous research',
'Repairing the base',
],
},
{
cities: ['Seoul', 'Beijing', 'Tokyo', 'Sydney', 'Singapore'],
characters: ['Wang Lin', "Iz'ox", 'Jang Chanwook', 'Archie Bell'],
scenarios: ['Storm', 'Contamination', 'Kamikaze', 'Saboteur'],
},
{
scenarios: ['The final battle'],
},
];

38
src/lib/store/genNextBattle.js
View File

@ -4,25 +4,25 @@ import chapters from './chapters.js';
const pickOne = (choices) => choices[parseInt(Math.random() * choices.length)];
export function genNextBattle(battles = []) {
let chapter = R.clamp(1 + parseInt(battles.length / 2), { min: 1, max: 4 });
let chapter = R.clamp(1 + parseInt(battles.length / 2), { min: 1, max: 4 });
if (chapter === 1) {
const scenario = pickOne(
chapters[chapter - 1].scenarios.filter(
(s) => !battles.map(R.prop('scenario')).includes(s),
),
);
const character = pickOne(
chapters[chapter - 1].characters.filter(
(s) => !battles.map(R.prop('character')).includes(s),
),
);
const city = pickOne(
chapters[chapter - 1].cities.filter(
(s) => !battles.map(R.prop('city')).includes(s),
),
);
if (chapter === 1) {
const scenario = pickOne(
chapters[chapter - 1].scenarios.filter(
(s) => !battles.map(R.prop('scenario')).includes(s),
),
);
const character = pickOne(
chapters[chapter - 1].characters.filter(
(s) => !battles.map(R.prop('character')).includes(s),
),
);
const city = pickOne(
chapters[chapter - 1].cities.filter(
(s) => !battles.map(R.prop('city')).includes(s),
),
);
return { scenario, character, city, status: 'ongoing', wave: 1 };
}
return { scenario, character, city, status: 'ongoing', wave: 1 };
}
}

2
src/main.js
View File

@ -2,7 +2,7 @@
import App from './lib/components/App.svelte';
const app = new App({
target: document.getElementById('app'),
target: document.getElementById('app'),
});
export default app;

4
src/routes/campaign/[campaignId]/+layout.js
View File

@ -1,4 +1,4 @@
export function load({ params }) {
params.campaignId = parseInt(params?.campaignId);
return params;
params.campaignId = parseInt(params?.campaignId);
return params;
}