From b16d2cb04d6722ba88b243f0b99b9581a7750263 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Sun, 10 Apr 2022 17:39:08 -0400 Subject: [PATCH 1/9] update the fakes for Storybook + testing --- fake/app/env.js | 1 + fake/app/paths.js | 1 + 2 files changed, 2 insertions(+) create mode 100644 fake/app/paths.js diff --git a/fake/app/env.js b/fake/app/env.js index 43dac6b..412026d 100644 --- a/fake/app/env.js +++ b/fake/app/env.js @@ -1 +1,2 @@ export const browser = true; +export const dev = true; diff --git a/fake/app/paths.js b/fake/app/paths.js new file mode 100644 index 0000000..b30116b --- /dev/null +++ b/fake/app/paths.js @@ -0,0 +1 @@ +export const base = ""; From 3bc59384176d71ce9358704c0e2ea2eebb94b049 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Sun, 10 Apr 2022 17:40:46 -0400 Subject: [PATCH 2/9] update Storybook version --- package.json | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index e46d46a..cb4f142 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,6 @@ "@sveltejs/adapter-static": "^1.0.0-next.28", "@sveltejs/kit": "^1.0.0-next.288", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.38", - "@vitebook/client": "^0.23.2", - "@vitebook/core": "^0.23.2", - "@vitebook/theme-default": "^0.23.2", "eslint": "^8.10.0", "eslint-config-prettier": "^8.4.0", "eslint-plugin-svelte3": "^3.4.1", @@ -28,13 +25,12 @@ "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" + "svelte": "^3.46.4" }, "dependencies": { "@storybook/addon-essentials": "^6.4.19", "@storybook/addon-svelte-csf": "^1.1.0", - "@storybook/svelte": "^6.4.19", + "@storybook/svelte": "^6.4.21", "@sveltejs/adapter-node": "^1.0.0-next.0", "chota": "^0.8.0", "lodash": "^4.17.21", From 24b07c3557a173fa898477eb8ce88a9aaf7112bc Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Sun, 10 Apr 2022 17:41:09 -0400 Subject: [PATCH 3/9] new movable action --- .../Output/Print/MainSystems/movable.js | 67 ++++++++++++++++ src/lib/components/Output/Print/movable.js | 79 +++++++++++++++++++ 2 files changed, 146 insertions(+) create mode 100644 src/lib/components/Output/Print/MainSystems/movable.js create mode 100644 src/lib/components/Output/Print/movable.js diff --git a/src/lib/components/Output/Print/MainSystems/movable.js b/src/lib/components/Output/Print/MainSystems/movable.js new file mode 100644 index 0000000..8b08a50 --- /dev/null +++ b/src/lib/components/Output/Print/MainSystems/movable.js @@ -0,0 +1,67 @@ +import VanillaMoveable, { PROPERTIES, EVENTS } from "moveable"; +import { camelize, isUndefined } from "@daybrush/utils"; + +function createMoveable(node,options) { + + let translate = [0,0]; + + options = { + originDraggable: true, + originRelative: true, + draggable: true, + throttleDrag: 0, + zoom: 1, + origin: false, + onDrag(e) { + translate = e.beforeTranslate; + node.dispatchEvent(new CustomEvent('translate', { detail: translate})); + }, + target: node, + ...options, + }; + + const moveable = new VanillaMoveable(document.body, options ); + + EVENTS.forEach((name) => { + const onName = camelize(`on ${name}`); + moveable.on(name, (e) => { + const result = options[onName] && options[onName](e); + const result2 = node.dispatchEvent(new CustomEvent(name, { detail: e })); + + return !isUndefined(result) + ? result + : !isUndefined(result2) + ? result2 + : undefined; + }); + }); + + return moveable; +} + +export function movable(node, options) { + + let moveable = options.disabled ? undefined : createMoveable(options); + + + const destroy = () => { + if(!moveable) return; + moveable.destroy(); + moveable = undefined; + }; + + const update = async (params) => { + if (params.disabled) { + destroy(); + } else { + if (!moveable) { + moveable = createMoveable(node, params); + } + } + }; + + return { + destroy, + update, + }; +} diff --git a/src/lib/components/Output/Print/movable.js b/src/lib/components/Output/Print/movable.js new file mode 100644 index 0000000..234a4a0 --- /dev/null +++ b/src/lib/components/Output/Print/movable.js @@ -0,0 +1,79 @@ +import VanillaMoveable, { PROPERTIES, EVENTS } from "moveable"; +import { camelize, isUndefined } from "@daybrush/utils"; + +function createMoveable(node, options) { + let translate = [0, 0]; + + let ship = options.ship; + let system = options.system; + delete options.ship; + delete options.system; + + if( Array.isArray(system) ) { + system = { system: system[0], systemId: system[1] }; + } + else { system = {system}; } + + options = { + originDraggable: true, + originRelative: true, + draggable: true, + throttleDrag: 0, + zoom: 1, + origin: false, + onDrag(e) { + translate = e.beforeTranslate; + node.dispatchEvent( + new CustomEvent("translate", { detail: translate }) + ); + ship.dispatch.setUITransform({ ...system, translate }); + }, + target: node, + ...options, + }; + + const moveable = new VanillaMoveable(document.body, options); + + EVENTS.forEach((name) => { + const onName = camelize(`on ${name}`); + moveable.on(name, (e) => { + const result = options[onName] && options[onName](e); + const result2 = node.dispatchEvent( + new CustomEvent(name, { detail: e }) + ); + + return !isUndefined(result) + ? result + : !isUndefined(result2) + ? result2 + : undefined; + }); + }); + + return moveable; +} + +export function movable(node, options) { + let moveable = options.disabled ? undefined : createMoveable(options); + + const destroy = () => { + if (!moveable) return; + moveable.destroy(); + moveable = undefined; + }; + + const update = async (params) => { + if (params.disabled) { + destroy(); + } else { + if (!moveable) { + moveable = createMoveable(node, params); + } + } + }; + + return { + destroy, + update, + }; +} From 012db36e6589f86f7dc4856dee2087ba7f94506d Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Sun, 10 Apr 2022 17:41:50 -0400 Subject: [PATCH 4/9] add a potential initialState to the store (for testing) --- src/lib/store/ship.js | 47 ++++++++++++++++++++----------------------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/src/lib/store/ship.js b/src/lib/store/ship.js index d4d2211..1fd3c0c 100644 --- a/src/lib/store/ship.js +++ b/src/lib/store/ship.js @@ -8,36 +8,33 @@ import { initial } from "lodash"; let composeEnhancers = compose; if (dev && browser && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) { - composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__; + composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__; } -export default () => { +export default (initialState = undefined) => { + if (browser) { + const i = localStorage.getItem("ship"); - let initialState = undefined; + if (i) initialState = JSON.parse(localStorage.getItem("ship")); + } - if( browser ) { - const i =localStorage.getItem('ship'); + const duxStore = shipDux.createStore(initialState, (mw) => + composeEnhancers(applyMiddleware(mw)) + ); - if(i) initialState = JSON.parse(localStorage.getItem('ship')); - } - - const duxStore = shipDux.createStore(initialState, (mw) => - composeEnhancers(applyMiddleware(mw)) - ); - - let previous; - const state = readable(duxStore.getState(), (set) => { - duxStore.subscribe(() => { - if (previous === duxStore.getState()) return; - previous = duxStore.getState(); - set(previous); - if( browser ) localStorage.setItem('ship', JSON.stringify(previous)); - }); + let previous; + const state = readable(duxStore.getState(), (set) => { + duxStore.subscribe(() => { + if (previous === duxStore.getState()) return; + previous = duxStore.getState(); + set(previous); + if (browser) localStorage.setItem("ship", JSON.stringify(previous)); }); + }); - return { - dispatch: duxStore.dispatch, - state, - shipMass: derived(state, (state) => state.reqs.mass), - }; + return { + dispatch: duxStore.dispatch, + state, + shipMass: derived(state, (state) => state.reqs.mass), + }; }; From 68fdda4d67e4857f18ae2bbbfbc6e1c1466c98da Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Sun, 10 Apr 2022 17:42:29 -0400 Subject: [PATCH 5/9] deal with the uiTransform in the dux --- src/lib/shipDux/index.js | 92 +++++++++++++++++++++--------- src/lib/shipDux/propulsion/ftl.js | 35 ++++++------ src/lib/shipDux/structure/index.js | 18 +++--- 3 files changed, 90 insertions(+), 55 deletions(-) diff --git a/src/lib/shipDux/index.js b/src/lib/shipDux/index.js index 388af19..739b2d7 100644 --- a/src/lib/shipDux/index.js +++ b/src/lib/shipDux/index.js @@ -11,48 +11,84 @@ import weaponry from "./weaponry/index.js"; import { screensReqsReaction } from "./structure/screens.js"; const dux = new Updux({ - subduxes: { - identification, - propulsion, - structure, - carrier, - weaponry, - }, - initial: { - reqs: { cost: 0, mass: 10, usedMass: 0 }, - }, - actions: { - setShipReqs: null, - }, + subduxes: { + identification, + propulsion, + structure, + carrier, + weaponry, + }, + initial: { + reqs: { cost: 0, mass: 10, usedMass: 0 }, + }, + actions: { + setShipReqs: null, + setUITransform: null, + }, }); dux.setMutation("setShipMass", (mass) => u({ reqs: { mass } })); -dux.setMutation('setShipReqs', reqs => u({reqs})); +dux.setMutation("setShipReqs", (reqs) => u({ reqs })); + +dux.setMutation("setUITransform", ({ system, systemId, translate }) => { + const transform = translate + ? `translate(${translate[0]}px,${translate[1]}px)` + : ""; + + switch (system) { + case "firecons": + return u.updateIn("weaponry.firecons.uiTransform", transform); + + case "weapon": + return u.updateIn( + "weaponry.weapons", + u.map(u.if(({ id }) => id === systemId, u({ uiTransform: transform }))) + ); + + case "screens": + return u.updateIn("structure.screens.uiTransform", transform); + + case "hull": + return u.updateIn("structure.hull.uiTransform", transform); + + case "internalSystems": + const path = "structure.uiTransform"; + return u.updateIn(path, transform); + + case "ftl": + return u.updateIn("propulsion.ftl.uiTransform", transform); + + case "drive": + return u.updateIn("propulsion.drive.uiTransform", transform); + + default: + return (state) => state; + } +}); dux.addReaction(calculateDriveReqs); dux.addReaction(ftlReqsReaction); dux.addReaction(screensReqsReaction); -dux.addReaction( (store) => (state) => { - let cost = 0; - let mass = 0; +dux.addReaction((store) => (state) => { + let cost = 0; + let mass = 0; - let subsystems = Object.values(state); + let subsystems = Object.values(state); - while(subsystems.length>0) { - const subsystem = subsystems.shift(); - if( typeof subsystem !== 'object' ) continue; + while (subsystems.length > 0) { + const subsystem = subsystems.shift(); + if (typeof subsystem !== "object") continue; - if( subsystem.reqs ) { - cost += subsystem.reqs.cost; - mass += subsystem.reqs.mass; - } - - subsystems.push( ...Object.values(subsystem)); + if (subsystem.reqs) { + cost += subsystem.reqs.cost; + mass += subsystem.reqs.mass; } - store.dispatch.setShipReqs({cost,usedMass: mass}); + subsystems.push(...Object.values(subsystem)); + } + store.dispatch.setShipReqs({ cost, usedMass: mass }); }); export default dux; diff --git a/src/lib/shipDux/propulsion/ftl.js b/src/lib/shipDux/propulsion/ftl.js index ee42eca..1a38061 100644 --- a/src/lib/shipDux/propulsion/ftl.js +++ b/src/lib/shipDux/propulsion/ftl.js @@ -10,35 +10,32 @@ const dux = new Updux({ subduxes: { reqs }, initial: { type: "none", + uiTransform: "", }, actions: { - setFtl: null, - setFtlReqs: null, + setFtl: null, + setFtlReqs: null, }, }); export default dux; -dux.setMutation( 'setFtl', type => u({type}) ); -dux.setMutation( 'setFtlReqs', reqs => u({reqs}) ); +dux.setMutation("setFtl", (type) => u({ type })); +dux.setMutation("setFtlReqs", (reqs) => u({ reqs })); -export function calcFtlReqs(type,shipMass) { - if(type==="none") return { cost: 0, mass: 0 }; +export function calcFtlReqs(type, shipMass) { + if (type === "none") return { cost: 0, mass: 0 }; - const mass = Math.ceil(shipMass / 10); + const mass = Math.ceil(shipMass / 10); - return { - mass, - cost: mass * ( type === 'advanced' ? 3 : 2 ), - } + return { + mass, + cost: mass * (type === "advanced" ? 3 : 2), + }; } // needs to be at the top level -export const ftlReqsReaction = store => +export const ftlReqsReaction = (store) => createSelector( - [ - (ship) => ship.propulsion.ftl.type, - (ship) => ship.reqs.mass, - ], - (type,shipMass) => - store.dispatch.setFtlReqs(calcFtlReqs(type,shipMass)) - ); + [(ship) => ship.propulsion.ftl.type, (ship) => ship.reqs.mass], + (type, shipMass) => store.dispatch.setFtlReqs(calcFtlReqs(type, shipMass)) + ); diff --git a/src/lib/shipDux/structure/index.js b/src/lib/shipDux/structure/index.js index c5fe3cb..d0a7684 100644 --- a/src/lib/shipDux/structure/index.js +++ b/src/lib/shipDux/structure/index.js @@ -1,13 +1,15 @@ -import { Updux } from 'updux'; +import { Updux } from "updux"; -import hull from './hull.js'; -import screens from './screens.js'; -import cargo from './cargo.js'; -import armor from './armor.js'; -import streamlining from './streamlining.js'; +import hull from "./hull.js"; +import screens from "./screens.js"; +import cargo from "./cargo.js"; +import armor from "./armor.js"; +import streamlining from "./streamlining.js"; const dux = new Updux({ - subduxes: { hull, screens, cargo, streamlining, armor } + subduxes: { hull, screens, cargo, streamlining, armor }, + initial: { + uiTransform: "", + }, }); export default dux; - From 070299387ddeb4a6c7480dcebe9fb7858466c471 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Sun, 10 Apr 2022 17:42:53 -0400 Subject: [PATCH 6/9] add movable logic in the print components --- .../Output/Print/Hull/Integrity/index.svelte | 24 ++++++++-- .../components/Output/Print/Hull/index.svelte | 3 ++ .../Output/Print/MainSystems/index.svelte | 47 ++++++++++++++----- .../Output/Print/Print.stories.svelte | 30 ++++++++---- .../Print/Systems/Firecons/index.svelte | 23 +++++++-- .../Output/Print/Systems/Screens/index.svelte | 25 ++++++++-- .../Output/Print/Systems/index.svelte | 5 +- .../Output/Print/Weapons/Beam/index.svelte | 15 +++++- .../Output/Print/Weapons/index.svelte | 7 ++- src/lib/components/Output/Print/index.svelte | 19 +++++--- 10 files changed, 151 insertions(+), 47 deletions(-) diff --git a/src/lib/components/Output/Print/Hull/Integrity/index.svelte b/src/lib/components/Output/Print/Hull/Integrity/index.svelte index 680eac9..4aa042f 100644 --- a/src/lib/components/Output/Print/Hull/Integrity/index.svelte +++ b/src/lib/components/Output/Print/Hull/Integrity/index.svelte @@ -1,4 +1,12 @@ -
+
{ + ship.dispatch.setUITransform({ system: "hull", translate }); + }} + style:transform={hull?.uiTransform} +> {#each rows as row, i (i)}
{#each row as threshold, j (j)} @@ -13,10 +21,18 @@