back to storybook

main
Yanick Champoux 2022-03-01 12:42:33 -05:00
parent 0a8ed55af5
commit 49429778e7
71 changed files with 965 additions and 903 deletions

34
.storybook/main.js Normal file
View File

@ -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 Normal file
View File

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

11
.storybook/preview.js Normal file
View File

@ -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$/,
},
},
};

View File

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

View File

@ -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: {},
},

View File

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

View File

@ -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 @@
},
"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",

View File

@ -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 @@
<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 @@
<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>

View File

@ -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>

View File

@ -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>

View File

@ -9,13 +9,13 @@
</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);
@ -25,10 +25,9 @@
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>

View File

@ -1,3 +1,4 @@
<!--
<Section label="carrier">
<ShipItem {cost} {mass}>
<Field label="bays">
@ -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 @@
export let ship = getContext("ship");
$: ship?.dispatch_action('set_carrier_bays',bays);
$: ship?.dispatch_action("set_carrier_bays", bays);
</script>

View File

@ -1,9 +1,9 @@
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 = () => ({
@ -15,6 +15,6 @@ export const basic = () => ({
{ id: 2, type: "fast", ftl: false, nbr_fighters: 6 },
{ id: 3, type: "none", ftl: false, nbr_fighters: 6 },
],
ship_change: action('ship_change'),
ship_change: action("ship_change"),
},
})
});

View File

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

View File

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

View File

@ -4,18 +4,26 @@
<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>

View File

@ -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>

View File

@ -1,33 +1,27 @@
<ShipItem {cost} {mass}>
<ShipItem {...reqs}>
<div>
<Field label="thrust rating">
<input type="number" bind:value={ rating }
min="0" max="20" step="1" />
<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 { getContext } from "svelte";
import Field from "$lib/components/Field/index.svelte";
import ShipItem from "$lib/components/ShipItem/index.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 reqs = {};
export let advanced = false;
export let rating = 0;
const dispatch = createEventDispatcher();
console.log(advanced);
$: dispatch( 'change_engine', { rating, advanced } );
const ship = getContext("ship") || {
dispatch: (...args) => console.log(args),
};
$: ship.dispatch("setEngine", { rating, advanced });
</script>
<style>
@ -35,6 +29,11 @@ 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>

View File

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

View File

@ -14,6 +14,9 @@
</script>
<style>
div {
font-family: var(--main-font-family);
}
div > :global(*) {
margin-left: 1em;
}

View File

@ -1,10 +1,10 @@
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 = () => ({

View File

@ -5,15 +5,16 @@
</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);
export let nbr,
cost,
mass = (0, 0, 0);
const dispatch = createEventDispatcher();
$: dispatch( 'change_firecons', nbr);
$: dispatch("change_firecons", nbr);
</script>
<style>

View File

@ -1,32 +1,31 @@
<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>
<script>
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher } from "svelte";
import ShipItem from '../ShipItem/index.svelte';
import Field from '../Field/index.svelte';
import ShipItem from "../ShipItem/index.svelte";
import Field from "../Field/index.svelte";
export let type = 'none';
export let type = "none";
export let cost = 0;
export let mass = 0;
const dispatch = createEventDispatcher();
const change = () => dispatch( 'change_ftl', type );
const types = [ 'none', 'standard', 'advanced' ];
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 {
display: inline;

View File

@ -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()
}
ship: shipStore(),
},
});

View File

