basic match views

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

View file

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

View file

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

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>

View file

@ -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();

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>

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

View file

@ -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);
}

View file

@ -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,
}),