From 24b3fa295dbaf7a1f40c3e9658b235382ec9b68b Mon Sep 17 00:00:00 2001
From: ajuvercr <arthur.vercruysse@ugent.be>
Date: Sat, 21 Sep 2019 11:30:00 +0200
Subject: [PATCH] update ms per frame

---
 frontend/www/index.html |  4 ++++
 frontend/www/index.ts   | 25 ++++++++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/www/index.html b/frontend/www/index.html
index d990d74..5faa1ea 100644
--- a/frontend/www/index.html
+++ b/frontend/www/index.html
@@ -15,6 +15,10 @@
     </div>
 
     <input type="file" id="fileselect">
+    <div>
+      <span>Ms per frame:&nbsp;</span>
+      <input type="number" id="speed" value="500">
+    </div>
 
     <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
     <script src="./bootstrap.js"></script>
diff --git a/frontend/www/index.ts b/frontend/www/index.ts
index 7b79419..2a06529 100644
--- a/frontend/www/index.ts
+++ b/frontend/www/index.ts
@@ -20,7 +20,7 @@ const LOADER = document.getElementById("loader");
 
 const SLIDER = <HTMLInputElement>document.getElementById("turnSlider");
 const FILESELECTOR = <HTMLInputElement> document.getElementById("fileselect");
-
+const SPEED = <HTMLInputElement> document.getElementById("speed");
 function set_loading(loading: boolean) {
     if (loading) {
         if (!LOADER.classList.contains("loading")) {
@@ -38,6 +38,8 @@ const RESOLUTION = [CANVAS.width, CANVAS.height];
 
 const GL = CANVAS.getContext("webgl");
 
+var ms_per_frame = 500;
+
 resizeCanvasToDisplaySize(<HTMLCanvasElement>GL.canvas);
 GL.viewport(0, 0, GL.canvas.width, GL.canvas.height);
 
@@ -175,7 +177,7 @@ class GameInstance {
             this.last_time = time;
             return;
         }
-        if (time > this.last_time + 500) {
+        if (time > this.last_time + ms_per_frame) {
 
             this.last_time = time;
             this.updateTurn(this.frame + 1);
@@ -185,7 +187,7 @@ class GameInstance {
         GL.viewport(0, 0, GL.canvas.width, GL.canvas.height);
         GL.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);
 
-        this.shader.uniform(GL, "u_time", new Uniform1f((time - this.last_time) / 500));
+        this.shader.uniform(GL, "u_time", new Uniform1f((time - this.last_time) / ms_per_frame));
         this.shader.uniform(GL, "u_mouse", new Uniform2f(this.resizer.get_mouse_pos()));
         this.shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox()));
         this.shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION));
@@ -210,6 +212,7 @@ class GameInstance {
     }
 
     handleKey(event: KeyboardEvent) {
+        console.log(event.keyCode);
         // Space
         if (event.keyCode == 32) {
             if (this.playing) {
@@ -229,6 +232,18 @@ class GameInstance {
         if (event.keyCode == 39) {
             this.updateTurn(this.frame + 1);
         }
+
+        // d key
+        if (event.keyCode == 68) {
+            SPEED.value = ms_per_frame + 10 + '';
+            SPEED.onchange(undefined);
+        }
+
+        // a key
+        if (event.keyCode == 65) {
+            SPEED.value = Math.max(ms_per_frame - 10, 0) + '';
+            SPEED.onchange(undefined);
+        }
     }
 }
 
@@ -261,6 +276,10 @@ FILESELECTOR.onchange = function(){
     reader.readAsText(file);
 }
 
+SPEED.onchange = function() {
+    ms_per_frame = parseInt(SPEED.value);
+}
+
 function step(time: number) {
     if (game_instance) {
         set_loading(false);