@ -1,11 +1,12 @@
<header>
<h1>The Docks</h1>
<h2>a <a
href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship builder</h2>
<h2>
a <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship
builder
</h2>
</header>
<style>
header {
display: flex;
align-items: baseline;
@ -13,7 +14,8 @@
margin-left: auto;
margin-right: auto;
}
h1, h2 {
h1,
h2 {
font-family: Faktos;
padding: 0px;
margin: 0px;

View File

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

View File

@ -1,7 +1,5 @@
<ShipItem {cost} {mass}>
<div>
<div class="nbr_layers">
<Field label="armour layers">
<input type="number" min="0" bind:value={nbr_layers} />
@ -13,44 +11,38 @@
<Layer {...layer} on:ship_change />
{/each}
</div>
</div>
</ShipItem>
<script>
import { createEventDispatcher} from 'svelte';
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 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";
export let armour = [];
export let cost = 0;
export let mass = 0;
$: cost = _.sum( _.map( armour, 'cost' ) );
$: mass = _.sum( _.map( armour, 'mass' ) );
$: cost = _.sum(_.map(armour, "cost"));
$: mass = _.sum(_.map(armour, "mass"));
let nbr_layers = armour.length;
const dispatch = createEventDispatcher();
$: dispatch( 'ship_change', dux.actions.set_armour_nbr_layers(nbr_layers) );
$: dispatch("ship_change", dux.actions.set_armour_nbr_layers(nbr_layers));
</script>
<style>
.layers {
display: flex;
}
input {
width: 5em;
}
</style>

View File

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

View File

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

View File

@ -1,6 +1,5 @@
<ShipItem {cost} {mass}>
<div>
<Field label="screens">
<input type="number" bind:value={standard} min="0" />
</Field>
@ -9,15 +8,14 @@
<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;
@ -28,7 +26,7 @@
const dispatch = createEventDispatcher();
$: dispatch( 'set_screens', { standard, advanced } );
$: dispatch("set_screens", { standard, advanced });
</script>
<style>

View File

@ -3,35 +3,38 @@
<div>
<label>
<input type="radio" bind:group={type} value="none" />
none</label>
none</label
>
<label>
<input type="radio" bind:group={type} value="partial" />
partial</label>
partial</label
>
<label>
<input type="radio" bind:group={type} value="full" />
full</label>
full</label
>
</div>
</Field>
</ShipItem>
<script>
import ShipItem from '$lib/components/ShipItem/index.svelte';
import Field from '$lib/components/Field/index.svelte';
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");
$: ship?.dispatch_action("set_streamlining", type);
</script>
<style>
div { display: flex }
div {
display: flex;
}
label {
margin-left: 1em;
}

View File

@ -1,14 +1,10 @@
<Section label="hull">
<ShipItem {cost} {mass}>
<Field label="integrity">
<input
bind:value={rating}
type="number" {min} {max} />
<input bind:value={rating} type="number" {min} {max} />
</Field>
</ShipItem>
<Screens {...screens} on:set_screens />
<Armour {armour} on:ship_change />
@ -19,19 +15,22 @@
</Section>
<script>
import { createEventDispatcher } from 'svelte';
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';
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 cost,
mass,
ship_mass,
rating,
screens,
armour = (0, 0, 10, 1, [], []);
export let cargo = {};
export let streamlining = {};
@ -42,10 +41,11 @@
const dispatch = createEventDispatcher();
$: dispatch( 'change_hull', { rating } );
$: dispatch("change_hull", { rating });
</script>
<style>
input { width: 5em; }
input {
width: 5em;
}
</style>

View File

@ -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>

View File

@ -7,11 +7,11 @@
let json;
$: 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 close = () => dispatch("close");
</script>
<style>
@ -20,13 +20,11 @@
font-size: var(--font-scale-9);
overflow: scroll;
height: 90%;
}
div {
text-align: right;
}
aside {
padding: 1em;
border: 3px solid var(--indigo-dye);
border-radius: 1em;

View File

@ -2,16 +2,14 @@
{#each armour as layer (layer)}
<div class="layer">
{#each _.range(layer.rating) as i (i)}
<div class="cell">
</div>
<div class="cell" />
{/each}
</div>
{/each}
</div>
<script>
import _ from 'lodash';
import _ from "lodash";
export let armour = [];

View File

@ -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;
@ -29,12 +28,12 @@
let dcp;
$: dcp = ceil(ship_mass / 20);
$: cells = divide(cells, dcp).map(
g => {
$: cells = divide(cells, dcp)
.map((g) => {
g[g.length - 1] = true;
return g;
}
).flat();
})
.flat();
function divide(list, divider) {
if (divider <= 1) return [list];
@ -44,16 +43,11 @@
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);
</script>
<style>

View File

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

View File

@ -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;

View File

@ -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 @@
</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 cost,
mass = (0, 0);
</script>
<style>

View File

@ -1,5 +1,4 @@
<div class="main_systems">
{#if ftl !== "none"}
<img class="ftl" src="icons/ftl-drive.svg" alt="ftl drive" />
{/if}
@ -8,13 +7,16 @@
<div class="thrust">{engine}</div>
{/if}
<img class="internal" src="icons/internal-systems.svg" alt="internal systems"/>
<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>
@ -34,7 +36,9 @@
justify-content: space-evenly;
margin-top: 1em;
}
img.ftl { height: 2em; }
img.ftl {
height: 2em;
}
img.internal {
height: 2em;
}

View File

@ -1,13 +1,13 @@
import Component from '.';
import Component from ".";
export default {
title: "printouts/main_systems"
title: "printouts/main_systems",
};
export const basic = () => ({
Component,
props: {
ftl: 'standard',
ftl: "standard",
engine: 4,
}
})
},
});

View File

@ -5,11 +5,10 @@
{#each _.range(advanced) as i}
<img src="icons/screen-advanced.svg" alt="advanced screen" />
{/each}
</div>
<script>
import _ from 'lodash';
import _ from "lodash";
export let standard = 0;
export let advanced = 0;

View File

@ -5,12 +5,11 @@
</div>
<script>
import Firecons from './Firecons/index.svelte';
import Screens from './Screens/index.svelte';
import Firecons from "./Firecons/index.svelte";
import Screens from "./Screens/index.svelte";
export let firecons = 0;
export let screens = {};
</script>
<style>
@ -23,6 +22,5 @@
}
div > :global(*) {
margin-bottom: 1em;
}
</style>

View File

@ -7,7 +7,7 @@
</div>
<script>
import Arcs from '$lib/components/Weapon/Arcs/index.svelte';
import Arcs from "$lib/components/Weapon/Arcs/index.svelte";
export let weapon_class = 1;
export let arcs = [];
</script>

View File

@ -1,21 +1,17 @@
<div class="weapons">
<div class="beams">
{#each beams as beam}
<Beam {...beam} />
{/each}
</div>
</div>
<script>
import Beam from './Beam/index.svelte';
import Beam from "./Beam/index.svelte";
export let weapons = [];
let beams = [];
$: beams = weapons.filter( ({ weapon_type }) => weapon_type === 'beam' );
$: beams = weapons.filter(({ weapon_type }) => weapon_type === "beam");
</script>
<style>

View File

@ -1,33 +1,28 @@
import Component from '.';
import Component from ".";
export default {
title: "printouts/weapons"
title: "printouts/weapons",
};
export const basic = () => ({
Component,
props: {
"weapons": [
weapons: [
{
"weapon_type": "submunition",
"arcs": [
"F"
],
"mass": 1,
"cost": 3,
"id": 1
weapon_type: "submunition",
arcs: ["F"],
mass: 1,
cost: 3,
id: 1,
},
{
"weapon_type": "beam",
"weapon_class": "2",
"arcs": [
"A",
"AS",
"FS"
weapon_type: "beam",
weapon_class: "2",
arcs: ["A", "AS", "FS"],
mass: 2,
cost: 6,
id: 2,
},
],
"mass": 2,
"cost": 6,
"id": 2
}, ]
}
})
},
});

