Merge branch 'moveable'
This commit is contained in:
commit
6c10120dcd
@ -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"]
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
42
src/lib/components/Output/Print/MainSystems/Movable.svelte
Normal file
42
src/lib/components/Output/Print/MainSystems/Movable.svelte
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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']
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user