Merge branch 'moveable'

This commit is contained in:
Yanick Champoux 2022-04-06 20:35:06 -04:00
commit 6c10120dcd
6 changed files with 156 additions and 82 deletions

View File

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

View File

@ -43,6 +43,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"

View File

@ -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>

View File

@ -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"
style="background-image: url({base}/icons/standard-drive.svg);"
>{engine}</div>
<div
bind:this={targetEngine}
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>

View File

@ -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
shipClass={ship.identification.shipClass}
shipType={ship.identification.shipType}
cost={ship.reqs?.cost}
mass={ship.reqs?.mass}
<Identification
shipClass={ship.identification.shipClass}
shipType={ship.identification.shipType}
cost={ship.reqs?.cost}
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">
<Hull
structure={ship.structure}
shipMass={ship.identification.mass}
/>
<Weapons weapons={ship.weaponry.weapons} />
<Systems
firecons={ship.weaponry.firecons.nbr}
screens={ship.structure.screens}
/>
</div>
<Weapons weapons={ship.weaponry.weapons} />
<MainSystems
ftl={ship?.propulsion?.ftl}
engine={ship?.propulsion?.drive?.rating}
/>
<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";
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 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";
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;
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;
}
visibility: visible;
}
}
</style>

View File

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