add toc sidebar to docs site
This commit is contained in:
Ilion Beyst
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">
|
||||
.container {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<script context="module">
|
||||
export async function load() {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: "/docs/rules"
|
||||
}
|
||||
return {
|
||||
status: 302,
|
||||
redirect: "/docs/rules",
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
## How to play
|
||||
|
||||
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
|
||||
traveling between the planets (_expeditions_).
|
||||
|
|
@ -7,41 +7,41 @@ traveling between the planets (_expeditions_).
|
|||
Example game state:
|
||||
|
||||
```json
|
||||
{
|
||||
"planets": [
|
||||
{
|
||||
"ship_count": 2,
|
||||
"x": -2.0,
|
||||
"y": 0.0,
|
||||
"owner": 1,
|
||||
"name": "your planet"
|
||||
},
|
||||
{
|
||||
"ship_count": 4,
|
||||
"x": 2.0,
|
||||
"y": 0.0,
|
||||
"owner": 2,
|
||||
"name": "enemy planet"
|
||||
},
|
||||
{
|
||||
"ship_count": 2,
|
||||
"x": 0.0,
|
||||
"y": 2.0,
|
||||
"owner": null,
|
||||
"name": "neutral planet"
|
||||
}
|
||||
],
|
||||
"expeditions": [
|
||||
{
|
||||
"id": 169,
|
||||
"ship_count": 8,
|
||||
"origin": "your planet",
|
||||
"destination": "enemy planet",
|
||||
"owner": 1,
|
||||
"turns_remaining": 2
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
"planets": [
|
||||
{
|
||||
"ship_count": 2,
|
||||
"x": -2.0,
|
||||
"y": 0.0,
|
||||
"owner": 1,
|
||||
"name": "your planet"
|
||||
},
|
||||
{
|
||||
"ship_count": 4,
|
||||
"x": 2.0,
|
||||
"y": 0.0,
|
||||
"owner": 2,
|
||||
"name": "enemy planet"
|
||||
},
|
||||
{
|
||||
"ship_count": 2,
|
||||
"x": 0.0,
|
||||
"y": 2.0,
|
||||
"owner": null,
|
||||
"name": "neutral planet"
|
||||
}
|
||||
],
|
||||
"expeditions": [
|
||||
{
|
||||
"id": 169,
|
||||
"ship_count": 8,
|
||||
"origin": "your planet",
|
||||
"destination": "enemy planet",
|
||||
"owner": 1,
|
||||
"turns_remaining": 2
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
Example command:
|
||||
|
||||
```json
|
||||
{
|
||||
"moves": [
|
||||
{
|
||||
"origin": "your planet",
|
||||
"destination": "enemy planet",
|
||||
"ship_count": 2
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
"moves": [
|
||||
{
|
||||
"origin": "your planet",
|
||||
"destination": "enemy planet",
|
||||
"ship_count": 2
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
### TL;DR
|
||||
|
||||
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!
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
$btn-text-color: rgb(9, 105, 218);
|
||||
$btn-border-color: rgba(27, 31, 36, 0.25);
|
||||
@use "./variables";
|
||||
|
||||
$btn-text-color: variables.$blue-primary;
|
||||
$btn-border-color: variables.$light-grey;
|
||||
|
||||
.btn {
|
||||
color: $btn-text-color;
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
$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