aotds-docks/src/routes/(editor)/export/print/PrintShip/index.svelte

109 lines
2.3 KiB
Svelte

<div class="disclaimer">
Printing this page will only prints the ship sheet.
</div>
<div class="print-output">
<Identification {...identification} />
<Beams {beams} />
<Weapons {weapons} />
<div class="grid">
<div class="s6">
<Armor layers={structure?.armor?.layers} />
<Hull
shipMass={identification.reqs?.mass}
advanced={false}
rating={structure.hull?.rating}
/>
</div>
<div class="s6">
<div>
{#each pds as p (p.id)}
<PDS {...pds} />
{/each}
</div>
<Firecons {...firecons} />
<Screens {...screens} />
</div>
</div>
<MainSystems {...propulsion} />
<Cargo {...cargo} />
</div>
<script>
import u from "@yanick/updeep-remeda";
import Identification from "./Identification.svelte";
import MainSystems from "./MainSystems/index.svelte";
import Hull from "./Hull/index.svelte";
import Armor from "./Armor/index.svelte";
import Screens from "./Screens/index.svelte";
import Firecons from "./Firecons/index.svelte";
import Weapons from "./Weapons/index.svelte";
import Cargo from "./Cargo.svelte";
import PDS from "./Weapons/PDS.svelte";
import Beams from "./Weapons/Beams.svelte";
export let identification = {};
export let propulsion = {};
export let structure = {};
export let weaponry = {};
$: cargo = structure.cargo ?? {};
$: screens = structure?.screens ?? {};
$: firecons = weaponry?.firecons ?? {};
$: weapons = weaponry?.weapons ?? [];
$: weapons = u.reject(
weapons,
u.matches({ specs: { type: (t) => ["pds", "beam"].includes(t) } })
);
$: pds = (weaponry?.weapons ?? []).filter(
u.matches({ specs: { type: "pds" } })
);
$: beams = (weaponry?.weapons ?? []).filter(
u.matches({ specs: { type: "beam" } })
);
</script>
<style>
.print-output {
width: 5.5in;
height: 8.5in;
border: 1px solid black;
padding: 1em;
margin: 0px auto;
}
@media print {
:global(body > *) {
visibility: hidden;
}
.print-output {
visibility: visible;
width: inherit;
height: inherit;
}
}
.s6 {
display: flex;
flex-direction: column;
align-items: center;
}
.s6 :global(> div) {
margin-bottom: 1em;
}
.disclaimer {
text-align: center;
margin-bottom: 1rem;
}
</style>