add toc sidebar to docs site

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

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>

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>

View file

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

View file

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

View file

@ -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!

View file

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

View file

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