print wip
parent
50139bba7c
commit
c055b15c81
|
|
@ -153,6 +153,119 @@
|
|||
],
|
||||
"virtual": false,
|
||||
"markdownFile": null
|
||||
},
|
||||
{
|
||||
"id": "src-routes-export-print-printship-index-story-svelte",
|
||||
"title": "PrintShip",
|
||||
"group": null,
|
||||
"layout": {
|
||||
"type": "single",
|
||||
"iframe": true
|
||||
},
|
||||
"icon": null,
|
||||
"iconColor": null,
|
||||
"docsOnly": false,
|
||||
"variants": [
|
||||
{
|
||||
"id": "_default",
|
||||
"title": "default"
|
||||
}
|
||||
],
|
||||
"relativePath": "src/routes/export/print/PrintShip/index.story.svelte",
|
||||
"supportPluginId": "svelte3",
|
||||
"treePath": [
|
||||
"Export",
|
||||
"PrintShip"
|
||||
],
|
||||
"virtual": false,
|
||||
"markdownFile": null
|
||||
},
|
||||
{
|
||||
"id": "src-routes-export-print-printship-armor-index-story-svelte",
|
||||
"title": "Armor",
|
||||
"group": null,
|
||||
"layout": {
|
||||
"type": "single",
|
||||
"iframe": true
|
||||
},
|
||||
"icon": null,
|
||||
"iconColor": null,
|
||||
"docsOnly": false,
|
||||
"variants": [
|
||||
{
|
||||
"id": "src-routes-export-print-printship-armor-index-story-svelte-0",
|
||||
"title": "untitled",
|
||||
"icon": null,
|
||||
"iconColor": null
|
||||
}
|
||||
],
|
||||
"relativePath": "src/routes/export/print/PrintShip/Armor/index.story.svelte",
|
||||
"supportPluginId": "svelte3",
|
||||
"treePath": [
|
||||
"Export",
|
||||
"PrintShip",
|
||||
"Armor"
|
||||
],
|
||||
"virtual": false,
|
||||
"markdownFile": null
|
||||
},
|
||||
{
|
||||
"id": "src-routes-export-print-printship-hull-index-story-svelte",
|
||||
"title": "Hull",
|
||||
"group": null,
|
||||
"layout": {
|
||||
"type": "single",
|
||||
"iframe": true
|
||||
},
|
||||
"icon": null,
|
||||
"iconColor": null,
|
||||
"docsOnly": false,
|
||||
"variants": [
|
||||
{
|
||||
"id": "src-routes-export-print-printship-hull-index-story-svelte-0",
|
||||
"title": "untitled",
|
||||
"icon": null,
|
||||
"iconColor": null
|
||||
}
|
||||
],
|
||||
"relativePath": "src/routes/export/print/PrintShip/Hull/index.story.svelte",
|
||||
"supportPluginId": "svelte3",
|
||||
"treePath": [
|
||||
"Export",
|
||||
"PrintShip",
|
||||
"Hull"
|
||||
],
|
||||
"virtual": false,
|
||||
"markdownFile": null
|
||||
},
|
||||
{
|
||||
"id": "src-routes-export-print-printship-screens-index-story-svelte",
|
||||
"title": "Screens",
|
||||
"group": null,
|
||||
"layout": {
|
||||
"type": "single",
|
||||
"iframe": true
|
||||
},
|
||||
"icon": null,
|
||||
"iconColor": null,
|
||||
"docsOnly": false,
|
||||
"variants": [
|
||||
{
|
||||
"id": "src-routes-export-print-printship-screens-index-story-svelte-0",
|
||||
"title": "untitled",
|
||||
"icon": null,
|
||||
"iconColor": null
|
||||
}
|
||||
],
|
||||
"relativePath": "src/routes/export/print/PrintShip/Screens/index.story.svelte",
|
||||
"supportPluginId": "svelte3",
|
||||
"treePath": [
|
||||
"Export",
|
||||
"PrintShip",
|
||||
"Screens"
|
||||
],
|
||||
"virtual": false,
|
||||
"markdownFile": null
|
||||
}
|
||||
],
|
||||
"markdownFiles": []
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -15,7 +15,7 @@
|
|||
"@histoire/plugin-screenshot": "^0.16.1",
|
||||
"@histoire/plugin-svelte": "^0.16.1",
|
||||
"@sveltejs/adapter-static": "^2.0.2",
|
||||
"@sveltejs/kit": "^1.15.8",
|
||||
"@sveltejs/kit": "^1.15.9",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.1.1",
|
||||
"@testing-library/svelte": "^3.2.2",
|
||||
"@testing-library/user-event": "^14.4.3",
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
"svelte-copy-clipboard-action": "^0.0.3",
|
||||
"svelte-moveable": "^0.38.1",
|
||||
"updux": "link:../../updux",
|
||||
"vite": "^4.3.2",
|
||||
"vite": "^4.3.3",
|
||||
"yaml": "^2.2.2"
|
||||
},
|
||||
"prettier": {
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
<Meta title="Output/Print/Structure/Armor" component={Armor} argTypes={{
|
||||
armor: {
|
||||
type: 'object',
|
||||
defaultValue: [2,4],
|
||||
}
|
||||
}} />
|
||||
|
||||
<Story name="Primary" args={{}} />
|
||||
|
||||
<Template let:args>
|
||||
<div style="width: 50em">
|
||||
<Armor {...args} />
|
||||
</div>
|
||||
</Template>
|
||||
|
||||
<script>
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
|
||||
import Armor from './Armor.svelte';
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<Meta title="Output/Print/Structure/Integrity" component={Integrity} argTypes={{
|
||||
shipMass: {defaultValue:50},
|
||||
rating: {defaultValue:14},
|
||||
advanced: {defaultValue:false},
|
||||
}} />
|
||||
|
||||
<Story name="Primary" args={{}} />
|
||||
<Story name="Advanced" args={{ advanced: true }} />
|
||||
|
||||
<Template let:args>
|
||||
<div style="width: 50em">
|
||||
<Integrity {...args} />
|
||||
</div>
|
||||
</Template>
|
||||
|
||||
<script>
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
|
||||
import Integrity from './index.svelte';
|
||||
</script>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<div
|
||||
use:movable={{
|
||||
disabled: !isMovable,
|
||||
}}
|
||||
on:translate={({ detail: translate }) => {
|
||||
ship.dispatch.setUITransform({ system: "hull", translate });
|
||||
}}
|
||||
style:transform={hull?.uiTransform}
|
||||
>
|
||||
{#each rows as row, i (i)}
|
||||
<div class="row">
|
||||
{#each row as threshold, j (j)}
|
||||
<div class="cell">
|
||||
{#if threshold}
|
||||
<img src="{base}/icons/crew-star.svg" alt="crew loss threshold" />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import { base } from "$app/paths";
|
||||
import { getContext } from "svelte";
|
||||
|
||||
import { movable } from "../../MainSystems/movable.js";
|
||||
|
||||
export let shipMass = 0;
|
||||
export let rating = 0;
|
||||
export let advanced = false;
|
||||
export let hull = {};
|
||||
export let isMovable = false;
|
||||
|
||||
const ship = getContext("ship");
|
||||
|
||||
let nbr_rows;
|
||||
$: nbr_rows = advanced ? 3 : 4;
|
||||
|
||||
let cells;
|
||||
$: cells = Array(rating).fill(false);
|
||||
|
||||
let dcp;
|
||||
$: dcp = Math.ceil(shipMass / 20);
|
||||
|
||||
$: cells = divide(cells, dcp)
|
||||
.map((g) => {
|
||||
g[g.length - 1] = true;
|
||||
return g;
|
||||
})
|
||||
.flat();
|
||||
|
||||
function divide(list, divider) {
|
||||
if (divider <= 1) return [list];
|
||||
|
||||
let div = list.length / divider;
|
||||
const mod = list.length % divider;
|
||||
|
||||
if (mod) div++;
|
||||
|
||||
return [list.slice(0, div), ...divide(list.slice(div), divider - 1)];
|
||||
}
|
||||
|
||||
let rows = [];
|
||||
$: rows = divide(cells, nbr_rows);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.row {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.cell {
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
border: 1px solid black;
|
||||
}
|
||||
img {
|
||||
width: 1em;
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import Component from ".";
|
||||
|
||||
export default {
|
||||
title: "printouts/hull/integrity",
|
||||
};
|
||||
|
||||
export const basic = () => ({
|
||||
Component,
|
||||
props: {
|
||||
ship_mass: 50,
|
||||
rating: 14,
|
||||
advanced: false,
|
||||
},
|
||||
});
|
||||
|
||||
export const advanced = () => ({
|
||||
Component,
|
||||
props: {
|
||||
ship_mass: 50,
|
||||
rating: 14,
|
||||
advanced: true,
|
||||
},
|
||||
});
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div>
|
||||
<Armour armour={structure.armour} />
|
||||
<Integrity
|
||||
{isMovable}
|
||||
hull={structure?.hull}
|
||||
rating={structure.hull.rating}
|
||||
advanced={structure.hull.advanced}
|
||||
{ship_mass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import Integrity from "./Integrity/index.svelte";
|
||||
import Armour from "./Armor.svelte";
|
||||
|
||||
export let structure = {};
|
||||
export let ship_mass = 0;
|
||||
export let isMovable = false;
|
||||
</script>
|
||||
|
|
@ -34,8 +34,6 @@
|
|||
export let isCarrier = false;
|
||||
export let reqs = {};
|
||||
|
||||
$: console.log("in the comp", isCarrier, shipClass);
|
||||
|
||||
export let api = getContext("api");
|
||||
|
||||
$: shipTypes = candidateShipTypes(reqs.mass, isCarrier).map(
|
||||
|
|
|
|||
|
|
@ -29,6 +29,3 @@
|
|||
|
||||
export let weapons = [];
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<Hst.Story title="Export/PrintShip/Armor">
|
||||
<Hst.Variant>
|
||||
<Armor {layers} />
|
||||
</Hst.Variant>
|
||||
</Hst.Story>
|
||||
|
||||
<script>
|
||||
import Armor from "./index.svelte";
|
||||
|
||||
export let Hst;
|
||||
|
||||
let layers = [1, 2, 3];
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="layers">
|
||||
{#each armor as layer,i (i)}
|
||||
{#each layers as layer, i (i)}
|
||||
<div class="layer">
|
||||
{#each Array.from({length: layer}) as j}
|
||||
{#each Array.from({ length: layer }) as j}
|
||||
<div class="cell" />
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -9,11 +9,7 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
import _ from "lodash";
|
||||
|
||||
export let armor = [];
|
||||
console.log(armor)
|
||||
|
||||
export let layers = [];
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -28,5 +24,6 @@
|
|||
.layers {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<div>
|
||||
{#each rows as row, i (i)}
|
||||
<div class="row">
|
||||
<div class="my-row">
|
||||
{#each row as threshold, j (j)}
|
||||
<div class="cell">
|
||||
{#if threshold}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.row {
|
||||
.my-row {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.cell {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<Hst.Story title="Export/PrintShip/Screens">
|
||||
<Hst.Variant>
|
||||
<Screens {standard} {advanced} />
|
||||
</Hst.Variant>
|
||||
|
||||
<svelte:fragment slot="controls">
|
||||
<Hst.Number bind:value={standard} title="standard" />
|
||||
<Hst.Number bind:value={advanced} title="advanced" />
|
||||
</svelte:fragment>
|
||||
</Hst.Story>
|
||||
|
||||
<script>
|
||||
import Screens from "./index.svelte";
|
||||
|
||||
export let Hst;
|
||||
|
||||
let standard = 2;
|
||||
let advanced = 1;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<div>
|
||||
{#each Array.from({ length: standard }) as _, i (i)}
|
||||
<img src="/icons/screen.svg" alt="screen" />
|
||||
{/each}
|
||||
{#each Array.from({ length: advanced }) as _, i (i)}
|
||||
<img src="/icons/screen-advanced.svg" alt="advanced screen" />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export let standard = 0;
|
||||
export let advanced = 0;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
img {
|
||||
width: 1em;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
},
|
||||
},
|
||||
hull: {
|
||||
rating: 0,
|
||||
rating: 10,
|
||||
min: 1,
|
||||
max: 10,
|
||||
reqs: {
|
||||
|
|
@ -44,8 +44,8 @@
|
|||
},
|
||||
},
|
||||
screens: {
|
||||
standard: 0,
|
||||
advanced: 0,
|
||||
standard: 2,
|
||||
advanced: 1,
|
||||
reqs: {
|
||||
cost: 0,
|
||||
mass: 0,
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
cost: 0,
|
||||
mass: 0,
|
||||
},
|
||||
layers: [],
|
||||
layers: [3, 2],
|
||||
},
|
||||
carrier: {
|
||||
nbrBays: 0,
|
||||
|
|
|
|||
|
|
@ -3,11 +3,20 @@
|
|||
<div class="print-output">
|
||||
<Identification {...identification} />
|
||||
|
||||
<Hull
|
||||
shipMass={identification.reqs.mass}
|
||||
advanced={false}
|
||||
rating={structure.hull?.rating}
|
||||
/>
|
||||
<div class="grid">
|
||||
<div class="s6">
|
||||
<Armor layers={structure?.armor?.layers} />
|
||||
<Hull
|
||||
shipMass={identification.reqs.mass}
|
||||
advanced={false}
|
||||
rating={structure.hull?.rating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="s6">
|
||||
<Screens {...screens} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MainSystems {...propulsion} />
|
||||
</div>
|
||||
|
|
@ -16,10 +25,14 @@
|
|||
import Identification from "./Identification.svelte";
|
||||
import MainSystems from "./MainSystems/index.svelte";
|
||||
import Hull from "./Hull/index.svelte";
|
||||
import Armor from "./Armor/index.svelte";
|
||||
import Screens from "./Screens/index.svelte";
|
||||
|
||||
export let identification = {};
|
||||
export let propulsion = {};
|
||||
export let structure = {};
|
||||
|
||||
$: screens = structure?.screens ?? {};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -39,4 +52,9 @@
|
|||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.s6 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue