From 38e98ec74b7a6cc7f0712a6dc73b5d917a781266 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Tue, 25 Apr 2023 14:50:15 -0400
Subject: [PATCH] print

---
 src/routes/export/+layout.svelte              |  4 ++
 src/routes/export/print/+page.svelte          | 12 +++++
 .../print/PrintShip/Identification.svelte     | 49 +++++++++++++++++++
 .../print/PrintShip/MainSystems/Drive.svelte  | 21 ++++++++
 .../print/PrintShip/MainSystems/Ftl.svelte    | 13 +++++
 .../print/PrintShip/MainSystems/index.svelte  | 34 +++++++++++++
 .../export/print/PrintShip/index.svelte       | 34 +++++++++++++
 7 files changed, 167 insertions(+)
 create mode 100644 src/routes/export/print/+page.svelte
 create mode 100644 src/routes/export/print/PrintShip/Identification.svelte
 create mode 100644 src/routes/export/print/PrintShip/MainSystems/Drive.svelte
 create mode 100644 src/routes/export/print/PrintShip/MainSystems/Ftl.svelte
 create mode 100644 src/routes/export/print/PrintShip/MainSystems/index.svelte
 create mode 100644 src/routes/export/print/PrintShip/index.svelte

diff --git a/src/routes/export/+layout.svelte b/src/routes/export/+layout.svelte
index 45a92fd..f25600a 100644
--- a/src/routes/export/+layout.svelte
+++ b/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>
diff --git a/src/routes/export/print/+page.svelte b/src/routes/export/print/+page.svelte
new file mode 100644
index 0000000..51ac184
--- /dev/null
+++ b/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>
diff --git a/src/routes/export/print/PrintShip/Identification.svelte b/src/routes/export/print/PrintShip/Identification.svelte
new file mode 100644
index 0000000..c9a7087
--- /dev/null
+++ b/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>
diff --git a/src/routes/export/print/PrintShip/MainSystems/Drive.svelte b/src/routes/export/print/PrintShip/MainSystems/Drive.svelte
new file mode 100644
index 0000000..8582aa2
--- /dev/null
+++ b/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>
diff --git a/src/routes/export/print/PrintShip/MainSystems/Ftl.svelte b/src/routes/export/print/PrintShip/MainSystems/Ftl.svelte
new file mode 100644
index 0000000..1b3b3c6
--- /dev/null
+++ b/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>
diff --git a/src/routes/export/print/PrintShip/MainSystems/index.svelte b/src/routes/export/print/PrintShip/MainSystems/index.svelte
new file mode 100644
index 0000000..204882e
--- /dev/null
+++ b/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>
diff --git a/src/routes/export/print/PrintShip/index.svelte b/src/routes/export/print/PrintShip/index.svelte
new file mode 100644
index 0000000..a4d44ba
--- /dev/null
+++ b/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>