midgard/planetwars.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

basic match views

Browse source
This commit is contained in:
Ilion Beyst 2022-01-02 17:57:40 +01:00
parent 69331eb08a
commit 1cde40b459
8 changed files with 149 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/pw-server/package.json
View file

@ -32,7 +32,9 @@
}, },
"dependencies": { "dependencies": {
"dayjs": "^1.10.7", "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" "type": "module"
} }

9
web/pw-server/src/app.html
View file

@ -1,13 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- polyfill global -->
<script>
const global = globalThis;
</script>
<!-- end polyfill -->
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="" /> <meta name="description" content="" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head% %svelte.head%
</head> </head>
<body> <body>
<div id="svelte">%svelte.body%</div> <div id="svelte">%svelte.body%</div>
</body> </body>
</html> </html>

57
web/pw-server/src/lib/components/Visualizer.svelte Normal file
View file

@ -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>

1
web/pw-server/src/routes/bots/[bot_id].svelte
View file

@ -1,6 +1,5 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
import { get_session_token } from "$lib/auth"; import { get_session_token } from "$lib/auth";
import { mount_component } from "svelte/internal";
export async function load({ page }) { export async function load({ page }) {
const token = get_session_token(); const token = get_session_token();

31
web/pw-server/src/routes/matches/[match_id].svelte Normal file
View file

@ -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>

35
web/pw-server/src/routes/matches/index.svelte
View file

@ -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> <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>

2
web/pw-server/src/routes/matches/new.svelte
View file

@ -28,6 +28,7 @@
<script lang="ts"> <script lang="ts">
import Select from "svelte-select"; import Select from "svelte-select";
import { goto } from "$app/navigation";
export let bots: object[]; export let bots: object[];
let items: object[]; let items: object[];
let players: object[] = []; let players: object[] = [];
@ -64,6 +65,7 @@
if (res.ok) { if (res.ok) {
// TODO // TODO
goto("/matches")
} else { } else {
alert(res.statusText); alert(res.statusText);
} }

4
web/pw-server/svelte.config.js
View file

@ -1,6 +1,5 @@
import adapter from "@sveltejs/adapter-auto"; import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess"; import preprocess from "svelte-preprocess";
// import { svelte } from '@sveltejs/vite-plugin-svelte'
import { viteCommonjs } from "@originjs/vite-plugin-commonjs"; import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
import wasmPack from "vite-plugin-wasm-pack"; import wasmPack from "vite-plugin-wasm-pack";
@ -18,8 +17,7 @@ const config = {
ssr: false, ssr: false,
vite: { vite: {
plugins: [ plugins: [
// svelte(), wasmPack([], ["planetwars-rs"]),
// wasmPack([], ["planetwars-rs"]),
viteCommonjs({ viteCommonjs({
transformMixedEsModules: true, transformMixedEsModules: true,
}), }),