diff options
| -rw-r--r-- | web/pw-server/src/lib/components/RulesView.svelte | 70 | ||||
| -rw-r--r-- | web/pw-server/src/routes/index.svelte | 22 |
2 files changed, 92 insertions, 0 deletions
diff --git a/web/pw-server/src/lib/components/RulesView.svelte b/web/pw-server/src/lib/components/RulesView.svelte new file mode 100644 index 0000000..c3cf125 --- /dev/null +++ b/web/pw-server/src/lib/components/RulesView.svelte @@ -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> diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte index 1ed7b8b..8680588 100644 --- a/web/pw-server/src/routes/index.svelte +++ b/web/pw-server/src/routes/index.svelte @@ -13,10 +13,12 @@ import { debounce } from "$lib/utils"; import SubmitPane from "$lib/components/SubmitPane.svelte"; import OutputPane from "$lib/components/OutputPane.svelte"; + import RulesView from "$lib/components/RulesView.svelte"; enum ViewMode { Editor, MatchVisualizer, + Rules, } let matches = []; @@ -113,6 +115,12 @@ viewMode = ViewMode.Editor; } + function selectRules() { + selectedMatchId = undefined; + selectedMatchLog = undefined; + viewMode = ViewMode.Rules; + } + function formatMatchTimestamp(timestampString: string): string { let timestamp = DateTime.fromISO(timestampString, { zone: "utc" }).toLocal(); if (timestamp.startOf("day").equals(DateTime.now().startOf("day"))) { @@ -134,6 +142,13 @@ > Editor </div> + <div + class="rules-button sidebar-item" + class:selected={viewMode === ViewMode.Rules} + on:click={selectRules} + > + Rules + </div> <div class="sidebar-header">match history</div> <ul class="match-list"> {#each matches as match} @@ -156,6 +171,8 @@ <Visualizer matchLog={selectedMatchLog} /> {:else if viewMode === ViewMode.Editor} <EditorView {editSession} /> + {:else if viewMode === ViewMode.Rules} + <RulesView /> {/if} </div> <div class="sidebar-right"> @@ -207,6 +224,7 @@ flex-grow: 1; flex-shrink: 1; overflow: hidden; + background-color: white; } .editor-container { @@ -217,6 +235,10 @@ padding: 15px; } + .rules-button { + padding: 15px; + } + .sidebar-item { color: #eee; } |