xerbalind/planetwars.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages 1 Wiki Activity

add toc sidebar to docs site

Browse source
This commit is contained in:
Ilion Beyst 2022-09-12 21:55:16 +02:00
parent 66162ea43c
commit 7f1b6c06b6
7 changed files with 141 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web/pw-server/src/lib/components/docs/TocEntry.svelte Normal file
View file

@ -0,0 +1,21 @@
<script lang="ts">
export let href: string;
export let text: string;
</script>
<div class="toc-entry">
<a {href}>{text}</a>
</div>
<style scoped lang="scss">
@use "src/styles/variables";
.toc-entry {
font-size: 16px;
padding: 4px;
}
.toc-entry a {
color: variables.$blue-primary;
}
</style>

60
web/pw-server/src/routes/docs/__layout.svelte Normal file
View file

@ -0,0 +1,60 @@
<script>
import TocEntry from "$lib/components/docs/TocEntry.svelte";
</script>
<div class="container">
<div class="sidebar">
<div class="sidebar-content">
<h2>Docs</h2>
<div class="sidebar-nav-group">
<TocEntry href="/docs/rules" text="Rules" />
</div>
</div>
</div>
<div class="content-container">
<div class="content">
<slot />
</div>
</div>
</div>
<style lang="scss">
@use "src/styles/variables";
.container {
display: flex;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
}
.sidebar {
width: 300px;
line-height: 20px;
border-right: 1px solid variables.$light-grey;
}
.sidebar-content {
padding: 32px 16px;
position: sticky;
align-self: flex-start;
top: 0px;
}
.sidebar-content h2 {
margin: 16px 0;
}
.sidebar-nav-group {
padding: 0 8px;
}
.content-container {
padding: 16px 0;
flex-grow: 1;
}
.content {
max-width: 75%;
margin: 0 auto;
}
</style>

3
web/pw-server/src/routes/docs/doc.svelte
View file

@ -4,7 +4,6 @@
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
width: 800px; max-width: 800px;
margin: 0 auto;
} }
</style> </style>

8
web/pw-server/src/routes/docs/index.svelte
View file

@ -1,8 +1,8 @@
<script context="module"> <script context="module">
export async function load() { export async function load() {
return { return {
status: 302, status: 302,
redirect: "/docs/rules" redirect: "/docs/rules",
} };
} }
</script> </script>

92
web/pw-server/src/routes/docs/rules.md
View file

@ -1,5 +1,5 @@
## How to play ## How to play
In every game turn, your bot will receive a json-encoded line on stdin, describing the current In every game turn, your bot will receive a json-encoded line on stdin, describing the current
state of the game. Each state will hold a set of planets, and a set of spaceship fleets state of the game. Each state will hold a set of planets, and a set of spaceship fleets
traveling between the planets (_expeditions_). traveling between the planets (_expeditions_).
@ -7,41 +7,41 @@ traveling between the planets (_expeditions_).
Example game state: Example game state:
```json ```json
{ {
"planets": [ "planets": [
{ {
"ship_count": 2, "ship_count": 2,
"x": -2.0, "x": -2.0,
"y": 0.0, "y": 0.0,
"owner": 1, "owner": 1,
"name": "your planet" "name": "your planet"
}, },
{ {
"ship_count": 4, "ship_count": 4,
"x": 2.0, "x": 2.0,
"y": 0.0, "y": 0.0,
"owner": 2, "owner": 2,
"name": "enemy planet" "name": "enemy planet"
}, },
{ {
"ship_count": 2, "ship_count": 2,
"x": 0.0, "x": 0.0,
"y": 2.0, "y": 2.0,
"owner": null, "owner": null,
"name": "neutral planet" "name": "neutral planet"
} }
], ],
"expeditions": [ "expeditions": [
{ {
"id": 169, "id": 169,
"ship_count": 8, "ship_count": 8,
"origin": "your planet", "origin": "your planet",
"destination": "enemy planet", "destination": "enemy planet",
"owner": 1, "owner": 1,
"turns_remaining": 2 "turns_remaining": 2
} }
] ]
} }
``` ```
The `owner` field holds a player number when the planet is held by a player, and is The `owner` field holds a player number when the planet is held by a player, and is
@ -53,16 +53,17 @@ Every turn, you may send out expeditions to conquer other planets. You can do th
a json-encoded line to stdout: a json-encoded line to stdout:
Example command: Example command:
```json ```json
{ {
"moves": [ "moves": [
{ {
"origin": "your planet", "origin": "your planet",
"destination": "enemy planet", "destination": "enemy planet",
"ship_count": 2 "ship_count": 2
} }
] ]
} }
``` ```
All players send out their commands simultaneously, so there is no turn order. You may send as All players send out their commands simultaneously, so there is no turn order. You may send as
@ -81,5 +82,6 @@ You can code your bot in python 3.10. You have the entire stdlib at your disposa
If you'd like additional libraries or a different programming language, feel free to nag the administrator. If you'd like additional libraries or a different programming language, feel free to nag the administrator.
### TL;DR ### TL;DR
Head over to the editor view to get started - a working example is provided. Head over to the editor view to get started - a working example is provided.
Feel free to just hit the play button to see how it works! Feel free to just hit the play button to see how it works!

6
web/pw-server/src/styles/buttons.scss
View file

@ -1,5 +1,7 @@
$btn-text-color: rgb(9, 105, 218); @use "./variables";
$btn-border-color: rgba(27, 31, 36, 0.25);
$btn-text-color: variables.$blue-primary;
$btn-border-color: variables.$light-grey;
.btn { .btn {
color: $btn-text-color; color: $btn-text-color;

2
web/pw-server/src/styles/variables.scss
View file

@ -1 +1,3 @@
$bg-color: rgb(41, 41, 41); $bg-color: rgb(41, 41, 41);
$light-grey: rgba(27, 31, 36, 0.25);
$blue-primary: rgb(9, 105, 218);