Browse Source

back to storybook

main
Yanick Champoux 11 months ago
parent
commit
49429778e7
  1. 34
      .storybook/main.js
  2. 3
      .storybook/package.json
  3. 11
      .storybook/preview.js
  4. 5
      .vitebook/App.svelte
  5. 24
      .vitebook/config.js
  6. 2
      .vitebook/theme/index.js
  7. 10
      package.json
  8. 15
      src/lib/components/App-original.svelte
  9. 6
      src/lib/components/App.svelte
  10. 14
      src/lib/components/Carrier/Carrier.story.svelte
  11. 23
      src/lib/components/Carrier/Squadron/index.svelte
  12. 17
      src/lib/components/Carrier/index.svelte
  13. 28
      src/lib/components/Carrier/stories.js
  14. 4
      src/lib/components/Cost.story.svelte
  15. 5
      src/lib/components/Cost.svelte
  16. 28
      src/lib/components/CostMass.svelte
  17. 33
      src/lib/components/Engine/Engine.stories.svelte
  18. 55
      src/lib/components/Engine/index.svelte
  19. 2
      src/lib/components/Field/BasicStory.svelte
  20. 27
      src/lib/components/Field/index.svelte
  21. 10
      src/lib/components/Field/stories.js
  22. 19
      src/lib/components/Firecons.svelte
  23. 45
      src/lib/components/Ftl/index.svelte
  24. 14
      src/lib/components/Ftl/stories.js
  25. 26
      src/lib/components/Header.svelte
  26. 20
      src/lib/components/Hull/Armour/Layer/index.svelte
  27. 76
      src/lib/components/Hull/Armour/index.svelte
  28. 24
      src/lib/components/Hull/Armour/stories.js
  29. 2
      src/lib/components/Hull/Cargo/index.svelte
  30. 44
      src/lib/components/Hull/Screens/index.svelte
  31. 49
      src/lib/components/Hull/Streamlining/index.svelte
  32. 58
      src/lib/components/Hull/index.svelte
  33. 6
      src/lib/components/Notes.svelte
  34. 14
      src/lib/components/Output/Json.svelte
  35. 24
      src/lib/components/Output/Print/Hull/Armour/index.svelte
  36. 46
      src/lib/components/Output/Print/Hull/Integrity/index.svelte
  37. 28
      src/lib/components/Output/Print/Hull/Integrity/stories.js
  38. 4
      src/lib/components/Output/Print/Hull/index.svelte
  39. 15
      src/lib/components/Output/Print/Identification/index.svelte
  40. 32
      src/lib/components/Output/Print/MainSystems/index.svelte
  41. 16
      src/lib/components/Output/Print/MainSystems/stories.js
  42. 7
      src/lib/components/Output/Print/Systems/Screens/index.svelte
  43. 10
      src/lib/components/Output/Print/Systems/index.svelte
  44. 6
      src/lib/components/Output/Print/Weapons/Beam/index.svelte
  45. 14
      src/lib/components/Output/Print/Weapons/index.svelte
  46. 45
      src/lib/components/Output/Print/Weapons/stories.js
  47. 59
      src/lib/components/Output/Print/index.svelte
  48. 178
      src/lib/components/Output/Print/sample.js
  49. 14
      src/lib/components/Output/Print/stories.js
  50. 18
      src/lib/components/Propulsion/index.svelte
  51. 2
      src/lib/components/Section/index.svelte
  52. 29
      src/lib/components/ShipItem/index.svelte
  53. 44
      src/lib/components/ShipSpecs/Identification.svelte
  54. 16
      src/lib/components/ShipSpecs/ShipCost.svelte
  55. 12
      src/lib/components/ShipSpecs/index.svelte
  56. 32
      src/lib/components/Weapon/Arcs/index.svelte
  57. 2
      src/lib/components/Weapon/Beam/index.svelte
  58. 44
      src/lib/components/Weapon/Needle/index.svelte
  59. 1
      src/lib/components/Weapon/PointDefenceSystem/index.svelte
  60. 1
      src/lib/components/Weapon/Scattergun/index.svelte
  61. 44
      src/lib/components/Weapon/Submunition/index.svelte
  62. 2
      src/lib/components/Weapon/index.svelte
  63. 3
      src/lib/components/Weaponry/ADFC/index.svelte
  64. 1
      src/lib/components/Weaponry/AddWeapon/index.svelte
  65. 332
      src/lib/components/Weapons/Add.svelte
  66. 52
      src/lib/components/Weapons/Arc.svelte
  67. 7
      src/lib/components/Weapons/stories.js
  68. 4
      src/lib/style/index.css
  69. 4
      src/lib/style/index.js
  70. 6
      src/routes/index.svelte
  71. 25
      svelte.config.js

34
.storybook/main.js

