basic match views
This commit is contained in:
Ilion Beyst
parent
69331eb08a
commit
1cde40b459
8 changed files with 149 additions and 16 deletions
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<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>
|
||||
57
web/pw-server/src/lib/components/Visualizer.svelte
Normal file
57
web/pw-server/src/lib/components/Visualizer.svelte
Normal 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: </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,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();
|
||||
|
|
|
|||
31
web/pw-server/src/routes/matches/[match_id].svelte
Normal file
31
web/pw-server/src/routes/matches/[match_id].svelte
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}),
|
||||
|
|
|
|||
Loading…
Reference in a new issue