tidy up the layour

This commit is contained in:
Yanick Champoux 2020-07-29 19:17:25 -04:00
parent 4197f5f2a6
commit 8c08c168c9
13 changed files with 324 additions and 41 deletions

65
public/icons/firecon.svg Normal file
View File

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 409 409"
enable-background="new 0 0 960 560"
xml:space="preserve"
sodipodi:docname="firecon.svg"
width="409"
height="409"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
id="metadata116"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs114" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="778"
inkscape:window-height="481"
id="namedview112"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.36770833"
inkscape:cx="205"
inkscape:cy="205"
inkscape:window-x="0"
inkscape:window-y="34"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" />
<rect
x="12.5"
y="12.5"
stroke-miterlimit="10"
width="384"
height="384"
id="rect107"
style="fill:none;stroke:#000000;stroke-width:25;stroke-miterlimit:10" />
<circle
stroke-miterlimit="10"
cx="205"
cy="204"
r="121.6"
id="circle109"
style="stroke:#000000;stroke-width:22.25449944;stroke-miterlimit:10" />
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 457.3924 458.52048"
enable-background="new 0 0 960 560"
xml:space="preserve"
sodipodi:docname="screen-advanced.svg"
width="457.3924"
height="458.52048"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
id="metadata247"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs245" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="778"
inkscape:window-height="481"
id="namedview243"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.36770833"
inkscape:cx="228.69619"
inkscape:cy="224.72809"
inkscape:window-x="0"
inkscape:window-y="34"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" />
<g
id="g240"
transform="translate(-251.30381,-46.207612)">
<rect
x="387.29999"
y="280.79999"
transform="matrix(0.7071,0.7071,-0.7071,0.7071,404.6839,-230.0195)"
width="185.5"
height="185.5"
id="rect234" />
<polyline
stroke-miterlimit="10"
points="654.3,330.5 480,156.2 305.7,330.5 "
id="polyline236"
style="fill:none;stroke:#000000;stroke-width:13;stroke-miterlimit:10" />
<polyline
stroke-miterlimit="10"
points="704.1,279.5 480,55.4 255.9,279.5 "
id="polyline238"
style="fill:none;stroke:#000000;stroke-width:13;stroke-miterlimit:10" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

71
public/icons/screen.svg Normal file
View File

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 396.50296 456.80048"
enable-background="new 0 0 960 560"
xml:space="preserve"
sodipodi:docname="screen.svg"
width="396.50296"
height="456.80048"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
id="metadata171"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs169" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="778"
inkscape:window-height="481"
id="namedview167"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.36770833"
inkscape:cx="198.30113"
inkscape:cy="218.59999"
inkscape:window-x="0"
inkscape:window-y="34"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" />
<g
id="g164"
transform="translate(-281.69887,-41.799529)">
<circle
cx="480"
cy="366.79999"
r="131.8"
id="circle158" />
<path
stroke-miterlimit="10"
d="m 348.2,193.3 c 0,0 130,-67.9 263.6,0"
id="path160"
inkscape:connector-curvature="0"
style="fill:none;stroke:#000000;stroke-width:39.33679962;stroke-miterlimit:10" />
<path
stroke-miterlimit="10"
d="m 290.8,104.7 c 0,0 186.6,-97.4 378.5,0"
id="path162"
inkscape:connector-curvature="0"
style="fill:none;stroke:#000000;stroke-width:39.33679962;stroke-miterlimit:10" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<rect x="287.5" y="88.5" fill="none" stroke="#000000" stroke-width="25" stroke-miterlimit="10" width="384" height="384"/>
<circle stroke="#000000" stroke-width="22.2545" stroke-miterlimit="10" cx="480" cy="280" r="121.6"/>
</svg>

Before

Width:  |  Height:  |  Size: 679 B

View File