View File

@ -4,8 +4,7 @@
<Weapons weapons={ship.weaponry.weapons} />
<div class="section-2">
<Hull structure={ship.structure}
ship_mass={ship.general.mass} />
<Hull structure={ship.structure} ship_mass={ship.general.mass} />
<Systems
firecons={ship.weaponry.firecons.nbr}
@ -13,26 +12,21 @@
/>
</div>
<MainSystems
ftl={ship.ftl.type}
engine={ship.engine.rating}
/>
<MainSystems ftl={ship.ftl.type} engine={ship.engine.rating} />
</aside>
<script>
import _ from 'lodash';
import _ from "lodash";
import Identification from './Identification/index.svelte';
import MainSystems from './MainSystems/index.svelte';
import Hull from './Hull/index.svelte';
import Weapons from './Weapons/index.svelte';
import Systems from './Systems/index.svelte';
import Identification from "./Identification/index.svelte";
import MainSystems from "./MainSystems/index.svelte";
import Hull from "./Hull/index.svelte";
import Weapons from "./Weapons/index.svelte";
import Systems from "./Systems/index.svelte";
export let ship;
import { fly, fade } from 'svelte/transition';
import { fly, fade } from "svelte/transition";
</script>
<style>
@ -47,7 +41,4 @@
display: flex;
align-items: start;
}
</style>

