Merge branch 'main' into pages

.versionrc.json

@@ -0,0 +1,12 @@
+{
+  "types": [
+    { "type": "feat", "section": "Features" },
+    { "type": "fix", "section": "Bug Fixes" },
+    { "type": "chore" },
+    { "type": "docs" },
+    { "type": "style", "hidden": false },
+    { "type": "refactor", "hidden": false },
+    { "type": "perf", "hidden": false },
+    { "type": "test", "hidden": false }
+  ]
+}

CHANGELOG.md

@@ -1,4 +1,14 @@
-## Next
+# Changelog
 
-* Add svench.
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-* Switch to Sveltekit.
+
+## [2.1.0](///compare/v2.0.0...v2.1.0) (2022-04-07)
+
+
+### Features
+
+* add localStorage memory bf7206a
+* can move main system comps in the print output b425f4a
+
+
+* add standard-version 2fd047f

jsconfig.json

@@ -1,9 +1,10 @@
 {
-	"compilerOptions": {
+  "extends": "./.svelte-kit/tsconfig.json",
-		"baseUrl": ".",
+  "compilerOptions": {
-		"paths": {
+    "baseUrl": ".",
-			"$lib/*": ["src/lib/*"]
+    "paths": {
-		}
+      "$lib/*": ["src/lib/*"]
-	},
+    }
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
 }

package.json

@@ -1,6 +1,8 @@
 {
-  "name": "~TODO~",
+  "name": "aotds-docks",
-  "version": "0.0.1",
+  "version": "2.1.0",
+  "type": "module",
+  "private": true,
   "scripts": {
     "dev": "svelte-kit dev",
     "build": "svelte-kit build",
@@ -24,11 +26,11 @@
     "eslint-plugin-svelte3": "^3.4.1",
     "prettier": "~2.5.1",
     "prettier-plugin-svelte": "^2.6.0",
+    "standard-version": "^9.3.2",
     "storybook-builder-vite": "0.1.21",
     "svelte": "^3.46.4",
     "vite": "^2.7.0"
   },
-  "type": "module",
   "dependencies": {
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-svelte-csf": "^1.1.0",
@@ -43,6 +45,7 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "svelte-chota": "^1.8.6",
     "svelte-knobby": "^0.3.4",
+    "svelte-moveable": "^0.20.0",
     "ts-action": "^11.0.0",
     "updux": "link:/home/yanick/work/javascript/updux-js/",
     "webpack": "5"

src/lib/components/Output/Print/MainSystems/Movable.svelte

@@ -0,0 +1,42 @@
+<Moveable
+  {target}
+  originDraggable={true}
+  originRelative={true}
+  draggable={true}
+  throttleDrag={0}
+  zoom={1}
+  origin={false}
+  padding={{ left: 0, top: 0, right: 0, bottom: 0 }}
+  on:dragOriginStart={({ detail: e }) => {
+    e.dragStart && e.dragStart.set(frame.translate);
+  }}
+  on:dragOrigin={({ detail: e }) => {
+    frame.translate = e.drag.beforeTranslate;
+    frame.transformOrigin = e.transformOrigin;
+  }}
+  on:dragStart={({ detail: e }) => {
+    e.set(frame.translate);
+  }}
+  on:drag={({ detail: e }) => {
+    frame.translate = e.beforeTranslate;
+  }}
+  on:render={({ detail: e }) => {
+    const { translate, rotate, transformOrigin } = frame;
+    e.target.style.transformOrigin = transformOrigin;
+    e.target.style.transform =
+      `translate(${translate[0]}px, ${translate[1]}px)` +
+      ` rotate(${rotate}deg)`;
+  }}
+/>
+
+<script>
+  import Moveable from "svelte-moveable";
+
+  export let target;
+
+  let frame = {
+    translate: [0, 0],
+    rotate: 0,
+    transformOrigin: "50% 50%",
+  };
+</script>

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

@@ -1,26 +1,53 @@
 <div class="main_systems">
   {#if ftl !== "none"}
-    <img class="ftl" src="{base}/icons/ftl-drive.svg" alt="ftl drive" />
+    <img
+      bind:this={targetFTL}
+      class="ftl"
+      src="{base}/icons/ftl-drive.svg"
+      alt="ftl drive"
+    />
+
+    {#if movable}
+      <Movable target={targetFTL} />
+    {/if}
   {/if}
 
   {#if engine > 0}
-    <div class="thrust"
+    <div
-            style="background-image: url({base}/icons/standard-drive.svg);"
+      bind:this={targetEngine}
-        >{engine}</div>
+      class="thrust"
+      style="background-image: url({base}/icons/standard-drive.svg);"
+    >
+      {engine}
+    </div>
+    {#if movable}
+      <Movable target={targetEngine} />
+    {/if}
   {/if}
 
   <img
     class="internal"
     src="{base}/icons/internal-systems.svg"
     alt="internal systems"
+    bind:this={targetInternal}
   />
+  {#if movable}
+    <Movable target={targetInternal} />
+  {/if}
 </div>
 
 <script>
-    import { base } from '$app/paths';
+  import { base } from "$app/paths";
+
+  import Movable from "./Movable.svelte";
 
   export let ftl = "none";
   export let engine = 0;
+  export let movable = false;
+
+  let targetFTL;
+  let targetInternal;
+  let targetEngine;
 </script>
 
 <style>

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

@@ -1,76 +1,78 @@
+<div class="notice">
+  <label>
+    <input type="checkbox" bind:checked={movable} /> enable wiggletron (<i
+      >alpha feature</i
+    >)
+  </label>
+</div>
 
 <div class="print-output">
-    <Identification
+  <Identification
-        shipClass={ship.identification.shipClass}
+    shipClass={ship.identification.shipClass}
-        shipType={ship.identification.shipType}
+    shipType={ship.identification.shipType}
-        cost={ship.reqs?.cost}
+    cost={ship.reqs?.cost}
-        mass={ship.reqs?.mass}
+    mass={ship.reqs?.mass}
+  />
+
+  <div class="section-2">
+    <Hull structure={ship.structure} shipMass={ship.identification.mass} />
+
+    <Systems
+      firecons={ship.weaponry.firecons.nbr}
+      screens={ship.structure.screens}
     />
+  </div>
 
-    <div class="section-2">
+  <Weapons weapons={ship.weaponry.weapons} />
-        <Hull
-            structure={ship.structure}
-            shipMass={ship.identification.mass}
-        />
 
-        <Systems
+  <MainSystems
-            firecons={ship.weaponry.firecons.nbr}
+    {movable}
-            screens={ship.structure.screens}
+    ftl={ship?.propulsion?.ftl}
-        />
+    engine={ship?.propulsion?.drive?.rating}
-    </div>
+  />
-
-    <Weapons weapons={ship.weaponry.weapons} />
-
-    <MainSystems
-        ftl={ship?.propulsion?.ftl}
-        engine={ship?.propulsion?.drive?.rating}
-    />
 </div>
 
-<div class="notice">
+<div class="notice">Printing this page will only prints the ship sheet.</div>
-   Printing this page will only prints the ship sheet.
-</div>
 
 <script>
-    import Identification from "./Identification/index.svelte";
+  import Identification from "./Identification/index.svelte";
-    import MainSystems from "./MainSystems/index.svelte";
+  import MainSystems from "./MainSystems/index.svelte";
-    import Hull from "./Hull/index.svelte";
+  import Hull from "./Hull/index.svelte";
-    import Weapons from "./Weapons/index.svelte";
+  import Weapons from "./Weapons/index.svelte";
-    import Systems from "./Systems/index.svelte";
+  import Systems from "./Systems/index.svelte";
 
-    export let ship = {};
+  export let ship = {};
+  let movable = false;
 </script>
 
 <style>
+  .print-output {
+    width: 4.25in;
+    height: 5.5in;
+    border: 1px solid black;
+    padding: 1em;
+    margin: 0px auto;
+  }
+
+  .section-2 {
+    display: flex;
+    align-items: start;
+    margin-right: 2em;
+    margin-left: 2em;
+  }
+  .notice {
+    font-style: italic;
+    margin-top: 1em;
+    text-align: right;
+  }
+
+  @media print {
+    :global(body > *) {
+      visibility: hidden;
+    }
+
     .print-output {
-        width: 4.25in;
+      visibility: visible;
-        height: 5.5in;
-        border: 1px solid black;
-        padding: 1em;
-        margin: 0px auto;
-    }
-
-    .section-2 {
-        display: flex;
-        align-items: start;
-        margin-right: 2em;
-        margin-left: 2em;
-    }
-    .notice {
-        font-style: italic;
-        margin-top: 1em;
-        text-align: right;
-    }
-
-    @media print {
-        :global(body > *) {
-            visibility: hidden;
-        }
-
-        .print-output {
-            visibility: visible;
-        }
-
-
     }
+  }
 </style>

src/lib/store/ship.js

@@ -3,6 +3,7 @@ import { readable, get, derived } from "svelte/store";
 import { compose, applyMiddleware } from "redux";
 
 import shipDux from "../shipDux/index.js";
+import { initial } from "lodash";
 
 let composeEnhancers = compose;
 
@@ -11,7 +12,16 @@ if (dev && browser && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
 }
 
 export default () => {
-    const duxStore = shipDux.createStore(undefined, (mw) =>
+
+    let initialState = undefined;
+
+    if( browser ) {
+        const i  =localStorage.getItem('ship');
+
+        if(i) initialState = JSON.parse(localStorage.getItem('ship'));
+    }
+
+    const duxStore = shipDux.createStore(initialState, (mw) =>
         composeEnhancers(applyMiddleware(mw))
     );
 
@@ -21,6 +31,7 @@ export default () => {
             if (previous === duxStore.getState()) return;
             previous = duxStore.getState();
             set(previous);
+            if( browser ) localStorage.setItem('ship', JSON.stringify(previous));
         });
     });
 

svelte.config.js

@@ -1,21 +1,19 @@
 import adapter from "@sveltejs/adapter-static";
 import analyze from "rollup-plugin-analyzer";
 
-const dev = process.env.NODE_ENV === 'development';
+const dev = process.env.NODE_ENV === "development";
-
-
 /** @type {import('@sveltejs/kit').Config} */
 export default {
-    kit: {
+  kit: {
-        adapter: adapter({ fallback: 'index.html' }),
+    adapter: adapter({ fallback: "index.html" }),
-        paths: { base: dev? '' : "/aotds-docks" },
+    paths: { base: dev ? "" : "/aotds-docks" },
-        vite: {
+    vite: {
-            build: {
+      build: {
-                rollupOptions: {
+        rollupOptions: {
-                    plugins: [analyze()],
+          plugins: [analyze()],
-                    //            external: ['updux','@yanick/updeep']
+          //            external: ['updux','@yanick/updeep']
-                },
-            },
         },
+      },
     },
+  },
 };