aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-03-15 19:24:50 +0100
committerIlion Beyst <ilion.beyst@gmail.com>2022-03-15 19:24:50 +0100
commit675bf6fd073097eeb29955fa34eee611c85971bd (patch)
tree78821a25b82c9c2ed15fa092b8605f5513c8cd0f /web
parent6929a803dade4dfbdafb5e035eae6cdd6bb24f4b (diff)
downloadplanetwars.dev-675bf6fd073097eeb29955fa34eee611c85971bd.tar.xz
planetwars.dev-675bf6fd073097eeb29955fa34eee611c85971bd.zip
add a simple view with game rules
Diffstat (limited to 'web')
-rw-r--r--web/pw-server/src/lib/components/RulesView.svelte70
-rw-r--r--web/pw-server/src/routes/index.svelte22
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;
}