From 85a592f26f8c5e4da2f8781e7e7ba14edac4a1c1 Mon Sep 17 00:00:00 2001
From: Alexander Bazo <alexander.bazo@ur.de>
Date: Tue, 27 Aug 2019 14:31:16 +0200
Subject: [PATCH] Add fps counter

---
 resources/js/game/GameManager.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/resources/js/game/GameManager.js b/resources/js/game/GameManager.js
index 2873567..44d85ea 100644
--- a/resources/js/game/GameManager.js
+++ b/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
--
libgit2 0.26.0