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

add layouts

Browse Source
This commit is contained in:
Yanick Champoux 2023-04-14 12:56:39 -04:00
parent ce991a54dc
commit 9019f3d3e6
6 changed files with 98 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/lib/components/MainLayout.svelte Normal file
View File

@ -0,0 +1,28 @@
<header>
<nav>
<h1>
<a>The Docks</a>
</h1>
<h3 class="max">a Full Thrust ship builder</h3>
<a>About</a>
<span>&nbsp;</span>
</nav>
</header>
<main class="responsive">
<slot />
</main>
<script>
import "$lib/style/index.js";
</script>
<style>
header nav {
align-items: baseline;
font-family: "Faktos";
}
h3 {
font-size: var(--font-scale-12);
font-weight: normal;
}
</style>

12
src/routes/+layout.svelte Normal file
View File

@ -0,0 +1,12 @@
<Layout>
<slot />
</Layout>
<script>
import { setContext } from "svelte";
import { createApi } from "$lib/store/api.ts";
import Layout from "$lib/components/MainLayout.svelte";
setContext("api", createApi());
</script>

13
src/routes/+page.svelte
View File

@ -1,12 +1 @@
<App />
<script>
import { setContext } from "svelte";
import "$lib/style/index.js";
import shipStore from "$lib/store/ship.js";
import App from "$lib/components/App.svelte";
setContext("ship", shipStore());
</script>
TODO

23
src/routes/about/+layout.svelte Normal file
View File

@ -0,0 +1,23 @@
<nav class="m l left">
<a>
<i>Question_Mark</i>
<span>About</span>
</a>
<!-- TODO
<a>
<i>Quiz</i>
<span>See also</span>
</a>
<a>
<i>Format_List_Bulleted</i>
<span>Changelog</span>
</a>
-->
</nav>
<slot />
<style>
nav {
margin-top: 70px;
}
</style>

93
src/routes/about/+page.svelte
View File

@ -1,82 +1,39 @@
<header>
<nav>
<h1>
<a>The Docks</a>
</h1>
<h3 class="max">a Full Thrust ship builder</h3>
<a>About</a>
<span>&nbsp;</span>
</nav>
</header>
<main class="responsive">
<nav class="m l left">
<a>
<i>Question_Mark</i>
<span>About</span>
</a>
<!-- TODO
<a>
<i>Quiz</i>
<span>See also</span>
</a>
<a>
<i>Format_List_Bulleted</i>
<span>Changelog</span>
</a>
-->
</nav>
<h2>Welcome to the docks!</h2>
<h2>Welcome to the docks!</h2>
<!-- TODO
<!-- TODO
<p class="version">
<span>version {import.meta.env.PACKAGE_VERSION}</span>
<a>changelog</a>
</p>
-->
<p>
The Docks is a ship builder for the game
<a href="https://shop.groundzerogames.co.uk/rules.html" class="helper"
>Full Thrust</a
>, with construction rules following the
<a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
Cross Dimensions rules
</a>
as closely as possible.
</p>
<p>
The Docks is a ship builder for the game
<a href="https://shop.groundzerogames.co.uk/rules.html" class="helper"
>Full Thrust</a
>, with construction rules following the
<a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
Cross Dimensions rules
</a>
as closely as possible.
</p>
<p>
The app is mostly developed for Firefox. I also check as much as I can that
I don't mess things too badly on Chrome. For the other browsers... caveat
emptor.
</p>
<p>
The app is mostly developed for Firefox. I also check as much as I can that I
don't mess things too badly on Chrome. For the other browsers... caveat
emptor.
</p>
<p>
Written by
<!-- TODO change link -->
<a href="https://techblog.babyl.ca">Yanick Champoux</a>
. Code available on
<!-- TODO read the url from package.json -->
<a href="https://github.com/aotds/aotds-shipyard">Github</a>.
</p>
</main>
<script>
import "$lib/style/index.js";
</script>
<p>
Written by
<!-- TODO change link -->
<a href="https://techblog.babyl.ca">Yanick Champoux</a>
. Code available on
<!-- TODO read the url from package.json -->
<a href="https://github.com/aotds/aotds-shipyard">Github</a>.
</p>
<style>
header nav {
align-items: baseline;
font-family: "Faktos";
}
main nav {
margin-top: 70px;
}
h3 {
font-size: var(--font-scale-12);
font-weight: normal;
}
h2 {
margin-bottom: 1.5rem;
}

9
src/routes/about/about.test.js Normal file
View File

@ -0,0 +1,9 @@
import { render, fireEvent, screen, getByText } from "@testing-library/svelte";
import "@testing-library/jest-dom";
import About from "./+page.svelte";
test("we have an about page", () => {
const { getByText } = render(About);
expect(getByText("Welcome to the docks!")).toBeInTheDocument();
});