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.
-* Switch to Sveltekit.
+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.
+
+## [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,4 +1,5 @@
 {
+  "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {

package.json

@@ -1,6 +1,8 @@
 {
-  "name": "~TODO~",
-  "version": "0.0.1",
+  "name": "aotds-docks",
+  "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
+      bind:this={targetEngine}
+      class="thrust"
       style="background-image: url({base}/icons/standard-drive.svg);"
-        >{engine}</div>
+    >
+      {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,3 +1,10 @@
+<div class="notice">
+  <label>
+    <input type="checkbox" bind:checked={movable} /> enable wiggletron (<i
+      >alpha feature</i
+    >)
+  </label>
+</div>
 
 <div class="print-output">
   <Identification
@@ -8,10 +15,7 @@
   />
 
   <div class="section-2">
-        <Hull
-            structure={ship.structure}
-            shipMass={ship.identification.mass}
-        />
+    <Hull structure={ship.structure} shipMass={ship.identification.mass} />
 
     <Systems
       firecons={ship.weaponry.firecons.nbr}
@@ -22,14 +26,13 @@
   <Weapons weapons={ship.weaponry.weapons} />
 
   <MainSystems
+    {movable}
     ftl={ship?.propulsion?.ftl}
     engine={ship?.propulsion?.drive?.rating}
   />
 </div>
 
-<div class="notice">
-   Printing this page will only prints the ship sheet.
-</div>
+<div class="notice">Printing this page will only prints the ship sheet.</div>
 
 <script>
   import Identification from "./Identification/index.svelte";
@@ -39,6 +42,7 @@
   import Systems from "./Systems/index.svelte";
 
   export let ship = {};
+  let movable = false;
 </script>
 
 <style>
@@ -70,7 +74,5 @@
     .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,14 +1,12 @@
 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: {
-        adapter: adapter({ fallback: 'index.html' }),
-        paths: { base: dev? '' : "/aotds-docks" },
+    adapter: adapter({ fallback: "index.html" }),
+    paths: { base: dev ? "" : "/aotds-docks" },
     vite: {
       build: {
         rollupOptions: {