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

Merge branch 'gh15-reset-button'

Browse Source
This commit is contained in:
Yanick Champoux 2022-04-17 12:29:29 -04:00
commit 156330c990
7 changed files with 140 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -18,6 +18,8 @@
"@sveltejs/adapter-static": "^1.0.0-next.28", "@sveltejs/adapter-static": "^1.0.0-next.28",
"@sveltejs/kit": "^1.0.0-next.288", "@sveltejs/kit": "^1.0.0-next.288",
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.38", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.38",
"@testing-library/svelte": "^3.1.1",
"@testing-library/user-event": "^13.5.0",
"eslint": "^8.10.0", "eslint": "^8.10.0",
"eslint-config-prettier": "^8.4.0", "eslint-config-prettier": "^8.4.0",
"eslint-plugin-svelte3": "^3.4.1", "eslint-plugin-svelte3": "^3.4.1",
@ -25,7 +27,9 @@
"prettier-plugin-svelte": "^2.6.0", "prettier-plugin-svelte": "^2.6.0",
"standard-version": "^9.3.2", "standard-version": "^9.3.2",
"storybook-builder-vite": "0.1.21", "storybook-builder-vite": "0.1.21",
"svelte": "^3.46.4" "svelte": "^3.46.4",
"vitest": "^0.9.3",
"vitest-svelte-kit": "^0.0.6"
}, },
"dependencies": { "dependencies": {
"@storybook/addon-essentials": "^6.4.19", "@storybook/addon-essentials": "^6.4.19",

69
src/lib/components/App.svelte
View File

@ -1,54 +1,51 @@
<svelte:head> <svelte:head>
<meta name="viewport" content="width=960" /> <meta name="viewport" content="width=960" />
</svelte:head> </svelte:head>
<main> <main>
<Ribbon />
<Header on:changeTab={({ detail }) => (activeTab = detail)} />
<Ribbon /> <div class:hide={activeTab !== "editor"}>
<Header on:changeTab={({ detail }) => activeTab = detail}/>
<div class:hide={activeTab !== 'editor'}>
<ShipEdit /> <ShipEdit />
</div> </div>
<div class:hide={activeTab !== 'json'}> <div class:hide={activeTab !== "json"}>
<JsonOutput /> <JsonOutput />
</div> </div>
{#if activeTab === 'print'}
<PrintOutput ship={$state}/>
{/if}
{#if activeTab === "print"}
<PrintOutput ship={$state} />
{/if}
</main> </main>
<script> <script>
import { getContext } from 'svelte'; import { getContext } from "svelte";
import { Modal, Card, Nav } from "svelte-chota"; import { Modal, Card, Nav } from "svelte-chota";
import Ribbon from "./Ribbon.svelte"; import Ribbon from "./Ribbon.svelte";
import Header from "./Header.svelte"; import Header from "./Header.svelte";
import ShipEdit from "./ShipEdit/index.svelte"; import ShipEdit from "./ShipEdit/index.svelte";
import About from "./About.svelte"; import About from "./About.svelte";
import JsonOutput from './Output/Json.svelte'; import JsonOutput from "./Output/Json.svelte";
import PrintOutput from './Output/Print/index.svelte'; import PrintOutput from "./Output/Print/index.svelte";
let activeTab = 'editor'; let activeTab = "editor";
$: console.log(activeTab);
const {state} = getContext('ship'); const { state } = getContext("ship");
</script> </script>
<style> <style>
.nav { .nav {
width: var(--main-width); width: var(--main-width);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.hide { .hide {
display: none; display: none;
} }
main { main {
width: var(--main-width); width: var(--main-width);
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
</style> </style>

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>

10
src/lib/components/Header.test.js Normal file
View File

@ -0,0 +1,10 @@
import { test, expect } from "vitest";
import { render } from "@testing-library/svelte";
import App from "./Header.svelte";
test("reset ship link is present", () => {
const { queryByText } = render(App);
expect(queryByText("reset ship")).toBeTruthy();
});

3
src/lib/shipDux/index.js
View File

@ -25,6 +25,7 @@ const dux = new Updux({
setShipReqs: null, setShipReqs: null,
setUITransform: null, setUITransform: null,
resetLayout: null, resetLayout: null,
resetShip: null,
}, },
}); });
@ -37,6 +38,8 @@ function resetUITransform(thing) {
); );
} }
dux.setMutation("resetShip", () => () => dux.initial);
dux.setMutation("resetLayout", () => resetUITransform); dux.setMutation("resetLayout", () => resetUITransform);
dux.setMutation("setShipMass", (mass) => u({ reqs: { mass } })); dux.setMutation("setShipMass", (mass) => u({ reqs: { mass } }));

6
src/lib/shipDux/propulsion/drive.js
View File

@ -7,7 +7,7 @@ import reqs from "../reqs.js";
const dux = new Updux({ const dux = new Updux({
subduxes: { reqs }, subduxes: { reqs },
initial: { initial: {
rating: 1, rating: 0,
advanced: false, advanced: false,
}, },
actions: { actions: {
@ -20,7 +20,7 @@ dux.setMutation("setDrive", (changes) => u(changes));
dux.setMutation("setDriveReqs", (reqs) => u({ reqs })); dux.setMutation("setDriveReqs", (reqs) => u({ reqs }));
// needs to be at the top level // needs to be at the top level
export const calculateDriveReqs = store => export const calculateDriveReqs = (store) =>
createSelector( createSelector(
[ [
(ship) => ship.reqs.mass, (ship) => ship.reqs.mass,
@ -29,7 +29,7 @@ export const calculateDriveReqs = store =>
], ],
(ship_mass, rating, advanced) => (ship_mass, rating, advanced) =>
store.dispatch.setDriveReqs(calcDriveReqs(ship_mass, rating, advanced)) store.dispatch.setDriveReqs(calcDriveReqs(ship_mass, rating, advanced))
); );
export function calcDriveReqs(shipMass, rating, advanced = false) { export function calcDriveReqs(shipMass, rating, advanced = false) {
const mass = Math.ceil(rating * 0.05 * shipMass); const mass = Math.ceil(rating * 0.05 * shipMass);

9
vitest.config.js Normal file
View File

@ -0,0 +1,9 @@
import { extractFromSvelteConfig } from "vitest-svelte-kit";
export default extractFromSvelteConfig().then((config) => ({
...config,
test: {
globals: true,
environment: "jsdom",
},
}));