put a minimal working App.svelte
This commit is contained in:
parent
090e5fac94
commit
b51b27e43b
188
src/lib/components/App-original.svelte
Normal file
188
src/lib/components/App-original.svelte
Normal file
@ -0,0 +1,188 @@
|
||||
<Ribbon />
|
||||
<Header />
|
||||
|
||||
<nav>
|
||||
<button class="button is-danger" type="button" on:click={reset}
|
||||
>reset</button
|
||||
>
|
||||
|
||||
<div class="spacer" />
|
||||
|
||||
<button class="button is-info about" on:click={toggle_notes}>about</button>
|
||||
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<button class="button" on:click={() => set_output(null)}>editor</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button" on:click={() => set_output("json")}>json</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button" on:click={() => set_output("print")}
|
||||
>print</button
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{#if show_notes}
|
||||
<Notes show={show_notes} on:close={toggle_notes} />
|
||||
{/if}
|
||||
|
||||
{#if output === "json"}
|
||||
<OutputJson ship={$ship} on:close={() => set_output(null)} />
|
||||
{:else if output === "print"}
|
||||
<Print ship={$ship} />
|
||||
{:else}
|
||||
<main>
|
||||
<ShipSpecs />
|
||||
|
||||
<Propulsion
|
||||
ftl={$ship.ftl}
|
||||
engine={$ship.engine}
|
||||
on:change_ftl={change_ftl}
|
||||
on:change_engine={change_engine}
|
||||
/>
|
||||
|
||||
<Hull
|
||||
ship_mass={$ship.general.mass}
|
||||
{...$ship.structure.hull}
|
||||
on:change_hull={change_hull}
|
||||
screens={$ship.structure.screens}
|
||||
armour={$ship.structure.armour}
|
||||
on:set_screens={set_screens}
|
||||
cargo={$ship.cargo}
|
||||
streamlining={$ship.streamlining}
|
||||
on:set_cargo={ship_dispatch}
|
||||
on:ship_change={ship_dispatch}
|
||||
/>
|
||||
|
||||
<Section label="weaponry">
|
||||
<Firecons
|
||||
{...$ship.weaponry.firecons}
|
||||
on:change_firecons={change_firecons}
|
||||
/>
|
||||
|
||||
<ADFC {...$ship.weaponry.adfc} />
|
||||
|
||||
<AddWeapon />
|
||||
|
||||
{#each weapons as weapon (weapon.id)}
|
||||
<Weapon
|
||||
{weapon}
|
||||
id={weapon.id}
|
||||
cost={weapon.cost}
|
||||
mass={weapon.mass}
|
||||
/>
|
||||
{/each}
|
||||
</Section>
|
||||
|
||||
<Carrier {...$ship.carrier} />
|
||||
</main>
|
||||
<footer>
|
||||
Written by <a href="https://twitter.com/yenzie">Yanick Champoux</a>. Code
|
||||
available on
|
||||
<a href="https://github.com/aotds/aotds-shipyard">Github</a>
|
||||
</footer>
|
||||
{/if}
|
||||
|
||||
<script>
|
||||
import { setContext } from "svelte";
|
||||
|
||||
import Header from "./Header.svelte";
|
||||
import Ribbon from "./Ribbon.svelte";
|
||||
import shipStore from "../stores/ship";
|
||||
import OutputJson from "./Output/Json.svelte";
|
||||
import Print from "./Output/Print/index.svelte";
|
||||
|
||||
import ShipSpecs from "./ShipSpecs/index.svelte";
|
||||
import Notes from "./Notes.svelte";
|
||||
import ShipItem from "./ShipItem/index.svelte";
|
||||
import Field from "./Field/index.svelte";
|
||||
import Hull from "./Hull/index.svelte";
|
||||
import Firecons from "./Firecons.svelte";
|
||||
import Propulsion from "./Propulsion/index.svelte";
|
||||
import Section from "./Section/index.svelte";
|
||||
import Weapon from "./Weapon/index.svelte";
|
||||
import Carrier from "./Carrier/index.svelte";
|
||||
import ADFC from "./Weaponry/ADFC/index.svelte";
|
||||
import AddWeapon from "./Weaponry/AddWeapon/index.svelte";
|
||||
|
||||
const ship = shipStore();
|
||||
|
||||
setContext("ship", ship);
|
||||
|
||||
let ship_name = $ship.general.name;
|
||||
|
||||
const change_name = (event) =>
|
||||
ship.dispatch(ship.actions.set_name(event.target.value));
|
||||
|
||||
const change_mass = ({ target: { value } }) =>
|
||||
ship.dispatch(ship.actions.set_ship_mass(parseInt(value)));
|
||||
|
||||
const add_weapon = () => ship.dispatch.add_weapon();
|
||||
|
||||
const change_ftl = ({ detail }) => ship.dispatch.set_ftl(detail);
|
||||
const change_engine = ({ detail }) => ship.dispatch.set_engine(detail);
|
||||
const change_hull = ({ detail }) => ship.dispatch.set_hull(detail);
|
||||
const change_firecons = ({ detail }) => ship.dispatch.set_firecons(detail);
|
||||
const change_weapon = ({ detail }) => ship.dispatch.set_weapon(detail);
|
||||
|
||||
let weapons = [];
|
||||
$: console.log(weapons);
|
||||
$: weapons = $ship.weaponry.weapons;
|
||||
|
||||
const reset = ship.dispatch.reset;
|
||||
|
||||
const set_screens = ({ detail }) => ship.dispatch.set_screens(detail);
|
||||
|
||||
const ship_dispatch = ({ detail }) => ship.dispatch(detail);
|
||||
|
||||
let show_notes = false;
|
||||
const toggle_notes = () => (show_notes = !show_notes);
|
||||
|
||||
let output = null;
|
||||
|
||||
const set_output = (value) => (output = value);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 14em 8em;
|
||||
width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
grid-column: 1 / span 3 !important;
|
||||
display: flex;
|
||||
width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
nav .spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:global(main > *) {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
input.reset {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: var(--main-width);
|
||||
margin: 0 auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.about {
|
||||
margin-right: 2em;
|
||||
}
|
||||
</style>
|
||||
@ -1,188 +1,9 @@
|
||||
<Ribbon />
|
||||
<Header />
|
||||
|
||||
<nav>
|
||||
<button class="button is-danger" type="button" on:click={reset}
|
||||
>reset</button
|
||||
>
|
||||
|
||||
<div class="spacer" />
|
||||
|
||||
<button class="button is-info about" on:click={toggle_notes}>about</button>
|
||||
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<button class="button" on:click={() => set_output(null)}>editor</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button" on:click={() => set_output("json")}>json</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button" on:click={() => set_output("print")}
|
||||
>print</button
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{#if show_notes}
|
||||
<Notes show={show_notes} on:close={toggle_notes} />
|
||||
{/if}
|
||||
|
||||
{#if output === "json"}
|
||||
<OutputJson ship={$ship} on:close={() => set_output(null)} />
|
||||
{:else if output === "print"}
|
||||
<Print ship={$ship} />
|
||||
{:else}
|
||||
<main>
|
||||
<ShipSpecs />
|
||||
|
||||
<Propulsion
|
||||
ftl={$ship.ftl}
|
||||
engine={$ship.engine}
|
||||
on:change_ftl={change_ftl}
|
||||
on:change_engine={change_engine}
|
||||
/>
|
||||
|
||||
<Hull
|
||||
ship_mass={$ship.general.mass}
|
||||
{...$ship.structure.hull}
|
||||
on:change_hull={change_hull}
|
||||
screens={$ship.structure.screens}
|
||||
armour={$ship.structure.armour}
|
||||
on:set_screens={set_screens}
|
||||
cargo={$ship.cargo}
|
||||
streamlining={$ship.streamlining}
|
||||
on:set_cargo={ship_dispatch}
|
||||
on:ship_change={ship_dispatch}
|
||||
/>
|
||||
|
||||
<Section label="weaponry">
|
||||
<Firecons
|
||||
{...$ship.weaponry.firecons}
|
||||
on:change_firecons={change_firecons}
|
||||
/>
|
||||
|
||||
<ADFC {...$ship.weaponry.adfc} />
|
||||
|
||||
<AddWeapon />
|
||||
|
||||
{#each weapons as weapon (weapon.id)}
|
||||
<Weapon
|
||||
{weapon}
|
||||
id={weapon.id}
|
||||
cost={weapon.cost}
|
||||
mass={weapon.mass}
|
||||
/>
|
||||
{/each}
|
||||
</Section>
|
||||
|
||||
<Carrier {...$ship.carrier} />
|
||||
</main>
|
||||
<footer>
|
||||
Written by <a href="https://twitter.com/yenzie">Yanick Champoux</a>. Code
|
||||
available on
|
||||
<a href="https://github.com/aotds/aotds-shipyard">Github</a>
|
||||
</footer>
|
||||
{/if}
|
||||
|
||||
<script>
|
||||
import { setContext } from "svelte";
|
||||
import Ribbon from '$lib/components/Ribbon.svelte';
|
||||
|
||||
import Header from "./Header.svelte";
|
||||
import Ribbon from "./Ribbon.svelte";
|
||||
import shipStore from "../stores/ship";
|
||||
import OutputJson from "./Output/Json.svelte";
|
||||
import Print from "./Output/Print/index.svelte";
|
||||
|
||||
import ShipSpecs from "./ShipSpecs/index.svelte";
|
||||
import Notes from "./Notes.svelte";
|
||||
import ShipItem from "./ShipItem/index.svelte";
|
||||
import Field from "./Field/index.svelte";
|
||||
import Hull from "./Hull/index.svelte";
|
||||
import Firecons from "./Firecons.svelte";
|
||||
import Propulsion from "./Propulsion/index.svelte";
|
||||
import Section from "./Section/index.svelte";
|
||||
import Weapon from "./Weapon/index.svelte";
|
||||
import Carrier from "./Carrier/index.svelte";
|
||||
import ADFC from "./Weaponry/ADFC/index.svelte";
|
||||
import AddWeapon from "./Weaponry/AddWeapon/index.svelte";
|
||||
|
||||
const ship = shipStore();
|
||||
|
||||
setContext("ship", ship);
|
||||
|
||||
let ship_name = $ship.general.name;
|
||||
|
||||
const change_name = (event) =>
|
||||
ship.dispatch(ship.actions.set_name(event.target.value));
|
||||
|
||||
const change_mass = ({ target: { value } }) =>
|
||||
ship.dispatch(ship.actions.set_ship_mass(parseInt(value)));
|
||||
|
||||
const add_weapon = () => ship.dispatch.add_weapon();
|
||||
|
||||
const change_ftl = ({ detail }) => ship.dispatch.set_ftl(detail);
|
||||
const change_engine = ({ detail }) => ship.dispatch.set_engine(detail);
|
||||
const change_hull = ({ detail }) => ship.dispatch.set_hull(detail);
|
||||
const change_firecons = ({ detail }) => ship.dispatch.set_firecons(detail);
|
||||
const change_weapon = ({ detail }) => ship.dispatch.set_weapon(detail);
|
||||
|
||||
let weapons = [];
|
||||
$: console.log(weapons);
|
||||
$: weapons = $ship.weaponry.weapons;
|
||||
|
||||
const reset = ship.dispatch.reset;
|
||||
|
||||
const set_screens = ({ detail }) => ship.dispatch.set_screens(detail);
|
||||
|
||||
const ship_dispatch = ({ detail }) => ship.dispatch(detail);
|
||||
|
||||
let show_notes = false;
|
||||
const toggle_notes = () => (show_notes = !show_notes);
|
||||
|
||||
let output = null;
|
||||
|
||||
const set_output = (value) => (output = value);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 14em 8em;
|
||||
width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
grid-column: 1 / span 3 !important;
|
||||
display: flex;
|
||||
width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
nav .spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:global(main > *) {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
input.reset {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: var(--main-width);
|
||||
margin: 0 auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.about {
|
||||
margin-right: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,16 +1,9 @@
|
||||
<App />
|
||||
|
||||
<svelte:head>
|
||||
{#each stylesheets as href (href)}
|
||||
<link rel="stylesheet" {href} />
|
||||
{/each}
|
||||
</svelte:head>
|
||||
|
||||
<script>
|
||||
import '../../static/fonts/faktos.css';
|
||||
import '../../static/fonts/dosis/dosis.css';
|
||||
import '../../static/global.css';
|
||||
|
||||
import App from "$lib/components/App.svelte";
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user