aotds-docks/src/lib/components/Output/Print/index.svelte

79 lines
1.6 KiB
Svelte
Raw Normal View History

<div class="notice">
<label>
<input type="checkbox" bind:checked={movable} /> enable wiggletron (<i
>alpha feature</i
>)
</label>
</div>
2022-04-02 22:37:49 +00:00
2022-03-26 18:24:57 +00:00
<div class="print-output">
<Identification
shipClass={ship.identification.shipClass}
shipType={ship.identification.shipType}
cost={ship.reqs?.cost}
mass={ship.reqs?.mass}
/>
2022-03-26 15:47:10 +00:00
<div class="section-2">
<Hull structure={ship.structure} shipMass={ship.identification.mass} />
2020-07-29 20:09:05 +00:00
<Systems
firecons={ship.weaponry.firecons.nbr}
screens={ship.structure.screens}
/>
</div>
2020-07-29 21:08:52 +00:00
<Weapons weapons={ship.weaponry.weapons} />
2020-07-29 23:17:25 +00:00
<MainSystems
{movable}
ftl={ship?.propulsion?.ftl}
engine={ship?.propulsion?.drive?.rating}
/>
2022-03-26 18:24:57 +00:00
</div>
2020-07-29 18:05:55 +00:00
<div class="notice">Printing this page will only prints the ship sheet.</div>
2022-04-02 22:37:49 +00:00
2020-07-29 18:05:55 +00:00
<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";
2020-07-29 23:17:25 +00:00
export let ship = {};
let movable = false;
2020-07-29 18:05:55 +00:00
</script>
<style>
.print-output {
width: 4.25in;
height: 5.5in;
border: 1px solid black;
padding: 1em;
margin: 0px auto;
}
2022-04-02 22:37:49 +00:00
.section-2 {
display: flex;
align-items: start;
margin-right: 2em;
margin-left: 2em;
}
.notice {
font-style: italic;
margin-top: 1em;
text-align: right;
}
2022-04-02 22:37:49 +00:00
@media print {
:global(body > *) {
visibility: hidden;
}
2022-04-02 22:37:49 +00:00
.print-output {
visibility: visible;
2022-04-02 22:37:49 +00:00
}
}
2020-07-29 18:05:55 +00:00
</style>