@ -1,11 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<g>
<rect x="387.3" y="280.8" transform="matrix(0.7071 0.7071 -0.7071 0.7071 404.6839 -230.0195)" width="185.5" height="185.5"/>
<polyline fill="none" stroke="#000000" stroke-width="13" stroke-miterlimit="10" points="654.3,330.5 480,156.2 305.7,330.5 "/>
<polyline fill="none" stroke="#000000" stroke-width="13" stroke-miterlimit="10" points="704.1,279.5 480,55.4 255.9,279.5 "/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 849 B

View File

@ -1,11 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<g>
<circle cx="480" cy="366.8" r="131.8"/>
<path fill="none" stroke="#000000" stroke-width="39.3368" stroke-miterlimit="10" d="M348.2,193.3c0,0,130-67.9,263.6,0"/>
<path fill="none" stroke="#000000" stroke-width="39.3368" stroke-miterlimit="10" d="M290.8,104.7c0,0,186.6-97.4,378.5,0"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 755 B

View File

@ -0,0 +1,16 @@
<div>
<Armour armour={structure.armour} />
<Integrity
rating={structure.hull.rating}
advanced={structure.hull.advanced}
{ship_mass}
/>
</div>
<script>
import Integrity from './Integrity';
import Armour from './Armour';
export let structure = {};
export let ship_mass = 0;
</script>

View File

@ -0,0 +1,19 @@
<div>
{#each _.range(firecons) as firecon }
<img class="firecon" src="icons/firecon.svg" alt="firecon" />
{/each}
</div>
<script>
export let firecons = 0;
</script>
<style>
div {
display: flex;
gap: 0.5em;
}
img.firecon {
width: 1em;
}
</style>

View File

@ -0,0 +1,26 @@
<div>
{#each _.range(standard) as i }
<img src="icons/screen.svg" alt="screen" />
{/each}
{#each _.range(advanced) as i }
<img src="icons/screen-advanced.svg" alt="advanced screen" />
{/each}
</div>
<script>
import _ from 'lodash';
export let standard = 0;
export let advanced = 0;
</script>
<style>
img {
width: 1em;
}
div {
display: flex;
gap: 0.5em;
}
</style>

View File

@ -0,0 +1,28 @@
<div>
<Firecons {firecons}/>
<Screens {...screens} />
</div>
<script>
import Firecons from './Firecons';
import Screens from './Screens';
export let firecons = 0;
export let screens = {};
</script>
<style>
div {
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
div > :global(*) {
margin-bottom: 1em;
}
</style>

View File

@ -19,4 +19,7 @@
</script>
<style>
div {
margin-bottom: 2em;
}
</style>

View File

@ -1,14 +1,17 @@
<div>
<div class="ship-sheet">
<Identification {...ship.general} />
<Weapons weapons={ship.weaponry.weapons} />
<Armour armour={ship.structure.armour} />
<Integrity
rating={ship.structure.hull.rating}
advanced={ship.structure.hull.advanced}
ship_mass={ship.general.mass}
<div class="section-2">
<Hull structure={ship.structure}
ship_mass={ship.general.mass} />
<Systems
firecons={ship.weaponry.firecons.nbr}
screens={ship.structure.screens}
/>
</div>
<MainSystems
ftl={ship.ftl.type}
@ -18,20 +21,31 @@
</div>
<script>
import _ from 'lodash';
import Identification from './Identification';
import Integrity from './Hull/Integrity';
import Armour from './Hull/Armour';
import MainSystems from './MainSystems';
import Hull from './Hull';
import Weapons from './Weapons';
import Systems from './Systems';
export let ship;
</script>
<style>
div {
.ship-sheet {
width: 4.25in;
height: 5.5in;
border: 1px solid black;
padding: 1em;
}
.section-2 {
display: flex;
align-items: start;
}
</style>

View File

@ -69,8 +69,8 @@ export default {
"mass": 22
},
"screens": {
"standard": 5,
"advanced": 0,
"standard": 2,
"advanced": 1,
"cost": 105,
"mass": 35
},