Merge branch 'docks58-print-layout'

NOTES

@@ -1,2 +1,4 @@
 vertical rythm: 16px = 1rem
                 24px = 1.5rem <== ?
+
+size of icons in the print version: 1.4rem  ( == 20.4px)

Taskfile.yml

@@ -20,8 +20,8 @@ tasks:
       - vitest run -u src
 
   check:
-    deps:
+    # deps:
-      - histoire:build
+    #   - histoire:build
     cmds:
       - { task: test }
 
@@ -51,6 +51,8 @@ tasks:
     cmds:
       - rsync -av build/ 192.168.0.100:/home/docks
 
+  open: firefox https://docks.babyl.ca
+
   release:
     cmds:
       - standard-version -a

src/lib/style/index.css

@@ -1,6 +1,10 @@
 @import "/fonts/faktos.css";
 @import "/fonts/dosis/dosis.css";
 
+@page {
+  size: 5.5in 8.5in;
+}
+
 @font-face {
   font-family: "Faktos";
   font-style: normal;
@@ -78,3 +82,10 @@ h3 {
 h4 {
   font-size: var(--font-scale-12);
 }
+
+@media only print {
+  i {
+    font-family: var(--font-icon);
+    font-size: 16pt;
+  }
+}

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

@@ -16,10 +16,10 @@
   .cell {
     display: inline-block;
     margin-right: 0.5em;
-    width: 1em;
+    width: 1.4rem;
-    height: 1em;
+    height: 1.4rem;
     border: 1px solid black;
-    border-radius: 0.5em;
+    border-radius: 1rem;
   }
   .layers {
     display: flex;

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

@@ -14,6 +14,7 @@
     gap: 0.5em;
   }
   img.firecon {
-    width: 1em;
+    width: 1.4rem;
+    margin: 0px 0.5rem;
   }
 </style>

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

@@ -55,13 +55,13 @@
   }
   .cell {
     display: inline-block;
-    margin-right: 0.5em;
+    margin-right: 0.5rem;
-    width: 1.5em;
+    width: 1.4rem;
-    height: 1.5em;
+    height: 1.4rem;
     border: 1px solid black;
   }
   img {
-    width: 1em;
+    width: 1.2rem;
-    margin-left: 0.2em;
+    margin-left: 0.1rem;
   }
 </style>

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

@@ -1,7 +1,3 @@
-<h1>
-  ship name: <div class="fill" />
-</h1>
-
 <div class="details">
   <h2>
     {#if shipClass}
@@ -14,6 +10,10 @@
   </div>
 </div>
 
+<h1>
+  ship name: <div class="fill" />
+</h1>
+
 <script>
   export let shipClass;
   export let shipType;
@@ -26,6 +26,7 @@
     display: flex;
     font-size: var(--font-scale-8);
     align-items: baseline;
+    margin-bottom: 2em;
   }
   h2 {
     font-size: var(--font-scale-7);
@@ -45,4 +46,8 @@
     display: flex;
     align-items: center;
   }
+  .details,
+  .details :global(*) {
+    font-size: var(--font-scale-9);
+  }
 </style>

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

@@ -29,6 +29,6 @@
     margin-top: 1em;
   }
   img {
-    height: 2em;
+    height: 2.4rem;
   }
 </style>

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

@@ -14,7 +14,8 @@
 
 <style>
   img {
-    width: 1em;
+    width: 1.2rem;
+    margin: 0px 0.5rem;
   }
   div {
     display: flex;

src/routes/export/print/PrintShip/Weapons/Beams.svelte

@@ -0,0 +1,29 @@
+<div>
+  {#each classes as c (c)}
+    <div class="beam-row">
+      {#each byClass[`${c}`] as w}
+        <Beam {...w.specs} />
+      {/each}
+    </div>
+  {/each}
+</div>
+
+<script>
+  import * as R from "remeda";
+
+  import Beam from "./Beam.svelte";
+
+  export let beams = [];
+
+  $: byClass = R.groupBy(beams, (b) => b.specs.weaponClass);
+  $: classes = R.uniq(beams.map((b) => b.specs.weaponClass)).sort((a, b) =>
+    a < b ? 1 : -1
+  );
+</script>
+
+<style>
+  .beam-row {
+    display: flex;
+    justify-content: center;
+  }
+</style>

src/routes/export/print/PrintShip/Weapons/PDS.svelte

@@ -2,6 +2,7 @@
 
 <style>
   img {
-    height: 2em;
+    height: 1.4rem;
+    margin: 0px 0.5rem;
   }
 </style>

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

@@ -1,8 +1,12 @@
-<div>Printing this page will only prints the ship sheet.</div>
+<div class="disclaimer">
+  Printing this page will only prints the ship sheet.
+</div>
 
 <div class="print-output">
   <Identification {...identification} />
 
+  <Beams {beams} />
+
   <Weapons {weapons} />
 
   <div class="grid">
@@ -16,8 +20,14 @@
     </div>
 
     <div class="s6">
-      <Screens {...screens} />
+      <div>
+        {#each pds as p (p.id)}
+          <PDS {...pds} />
+        {/each}
+      </div>
+
       <Firecons {...firecons} />
+      <Screens {...screens} />
     </div>
   </div>
 
@@ -27,6 +37,8 @@
 </div>
 
 <script>
+  import u from "@yanick/updeep-remeda";
+
   import Identification from "./Identification.svelte";
   import MainSystems from "./MainSystems/index.svelte";
   import Hull from "./Hull/index.svelte";
@@ -35,6 +47,8 @@
   import Firecons from "./Firecons/index.svelte";
   import Weapons from "./Weapons/index.svelte";
   import Cargo from "./Cargo.svelte";
+  import PDS from "./Weapons/PDS.svelte";
+  import Beams from "./Weapons/Beams.svelte";
 
   export let identification = {};
   export let propulsion = {};
@@ -46,12 +60,23 @@
   $: screens = structure?.screens ?? {};
   $: firecons = weaponry?.firecons ?? {};
   $: weapons = weaponry?.weapons ?? [];
+  $: weapons = u.reject(
+    weapons,
+    u.matches({ specs: { type: (t) => ["pds", "beam"].includes(t) } })
+  );
+
+  $: pds = (weaponry?.weapons ?? []).filter(
+    u.matches({ specs: { type: "pds" } })
+  );
+  $: beams = (weaponry?.weapons ?? []).filter(
+    u.matches({ specs: { type: "beam" } })
+  );
 </script>
 
 <style>
   .print-output {
-    width: 4.25in;
+    width: 5.5in;
-    height: 5.5in;
+    height: 8.5in;
     border: 1px solid black;
     padding: 1em;
     margin: 0px auto;
@@ -63,6 +88,8 @@
 
     .print-output {
       visibility: visible;
+      width: inherit;
+      height: inherit;
     }
   }
   .s6 {
@@ -74,4 +101,8 @@
   .s6 :global(> div) {
     margin-bottom: 1em;
   }
+  .disclaimer {
+    text-align: center;
+    margin-bottom: 1rem;
+  }
 </style>