print

src/routes/export/+layout.svelte

@@ -8,6 +8,10 @@
     <i>output</i>
     <span>yaml</span>
   </a>
+  <a href="/export/print">
+    <i>print</i>
+    <span>print</span>
+  </a>
   <!-- TODO
     <a>
       <i>Quiz</i>

src/routes/export/print/+page.svelte

@@ -0,0 +1,12 @@
+<PrintShip {...$ship} />
+
+<script>
+  import { getContext } from "svelte";
+  import { readable } from "svelte/store";
+
+  import PrintShip from "./PrintShip/index.svelte";
+
+  const api = getContext("api");
+
+  const ship = api?.svelteStore ?? readable({});
+</script>

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

@@ -0,0 +1,49 @@
+<h1>
+  ship name: <div class="fill" />
+</h1>
+
+<div class="details">
+  <h2>
+    {#if shipClass}
+      {shipClass}-class,
+    {/if}
+    {shipType}
+  </h2>
+  <div class="reqs">
+    {cost} <i>paid</i> &nbsp; {mass} <i>weight</i>
+  </div>
+</div>
+
+<script>
+  export let shipClass;
+  export let shipType;
+  export let cost = 0;
+  export let mass = 0;
+</script>
+
+<style>
+  h1 {
+    width: 100%;
+    display: flex;
+    font-size: var(--font-scale-8);
+    align-items: baseline;
+  }
+  h2 {
+    font-size: var(--font-scale-7);
+    flex: 1;
+  }
+  .fill {
+    margin-left: 0.5em;
+    display: inline-block;
+    flex: 1;
+    border-bottom: 1px solid black;
+  }
+  .details {
+    display: flex;
+    align-items: baseline;
+  }
+  .reqs {
+    display: flex;
+    align-items: center;
+  }
+</style>

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

@@ -0,0 +1,21 @@
+{#if rating}
+  <div class="thrust">
+    {rating}
+  </div>
+{/if}
+
+<script>
+  export let rating = 0;
+</script>
+
+<style>
+  div.thrust {
+    background-image: url(/icons/standard-drive.svg);
+    width: 2em;
+    background-size: 2em;
+    background-repeat: no-repeat;
+    height: 2em;
+    line-height: 2em;
+    text-align: center;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+{#if type && type !== "none"}
+  <img src="/icons/ftl-drive.svg" alt="ftl drive" title="ftl drive" />
+{/if}
+
+<script>
+  export let type = null;
+</script>
+
+<style>
+  img {
+    height: 2em;
+  }
+</style>

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

@@ -0,0 +1,34 @@
+<div class="main-systems">
+  <Ftl type={ftl.type} />
+
+  <Drive rating={drive.rating} />
+
+  <img
+    class="internal"
+    src="/icons/internal-systems.svg"
+    alt="internal systems"
+  />
+</div>
+
+<script>
+  import Ftl from "./Ftl.svelte";
+  import Drive from "./Drive.svelte";
+
+  export let ftl = {};
+  export let drive = {};
+
+  // TODO advanced drive
+</script>
+
+<style>
+  .main-systems {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    justify-content: space-evenly;
+    margin-top: 1em;
+  }
+  img {
+    height: 2em;
+  }
+</style>

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

@@ -0,0 +1,34 @@
+<div>Printing this page will only prints the ship sheet.</div>
+
+<div class="print-output">
+  <Identification {...identification} />
+
+  <MainSystems {...propulsion} />
+</div>
+
+<script>
+  import Identification from "./Identification.svelte";
+  import MainSystems from "./MainSystems/index.svelte";
+
+  export let identification = {};
+  export let propulsion = {};
+</script>
+
+<style>
+  .print-output {
+    width: 4.25in;
+    height: 5.5in;
+    border: 1px solid black;
+    padding: 1em;
+    margin: 0px auto;
+  }
+  @media print {
+    :global(body > *) {
+      visibility: hidden;
+    }
+
+    .print-output {
+      visibility: visible;
+    }
+  }
+</style>