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": {
|
"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"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,22 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
<head>
|
||||||
<meta name="description" content="" />
|
<!-- polyfill global -->
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<script>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
const global = globalThis;
|
||||||
%svelte.head%
|
</script>
|
||||||
</head>
|
<!-- end polyfill -->
|
||||||
<body>
|
|
||||||
<div id="svelte">%svelte.body%</div>
|
<meta charset="utf-8" />
|
||||||
</body>
|
<meta name="description" content="" />
|
||||||
</html>
|
<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">
|
<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
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>
|
<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">
|
<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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue