From 817be24e026448d1bae566c1ae8c7e851198ca66 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.dyndns.org>
Date: Wed, 29 Jul 2020 20:29:21 -0400
Subject: [PATCH] We have a print sheet

---
 public/index.html                             |  2 +
 public/print.css                              |  5 +++
 src/components/App.svelte                     | 38 +++++++++++++------
 src/components/Output/Json.svelte             | 19 +---------
 .../Output/Print/Hull/Integrity/index.svelte  |  4 +-
 .../Output/Print/Weapons/Beam/index.svelte    |  1 -
 .../Output/Print/Weapons/index.svelte         |  4 ++
 src/components/Output/Print/index.svelte      |  6 ++-
 8 files changed, 45 insertions(+), 34 deletions(-)
 create mode 100644 public/print.css

diff --git a/public/index.html b/public/index.html
index 2377875..c08d5fc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,6 +18,8 @@
 	<link rel='stylesheet' href='./css/buttons.css'>
 	<link rel='stylesheet' href='./bundle.css'>
 
+    <link rel="stylesheet" href="print.css">
+
     <!--
     <link rel='stylesheet' href='/materialize/materialize.css'>
     <script src="/materialize/materialize.js"></script>
diff --git a/public/print.css b/public/print.css
new file mode 100644
index 0000000..523e78d
--- /dev/null
+++ b/public/print.css
@@ -0,0 +1,5 @@
+@media print {
+    header,nav {
+        display: none !important;
+    }
+}
diff --git a/src/components/App.svelte b/src/components/App.svelte
index 8fe86cd..b3d42bb 100644
--- a/src/components/App.svelte
+++ b/src/components/App.svelte
@@ -1,5 +1,21 @@
 <Header />
 
+  <nav>
+    <input class="reset button small red" type="button"  value="reset" on:click={reset} />
+
+    <div class="spacer" />
+    <input type="button" class="button small notes" value="notes" on:click={toggle_notes} />
+
+    <ul class="button-group">
+    <input type="button" class="button small green" value="editor"
+      on:click={() => set_output(null)} />
+    <input type="button" class="button small green" value="json"
+      on:click={() => set_output('json')} />
+    <input type="button" class="button small green" value="print"
+      on:click={() => set_output('print')} />
+    </ul>
+  </nav>
+
 {#if show_notes}
 <Notes show={show_notes} on:close={toggle_notes} />
 {/if}
@@ -7,18 +23,11 @@
 {#if output === 'json'}
   <OutputJson ship={$ship}
     on:close={() => set_output(null)}/>
-{/if}
+  {:else if output === 'print' }
+    <Print ship={$ship} />
+{:else}
 
 <main>
-  <nav>
-    <input class="reset button small red" type="button"  value="reset" on:click={reset} />
-
-    <div class="spacer" />
-    <input type="button" class="button small notes" value="notes" on:click={toggle_notes} />
-
-    <input type="button" class="button small green" value="json"
-      on:click={() => set_output('json')} />
-  </nav>
 
   <ShipSpecs />
 
@@ -65,12 +74,14 @@
       href="https://github.com/yanick/aotds-shipyard">Github</a>
   </footer>
 
+{/if}
 <script>
   import { setContext } from "svelte";
 
   import Header from './Header';
   import shipStore from "~/stores/ship";
   import OutputJson from './Output/Json.svelte';
+  import Print from './Output/Print';
 
   import ShipSpecs from './ShipSpecs/index.svelte';
   import Notes from './Notes';
@@ -129,8 +140,8 @@
 <style>
   main {
     display: grid;
-    width: 60em;
     grid-template-columns: 1fr 14em 8em;
+    width: 60em;
     margin-left: auto;
     margin-right: auto;
   }
@@ -138,7 +149,10 @@
   nav {
     grid-column: 1 / span 3 !important;
     display: flex;
-    margin: 1em 0;
+    width: 60em;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1em;
   }
 
   nav .spacer {
diff --git a/src/components/Output/Json.svelte b/src/components/Output/Json.svelte
index f6a3204..b7d86c1 100644
--- a/src/components/Output/Json.svelte
+++ b/src/components/Output/Json.svelte
@@ -1,8 +1,4 @@
-<aside transition:fly={{x: 2000, opacity: 1}}>
-    <div>
-      <input type="button" class="button small red" value="close"
-        on:click={close}/>
-    </div>
+<aside transition:fade>
   <pre><code>{json}</code></pre>
 </aside>
 
@@ -11,7 +7,7 @@
   let json;
   $: json = JSON.stringify(ship,null,2);
 
-    import { fly } from 'svelte/transition';
+    import { fly, fade } from 'svelte/transition';
     import {createEventDispatcher} from 'svelte';
 
     const dispatch = createEventDispatcher();
@@ -30,21 +26,10 @@
   text-align: right;
   }
   aside {
-    background-color: rgb(254, 218, 184);
-    position: absolute;
-    height: 80vh;
-    max-width: 80%;
-    min-width: 80%;
-    z-index: 200;
 
     padding: 1em;
     border: 3px solid var(--indigo-dye);
     border-radius: 1em;
-    right: 0px;
-    border-right: 0px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    top: 6em;
     font-size: var(--font-scale-11);
   }
 </style>
diff --git a/src/components/Output/Print/Hull/Integrity/index.svelte b/src/components/Output/Print/Hull/Integrity/index.svelte
index 0f7c7c9..a5cb0fb 100644
--- a/src/components/Output/Print/Hull/Integrity/index.svelte
+++ b/src/components/Output/Print/Hull/Integrity/index.svelte
@@ -1,7 +1,7 @@
 <div>
-  {#each rows as row (row)}
+  {#each rows as row,i (i)}
     <div class="row">
-      {#each row as item (item)}
+      {#each row as item,j (j)}
         <div class="cell">
           {#if item}
             <img src="icons/crew-star.svg" alt="crew loss threshold" />
diff --git a/src/components/Output/Print/Weapons/Beam/index.svelte b/src/components/Output/Print/Weapons/Beam/index.svelte
index e6df5e8..f393917 100644
--- a/src/components/Output/Print/Weapons/Beam/index.svelte
+++ b/src/components/Output/Print/Weapons/Beam/index.svelte
@@ -14,7 +14,6 @@
 
 <style>
   div :global(path) {
-    fill: white;
   }
   div :global(path:hover) {
     fill: white;
diff --git a/src/components/Output/Print/Weapons/index.svelte b/src/components/Output/Print/Weapons/index.svelte
index f7894fb..f58ce28 100644
--- a/src/components/Output/Print/Weapons/index.svelte
+++ b/src/components/Output/Print/Weapons/index.svelte
@@ -22,4 +22,8 @@
   div {
     margin-bottom: 2em;
   }
+  .beams {
+    display: flex;
+    justify-content: space-evenly;
+  }
 </style>
diff --git a/src/components/Output/Print/index.svelte b/src/components/Output/Print/index.svelte
index 6495823..e7fa23e 100644
--- a/src/components/Output/Print/index.svelte
+++ b/src/components/Output/Print/index.svelte
@@ -1,4 +1,4 @@
-<div class="ship-sheet">
+<aside class="ship-sheet" transition:fade>
   <Identification {...ship.general} />
 
   <Weapons weapons={ship.weaponry.weapons} />
@@ -18,7 +18,7 @@
     engine={ship.engine.rating}
   />
 
-</div>
+</aside>
 
 <script>
   import _ from 'lodash';
@@ -31,6 +31,8 @@
 
   export let ship;
 
+    import { fly, fade } from 'svelte/transition';
+
 </script>
 
 <style>