Merge branch 'docks58-print-layout'

This commit is contained in:
Yanick Champoux 2023-05-08 15:23:02 -04:00
commit 11cb2be3bd
12 changed files with 105 additions and 22 deletions

2
NOTES
View File

@ -1,2 +1,4 @@
vertical rythm: 16px = 1rem
24px = 1.5rem <== ?
size of icons in the print version: 1.4rem ( == 20.4px)

View File

@ -20,8 +20,8 @@ tasks:
- vitest run -u src
check:
deps:
- histoire:build
# deps:
# - histoire:build
cmds:
- { task: test }
@ -51,6 +51,8 @@ tasks:
cmds:
- rsync -av build/ 192.168.0.100:/home/docks
open: firefox https://docks.babyl.ca
release:
cmds:
- standard-version -a

View File

@ -1,6 +1,10 @@
@import "/fonts/faktos.css";
@import "/fonts/dosis/dosis.css";
@page {
size: 5.5in 8.5in;
}
@font-face {
font-family: "Faktos";
font-style: normal;
@ -78,3 +82,10 @@ h3 {
h4 {
font-size: var(--font-scale-12);
}
@media only print {
i {
font-family: var(--font-icon);
font-size: 16pt;
}
}

View File

@ -16,10 +16,10 @@
.cell {
display: inline-block;
margin-right: 0.5em;
width: 1em;
height: 1em;
width: 1.4rem;
height: 1.4rem;
border: 1px solid black;
border-radius: 0.5em;
border-radius: 1rem;
}
.layers {
display: flex;

View File

@ -14,6 +14,7 @@
gap: 0.5em;
}
img.firecon {
width: 1em;
width: 1.4rem;
margin: 0px 0.5rem;
}
</style>

View File

@ -55,13 +55,13 @@
}
.cell {
display: inline-block;
margin-right: 0.5em;
width: 1.5em;
height: 1.5em;
margin-right: 0.5rem;
width: 1.4rem;
height: 1.4rem;
border: 1px solid black;
}
img {
width: 1em;
margin-left: 0.2em;
width: 1.2rem;
margin-left: 0.1rem;
}
</style>

View File

@ -1,7 +1,3 @@
<h1>
ship name: <div class="fill" />
</h1>
<div class="details">
<h2>
{#if shipClass}
@ -14,6 +10,10 @@
</div>
</div>
<h1>
ship name: <div class="fill" />
</h1>
<script>
export let shipClass;
export let shipType;
@ -26,6 +26,7 @@
display: flex;
font-size: var(--font-scale-8);
align-items: baseline;
margin-bottom: 2em;
}
h2 {
font-size: var(--font-scale-7);
@ -45,4 +46,8 @@
display: flex;
align-items: center;
}
.details,
.details :global(*) {
font-size: var(--font-scale-9);
}
</style>

View File

@ -29,6 +29,6 @@
margin-top: 1em;
}
img {
height: 2em;
height: 2.4rem;
}
</style>

View File

@ -14,7 +14,8 @@
<style>
img {
width: 1em;
width: 1.2rem;
margin: 0px 0.5rem;
}
div {
display: flex;

View File

@ -0,0 +1,29 @@
<div>
{#each classes as c (c)}
<div class="beam-row">
{#each byClass[`${c}`] as w}
<Beam {...w.specs} />
{/each}
</div>
{/each}
</div>
<script>
import * as R from "remeda";
import Beam from "./Beam.svelte";
export let beams = [];
$: byClass = R.groupBy(beams, (b) => b.specs.weaponClass);
$: classes = R.uniq(beams.map((b) => b.specs.weaponClass)).sort((a, b) =>
a < b ? 1 : -1
);
</script>
<style>
.beam-row {
display: flex;
justify-content: center;
}
</style>

View File

@ -2,6 +2,7 @@
<style>
img {
height: 2em;
height: 1.4rem;
margin: 0px 0.5rem;
}
</style>

View File

@ -1,8 +1,12 @@
<div>Printing this page will only prints the ship sheet.</div>
<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">
@ -16,8 +20,14 @@
</div>
<div class="s6">
<Screens {...screens} />
<div>
{#each pds as p (p.id)}
<PDS {...pds} />
{/each}
</div>
<Firecons {...firecons} />
<Screens {...screens} />
</div>
</div>
@ -27,6 +37,8 @@
</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";
@ -35,6 +47,8 @@
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 = {};
@ -46,12 +60,23 @@
$: 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: 4.25in;
height: 5.5in;
width: 5.5in;
height: 8.5in;
border: 1px solid black;
padding: 1em;
margin: 0px auto;
@ -63,6 +88,8 @@
.print-output {
visibility: visible;
width: inherit;
height: inherit;
}
}
.s6 {
@ -74,4 +101,8 @@
.s6 :global(> div) {
margin-bottom: 1em;
}
.disclaimer {
text-align: center;
margin-bottom: 1rem;
}
</style>