main layout

src/lib/components/App.svelte

@@ -1,9 +1,12 @@
 <Ribbon />
 <Header />
 
+<ShipEdit />
+
 <script>
   import Ribbon from "./Ribbon.svelte";
   import Header from "./Header.svelte";
+  import ShipEdit from './ShipEdit/index.svelte';
 </script>
 
 <style>

src/lib/components/ShipEdit/index.svelte

@@ -1,5 +1,6 @@
+<main>
 <div class="identification-row">
-    <Identification {...$shipState.identification} {...$shipState.reqs} />
+    <Identification {...$shipState.identification} />
 
     <ShipCost {...$shipState.reqs} />
 </div>
@@ -11,6 +12,7 @@
 <Weaponry {...$shipState.weaponry}/>
 
 <Carrier {...$shipState.carrier} />
+    </main>
 
 <script>
     import { getContext } from "svelte";
@@ -33,4 +35,10 @@
     .identification-row :global(> *:first-child) {
         flex: 1;
     }
+
+    main {
+        width: var(--main-width);
+        margin-left: auto;
+        margin-right: auto;
+    }
 </style>

src/lib/shipDux/index.js

@@ -11,13 +11,13 @@ import weaponry from "./weaponry/index.js";
 import { screensReqsReaction } from "./structure/screens.js";
 
 const dux = new Updux({
-    subduxes: {
+   subduxes: {
         identification,
         propulsion,
         structure,
         carrier,
         weaponry,
-    },
+   },
     initial: {
         reqs: { cost: 0, mass: 10, usedMass: 0 },
     },
@@ -55,5 +55,4 @@ dux.addReaction( (store) => (state) => {
 
 });
 
-
 export default dux;

src/routes/index.svelte

@@ -1,9 +1,15 @@
 <App />
 
 <script>
+  import { setContext } from "svelte";
+
+
   import "../../static/fonts/faktos.css";
   import "../../static/fonts/dosis/dosis.css";
   import "../../static/global.css";
+  import shipStore from "$lib/store/ship.js";
 
   import App from "$lib/components/App.svelte";
+
+  setContext("ship", shipStore());
 </script>