header of the page
This commit is contained in:
Yanick Champoux
parent
3dfd592e11
commit
2678a9522e
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
5
public/fonts/faktos.css
Normal file
5
public/fonts/faktos.css
Normal file
@ -0,0 +1,5 @@
|
||||
@font-face {
|
||||
font-family: 'Faktos';
|
||||
font-style: normal;
|
||||
src: url(Faktos.ttf) format('truetype');
|
||||
}
|
||||
@ -1,11 +1,18 @@
|
||||
:root {
|
||||
--font-scale-8: calc(1rem/1.125/1.125);
|
||||
--font-scale-9: calc(1rem/1.125);
|
||||
--font-scale-10: 1rem;
|
||||
--font-scale-11: calc(1rem * 1.125);
|
||||
--font-scale-12: calc(1rem * 1.125 * 1.125);
|
||||
:root {
|
||||
--font-scale-9: 0.75rem;
|
||||
--font-scale-10: 1em;
|
||||
--font-scale-11: 1.333rem;
|
||||
--font-scale-12: 1.777rem;
|
||||
--font-scale-13: 2.369rem;
|
||||
--font-scale-14: 3.157rem;
|
||||
--font-scale-15: 4.209rem;
|
||||
}
|
||||
|
||||
small {font-size: var(--font-scale-9); }
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-scale-14);
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
|
||||
|
||||
<link rel="stylesheet" href="./fonts/faktos.css">
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel='stylesheet' href='./global.css'>
|
||||
<link rel='stylesheet' href='./bundle.css'>
|
||||
|
||||
114
src/App.svelte
114
src/App.svelte
@ -1,114 +0,0 @@
|
||||
<script>
|
||||
import { setContext } from 'svelte';
|
||||
|
||||
import shipStore from './stores/ship';
|
||||
|
||||
import ShipItem from './components/ShipItem/index.svelte';
|
||||
import ShipCost from './components/ShipCost.svelte';
|
||||
import Field from './components/Field/index.svelte';
|
||||
import Hull from './components/Hull.svelte';
|
||||
import Identification from './components/Identification.svelte';
|
||||
import Firecons from './components/Firecons.svelte';
|
||||
import Propulsion from './components/Propulsion/index.svelte';
|
||||
import Section from '~C/Section';
|
||||
import Weapon from '~C/Weapon';
|
||||
import Cargo from '~C/Cargo/index.svelte';
|
||||
import Streamlining from '~C/Streamlining/index.svelte';
|
||||
import Carrier from '~C/Carrier';
|
||||
import ADFC from '~C/Weaponry/ADFC';
|
||||
import AddWeapon from '~C/Weaponry/AddWeapon';
|
||||
|
||||
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);
|
||||
|
||||
setContext( 'ship_change', ship.dispatch );
|
||||
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<input class="reset" type="button" value="reset" on:click={reset} />
|
||||
|
||||
<Identification />
|
||||
|
||||
<ShipCost />
|
||||
|
||||
<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}
|
||||
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>
|
||||
|
||||
<Section label="misc">
|
||||
<Cargo {...$ship.cargo} on:set_cargo={ship_dispatch}/>
|
||||
<Streamlining {...$ship.streamlining} />
|
||||
</Section>
|
||||
|
||||
<Carrier {...$ship.carrier} />
|
||||
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: grid;
|
||||
width: 60em;
|
||||
grid-template-columns: 4fr 1fr 1fr;
|
||||
}
|
||||
|
||||
main :global(> *) {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
input.reset { grid-column: 2 }
|
||||
</style>
|
||||
127
src/components/App.svelte
Normal file
127
src/components/App.svelte
Normal file
@ -0,0 +1,127 @@
|
||||
<header>
|
||||
<h1>The Shipyard <span class="subtitle">a <a
|
||||
href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship builder</span></h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<input class="reset" type="button" value="reset" on:click={reset} />
|
||||
|
||||
<Identification />
|
||||
|
||||
<ShipCost />
|
||||
|
||||
<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}
|
||||
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>
|
||||
|
||||
<Section label="misc">
|
||||
<Cargo {...$ship.cargo} on:set_cargo={ship_dispatch} />
|
||||
<Streamlining {...$ship.streamlining} />
|
||||
</Section>
|
||||
|
||||
<Carrier {...$ship.carrier} />
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
import { setContext } from "svelte";
|
||||
|
||||
import shipStore from "~/stores/ship";
|
||||
|
||||
import ShipItem from "./ShipItem/index.svelte";
|
||||
import ShipCost from "./ShipCost.svelte";
|
||||
import Field from "./Field/index.svelte";
|
||||
import Hull from "./Hull.svelte";
|
||||
import Identification from "./Identification.svelte";
|
||||
import Firecons from "./Firecons.svelte";
|
||||
import Propulsion from "./Propulsion/index.svelte";
|
||||
import Section from "~C/Section";
|
||||
import Weapon from "~C/Weapon";
|
||||
import Cargo from "~C/Cargo/index.svelte";
|
||||
import Streamlining from "~C/Streamlining/index.svelte";
|
||||
import Carrier from "~C/Carrier";
|
||||
import ADFC from "~C/Weaponry/ADFC";
|
||||
import AddWeapon from "~C/Weaponry/AddWeapon";
|
||||
|
||||
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);
|
||||
|
||||
setContext("ship_change", ship.dispatch);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: grid;
|
||||
width: 60em;
|
||||
grid-template-columns: 4fr 1fr 1fr;
|
||||
}
|
||||
|
||||
main :global(> *) {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
input.reset {
|
||||
grid-column: 2;
|
||||
}
|
||||
h1 {
|
||||
font-family: Faktos;
|
||||
}
|
||||
|
||||
h1 .subtitle {
|
||||
padding-left: 2em;
|
||||
font-size: var(--font-scale-12);
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,4 @@
|
||||
import App from './App.svelte';
|
||||
import App from './components/App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body
|
||||
|
||||
Loading…
Reference in New Issue
Block a user