print wip

.histoire/dist/histoire.json

@@ -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": []

package.json

@@ -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": {

src/lib/components/Output/Print/Hull/Armour.stories.svelte.todo

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

src/lib/components/Output/Print/Hull/Integrity/Integrity.stories.svelte.todo

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

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

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

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

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

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

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

src/lib/components/ShipEdit/Identification.svelte

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

src/lib/components/ShipEdit/Weaponry.svelte

@@ -29,6 +29,3 @@
 
   export let weapons = [];
 </script>
-
-<style>
-</style>

src/routes/export/print/PrintShip/Armor/index.story.svelte

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

src/routes/export/print/PrintShip/Armor/index.svelte

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

src/routes/export/print/PrintShip/Hull/index.svelte

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

src/routes/export/print/PrintShip/Screens/index.story.svelte

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

src/routes/export/print/PrintShip/Screens/index.svelte

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

src/routes/export/print/PrintShip/index.story.svelte

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

src/routes/export/print/PrintShip/index.svelte

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