1 files changed, 61 insertions, 0 deletions
diff --git a/web/pw-frontend/src/lib/Visualizer.svelte b/web/pw-frontend/src/lib/Visualizer.svelte
new file mode 100644
index 0000000..297659c
--- /dev/null
+++ b/web/pw-frontend/src/lib/Visualizer.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import * as visualizer from '../lib/visualizer/index';
+
+  export let matchLog = null;
+
+  let initialized = false;
+
+  onMount(() => {
+    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 'visualizer/style.css';
+</style>