aotds/aotds-docks
1
0
Fork 0
Code Issues 28 Pull Requests Projects 2 Releases Wiki Activity

print component

Browse Source
This commit is contained in:
Yanick Champoux 2022-03-22 17:38:54 -04:00
parent 00a08fce3b
commit e95e1233ab
3 changed files with 54 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/App.svelte
View File

@ -9,6 +9,9 @@
<div class:hide={activeTab !== 'json'}> <div class:hide={activeTab !== 'json'}>
<JsonOutput /> <JsonOutput />
</div> </div>
<div class:hide={activeTab !== 'print'}>
<PrintOutput />
</div>
</main> </main>
@ -20,6 +23,7 @@
import ShipEdit from "./ShipEdit/index.svelte"; import ShipEdit from "./ShipEdit/index.svelte";
import About from "./About.svelte"; import About from "./About.svelte";
import JsonOutput from './Output/Json.svelte'; import JsonOutput from './Output/Json.svelte';
import PrintOutput from './Output/Print/index.svelte';
let activeTab = 'editor'; let activeTab = 'editor';
$: console.log(activeTab); $: console.log(activeTab);

70
src/lib/components/Output/Print/Identification/index.svelte
View File

@ -1,47 +1,47 @@
<h1> <h1>
ship name: <div class="fill" /> ship name: <div class="fill" />
</h1> </h1>
<div class="details"> <div class="details">
<h2>{ship_class}-class, {ship_type}</h2> <h2>{shipClass}-class, {shipType}</h2>
<div class="reqs"> <div class="reqs">
<Cost {cost} /> <Cost {cost} />
&nbsp; &nbsp;
<Mass {mass} /> <Mass {mass} />
</div> </div>
</div> </div>
<script> <script>
import Cost from "../../../Cost.svelte"; import Cost from "../../../Cost.svelte";
import Mass from "$lib/components/Mass.svelte"; import Mass from "$lib/components/Mass.svelte";
export let ship_class; export let shipClass;
export let ship_type; export let shipType;
export let cost, export let cost,
mass = (0, 0); mass = (0, 0);
</script> </script>
<style> <style>
h1 { h1 {
width: 100%; width: 100%;
display: flex; display: flex;
font-size: var(--font-scale-8); font-size: var(--font-scale-8);
} }
h2 { h2 {
font-size: var(--font-scale-7); font-size: var(--font-scale-7);
flex: 1; flex: 1;
} }
.fill { .fill {
margin-left: 0.5em; margin-left: 0.5em;
display: inline-block; display: inline-block;
flex: 1; flex: 1;
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
.details { .details {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
} }
.reqs { .reqs {
display: flex; display: flex;
} }
</style> </style>

22
src/lib/components/Output/Print/index.svelte
View File

@ -1,3 +1,7 @@
<div>
<Identification {...$state.identification} />
</div>
<!--
<aside class="ship-sheet" transition:fade> <aside class="ship-sheet" transition:fade>
<Identification {...ship.general} /> <Identification {...ship.general} />
@ -12,21 +16,25 @@
/> />
</div> </div>
<MainSystems ftl={ship.ftl.type} engine={ship.engine.rating} />
</aside> </aside>
-->
<MainSystems ftl={$state?.propulsion?.ftl}
engine={$state?.propulsion?.drive?.rating} />
<script> <script>
import _ from "lodash"; import { getContext } from 'svelte';
/* import _ from "lodash"; */
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; */
const { state } = getContext('ship');
import { fly, fade } from "svelte/transition"; /* import { fly, fade } from "svelte/transition"; */
</script> </script>
<style> <style>