aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-01-02 17:57:40 +0100
committerIlion Beyst <ilion.beyst@gmail.com>2022-01-02 17:57:40 +0100
commit1cde40b45916d1f99a4cda7837b516cde761f127 (patch)
treee74367db95dd4e9200783c78df2b3d811d834ead /web/pw-server
parent69331eb08a6199bfa8378e08cf378803b076eaae (diff)
downloadplanetwars.dev-1cde40b45916d1f99a4cda7837b516cde761f127.tar.xz
planetwars.dev-1cde40b45916d1f99a4cda7837b516cde761f127.zip
basic match views
Diffstat (limited to 'web/pw-server')
-rw-r--r--web/pw-server/package.json4
-rw-r--r--web/pw-server/src/app.html31
-rw-r--r--web/pw-server/src/lib/components/Visualizer.svelte57
-rw-r--r--web/pw-server/src/routes/bots/[bot_id].svelte1
-rw-r--r--web/pw-server/src/routes/matches/[match_id].svelte31
-rw-r--r--web/pw-server/src/routes/matches/index.svelte35
-rw-r--r--web/pw-server/src/routes/matches/new.svelte2
-rw-r--r--web/pw-server/svelte.config.js4
8 files changed, 149 insertions, 16 deletions
diff --git a/web/pw-server/package.json b/web/pw-server/package.json
index b8a9216..eafc63f 100644
--- a/web/pw-server/package.json
+++ b/web/pw-server/package.json
@@ -32,7 +32,9 @@
},
"dependencies": {
"dayjs": "^1.10.7",
- "moment": "^2.29.1"
+ "svelte-select": "^4.4.7",
+ "pw-visualizer": "file:../pw-visualizer",
+ "planetwars-rs": "file:../planetwars-rs/pkg"
},
"type": "module"
}
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:&nbsp;</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);
}
diff --git a/web/pw-server/svelte.config.js b/web/pw-server/svelte.config.js
index 0c0c40c..b6a2cf8 100644
--- a/web/pw-server/svelte.config.js
+++ b/web/pw-server/svelte.config.js
@@ -1,6 +1,5 @@
import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess";
-// import { svelte } from '@sveltejs/vite-plugin-svelte'
import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
import wasmPack from "vite-plugin-wasm-pack";
@@ -18,8 +17,7 @@ const config = {
ssr: false,
vite: {
plugins: [
- // svelte(),
- // wasmPack([], ["planetwars-rs"]),
+ wasmPack([], ["planetwars-rs"]),
viteCommonjs({
transformMixedEsModules: true,
}),
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-23 16:14:33 +0000