first pass of the new look

This commit is contained in:
Yanick Champoux 2020-07-28 15:42:20 -04:00
parent 5381265dca
commit 5dabcc7072
7 changed files with 33 additions and 26 deletions

View File

@ -1,6 +1,8 @@
<Header /> <Header />
<main> <main>
<input class="reset" type="button" value="reset" on:click={reset} /> <nav>
<input class="reset button small red" type="button" value="reset" on:click={reset} />
</nav>
<ShipSpecs /> <ShipSpecs />
@ -17,6 +19,9 @@
screens={$ship.structure.screens} screens={$ship.structure.screens}
armour={$ship.structure.armour} armour={$ship.structure.armour}
on:set_screens={set_screens} on:set_screens={set_screens}
cargo={$ship.cargo}
streamlining={$ship.streamlining}
on:set_cargo={ship_dispatch}
on:ship_change={ship_dispatch} /> on:ship_change={ship_dispatch} />
<Section label="weaponry"> <Section label="weaponry">
@ -34,11 +39,6 @@
</Section> </Section>
<Section label="misc">
<Cargo {...$ship.cargo} on:set_cargo={ship_dispatch} />
<Streamlining {...$ship.streamlining} />
</Section>
<Carrier {...$ship.carrier} /> <Carrier {...$ship.carrier} />
</main> </main>
@ -57,8 +57,6 @@
import Propulsion from "./Propulsion/index.svelte"; import Propulsion from "./Propulsion/index.svelte";
import Section from "~C/Section"; import Section from "~C/Section";
import Weapon from "~C/Weapon"; 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 Carrier from "~C/Carrier";
import ADFC from "~C/Weaponry/ADFC"; import ADFC from "~C/Weaponry/ADFC";
import AddWeapon from "~C/Weaponry/AddWeapon"; import AddWeapon from "~C/Weaponry/AddWeapon";

View File

@ -1,12 +1,16 @@
<ShipItem {cost} {mass}> <ShipItem {cost} {mass}>
<Field label="streamlining"> <Field label="streamlining">
<div> <div>
<label>
<input type="radio" bind:group={type} value="none" /> <input type="radio" bind:group={type} value="none" />
<label>none</label> none</label>
<label>
<input type="radio" bind:group={type} value="partial" /> <input type="radio" bind:group={type} value="partial" />
<label>partial</label> partial</label>
<label>
<input type="radio" bind:group={type} value="full" /> <input type="radio" bind:group={type} value="full" />
<label>full</label> full</label>
</div> </div>
</Field> </Field>
</ShipItem> </ShipItem>
@ -30,4 +34,7 @@
<style> <style>
div { display: flex } div { display: flex }
label {
margin-left: 1em;
}
</style> </style>

View File

@ -13,6 +13,9 @@
<Armour {armour} on:ship_change /> <Armour {armour} on:ship_change />
<Cargo {...cargo} on:set_cargo />
<Streamlining {...streamlining} />
</Section> </Section>
<script> <script>
@ -23,11 +26,16 @@
import ShipItem from '~C/ShipItem'; import ShipItem from '~C/ShipItem';
import Screens from './Screens'; import Screens from './Screens';
import Armour from './Armour'; import Armour from './Armour';
import Cargo from './Cargo';
import Streamlining from './Streamlining';
export let cost, mass, ship_mass, rating, screens, armour = ( export let cost, mass, ship_mass, rating, screens, armour = (
0, 0, 10, 1, [], [] 0, 0, 10, 1, [], []
); );
export let cargo = {};
export let streamlining = {};
let min, max; let min, max;
$: min = Math.ceil(ship_mass / 10); $: min = Math.ceil(ship_mass / 10);
$: max = ship_mass; $: max = ship_mass;

View File

@ -1,7 +1,9 @@
<ShipItem {cost} {mass}> <ShipItem {cost} {mass}>
<div class="weapon_row"> <div class="weapon_row">
<div class="remove" on:click={remove}>X</div>
<input type="button" class="button small red remove" value="remove"
on:click={remove} />
<svelte:component this={weapon_component[weapon_type]} {...weapon} <svelte:component this={weapon_component[weapon_type]} {...weapon}
@ -112,14 +114,6 @@
display: block; display: block;
} }
.remove {
width: 1em;
flex: 0;
color: white;
background-color: black;
border-radius: 0.5em;
height: 1em;
}
.weapon_row { .weapon_row {
display: flex; display: flex;
gap: 2em; gap: 2em;

View File

@ -8,7 +8,7 @@
<option value="needle">needle weapon</option> <option value="needle">needle weapon</option>
</select> </select>
<input type="button" value="add weapon" on:click={ add_weapon }/> <input type="button" value="add weapon" class="button small blue" on:click={ add_weapon }/>
</Field> </Field>

View File

@ -1,4 +1,4 @@
<input class="add-weapon" type="button" value="add" <input class="add-weapon button small blue" type="button" value="add"
on:click={add} /> on:click={add} />
<div class="weapon"> <div class="weapon">