Add fps counter

resources/js/game/GameManager.js

@@ -3,6 +3,7 @@ import Logger from "../utils/Logger.js";
 const BACKGROUND_COLOR = "rgba(30,30,30,0.5)",
   DEFAULT_GAZE_POINT_RADIUS = 10,
   DEFAULT_GAZE_POINT_COLOR = "#ff007b",
+  FPS_COLOR = "#ffbb00",
   MAX_GAZE_POINT_AGE = 500;
 
 var lastUpdate,
@@ -58,6 +59,7 @@ class GameManger {
     this.updateGazePoints();
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
     this.drawGazePoints();
+    this.drawFrameRate();
     this.setUpdateTime();
   }
 
@@ -76,7 +78,8 @@ class GameManger {
     this.context.fillStyle = DEFAULT_GAZE_POINT_COLOR;
     for (let item of this.gazePoints) {
       this.context.save();
-      this.context.globalAlpha = 1 - (now - item[1].createdAt) / MAX_GAZE_POINT_AGE;
+      this.context.globalAlpha = 1 - (now - item[1].createdAt) /
+        MAX_GAZE_POINT_AGE;
       this.context.beginPath();
       this.context.ellipse(item[1].targetX, item[1].targetY,
         DEFAULT_GAZE_POINT_RADIUS, DEFAULT_GAZE_POINT_RADIUS, Math.PI / 4,
@@ -87,6 +90,15 @@ class GameManger {
     }
   }
 
+  drawFrameRate() {
+    let fps = 1000 / lastDelta;
+    this.context.beginPath();
+    this.context.font = "30px Arial";
+    this.context.fillStyle = FPS_COLOR;
+    this.context.fillText(`FPS: ${fps}`, 20, 20);
+    this.context.closePath();
+  }
+
 }
 
 export default GameManger;
\ No newline at end of file