@ -0,0 +1,34 @@ @@ -0,0 +1,34 @@
const path = require("path");
const preprocess = require("svelte-preprocess");
module.exports = {
staticDirs: ["../static", "../pictures"],
stories: [
"../src/**/*.stories.mdx",
"../src/**/*.stories.svelte",
"../src/**/stories.svelte",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-svelte-csf",
],
framework: "@storybook/svelte",
svelteOptions: {
preprocess: preprocess(),
},
webpackFinal: async (config) => {
return {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve?.alias,
$app: path.resolve("./fake/app"),
"\\$lib": path.resolve(__dirname, "../src/lib/"),
$lib: path.resolve(__dirname, "../src/lib/"),
},
},
};
},
};

3
.storybook/package.json

@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
{
"type": "commonjs"
}

11
.storybook/preview.js

@ -0,0 +1,11 @@ @@ -0,0 +1,11 @@
import "$lib/style/index.js";
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};

5
.vitebook/App.svelte

@ -1,5 +1,6 @@ @@ -1,5 +1,6 @@
<svelte:component this={component} />
<script>
import "$lib/style/index.js";
export let component;
</script>
<svelte:component this={component} />

24
.vitebook/config.js

@ -1,30 +1,30 @@ @@ -1,30 +1,30 @@
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { clientPlugin, defineConfig } from '@vitebook/client/node';
import { defaultThemePlugin } from '@vitebook/theme-default/node';
import preprocess from 'svelte-preprocess';
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { clientPlugin, defineConfig } from "@vitebook/client/node";
import { defaultThemePlugin } from "@vitebook/theme-default/node";
import preprocess from "svelte-preprocess";
export default defineConfig({
include: ['src/**/*.story.svelte'],
include: ["src/**/*.story.svelte"],
alias: {
$app: '/node_modules/@sveltejs/kit/assets/app',
$lib: '/src/lib',
$app: "/node_modules/@sveltejs/kit/assets/app",
$lib: "/src/lib",
},
plugins: [
clientPlugin({ appFile: 'App.svelte' }),
clientPlugin({ appFile: "App.svelte" }),
defaultThemePlugin(),
svelte({
compilerOptions: {
hydratable: true
hydratable: true,
},
extensions: ['.svelte'],
extensions: [".svelte"],
// Consult https://github.com/sveltejs/svelte-preprocess for more information
// about preprocessors.
preprocess: preprocess(),
}),
],
site: {
title: '',
description: '',
title: "",
description: "",
/** @type {(import('@vitebook/theme-default/node').DefaultThemeConfig} */
theme: {},
},

2
.vitebook/theme/index.js

@ -1,3 +1,3 @@ @@ -1,3 +1,3 @@
import Theme from '@vitebook/theme-default';
import Theme from "@vitebook/theme-default";
export default Theme;

10
package.json

@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
"preview": "svelte-kit preview",
"lint": "prettier --check . && eslint --ignore-path .gitignore .",
"format": "prettier --write .",
"storybook": "storybook-server",
"vitebook:dev": "vitebook dev",
"vitebook:build": "vitebook build",
"vitebook:preview": "vitebook preview"
@ -28,14 +29,21 @@ @@ -28,14 +29,21 @@
},
"type": "module",
"dependencies": {
"@storybook/addon-actions": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/addon-links": "6.4.19",
"@storybook/addon-svelte-csf": "^1.1.0",
"@storybook/svelte": "^6.4.19",
"@sveltejs/adapter-node": "^1.0.0-next.0",
"@yanick/updeep": "link:/home/yanick/work/javascript/updeep",
"lodash": "^4.17.21",
"redux": "^4.1.2",
"reselect": "^4.1.5",
"rollup-plugin-analyzer": "^4.0.0",
"svelte-knobby": "^0.3.4",
"ts-action": "^11.0.0",
"updux": "link:/home/yanick/work/javascript/updux/"
"updux": "link:/home/yanick/work/javascript/updux/",
"webpack": "5"
},
"prettier": {
"svelteSortOrder": "options-markup-scripts-styles",

15
src/lib/components/App-original.svelte

@ -1,7 +1,5 @@ @@ -1,7 +1,5 @@
<nav>
<button class="button is-danger" type="button" on:click={reset}
>reset</button
>
<button class="button is-danger" type="button" on:click={reset}>reset</button>
<div class="spacer" />
@ -15,9 +13,7 @@ @@ -15,9 +13,7 @@
<button class="button" on:click={() => set_output("json")}>json</button>
</p>
<p class="control">
<button class="button" on:click={() => set_output("print")}
>print</button
>
<button class="button" on:click={() => set_output("print")}>print</button>
</p>
</div>
</nav>
@ -65,12 +61,7 @@ @@ -65,12 +61,7 @@
<AddWeapon />
{#each weapons as weapon (weapon.id)}
<Weapon
{weapon}
id={weapon.id}
cost={weapon.cost}
mass={weapon.mass}
/>
<Weapon {weapon} id={weapon.id} cost={weapon.cost} mass={weapon.mass} />
{/each}
</Section>

6
src/lib/components/App.svelte

@ -2,10 +2,8 @@ @@ -2,10 +2,8 @@
<Header />
<script>
import Ribbon from './Ribbon.svelte';
import Header from './Header.svelte';
import Ribbon from "./Ribbon.svelte";
import Header from "./Header.svelte";
</script>
<style>

14
src/lib/components/Carrier/Carrier.story.svelte

@ -0,0 +1,14 @@ @@ -0,0 +1,14 @@
<Carrier />
<script>
import Carrier from "./index.svelte";
const props = {
bays: 3,
squadrons: [
{ id: 1, type: "standard", ftl: false, nbr_fighters: 6 },
{ id: 2, type: "fast", ftl: false, nbr_fighters: 6 },
{ id: 3, type: "none", ftl: false, nbr_fighters: 6 },
],
};
</script>

23
src/lib/components/Carrier/Squadron/index.svelte

@ -1,4 +1,4 @@ @@ -1,4 +1,4 @@
<ShipItem {cost} {mass} >
<ShipItem {cost} {mass}>
<Field label={`squadron ${id}`}>
<select bind:value={type}>
{#each types as type (type)}
@ -9,30 +9,29 @@ @@ -9,30 +9,29 @@
</ShipItem>
<script>
import {getContext } from 'svelte';
import { getContext } from "svelte";
import Section from "$lib/components/Section/index.svelte";
import Field from "$lib/components/Field/index.svelte";
import ShipItem from "$lib/components/ShipItem/index.svelte";
import dux from '$lib/dux/carrier';
import squadron_types from '$lib/dux/carrier/squadron_types';
import dux from "$lib/dux/carrier";
import squadron_types from "$lib/dux/carrier/squadron_types";
const types = squadron_types.map( ({type}) => type );
const types = squadron_types.map(({ type }) => type);
export let id = 1;
export let type = "standard";
export let ftl = false;
export let cost =0;
export let cost = 0;
export let mass = 0;
export let ship = getContext('ship');
$: ship?.dispatch_action('set_squadron',{ id, type, });
export let ship = getContext("ship");
$: ship?.dispatch_action("set_squadron", { id, type });
</script>
<style>
div {
background-color: red;
}
div {
background-color: red;
}
</style>

17
src/lib/components/Carrier/index.svelte

@ -1,3 +1,4 @@ @@ -1,3 +1,4 @@
<!--
<Section label="carrier">
<ShipItem {cost} {mass}>
<Field label="bays">
@ -9,15 +10,18 @@ @@ -9,15 +10,18 @@
<Squadron {...squad} />
{/each}
</Section>
-->
Hey!
<script>
import { getContext } from "svelte";
import Section from "../Section/index.svelte";
import Field from "../Field/index.svelte";
import ShipItem from "../ShipItem/index.svelte";
import Squadron from "./Squadron/index.svelte";
import dux from "../../dux/carrier";
/* import Section from "../Section/index.svelte"; */
/* import Field from "../Field/index.svelte"; */
/* import ShipItem from "../ShipItem/index.svelte"; */
// import Squadron from "./Squadron/index.svelte";
// import dux from "../../dux/carrier";
export let bays = 0;
export let squadrons = [];
@ -26,6 +30,5 @@ @@ -26,6 +30,5 @@
export let ship = getContext("ship");
$: ship?.dispatch_action('set_carrier_bays',bays);
$: ship?.dispatch_action("set_carrier_bays", bays);
</script>

28
src/lib/components/Carrier/stories.js

@ -1,20 +1,20 @@ @@ -1,20 +1,20 @@
import { action } from '@storybook/addon-actions';
import { action } from "@storybook/addon-actions";
import Carrier from './index.svelte';
import Carrier from "./index.svelte";
export default {
title: 'Carrier',
title: "Carrier",
};
export const basic = () => ({
Component: Carrier,
props: {
bays: 3,
squadrons: [
{ id: 1, type: "standard", ftl: false, nbr_fighters: 6 },
{ id: 2, type: "fast", ftl: false, nbr_fighters: 6 },
{ id: 3, type: "none", ftl: false, nbr_fighters: 6 },
],
ship_change: action('ship_change'),
},
})
Component: Carrier,
props: {
bays: 3,
squadrons: [
{ id: 1, type: "standard", ftl: false, nbr_fighters: 6 },
{ id: 2, type: "fast", ftl: false, nbr_fighters: 6 },
{ id: 3, type: "none", ftl: false, nbr_fighters: 6 },
],
ship_change: action("ship_change"),
},
});

4
src/lib/components/Cost.story.svelte

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
<Cost cost={12}/>
<Cost cost={12} />
<script>
import Cost from './Cost.svelte';
import Cost from "./Cost.svelte";
</script>

5
src/lib/components/Cost.svelte

@ -5,5 +5,8 @@ @@ -5,5 +5,8 @@
</script>
<style>
div:after { content: '\00A4'; margin-left: 0.5em; }
div:after {
content: "\00A4";
margin-left: 0.5em;
}
</style>

28
src/lib/components/CostMass.svelte

@ -1,21 +1,29 @@ @@ -1,21 +1,29 @@
<div class="mass">{ mass }</div>
<div class="cost">{ cost }</div>
<div class="mass">{mass}</div>
<div class="cost">{cost}</div>
<script>
export let mass;
export let cost;
</script>
<style>
.cost { grid-column: 3; }
.mass { grid-column: 2; }
.cost {
grid-column: 3;
}
.mass {
grid-column: 2;
}
img {
width: 0.75em;
}
.cost:after { content: '\00A4'; margin-left: 0.5em; }
.mass:after { content: url("/mass.svg"); width: 0.75em; display:
inline-block; margin-left: 0.5em; }
.cost:after {
content: "\00A4";
margin-left: 0.5em;
}
.mass:after {
content: url("/mass.svg");
width: 0.75em;
display: inline-block;
margin-left: 0.5em;
}
</style>

33
src/lib/components/Engine/Engine.stories.svelte

@ -0,0 +1,33 @@ @@ -0,0 +1,33 @@
<Meta
title="Engine"
component={Engine}
argTypes={{
rating: { type: "number", defaultValue: 6 },
advanced: { type: "boolean", defaultValue: false },
reqs: { type: "object", defaultValue: { cost: 6, mass: 3 } },
}}
/>
<Story name="Primary" args={{}} />
<Template let:args>
<div style="width: 50em">
<Engine {...args} />
</div>
</Template>
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import { action } from "@storybook/addon-actions";
import { setContext } from "svelte";
import Engine from "./index.svelte";
setContext("ship", {
dispatch: (type, detail) => action(type)(detail),
});
let advanced = false;
let rating = 0;
</script>

55
src/lib/components/Engine/index.svelte

@ -1,40 +1,39 @@ @@ -1,40 +1,39 @@
<ShipItem {cost} {mass}>
<div>
<Field label="thrust rating">
<input type="number" bind:value={ rating }
min="0" max="20" step="1" />
</Field>
<label><input type="checkbox" bind:checked={advanced} /> advanced</label>
</div>
<ShipItem {...reqs}>
<div>
<Field label="thrust rating">
<input type="number" bind:value={rating} min="0" max="20" step="1" />
</Field>
<label><input type="checkbox" bind:checked={advanced} /> advanced</label>
</div>
</ShipItem>
<script>
import { createEventDispatcher } from 'svelte';
import Field from '$lib/components/Field/index.svelte';
import ShipItem from '$lib/components/ShipItem/index.svelte';
export let cost;
export let mass;
export let advanced = false;
export let rating = 0;
import { getContext } from "svelte";
import Field from "$lib/components/Field/index.svelte";
import ShipItem from "$lib/components/ShipItem/index.svelte";
const dispatch = createEventDispatcher();
export let reqs = {};
export let advanced = false;
export let rating = 0;
console.log(advanced);
$: dispatch( 'change_engine', { rating, advanced } );
const ship = getContext("ship") || {
dispatch: (...args) => console.log(args),
};
$: ship.dispatch("setEngine", { rating, advanced });
</script>
<style>
div {
div {
display: flex;
align-items: end;
}
label { margin-left: 2em; }
input[type="number"] { width: 5em; }
}
label {
font-family: var(--main-font-family);
margin-left: 2em;
}
input[type="number"] {
width: 5em;
}
</style>

2
src/lib/components/Field/BasicStory.svelte

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
<Field label="the label" />
<script>
import Field from './index.svelte';
import Field from "./index.svelte";
</script>

27
src/lib/components/Field/index.svelte

@ -1,29 +1,32 @@ @@ -1,29 +1,32 @@
<div>
{#if label}
<label>{label}</label>
{/if}
<slot>
<input type="text" {placeholder} {value} on:change />
</slot>
{#if label}
<label>{label}</label>
{/if}
<slot>
<input type="text" {placeholder} {value} on:change />
</slot>
</div>
<script>
export let label = "";
export let value = "";
export let placeholder;
export let label = "";
export let value = "";
export let placeholder;
</script>
<style>
div {
font-family: var(--main-font-family);
}
div > :global(*) {
margin-left: 1em;
}
div > label {
margin-left: 0em;
}
label {
label {
font-size: var(--font-scale-8);
font-weight: lighter;
font-family: Dosis;
color: var(--indigo-dye);
}
color: var(--indigo-dye);
}
</style>

10
src/lib/components/Field/stories.js

@ -1,12 +1,12 @@ @@ -1,12 +1,12 @@
import Component from './index.svelte';
import BasicStory from './BasicStory.svelte';
import Component from "./index.svelte";
import BasicStory from "./BasicStory.svelte";
import '../../../public/global.css';
import "../../../public/global.css";
export default {
title: 'Field'
title: "Field",
};
export const basic = () => ({
Component: BasicStory,
Component: BasicStory,
});

19
src/lib/components/Firecons.svelte

@ -1,19 +1,20 @@ @@ -1,19 +1,20 @@
<ShipItem {cost} {mass}>
<Field label="firecons">
<Field label="firecons">
<input type="number" class="short" bind:value={nbr} />
</Field>
</Field>
</ShipItem>
<script>
import { createEventDispatcher } from 'svelte';
import ShipItem from './ShipItem/index.svelte';
import Field from './Field/index.svelte';
import { createEventDispatcher } from "svelte";
import ShipItem from "./ShipItem/index.svelte";
import Field from "./Field/index.svelte";
export let nbr, cost, mass = (0,0,0);
const dispatch = createEventDispatcher();
$: dispatch( 'change_firecons', nbr);
export let nbr,
cost,
mass = (0, 0, 0);
const dispatch = createEventDispatcher();
$: dispatch("change_firecons", nbr);
</script>
<style>

45
src/lib/components/Ftl/index.svelte

@ -1,35 +1,34 @@ @@ -1,35 +1,34 @@
<script>
import { createEventDispatcher } from 'svelte';
import ShipItem from '../ShipItem/index.svelte';
import Field from '../Field/index.svelte';
<ShipItem {mass} {cost}>
<Field label="FTL drive">
{#each types as t (t)}
<label
><input type="radio" bind:group={type} value={t} on:change={change} />
{t}
</label>
{/each}
</Field>
</ShipItem>
export let type = 'none';
export let cost = 0;
export let mass = 0;
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
import ShipItem from "../ShipItem/index.svelte";
import Field from "../Field/index.svelte";
const change = () => dispatch( 'change_ftl', type );
export let type = "none";
export let cost = 0;
export let mass = 0;
const types = [ 'none', 'standard', 'advanced' ];
const dispatch = createEventDispatcher();
const change = () => dispatch("change_ftl", type);
const types = ["none", "standard", "advanced"];
</script>
<ShipItem {mass} {cost}>
<Field label="FTL drive">
{#each types as t (t)}
<label><input type="radio" bind:group={type} value={t}
on:change={change} /> {t} </label>
{/each}
</Field>
</ShipItem>
<style>
label {
label {
display: inline;
margin-right: 1em;
}
}
</style>

14
src/lib/components/Ftl/stories.js

@ -1,13 +1,13 @@ @@ -1,13 +1,13 @@
export default {
title: 'FTL Drive'
title: "FTL Drive",
};
import Component from '.';
import shipStore from '../../stores/ship.js';
import Component from ".";
import shipStore from "../../stores/ship.js";
export const basic = () => ({
Component,
props: {
ship: shipStore()
}
Component,
props: {
ship: shipStore(),
},
});

26
src/lib/components/Header.svelte

@ -1,19 +1,21 @@ @@ -1,19 +1,21 @@
<header>
<h1>The Docks</h1>
<h2>a <a
href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship builder</h2>
</header>
<h2>
a <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship
builder
</h2>
</header>
<style>
header {
<style>
header {
display: flex;
align-items: baseline;
width: var(--main-width);
margin-left: auto;
margin-right: auto;
}
h1, h2 {
width: var(--main-width);
margin-left: auto;
margin-right: auto;
}
h1,
h2 {
font-family: Faktos;
padding: 0px;
margin: 0px;
@ -25,4 +27,4 @@ @@ -25,4 +27,4 @@
padding-left: 2em;
font-size: var(--font-scale-12);
}
</style>
</style>

20
src/lib/components/Hull/Armour/Layer/index.svelte

@ -1,24 +1,22 @@ @@ -1,24 +1,22 @@
<Field label={ `layer ${layer}` }>
<input type="number" min="0" bind:value={rating} />
<Field label={`layer ${layer}`}>
<input type="number" min="0" bind:value={rating} />
</Field>
<script>
import { getContext} from 'svelte';
import Field from '$lib/components/Field/index.svelte';
import { getContext } from "svelte";
export let layer = 1;
export let rating = 0;
import Field from "$lib/components/Field/index.svelte";
const ship = getContext('ship');
export let layer = 1;
export let rating = 0;
$: ship?.dispatch_action( 'set_armour_layer', {layer,rating} );
const ship = getContext("ship");
$: ship?.dispatch_action("set_armour_layer", { layer, rating });
</script>
<style>
input {
width: 5em;
}
</style>
</style>

76
src/lib/components/Hull/Armour/index.svelte

@ -1,56 +1,48 @@ @@ -1,56 +1,48 @@
<ShipItem {cost} {mass} >
<div>
<div class="nbr_layers">
<Field label="armour layers">
<input type="number" min="0" bind:value={nbr_layers} />
</Field>
</div>
<div class="layers">
{#each armour as layer ( layer.layer )}
<Layer {...layer} on:ship_change/>
{/each}
</div>
</div>
<ShipItem {cost} {mass}>
<div>
<div class="nbr_layers">
<Field label="armour layers">
<input type="number" min="0" bind:value={nbr_layers} />
</Field>
</div>
<div class="layers">
{#each armour as layer (layer.layer)}
<Layer {...layer} on:ship_change />
{/each}
</div>
</div>
</ShipItem>
<script>
import { createEventDispatcher} from 'svelte';
import ShipItem from '$lib/components/ShipItem/index.svelte';
import Field from '$lib/components/Field/index.svelte';
import Layer from './Layer/index.svelte';
import dux from '$lib/dux/structure/armour';
import _ from 'lodash';
import { createEventDispatcher } from "svelte";
export let armour = [];
export let cost = 0;
export let mass = 0;
import ShipItem from "$lib/components/ShipItem/index.svelte";
import Field from "$lib/components/Field/index.svelte";
import Layer from "./Layer/index.svelte";
import dux from "$lib/dux/structure/armour";
import _ from "lodash";
$: cost = _.sum( _.map( armour, 'cost' ) );
$: mass = _.sum( _.map( armour, 'mass' ) );
export let armour = [];
export let cost = 0;
export let mass = 0;
let nbr_layers = armour.length;
$: cost = _.sum(_.map(armour, "cost"));
$: mass = _.sum(_.map(armour, "mass"));
const dispatch = createEventDispatcher();
let nbr_layers = armour.length;
$: dispatch( 'ship_change', dux.actions.set_armour_nbr_layers(nbr_layers) );
const dispatch = createEventDispatcher();
$: dispatch("ship_change", dux.actions.set_armour_nbr_layers(nbr_layers));
</script>
<style>
.layers {
display: flex;
}
input {
width: 5em;
}
.layers {
display: flex;
}
input {
width: 5em;
}
</style>

24
src/lib/components/Hull/Armour/stories.js

@ -1,18 +1,18 @@ @@ -1,18 +1,18 @@
import Armour from './index.svelte';
import Armour from "./index.svelte";
export default {
title: "Armour",
title: "Armour",
};
export const basic = () => ({
Component: Armour,
props: {
armour: [
{ layer: 1, rating: 12, cost: 1, mass: 2 },
{ layer: 2, rating: 12, cost: 1, mass: 2 },
]
},
on: {
ship_change: ({detail}) => console.log(detail)
}
Component: Armour,
props: {
armour: [
{ layer: 1, rating: 12, cost: 1, mass: 2 },
{ layer: 2, rating: 12, cost: 1, mass: 2 },
],
},
on: {
ship_change: ({ detail }) => console.log(detail),
},
});

2
src/lib/components/Hull/Cargo/index.svelte

@ -17,12 +17,10 @@ @@ -17,12 +17,10 @@
export let mass = 0;
$: ship?.dispatch_action("set_cargo", space);
</script>
<style>
input {
width: 5em;
}
</style>

44
src/lib/components/Hull/Screens/index.svelte

@ -1,34 +1,32 @@ @@ -1,34 +1,32 @@
<ShipItem { cost } { mass }>
<ShipItem {cost} {mass}>
<div>
<Field label="screens">
<input type="number" bind:value={standard} min="0" />
</Field>
<Field label="advanced screens">
<input type="number" bind:value={advanced} min="0" />
</Field>
</div>
<Field label="screens">
<input type="number" bind:value={standard} min="0" />
</Field>
<Field label="advanced screens">
<input type="number" bind:value={advanced} min="0" />
</Field>
</div>
</ShipItem>
<script>
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher } from "svelte";
import Section from '$lib/components/Section/index.svelte';
import Field from '$lib/components/Field/index.svelte';
import ShipItem from '../../ShipItem/index.svelte';
import Section from "$lib/components/Section/index.svelte";
import Field from "$lib/components/Field/index.svelte";
import ShipItem from "../../ShipItem/index.svelte";
export let cost = 0;
export let mass = 0;
export let standard = 0;
export let advanced = 0;
export let cost = 0;
export let mass = 0;
export let standard = 0;
export let advanced = 0;
let nbr_regular, nbr_advanced;
let nbr_regular, nbr_advanced;
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher();
$: dispatch( 'set_screens', { standard, advanced } );
$: dispatch("set_screens", { standard, advanced });
</script>
<style>
@ -39,4 +37,4 @@ @@ -39,4 +37,4 @@
display: flex;
gap: 2em;
}
</style>
</style>

49
src/lib/components/Hull/Streamlining/index.svelte

@ -1,38 +1,41 @@ @@ -1,38 +1,41 @@
<ShipItem {cost} {mass}>
<Field label="streamlining">
<div>
<label>
<input type="radio" bind:group={type} value="none" />
none</label>
<label>
<input type="radio" bind:group={type} value="partial" />
partial</label>
<label>
<input type="radio" bind:group={type} value="full" />
full</label>
<div>
<label>
<input type="radio" bind:group={type} value="none" />
none</label
>
<label>
<input type="radio" bind:group={type} value="partial" />
partial</label
>
<label>
<input type="radio" bind:group={type} value="full" />
full</label
>
</div>
</Field>
</ShipItem>
<script>
import ShipItem from '$lib/components/ShipItem/index.svelte';
import Field from '$lib/components/Field/index.svelte';
<script>
import ShipItem from "$lib/components/ShipItem/index.svelte";
import Field from "$lib/components/Field/index.svelte";
import {getContext } from 'svelte';
import { getContext } from "svelte";
export let type = 'none';
export let type = "none";
export let cost = 0;
export let mass = 0;
export let ship = getContext('ship');
$: ship?.dispatch_action( 'set_streamlining', type);
export let ship = getContext("ship");
</script>
$: ship?.dispatch_action("set_streamlining", type);
</script>
<style>
div { display: flex }
<style>
div {
display: flex;
}
label {
margin-left: 1em;
}
</style>
</style>

58
src/lib/components/Hull/index.svelte

@ -1,51 +1,51 @@ @@ -1,51 +1,51 @@
<Section label="hull">
<ShipItem {cost} {mass} >
<ShipItem {cost} {mass}>
<Field label="integrity">
<input
bind:value={rating}
type="number" {min} {max} />
<input bind:value={rating} type="number" {min} {max} />
</Field>
</ShipItem>
</ShipItem>
<Screens {...screens} on:set_screens />
<Screens {...screens} on:set_screens />
<Armour {armour} on:ship_change />
<Armour {armour} on:ship_change />
<Cargo {...cargo} on:set_cargo />
<Cargo {...cargo} on:set_cargo />
<Streamlining {...streamlining} />
<Streamlining {...streamlining} />
</Section>
<script>
import { createEventDispatcher } from 'svelte';
import Section from '../Section/index.svelte';
import Field from '../Field/index.svelte';
import ShipItem from '../ShipItem/index.svelte';
import Screens from './Screens/index.svelte';
import Armour from './Armour/index.svelte';
import Cargo from './Cargo/index.svelte';
import Streamlining from './Streamlining/index.svelte';
export let cost, mass, ship_mass, rating, screens, armour = (
0, 0, 10, 1, [], []
);
import { createEventDispatcher } from "svelte";
import Section from "../Section/index.svelte";
import Field from "../Field/index.svelte";
import ShipItem from "../ShipItem/index.svelte";
import Screens from "./Screens/index.svelte";
import Armour from "./Armour/index.svelte";
import Cargo from "./Cargo/index.svelte";
import Streamlining from "./Streamlining/index.svelte";
export let cost,
mass,
ship_mass,
rating,
screens,
armour = (0, 0, 10, 1, [], []);
export let cargo = {};
export let streamlining = {};
let min, max;
let min, max;
$: min = Math.ceil(ship_mass / 10);
$: max = ship_mass;
const dispatch = createEventDispatcher();
$: dispatch( 'change_hull', { rating } );
const dispatch = createEventDispatcher();
$: dispatch("change_hull", { rating });
</script>
<style>
input { width: 5em; }
input {
width: 5em;
}
</style>

6
src/lib/components/Notes.svelte

@ -24,9 +24,9 @@ @@ -24,9 +24,9 @@
</p>
<p>
The app is mostly developed for Firefox. I also check as much as I can
that I don't mess things too badly on Chrome. For the other browsers...
caveat emptor.
The app is mostly developed for Firefox. I also check as much as I can that
I don't mess things too badly on Chrome. For the other browsers... caveat
emptor.
</p>
<p>

14
src/lib/components/Output/Json.svelte

@ -5,13 +5,13 @@ @@ -5,13 +5,13 @@
<script>
export let ship = {};
let json;
$: json = JSON.stringify(ship,null,2);
$: json = JSON.stringify(ship, null, 2);
import { fly, fade } from 'svelte/transition';
import {createEventDispatcher} from 'svelte';
import { fly, fade } from "svelte/transition";
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
const close = () => dispatch('close');
const dispatch = createEventDispatcher();
const close = () => dispatch("close");
</script>
<style>
@ -20,13 +20,11 @@ @@ -20,13 +20,11 @@
font-size: var(--font-scale-9);
overflow: scroll;
height: 90%;
}
div {
text-align: right;
text-align: right;
}
aside {
padding: 1em;
border: 3px solid var(--indigo-dye);
border-radius: 1em;

24
src/lib/components/Output/Print/Hull/Armour/index.svelte

@ -1,17 +1,15 @@ @@ -1,17 +1,15 @@
<div class="layers">
{#each armour as layer (layer)}
<div class="layer">
{#each _.range(layer.rating) as i (i) }
<div class="cell">
</div>
{#each _.range(layer.rating) as i (i)}
<div class="cell" />
{/each}
</div>
{/each}
</div>
<script>
import _ from 'lodash';
import _ from "lodash";
export let armour = [];
@ -19,14 +17,14 @@ @@ -19,14 +17,14 @@
</script>
<style>
.cell {
display: inline-block;
margin-right: 0.5em;
width: 1em;
height: 1em;
border: 1px solid black;
border-radius: 0.5em;
}
.cell {
display: inline-block;
margin-right: 0.5em;
width: 1em;
height: 1em;
border: 1px solid black;
border-radius: 0.5em;
}
.layers {
display: flex;
flex-direction: column-reverse;

46
src/lib/components/Output/Print/Hull/Integrity/index.svelte

@ -1,7 +1,7 @@ @@ -1,7 +1,7 @@
<div>
{#each rows as row,i (i)}
{#each rows as row, i (i)}
<div class="row">
{#each row as item,j (j)}
{#each row as item, j (j)}
<div class="cell">
{#if item}
<img src="icons/crew-star.svg" alt="crew loss threshold" />
@ -10,11 +10,10 @@ @@ -10,11 +10,10 @@
{/each}
</div>
{/each}
</div>
<script>
import { ceil } from '$lib/dux/utils';
import { ceil } from "$lib/dux/utils";
export let ship_mass = 0;
export let rating = 0;
@ -27,45 +26,40 @@ @@ -27,45 +26,40 @@
$: cells = Array(rating).fill(false);
let dcp;
$: dcp= ceil(ship_mass/20);
$: dcp = ceil(ship_mass / 20);
$: cells = divide(cells, dcp).map(
g => {
g[g.length-1] = true;
$: cells = divide(cells, dcp)
.map((g) => {
g[g.length - 1] = true;
return g;
}
).flat();
})
.flat();
function divide(list, divider) {
if( divider <= 1 ) return [ list ];
if (divider <= 1) return [list];
let div = list.length / divider;
const mod = list.length % divider;
if(mod) div++;
if (mod) div++;
return [
list.slice(0,div),
...divide( list.slice(div), divider-1 )
]
return [list.slice(0, div), ...divide(list.slice(div), divider - 1)];
}
let rows = [];
$: rows = divide( cells, nbr_rows );
$: rows = divide(cells, nbr_rows);
</script>
<style>
.row {
}
.cell {
display: inline-block;
margin-right: 0.5em;
width: 1em;
height: 1em;
border: 1px solid black;
}
.cell {
display: inline-block;
margin-right: 0.5em;
width: 1em;
height: 1em;
border: 1px solid black;
}
img {
width: 1em;
}

28
src/lib/components/Output/Print/Hull/Integrity/stories.js

@ -1,23 +1,23 @@ @@ -1,23 +1,23 @@
import Component from '.';
import Component from ".";
export default {
title: "printouts/hull/integrity"
title: "printouts/hull/integrity",
};
export const basic = () => ({
Component,
props: {
ship_mass: 50,
rating: 14,
advanced: false,
}
Component,
props: {
ship_mass: 50,
rating: 14,
advanced: false,
},
});
export const advanced = () => ({
Component,
props: {
ship_mass: 50,
rating: 14,
advanced: true,
}
Component,
props: {
ship_mass: 50,
rating: 14,
advanced: true,
},
});

4
src/lib/components/Output/Print/Hull/index.svelte

@ -8,8 +8,8 @@ @@ -8,8 +8,8 @@
</div>
<script>
import Integrity from './Integrity/index.svelte';
import Armour from './Armour/index.svelte';
import Integrity from "./Integrity/index.svelte";
import Armour from "./Armour/index.svelte";
export let structure = {};
export let ship_mass = 0;

15
src/lib/components/Output/Print/Identification/index.svelte

@ -1,4 +1,6 @@ @@ -1,4 +1,6 @@
<h1>ship name: <div class="fill"></div> </h1>
<h1>
ship name: <div class="fill" />
</h1>
<div class="details">
<h2>{ship_class}-class, {ship_type}</h2>
@ -10,12 +12,13 @@ @@ -10,12 +12,13 @@
</div>
<script>
import Cost from '../../../Cost.svelte';
import Mass from '$lib/components/Mass.svelte';
import Cost from "../../../Cost.svelte";
import Mass from "$lib/components/Mass.svelte";
export let ship_class;
export let ship_type;
export let cost, mass = ( 0, 0 );
export let ship_class;
export let ship_type;
export let cost,
mass = (0, 0);
</script>
<style>

32
src/lib/components/Output/Print/MainSystems/index.svelte

@ -1,6 +1,5 @@ @@ -1,6 +1,5 @@
<div class="main_systems">
{#if ftl !== "none" }
{#if ftl !== "none"}
<img class="ftl" src="icons/ftl-drive.svg" alt="ftl drive" />
{/if}
@ -8,13 +7,16 @@ @@ -8,13 +7,16 @@
<div class="thrust">{engine}</div>
{/if}
<img class="internal" src="icons/internal-systems.svg" alt="internal systems"/>
</div>
<img
class="internal"
src="icons/internal-systems.svg"
alt="internal systems"
/>
</div>
<script>
export let ftl = 'none';
export let ftl = "none";
export let engine = 0;
</script>
<style>
@ -27,14 +29,16 @@ @@ -27,14 +29,16 @@
line-height: 2em;
text-align: center;
}
.main_systems {
display: flex;
align-items: center;
gap: 1em;
justify-content: space-evenly;
margin-top: 1em;
}
img.ftl { height: 2em; }
.main_systems {
display: flex;
align-items: center;
gap: 1em;
justify-content: space-evenly;
margin-top: 1em;
}
img.ftl {
height: 2em;
}
img.internal {
height: 2em;
}

16
src/lib/components/Output/Print/MainSystems/stories.js

@ -1,13 +1,13 @@ @@ -1,13 +1,13 @@
import Component from '.';
import Component from ".";
export default {
title: "printouts/main_systems"