print component

src/lib/components/App.svelte

@@ -9,6 +9,9 @@
 <div class:hide={activeTab !== 'json'}>
     <JsonOutput />
 </div>
+<div class:hide={activeTab !== 'print'}>
+    <PrintOutput />
+</div>
 
 </main>
 
@@ -20,6 +23,7 @@
     import ShipEdit from "./ShipEdit/index.svelte";
     import About from "./About.svelte";
     import JsonOutput from './Output/Json.svelte';
+    import PrintOutput from './Output/Print/index.svelte';
 
     let activeTab = 'editor';
     $: console.log(activeTab);

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

@@ -1,47 +1,47 @@
 <h1>
-  ship name: <div class="fill" />
+    ship name: <div class="fill" />
 </h1>
 
 <div class="details">
-  <h2>{ship_class}-class, {ship_type}</h2>
-  <div class="reqs">
-    <Cost {cost} />
-    &nbsp;
-    <Mass {mass} />
-  </div>
+    <h2>{shipClass}-class, {shipType}</h2>
+    <div class="reqs">
+        <Cost {cost} />
+        &nbsp;
+        <Mass {mass} />
+    </div>
 </div>
 
 <script>
-  import Cost from "../../../Cost.svelte";
-  import Mass from "$lib/components/Mass.svelte";
+    import Cost from "../../../Cost.svelte";
+    import Mass from "$lib/components/Mass.svelte";
 
-  export let ship_class;
-  export let ship_type;
-  export let cost,
-    mass = (0, 0);
+    export let shipClass;
+    export let shipType;
+    export let cost,
+        mass = (0, 0);
 </script>
 
 <style>
-  h1 {
-    width: 100%;
-    display: flex;
-    font-size: var(--font-scale-8);
-  }
-  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;
-  }
+    h1 {
+        width: 100%;
+        display: flex;
+        font-size: var(--font-scale-8);
+    }
+    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;
+    }
 </style>

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

@@ -1,3 +1,7 @@
+<div>
+  <Identification {...$state.identification} />
+</div>
+<!--
 <aside class="ship-sheet" transition:fade>
   <Identification {...ship.general} />
 
@@ -12,21 +16,25 @@
     />
   </div>
 
-  <MainSystems ftl={ship.ftl.type} engine={ship.engine.rating} />
 </aside>
+-->
+  <MainSystems ftl={$state?.propulsion?.ftl}
+        engine={$state?.propulsion?.drive?.rating} />
 
 <script>
-  import _ from "lodash";
+import { getContext } from 'svelte';
+  /* import _ from "lodash"; */
 
   import Identification from "./Identification/index.svelte";
   import MainSystems from "./MainSystems/index.svelte";
-  import Hull from "./Hull/index.svelte";
-  import Weapons from "./Weapons/index.svelte";
-  import Systems from "./Systems/index.svelte";
+  /* import Hull from "./Hull/index.svelte"; */
+  /* import Weapons from "./Weapons/index.svelte"; */
+  /* import Systems from "./Systems/index.svelte"; */
 
-  export let ship;
+  /* export let ship; */
+    const { state } = getContext('ship');
 
-  import { fly, fade } from "svelte/transition";
+  /* import { fly, fade } from "svelte/transition"; */
 </script>
 
 <style>