add toc sidebar to docs site
This commit is contained in:
parent
66162ea43c
commit
7f1b6c06b6
7 changed files with 141 additions and 55 deletions
21
web/pw-server/src/lib/components/docs/TocEntry.svelte
Normal file
21
web/pw-server/src/lib/components/docs/TocEntry.svelte
Normal 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
60
web/pw-server/src/routes/docs/__layout.svelte
Normal 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>
|
|
@ -4,7 +4,6 @@
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.container {
|
.container {
|
||||||
width: 800px;
|
max-width: 800px;
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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!
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue