From 9064e30928a969b4442471785dd6c6fff9d74837 Mon Sep 17 00:00:00 2001
From: Alexander Bazo <alexander.bazo@ur.de>
Date: Tue, 27 Aug 2019 14:40:24 +0200
Subject: [PATCH] Fix fps display

---
 resources/js/game/GameManager.js | 18 ++++++++++++++----
 resources/js/game/GazePoint.js   |  2 +-
 resources/js/game/StarGazer.js   | 33 ++++++++++++++++++---------------
 resources/js/index.js            |  3 ++-
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/resources/js/game/GameManager.js b/resources/js/game/GameManager.js
index 44d85ea..b53a6c9 100644
--- a/resources/js/game/GameManager.js
+++ b/resources/js/game/GameManager.js
@@ -25,6 +25,14 @@ class GameManger {
     this.fps = fps;
   }
 
+  showFPS() {
+    this.shouldDisplayFrameRate = true;
+  }
+
+  hideFPS() {
+    this.shouldDisplayFrameRate = false;
+  }
+
   setSize(width, height) {
     this.canvas.width = width;
     this.canvas.height = height;
@@ -59,7 +67,9 @@ class GameManger {
     this.updateGazePoints();
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
     this.drawGazePoints();
-    this.drawFrameRate();
+    if (this.shouldDisplayFrameRate === true) {
+      this.drawFrameRate();
+    }
     this.setUpdateTime();
   }
 
@@ -91,11 +101,11 @@ class GameManger {
   }
 
   drawFrameRate() {
-    let fps = 1000 / lastDelta;
+    let fps = parseInt(1000 / lastDelta);
     this.context.beginPath();
-    this.context.font = "30px Arial";
+    this.context.font = "20px Arial";
     this.context.fillStyle = FPS_COLOR;
-    this.context.fillText(`FPS: ${fps}`, 20, 20);
+    this.context.fillText(`FPS: ${fps}`, 30, 30);
     this.context.closePath();
   }
 
diff --git a/resources/js/game/GazePoint.js b/resources/js/game/GazePoint.js
index 94cdf7d..9ec880c 100644
--- a/resources/js/game/GazePoint.js
+++ b/resources/js/game/GazePoint.js
@@ -3,7 +3,7 @@ class GazePoint {
   constructor(screenX, screenY, createdAt, id) {
     this.screenX = screenX;
     this.screenY = screenY;
-    this.createdAt = createdAt;
+    this.createdAt = Date.now();
     this.id = id || this.createdAt;
   }
 
diff --git a/resources/js/game/StarGazer.js b/resources/js/game/StarGazer.js
index d9a917b..fbe84fa 100644
--- a/resources/js/game/StarGazer.js
+++ b/resources/js/game/StarGazer.js
@@ -5,22 +5,25 @@ var canvas, gm;
 
 class StarGazer {
 
-	init(config) {
-		Logger.log("Starting StarGazer game");
-		canvas = config.canvas;
-		gm = new GameManager();
-		gm.setCanvas(canvas);
-		gm.setFrameRate(config.fps);
-		gm.setSize(config.width, config.height);
-		gm.start();
-	}
+  init(config) {
+    Logger.log("Starting StarGazer game");
+    canvas = config.canvas;
+    gm = new GameManager();
+    gm.setCanvas(canvas);
+    gm.setFrameRate(config.fps);
+    if (config.showFPS === true) {
+      gm.showFPS();
+    }
+    gm.setSize(config.width, config.height);
+    gm.start();
+  }
 
-	onGazeUpdate(gazePoint) {
-		gazePoint.linkTo(canvas);
-		if(gazePoint.hasLink) {
-			gm.addGazePoint(gazePoint);
-		}
-	}
+  onGazeUpdate(gazePoint) {
+    gazePoint.linkTo(canvas);
+    if (gazePoint.hasLink) {
+      gm.addGazePoint(gazePoint);
+    }
+  }
 
 }
 
diff --git a/resources/js/index.js b/resources/js/index.js
index 5b9c279..5fcdf7a 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -23,6 +23,7 @@ function initStarGazer() {
   StarGazer.init({
     canvas: document.querySelector("canvas"),
     fps: 60,
+    showFPS: true,
     width: 800,
     height: 800,
   });
@@ -41,7 +42,7 @@ function onGazeDataAvailable(event) {
 }
 
 function onDisconnected(event) {
-  console.log(event);
+  console.log(	event);
 }
 
 init();
\ No newline at end of file
--
libgit2 0.26.0