View File

@ -1,114 +1,108 @@
export default {
"ftl": {
"mass": 0,
"cost": 0,
"type": "standard"
ftl: {
mass: 0,
cost: 0,
type: "standard",
},
"engine": {
"mass": 40,
"cost": 80,
"rating": 6,
"advanced": false
engine: {
mass: 40,
cost: 80,
rating: 6,
advanced: false,
},
"general": {
"ship_class": "Deviant",
"name": "",
"ship_type": "Battleship",
"mass": 132,
"used_mass": 131,
"cost": 415
general: {
ship_class: "Deviant",
name: "",
ship_type: "Battleship",
mass: 132,
used_mass: 131,
cost: 415,
},
"weaponry": {
"firecons": {
"nbr": 5,
"mass": 5,
"cost": 20
weaponry: {
firecons: {
nbr: 5,
mass: 5,
cost: 20,
},
"weapons": [
weapons: [
{
"weapon_type": "submunition",
"arcs": [
"F"
weapon_type: "submunition",
arcs: ["F"],
mass: 1,
cost: 3,
id: 1,
},
{
weapon_type: "beam",
weapon_class: "2",
arcs: ["A", "AS", "FS"],
mass: 2,
cost: 6,
id: 2,
},
{
weapon_type: "pds",
mass: 1,
cost: 3,
id: 3,
},
],
"mass": 1,
"cost": 3,
"id": 1
adfc: {
rating: 0,
cost: 0,
mass: 0,
},
},
structure: {
mass: 0,
cost: 0,
hull: {
rating: 22,
advanced: false,
cost: 44,
mass: 22,
},
screens: {
standard: 2,
advanced: 1,
cost: 105,
mass: 35,
},
armour: [
{
layer: 1,
rating: 7,
cost: 14,
mass: 14,
},
{
"weapon_type": "beam",
"weapon_class": "2",
"arcs": [
"A",
"AS",
"FS"
layer: 2,
rating: 2,
cost: 8,
mass: 4,
},
{
layer: 3,
rating: 0,
cost: 0,
mass: 0,
},
],
"mass": 2,
"cost": 6,
"id": 2
},
{
"weapon_type": "pds",
"mass": 1,
"cost": 3,
"id": 3
}
],
"adfc": {
"rating": 0,
"cost": 0,
"mass": 0
}
cargo: {
space: 7,
cost: 0,
mass: 7,
},
"structure": {
"mass": 0,
"cost": 0,
"hull": {
"rating": 22,
"advanced": false,
"cost": 44,
"mass": 22
streamlining: {
type: "none",
cost: 0,
mass: 0,
},
"screens": {
"standard": 2,
"advanced": 1,
"cost": 105,
"mass": 35
carrier: {
bays: 0,
cost: 0,
mass: 0,
squadrons: [],
},
"armour": [
{
"layer": 1,
"rating": 7,
"cost": 14,
"mass": 14
},
{
"layer": 2,
"rating": 2,
"cost": 8,
"mass": 4
},
{
"layer": 3,
"rating": 0,
"cost": 0,
"mass": 0
}
]
},
"cargo": {
"space": 7,
"cost": 0,
"mass": 7
},
"streamlining": {
"type": "none",
"cost": 0,
"mass": 0
},
"carrier": {
"bays": 0,
"cost": 0,
"mass": 0,
"squadrons": []
}
}
};

View File

@ -1,13 +1,13 @@
import Print from './index.svelte';
import sample from './sample';
import Print from "./index.svelte";
import sample from "./sample";
export default {
title: "printouts"
title: "printouts",
};
export const basic = () => ({
Component: Print,
props: {
ship: sample
}
ship: sample,
},
});

View File

@ -1,18 +1,14 @@
<Section label="propulsion">
<Engine {...engine} on:change_engine />
<Ftl {...ftl} on:change_ftl />
</Section>
<script>
import Ftl from '../Ftl/index.svelte';
import Engine from '../Engine/index.svelte';
import Section from '../Section/index.svelte';
import Ftl from "../Ftl/index.svelte";
import Engine from "../Engine/index.svelte";
import Section from "../Section/index.svelte";
export let ftl = {};
export let engine = {};
</script>

View File

@ -7,7 +7,6 @@
<script>
export let label;
</script>
<style>
@ -24,5 +23,4 @@
flex: 1;
background: #333;
}
</style>

View File

@ -1,7 +1,11 @@
<div class="ship-item">
<div><slot /></div>
<div class="reqs">
<div class="mass" bind:this={mass_el}>{mass}</div>
<div class="cost" bind:this={cost_el}>{cost}</div>
</div>
</div>
<script>
import { tick } from "svelte";
@ -21,24 +25,19 @@
$: update_el(mass_el, mass);
$: update_el(cost_el, cost);
</script>
<style>
div {
margin-bottom: 1em;
}
.cost,
.mass {
padding: 0px 2em;
width: 4em;
padding: 0px 0.5em;
text-align: right;
}
.cost {
grid-column: 3;
}
.mass {
grid-column: 2;
}
.ship-item {
display: flex;
@ -87,4 +86,12 @@
}
}
.ship-item {
display: flex;
}
.reqs {
flex: 0;
width: 10em;
display: flex;
}
</style>

View File

@ -1,6 +1,9 @@
<div>
<Field label="ship class" value={general.ship_class}
on:change={change_class} />
<Field
label="ship class"
value={general.ship_class}
on:change={change_class}
/>
<Field label="ship type">
<select value={ship_type} on:change={change_ship_type}>
@ -12,18 +15,17 @@
</div>
<script>
import { getContext } from 'svelte';
import { getContext } from "svelte";
import Field from '$lib/components/Field/index.svelte';
import { candidate_ship_types } from '../../dux/ship_types';
import Field from "$lib/components/Field/index.svelte";
import { candidate_ship_types } from "../../dux/ship_types";
export let ship = getContext('ship');
export let ship = getContext("ship");
let general;
$: general = $ship.general;
const change_class = (event) => ship.dispatch(
ship.actions.set_ship_class(event.target.value)
);
const change_class = (event) =>
ship.dispatch(ship.actions.set_ship_class(event.target.value));
let ship_type;
$: ship_type = $ship.general.ship_type;
@ -32,10 +34,10 @@
ship.dispatch.set_ship_type(value);
let ship_types;
$: ship_types = candidate_ship_types($ship.general.mass,$ship.carrier.bays>0).map(
({name}) => name
);
$: ship_types = candidate_ship_types(
$ship.general.mass,
$ship.carrier.bays > 0
).map(({ name }) => name);
</script>
<style>

View File

@ -5,8 +5,9 @@
on:change={change_tonnage}
type="number"
min="10"
max="300" />
<span class="mass_symbol"></span>
max="300"
/>
<span class="mass_symbol" />
<div class="note" class:warning={!within_budget}>
{#if within_budget}
@ -18,7 +19,8 @@
<div class="cost">
<Field label="cost">
<span class="cost">{$ship.general.cost}</span></Field>
<span class="cost">{$ship.general.cost}</span></Field
>
</div>
<script>
@ -60,8 +62,10 @@
font-size: smaller;
}
.mass,div.cost {
padding: 0px 2em; justify-self: right;
.mass,
div.cost {
padding: 0px 2em;
justify-self: right;
}
.mass {
@ -71,7 +75,7 @@
grid-column: 3;
}
span.cost:after {
content: '\00A4';
content: "\00A4";
margin-left: 0.5em;
}
</style>

View File

@ -2,11 +2,9 @@
<ShipCost />
<script>
import Identification from "./Identification.svelte";
import ShipCost from "./ShipCost.svelte";
</script>
<style>

View File

@ -1,7 +1,8 @@
<svg width="{size}px" height="{size}px">
{#each all_arcs as arc (arc)}
<Arc {arc} radius={size/2}
<Arc
{arc}
radius={size / 2}
active={selected.includes(arc)}
on:click={() => click_arc(arc)}
/>
@ -11,18 +12,17 @@
</svg>
<script>
import Arc from '../../Weapons/Arc.svelte';
import { createEventDispatcher } from 'svelte';
import Arc from "../../Weapons/Arc.svelte";
import { createEventDispatcher } from "svelte";
const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
const all_arcs = ["FS", "F", "FP", "AP", "A", "AS"];
export let selected = [];
export let size = 60;
const dispatch = createEventDispatcher();
const click_arc = arc => dispatch('click_arc',arc);
const click_arc = (arc) => dispatch("click_arc", arc);
</script>
<style>

Before

Width:  |  Height:  |  Size: 637 B

After

Width:  |  Height:  |  Size: 651 B

View File

@ -93,7 +93,6 @@
weapon_class,
arcs: cache.split(":"),
});
</script>
<style>
@ -102,5 +101,4 @@
flex-direction: column;
margin-right: 1em;
}
</style>

View File

@ -2,28 +2,28 @@
<Arcs selected={arcs} on:click_arc={({ detail }) => click_arc(detail)} />
<script>
import {getContext } from 'svelte';
import Arcs from '../Arcs/index.svelte';
import dux from '$lib/dux';
import { createEventDispatcher } from 'svelte';
import { getContext } from "svelte";
import Arcs from "../Arcs/index.svelte";
import dux from "$lib/dux";
import { createEventDispatcher } from "svelte";
const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
const all_arcs = ["FS", "F", "FP", "AP", "A", "AS"];
export let arcs = ['F'];
export let ship_change = getContext('ship_change') || ( () => {} );
export let arcs = ["F"];
export let ship_change = getContext("ship_change") || (() => {});
const click_arc = (arc) => {
if (arcs[0] === arc) return;
arcs = [arc];
}
};
const dispatch = createEventDispatcher();
let cache;
$: cache = arcs.join(":");
$: dispatch( 'change', {
$: dispatch("change", {
arcs: cache.split(":"),
})
});
</script>
<style>
@ -32,6 +32,4 @@
flex-direction: column;
margin-right: 1em;
}
</style>

View File

@ -1,2 +1 @@
<label>point defence system</label>

View File

@ -1,2 +1 @@
<label>scattergun</label>

View File

@ -2,28 +2,28 @@
<Arcs selected={arcs} on:click_arc={({ detail }) => click_arc(detail)} />
<script>
import {getContext } from 'svelte';
import Arcs from '../Arcs/index.svelte';
import dux from '$lib/dux';
import { createEventDispatcher } from 'svelte';
import { getContext } from "svelte";
import Arcs from "../Arcs/index.svelte";
import dux from "$lib/dux";
import { createEventDispatcher } from "svelte";
const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
const all_arcs = ["FS", "F", "FP", "AP", "A", "AS"];
export let arcs = ['F'];
export let ship_change = getContext('ship_change') || ( () => {} );
export let arcs = ["F"];
export let ship_change = getContext("ship_change") || (() => {});
const click_arc = (arc) => {
if (arcs[0] === arc) return;
arcs = [arc];
}
};
const dispatch = createEventDispatcher();
let cache;
$: cache = arcs.join(":");
$: dispatch( 'change', {
$: dispatch("change", {
arcs: cache.split(":"),
})
});
</script>
<style>
@ -32,6 +32,4 @@
flex-direction: column;
margin-right: 1em;
}
</style>

