add a simple view with game rules

This commit is contained in:
Ilion Beyst 2022-03-15 19:24:50 +01:00
parent 6929a803da
commit 675bf6fd07
2 changed files with 92 additions and 0 deletions

View file

@ -0,0 +1,70 @@
<div class="game-rules">
<p>
Every turn, your bot will receive a json-encoded line on stdin, representing the current game
state.
</p>
Example game state:
<pre>{`
{
"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"
},
],
"expeditions": [
{
"id": 169,
"ship_count": 8,
"origin": "your planet",
"destination": "enemy planet",
"owner": 1,
"turns_remaining": 2
}
]
}
`}</pre>
<p>
Every turn, you may send out expeditions to conquer other planets. You can do this by writing a
json-encoded line to stdout:
</p>
Example command:
<pre>{`
{
"moves": [
{
"origin": "your planet",
"target": "enemy planet",
"ship_count": 2
}
]
}
`}
</pre>
The amount of turns an expedition will travel is equal to the ceiled euclidean distance between
its origin and target planet.
</div>
<style lang="scss">
.game-rules {
padding: 15px;
overflow-y: scroll;
height: 100%;
margin-bottom: 200px;
box-sizing: border-box;
}
</style>

View file

@ -13,10 +13,12 @@
import { debounce } from "$lib/utils"; import { debounce } from "$lib/utils";
import SubmitPane from "$lib/components/SubmitPane.svelte"; import SubmitPane from "$lib/components/SubmitPane.svelte";
import OutputPane from "$lib/components/OutputPane.svelte"; import OutputPane from "$lib/components/OutputPane.svelte";
import RulesView from "$lib/components/RulesView.svelte";
enum ViewMode { enum ViewMode {
Editor, Editor,
MatchVisualizer, MatchVisualizer,
Rules,
} }
let matches = []; let matches = [];
@ -113,6 +115,12 @@
viewMode = ViewMode.Editor; viewMode = ViewMode.Editor;
} }
function selectRules() {
selectedMatchId = undefined;
selectedMatchLog = undefined;
viewMode = ViewMode.Rules;
}
function formatMatchTimestamp(timestampString: string): string { function formatMatchTimestamp(timestampString: string): string {
let timestamp = DateTime.fromISO(timestampString, { zone: "utc" }).toLocal(); let timestamp = DateTime.fromISO(timestampString, { zone: "utc" }).toLocal();
if (timestamp.startOf("day").equals(DateTime.now().startOf("day"))) { if (timestamp.startOf("day").equals(DateTime.now().startOf("day"))) {
@ -134,6 +142,13 @@
> >
Editor Editor
</div> </div>
<div
class="rules-button sidebar-item"
class:selected={viewMode === ViewMode.Rules}
on:click={selectRules}
>
Rules
</div>
<div class="sidebar-header">match history</div> <div class="sidebar-header">match history</div>
<ul class="match-list"> <ul class="match-list">
{#each matches as match} {#each matches as match}
@ -156,6 +171,8 @@
<Visualizer matchLog={selectedMatchLog} /> <Visualizer matchLog={selectedMatchLog} />
{:else if viewMode === ViewMode.Editor} {:else if viewMode === ViewMode.Editor}
<EditorView {editSession} /> <EditorView {editSession} />
{:else if viewMode === ViewMode.Rules}
<RulesView />
{/if} {/if}
</div> </div>
<div class="sidebar-right"> <div class="sidebar-right">
@ -207,6 +224,7 @@
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
overflow: hidden; overflow: hidden;
background-color: white;
} }
.editor-container { .editor-container {
@ -217,6 +235,10 @@
padding: 15px; padding: 15px;
} }
.rules-button {
padding: 15px;
}
.sidebar-item { .sidebar-item {
color: #eee; color: #eee;
} }