Fix fps display

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

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

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

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