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

Merge branch 'main' into pages

Browse Source
This commit is contained in:
Yanick Champoux 2022-04-17 17:57:27 -04:00
commit 57411a5465
16 changed files with 311 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -12,3 +12,4 @@ package-lock.json
.temp .temp
node_modules/ node_modules/
dist/yarn-error.log dist/yarn-error.log
.task/

3
.versionrc.json
View File

@ -1,4 +1,7 @@
{ {
"scripts": {
"postchangelog": "gotask changelog"
},
"types": [ "types": [
{ "type": "feat", "section": "Features" }, { "type": "feat", "section": "Features" },
{ "type": "fix", "section": "Bug Fixes" }, { "type": "fix", "section": "Bug Fixes" },

21
CHANGELOG.md
View File

@ -2,20 +2,29 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
## [2.2.0](///compare/v2.1.0...v2.2.0) (2022-04-11) ## 2.3.0 (2022-04-17)
### Features ### Features
* allow to edit the print layout 381d497 * add 'reset ship' button
* add changelog to app
* add version to About component
## [2.1.0](///compare/v2.0.0...v2.1.0) (2022-04-07) ## 2.2.0 (2022-04-11)
### Features ### Features
* add localStorage memory bf7206a * allow to edit the print layout
* can move main system comps in the print output b425f4a
## 2.1.0 (2022-04-07)
* add standard-version 2fd047f ### Features
* add localStorage memory
* can move main system comps in the print output
* add standard-version

22
Taskfile.yml Normal file
View File

@ -0,0 +1,22 @@
# https://taskfile.dev
version: "3"
vars:
GREETING: Hello, World!
tasks:
release:
cmds:
- standard-version -a
changelog:
sources: [CHANGELOG.md]
generates: [src/lib/components/Changelog.svelte]
cmds:
- pnpx showdown makehtml -i CHANGELOG.md -o src/lib/components/Changelog.svelte
- git add src/lib/components/Changelog.svelte
default:
cmds:
- echo "{{.GREETING}}"
silent: true

9
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "aotds-docks", "name": "aotds-docks",
"version": "2.2.0", "version": "2.3.0",
"type": "module", "type": "module",
"private": true, "private": true,
"scripts": { "scripts": {
@ -18,14 +18,19 @@
"@sveltejs/adapter-static": "^1.0.0-next.29", "@sveltejs/adapter-static": "^1.0.0-next.29",
"@sveltejs/kit": "^1.0.0-next.304", "@sveltejs/kit": "^1.0.0-next.304",
"@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",
"prettier": "~2.5.1", "prettier": "~2.5.1",
"prettier-plugin-svelte": "^2.6.0", "prettier-plugin-svelte": "^2.6.0",
"showdown": "^2.0.3",
"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",

131
src/lib/components/About.svelte
View File

@ -1,71 +1,92 @@
<Card> {#if showChangelog}
<h2 slot="header">Welcome to the docks</h2> <Card>
<h2 slot="header">Changelog for the Docks</h2>
<div class="changelog">
<Changelog />
</div>
</Card>
{:else}
<Card>
<div slot="header" class="header">
<h2>Welcome to the docks</h2>
<p> <div class="version">
This app is a ship builder for the game <div>version {import.meta.env.PACKAGE_VERSION}</div>
<a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> <a on:click={() => (showChangelog = true)}>changelog</a>
. </div>
</p> </div>
<p> <p>
The contruction rules are following the This app is a ship builder for the game
<a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/"> <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a>
Cross Dimensions rules .
</a> </p>
as closely as possible.
</p>
<p> <p>
The app is mostly developed for Firefox. I also check as much as I can that The contruction rules are following the
I don't mess things too badly on Chrome. For the other browsers... caveat <a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
emptor. Cross Dimensions rules
</p> </a>
as closely as possible.
</p>
<p> <p>
Written by The app is mostly developed for Firefox. I also check as much as I can
<a href="https://twitter.com/yenzie">Yanick Champoux</a> that I don't mess things too badly on Chrome. For the other browsers...
. Code available on caveat emptor.
<a href="https://github.com/aotds/aotds-shipyard">Github</a> </p>
</p>
<div slot="footer" /> <p>
</Card> Written by
<a href="https://twitter.com/yenzie">Yanick Champoux</a>
. Code available on
<a href="https://github.com/aotds/aotds-shipyard">Github</a>.
</p>
</Card>
{/if}
<script> <script>
import { import { Modal, Card } from "svelte-chota";
Modal, Card import Changelog from "./Changelog.svelte";
} from 'svelte-chota';
let showChangelog = false;
</script> </script>
<style> <style>
h2 { h2 {
margin-bottom: 1em;
font-size: var(--font-scale-14); font-size: var(--font-scale-14);
font-family: Faktos; font-family: Faktos;
} margin-bottom: 0px;
aside { }
background-color: rgb(254, 218, 184); .header {
position: absolute; margin-bottom: 1em;
height: 20em; display: flex;
max-width: 50%; align-items: center;
z-index: 200;
padding: 1em;
border: 3px solid var(--indigo-dye);
border-radius: 1em;
left: 0px;
border-left: 0px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
top: 6em;
font-size: var(--font-scale-11);
} }
h3 { p {
text-align: center;
margin: 0px;
}
p {
margin-left: 2em; margin-left: 2em;
} }
.version {
flex: 1;
text-align: right;
}
.changelog :global(h1),
:global(h1 + p) {
display: none;
}
.changelog :global(h2) {
font-size: var(--font-scale-12);
font-family: Faktos;
}
.changelog :global(h3) {
font-size: var(--font-scale-12);
font-family: Faktos;
}
.version a {
display: inline-block;
}
</style> </style>

11
src/lib/components/About.test.js Normal file
View File

@ -0,0 +1,11 @@
import { test, expect } from "vitest";
import { render } from "@testing-library/svelte";
import About from "./About.svelte";
test("version is present", () => {
import.meta.env.PACKAGE_VERSION = '1.2.3';
const { queryByText } = render(About);
expect(queryByText(/version 1.2.3/)).toBeTruthy();
});

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>

15
src/lib/components/Changelog.stories.svelte Normal file
View File

@ -0,0 +1,15 @@
<Meta title="Changelog" component={Changelog} argTypes={{}} />
<Story name="Primary" args={{}} />
<Template let:args>
<div style="width: 50em">
<Changelog />
</div>
</Template>
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Changelog from "./Changelog.svelte";
</script>

21
src/lib/components/Changelog.svelte Normal file
View File

@ -0,0 +1,21 @@
<h1 id="changelog">Changelog</h1>
<p>All notable changes to this project will be documented in this file. See <a href="https://github.com/conventional-changelog/standard-version">standard-version</a> for commit guidelines.</p>
<h2 id="23020220417">2.3.0 (2022-04-17)</h2>
<h3 id="features">Features</h3>
<ul>
<li>add 'reset ship' button </li>
<li>add changelog to app </li>
<li>add version to About component </li>
</ul>
<h2 id="22020220411">2.2.0 (2022-04-11)</h2>
<h3 id="features-1">Features</h3>
<ul>
<li>allow to edit the print layout </li>
</ul>
<h2 id="21020220407">2.1.0 (2022-04-07)</h2>
<h3 id="features-2">Features</h3>
<ul>
<li><p>add localStorage memory </p></li>
<li><p>can move main system comps in the print output </p></li>
<li><p>add standard-version </p></li>
</ul>

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);

5
svelte.config.js
View File

@ -8,6 +8,11 @@ export default {
adapter: adapter({ fallback: "index.html" }), adapter: adapter({ fallback: "index.html" }),
paths: { base: dev ? "" : "/aotds-docks" }, paths: { base: dev ? "" : "/aotds-docks" },
vite: { vite: {
define: {
"import.meta.env.PACKAGE_VERSION": JSON.stringify(
process.env.npm_package_version
),
},
build: { build: {
rollupOptions: { rollupOptions: {
plugins: [analyze()], plugins: [analyze()],

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",
},
}));