add turn slider

frontend/www/index.html

@@ -10,6 +10,10 @@
       <canvas id="c" width=1700 height=900></canvas>
     </div>
 
+    <div class="slidecontainer">
+      <input type="range" min="0" max="1" value="1" class="slider" id="turnSlider">
+    </div>
+
     <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
     <script src="./bootstrap.js"></script>
   </body>

frontend/www/index.ts

@@ -18,6 +18,8 @@ function i32v(ptr: number, size: number): Int32Array {
 const COUNTER = new FPSCounter();
 const LOADER = document.getElementById("loader");
 
+const SLIDER = <HTMLInputElement>document.getElementById("turnSlider");
+
 function set_loading(loading: boolean) {
     if (loading) {
         if (!LOADER.classList.contains("loading")) {
@@ -123,6 +125,9 @@ class GameInstance {
                 )
             );
         }
+
+        // Set slider correctly
+        SLIDER.max = this.game.turn_count() - 1 + '';
     }
 
     _update_state() {
@@ -197,13 +202,13 @@ class GameInstance {
             this.playing = false;
         } else {
             this._update_state();
+            this.playing = true;
         }
+
+        SLIDER.value = this.frame + '';
     }
 
     handleKey(event: KeyboardEvent) {
-        console.log(event.keyCode);
-        console.log(event.key);
-
         // Space
         if (event.keyCode == 32) {
             if (this.playing) {
@@ -237,6 +242,12 @@ export async function set_instance(game: Game) {
     game_instance = new GameInstance(game, meshes.slice(1), meshes[0]);
 }
 
+SLIDER.oninput = function() {
+    if (game_instance) {
+        game_instance.updateTurn(parseInt(SLIDER.value));
+    }
+}
+
 
 function step(time: number) {
     if (game_instance) {

frontend/www/static/res/style.css

@@ -59,3 +59,48 @@ body {
               transform: translate(-50%, -150%);
     }
   }
+
+
+/**
+ * ----------------------------------------
+ * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
+ * ----------------------------------------
+ */
+ .slidecontainer {
+  width: 100%; /* Width of the outside container */
+}
+
+/* The slider itself */
+.slider {
+  -webkit-appearance: none;  /* Override default CSS styles */
+  appearance: none;
+  width: 100%; /* Full-width */
+  height: 25px; /* Specified height */
+  background: #d3d3d3; /* Grey background */
+  outline: none; /* Remove outline */
+  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
+  transition: opacity .2s;
+}
+
+/* Mouse-over effects */
+.slider:hover {
+  opacity: 1; /* Fully shown on mouse-over */
+}
+
+/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  width: 25px; /* Set a specific slider handle width */
+  height: 25px; /* Slider handle height */
+  background: #4CAF50; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}
+
+.slider::-moz-range-thumb {
+  width: 25px; /* Set a specific slider handle width */
+  height: 25px; /* Slider handle height */
+  background: #4CAF50; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}