add 'reset ship' link

This commit is contained in:
Yanick Champoux 2022-04-17 12:28:36 -04:00
parent 255b296012
commit ea3d36292c

View File

@ -1,19 +1,22 @@
<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}>
@ -21,16 +24,23 @@
</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>
@ -73,4 +83,12 @@ $: dispatch( 'changeTab', activeTab );
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>