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