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

@@ -11,13 +11,16 @@ class StarGazer {
     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) {
+    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