View File

@ -56,7 +56,6 @@
...detail,
});
};
</script>
<style>
@ -124,5 +123,4 @@
.weapon_row > :global(*) {
margin-right: 2em;
}
</style>

View File

@ -4,7 +4,6 @@
</Field>
</ShipItem>
<script>
import ShipItem from "../../ShipItem/index.svelte";
import Field from "../../Field/index.svelte";
@ -16,5 +15,5 @@
export let mass = 0;
export let ship = getContext("ship");
$: ship?.dispatch_action('set_adfc',rating);
$: ship?.dispatch_action("set_adfc", rating);
</script>

View File

@ -23,5 +23,4 @@
export let ship = getContext("ship");
const add_weapon = () => ship?.dispatch_action("add_weapon", weapon_type);
</script>

View File

@ -1,8 +1,11 @@
<input class="add-weapon button small blue" type="button" value="add"
on:click={add} />
<input
class="add-weapon button small blue"
type="button"
value="add"
on:click={add}
/>
<div class="weapon">
<select bind:value={weapon_type}>
<option>beam</option>
</select>
@ -22,68 +25,61 @@
<svg width="60px" height="60px">
{#each arcs as arc (arc)}
<Arc {arc} radius={30}
<Arc
{arc}
radius={30}
active={selected_arc[arc]}
on:click={() => click_arc(arc)}
/>
{/each}
<circle cx="30" cy="30" r="15" />
</svg>
<div>{weapon.cost}</div>
<div>{weapon.mass}</div>
</div>
<script>
let weapon_type = 'beam';
let weapon_type = "beam";
let weapon_class = 1;
let nbr_arcs = 6;
$: nbr_arcs = arc_options[weapon_class][0];
import Arc from './Arc.svelte';
import { weapon_cost_mass } from '../../dux/weapons/rules.js';
import Arc from "./Arc.svelte";
import { weapon_cost_mass } from "../../dux/weapons/rules.js";
const arcs = [
'FS', 'F', 'FP', 'AP', 'A', 'AS'
];
const arcs = ["FS", "F", "FP", "AP", "A", "AS"];
import _ from 'lodash';
import { createEventDispatcher } from 'svelte';
import _ from "lodash";
import { createEventDispatcher } from "svelte";
let arc_options = {
1: [6],
2: [3, 6],
3: [ 1, 2, 3, 4, 5, 6, 'broadside' ],
4: [ 1, 2, 3, 4, 5, 6, 'broadside' ]
3: [1, 2, 3, 4, 5, 6, "broadside"],
4: [1, 2, 3, 4, 5, 6, "broadside"],
};
let selected_arc = Object.fromEntries(
arcs.map( arc => [ arc, false ] )
);
let selected_arc = Object.fromEntries(arcs.map((arc) => [arc, false]));
const nbr_selected_arcs = () => Object.values(selected_arc).filter(
x => x ).length;
const nbr_selected_arcs = () =>
Object.values(selected_arc).filter((x) => x).length;
$: if (nbr_selected_arcs() !== nbr_arcs) {
if( nbr_arcs === 'broadside' ) {
if (nbr_arcs === "broadside") {
const new_arcs = {};
arcs.forEach( arc => new_arcs[arc] = true );
arcs.forEach((arc) => (new_arcs[arc] = true));
new_arcs.A = false;
new_arcs.F = false;
selected_arc = new_arcs;
}
else{
let first_index = arcs.findIndex( arc => selected_arc[arc] );
} else {
let first_index = arcs.findIndex((arc) => selected_arc[arc]);
if (first_index === -1) first_index = 0;
const new_arcs = {};
arcs.forEach( arc => new_arcs[arc] = false );
arcs.forEach((arc) => (new_arcs[arc] = false));
_.range(nbr_arcs).forEach( i => {
_.range(nbr_arcs).forEach((i) => {
new_arcs[arcs[first_index]] = true;
first_index = (first_index + 1) % arcs.length;
});
@ -93,14 +89,14 @@
}
const click_arc = (first_arc) => {
if( nbr_arcs === 'broadside' ) return;
if (nbr_arcs === "broadside") return;
let first_index = arcs.findIndex( arc => arc === first_arc );
let first_index = arcs.findIndex((arc) => arc === first_arc);
const new_arcs = {};
arcs.forEach( arc => new_arcs[arc] = false );
arcs.forEach((arc) => (new_arcs[arc] = false));
_.range(nbr_arcs).forEach( i => {
_.range(nbr_arcs).forEach((i) => {
console.log(first_index);
console.log(selected_arc);
new_arcs[arcs[first_index]] = true;
@ -108,29 +104,28 @@
});
selected_arc = new_arcs;
}
};
let weapon = {};
$: weapon = {
weapon_type,
weapon_class,
arcs,
...weapon_cost_mass({ weapon_type, weapon_class, arcs: arcs.filter(
arc => selected_arc[arc]
) })
...weapon_cost_mass({
weapon_type,
weapon_class,
arcs: arcs.filter((arc) => selected_arc[arc]),
}),
};
const dispatch = createEventDispatcher();
const add = () => {
dispatch('add_weapon', weapon);
}
dispatch("add_weapon", weapon);
};
</script>
<style>
.weapon {
display: flex;
align-items: center;
@ -149,12 +144,10 @@
width: 6em;
}
.arc input {
margin: 0px;
}
.arc.F {
grid-column: 2 / span 2;
grid-row: 1;
@ -198,5 +191,4 @@
circle {
fill: white;
}
</style>

View File

@ -1,3 +1,7 @@
<g {transform}>
<path d={path} class:active on:click />
</g>
<script>
export let arc;
export let radius;
@ -13,21 +17,18 @@ const rotation = {
};
let y, x_delta;
$: y = Math.round( radius * ( 1 - Math.sin(60/180*Math.PI) ) );
$: x_delta = Math.round( radius*Math.cos(60/180*Math.PI) );
$: y = Math.round(radius * (1 - Math.sin((60 / 180) * Math.PI)));
$: x_delta = Math.round(radius * Math.cos((60 / 180) * Math.PI));
let path;
$: path = `M ${radius},${radius} L ${radius-x_delta},${y} A ${radius},${radius} 0 0 1 ${radius+x_delta},${y} Z`;
$: path = `M ${radius},${radius} L ${
radius - x_delta
},${y} A ${radius},${radius} 0 0 1 ${radius + x_delta},${y} Z`;
let transform;
$: transform = `rotate(${rotation[arc]},${radius},${radius})`
$: transform = `rotate(${rotation[arc]},${radius},${radius})`;
</script>
<g { transform }>
<path d={path} class:active on:click />
</g>
<style>
path {
fill: lightgrey;
@ -47,4 +48,3 @@ path.active {
fill: #313131;
}
</style>

View File

@ -1,4 +1,4 @@
import AddWeapon from './Add.svelte';
import AddWeapon from "./Add.svelte";
export default {
title: "add weapon",
@ -7,4 +7,3 @@ export default {
export const beam = () => ({
Component: AddWeapon,
});

4
src/lib/style/index.css Normal file
View File

@ -0,0 +1,4 @@
:root {
--main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

4
src/lib/style/index.js Normal file
View File

@ -0,0 +1,4 @@
import "../../../static/fonts/faktos.css";
import "../../../static/fonts/dosis/dosis.css";
import "../../../static/global.css";
import "./index.css";

View File

@ -1,9 +1,9 @@
<App />
<script>
import '../../static/fonts/faktos.css';
import '../../static/fonts/dosis/dosis.css';
import '../../static/global.css';
import "../../static/fonts/faktos.css";
import "../../static/fonts/dosis/dosis.css";
import "../../static/global.css";
import App from "$lib/components/App.svelte";
</script>

View File

@ -1,5 +1,5 @@
import adapter from '@sveltejs/adapter-static';
import analyze from 'rollup-plugin-analyzer';
import adapter from "@sveltejs/adapter-static";
import analyze from "rollup-plugin-analyzer";
/** @type {import('@sveltejs/kit').Config} */
export default {
@ -11,7 +11,8 @@ export default {
rollupOptions: {
plugins: [analyze()],
// external: ['updux','@yanick/updeep']
}
}
}},
},
},
},
},
};