diff options
| author | Ilion Beyst <ilion.beyst@gmail.com> | 2022-01-02 17:57:40 +0100 |
|---|---|---|
| committer | Ilion Beyst <ilion.beyst@gmail.com> | 2022-01-02 17:57:40 +0100 |
| commit | 1cde40b45916d1f99a4cda7837b516cde761f127 (patch) | |
| tree | e74367db95dd4e9200783c78df2b3d811d834ead /web/pw-server/src | |
| parent | 69331eb08a6199bfa8378e08cf378803b076eaae (diff) | |
| download | planetwars.dev-1cde40b45916d1f99a4cda7837b516cde761f127.tar.xz planetwars.dev-1cde40b45916d1f99a4cda7837b516cde761f127.zip | |
basic match views
Diffstat (limited to 'web/pw-server/src')
| -rw-r--r-- | web/pw-server/src/app.html | 31 | ||||
| -rw-r--r-- | web/pw-server/src/lib/components/Visualizer.svelte | 57 | ||||
| -rw-r--r-- | web/pw-server/src/routes/bots/[bot_id].svelte | 1 | ||||
| -rw-r--r-- | web/pw-server/src/routes/matches/[match_id].svelte | 31 | ||||
| -rw-r--r-- | web/pw-server/src/routes/matches/index.svelte | 35 | ||||
| -rw-r--r-- | web/pw-server/src/routes/matches/new.svelte | 2 |
6 files changed, 145 insertions, 12 deletions
diff --git a/web/pw-server/src/app.html b/web/pw-server/src/app.html index 32f9591..3193582 100644 --- a/web/pw-server/src/app.html +++ b/web/pw-server/src/app.html @@ -1,13 +1,22 @@ <!DOCTYPE html> <html lang="en"> - <head> - <meta charset="utf-8" /> - <meta name="description" content="" /> - <link rel="icon" href="/favicon.ico" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> - %svelte.head% - </head> - <body> - <div id="svelte">%svelte.body%</div> - </body> -</html> + +<head> + <!-- polyfill global --> + <script> + const global = globalThis; + </script> + <!-- end polyfill --> + + <meta charset="utf-8" /> + <meta name="description" content="" /> + <link rel="icon" href="/favicon.ico" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + %svelte.head% +</head> + +<body> + <div id="svelte">%svelte.body%</div> +</body> + +</html>
\ No newline at end of file diff --git a/web/pw-server/src/lib/components/Visualizer.svelte b/web/pw-server/src/lib/components/Visualizer.svelte new file mode 100644 index 0000000..d53eb36 --- /dev/null +++ b/web/pw-server/src/lib/components/Visualizer.svelte @@ -0,0 +1,57 @@ +<script lang="ts"> + import { onMount } from "svelte"; + import * as visualizer from "pw-visualizer"; + import init_wasm_module from "planetwars-rs"; + + export let matchLog = null; + + let initialized = false; + + onMount(async () => { + await init_wasm_module(); + + visualizer.init(); + initialized = true; + visualizer.set_loading(false); + }); + + $: if (initialized) { + if (matchLog === null) { + visualizer.set_loading(true); + } else { + visualizer.set_instance(matchLog); + visualizer.set_loading(false); + } + } +</script> + +<div id="main" class="loading"> + <canvas id="canvas" /> + <div id="name" /> + <div id="addbutton" class="button" /> + + <div id="meta"> + <div id="turnCounter">0 / 0</div> + <div> + <span>Ms per frame: </span> + <input type="number" id="speed" value="300" /> + </div> + <div class="slidecontainer"> + <input type="range" min="0" max="1" value="1" class="slider" id="turnSlider" /> + </div> + </div> + <div class="lds-roller"> + <div /> + <div /> + <div /> + <div /> + <div /> + <div /> + <div /> + <div /> + </div> +</div> + +<style scoped> + @import "pw-visualizer/src/style.css"; +</style> diff --git a/web/pw-server/src/routes/bots/[bot_id].svelte b/web/pw-server/src/routes/bots/[bot_id].svelte index 955f1c6..3eece10 100644 --- a/web/pw-server/src/routes/bots/[bot_id].svelte +++ b/web/pw-server/src/routes/bots/[bot_id].svelte @@ -1,6 +1,5 @@ <script lang="ts" context="module"> import { get_session_token } from "$lib/auth"; - import { mount_component } from "svelte/internal"; export async function load({ page }) { const token = get_session_token(); diff --git a/web/pw-server/src/routes/matches/[match_id].svelte b/web/pw-server/src/routes/matches/[match_id].svelte new file mode 100644 index 0000000..3fe98f8 --- /dev/null +++ b/web/pw-server/src/routes/matches/[match_id].svelte @@ -0,0 +1,31 @@ +<script lang="ts" context="module"> + export async function load({ page }) { + const res = await fetch(`/api/matches/${page.params["match_id"]}`, { + headers: { + "Content-Type": "application/json", + }, + }); + + if (res.ok) { + return { + props: { + matchLog: await res.text(), + }, + }; + } + + return { + status: res.status, + error: new Error("failed to load match"), + }; + } +</script> + +<script lang="ts"> + import Visualizer from "$lib/components/Visualizer.svelte"; + export let matchLog: string; +</script> + +<div> + <Visualizer {matchLog} /> +</div> diff --git a/web/pw-server/src/routes/matches/index.svelte b/web/pw-server/src/routes/matches/index.svelte index dcfb43b..448048b 100644 --- a/web/pw-server/src/routes/matches/index.svelte +++ b/web/pw-server/src/routes/matches/index.svelte @@ -1 +1,36 @@ +<script lang="ts" context="module"> + export async function load() { + const res = await fetch("/api/matches", { + headers: { + "Content-Type": "application/json", + }, + }); + + if (res.ok) { + return { + props: { + matches: await res.json(), + }, + }; + } + + return { + status: res.status, + error: new Error("failed to load matches"), + }; + } +</script> + +<script lang="ts"> + import dayjs from "dayjs"; + export let matches; +</script> + <a href="/matches/new">new match</a> +<ul> + {#each matches as match} + <li> + <a href="/matches/{match['id']}">{dayjs(match["created_at"]).format("YYYY-MM-DD HH:mm")}</a> + </li> + {/each} +</ul> diff --git a/web/pw-server/src/routes/matches/new.svelte b/web/pw-server/src/routes/matches/new.svelte index 10ce093..eed3dbb 100644 --- a/web/pw-server/src/routes/matches/new.svelte +++ b/web/pw-server/src/routes/matches/new.svelte @@ -28,6 +28,7 @@ <script lang="ts"> import Select from "svelte-select"; +import { goto } from "$app/navigation"; export let bots: object[]; let items: object[]; let players: object[] = []; @@ -64,6 +65,7 @@ if (res.ok) { // TODO + goto("/matches") } else { alert(res.statusText); } |