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

add 'reset ship' link

Browse Source
This commit is contained in:
Yanick Champoux 2022-04-17 12:28:36 -04:00
parent 255b296012
commit ea3d36292c
1 changed files with 77 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/lib/components/Header.svelte
View File

@ -1,76 +1,94 @@
<header> <header>
<h1>The Docks</h1> <h1>The Docks</h1>
<h2> <h2>
a <a href="https://shop.groundzerogames.co.uk/rules.html" a <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship
>Full Thrust</a builder
> ship builder </h2>
</h2> <a on:click|preventDefault={() => (showAbout = true)}>about the app</a>
<a on:click|preventDefault={() => (showAbout = true)}>about the app</a>
</header> </header>
<div> <div class="menu">
<Tabs bind:active={activeTab}> <Tabs bind:active={activeTab}>
<Tab tabid="editor">editor</Tab> <Tab tabid="editor">editor</Tab>
<Tab tabid="json">json view</Tab> <Tab tabid="json">json view</Tab>
<Tab tabid="print">print view</Tab> <Tab tabid="print">print view</Tab>
</Tabs> </Tabs>
<div class="actions">
<a on:click|preventDefault={resetShip}>reset ship</a>
</div>
</div> </div>
<Modal bind:open={showAbout}> <Modal bind:open={showAbout}>
<About /> <About />
</Modal> </Modal>
<script> <script>
import { createEventDispatcher } from 'svelte'; import { getContext, createEventDispatcher } from "svelte";
import { Modal, Card, Nav, Tab, Tabs } from "svelte-chota"; import { Modal, Card, Nav, Tab, Tabs } from "svelte-chota";
import About from "./About.svelte"; import About from "./About.svelte";
let showAbout = false; let showAbout = false;
let activeTab = 'editor'; let activeTab = "editor";
const dispatch = createEventDispatcher(); const ship = getContext("ship");
$: dispatch( 'changeTab', activeTab );
const dispatch = createEventDispatcher();
$: dispatch("changeTab", activeTab);
const resetShip = () => {
if (!window.confirm("you really want to reset the ship?")) return;
ship.dispatch.resetShip();
};
</script> </script>
<style> <style>
header { header {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
width: var(--main-width); width: var(--main-width);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 1em; margin-bottom: 1em;
} }
h1, h1,
h2 { h2 {
text-align: left; text-align: left;
font-family: Faktos; font-family: Faktos;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
h1 { h1 {
font-size: var(--font-scale-15); font-size: var(--font-scale-15);
} }
h2 { h2 {
flex: 1; flex: 1;
padding-left: 1em; padding-left: 1em;
font-size: var(--font-scale-13); font-size: var(--font-scale-13);
} }
header > a { header > a {
margin: 0px 2em; margin: 0px 2em;
font-size: var(--font-scale-10); font-size: var(--font-scale-10);
} }
div :global(nav) { div :global(nav) {
margin-left: 2em; margin-left: 2em;
margin-bottom: 2em; margin-bottom: 2em;
} }
div :global(nav span) { div :global(nav span) {
font-weight: bold; font-weight: bold;
font-family: var(--main-font-family); font-family: var(--main-font-family);
font-size: var(--font-scale-12); font-size: var(--font-scale-12);
margin-right: 1em; margin-right: 1em;
padding-bottom: 0.125em !important; padding-bottom: 0.125em !important;
} }
.menu {
display: flex;
align-items: baseline;
}
.menu .actions {
flex: 1;
text-align: right;
}
</style> </style>