Refactor renderer component

resources/css/default.css

@@ -43,8 +43,8 @@ body {
     border-radius: 5px;
     border-width: 5px;
     border-style: solid;
-    background-color: #1b744a;
-    border-color: #aaffd8;
+    background-color: #3f0d76;
+    border-color: #d2ccf3;
     text-align: center;
     line-height: 10vh;
     font-size: 5vh;
@@ -53,9 +53,9 @@ body {
 
 #startButton:hover {
 	cursor: pointer;
-    background-color: #aaffd8;
-    border-color: #1b744a;
-    color: #1b744a;
+    background-color: #d2ccf3;
+    border-color: #3f0d76;
+    color: #3f0d76;
 }
 
 canvas {

resources/js/Config.js

 var Config = {
   GAZE_SERVER_URL: "ws://localhost:8001/gaze",
   TARGET_FPS: 120,
-  SHOW_FPS: true,
+  SHOW_DEBUG_INFO: true,
   USE_MOUSE_INPUT_AS_FAKE_GAZE_DATA: true,
   USE_LOGGER: true,
   SCREEN_WIDTH: screen.width,
   SCREEN_HEIGHT: screen.height,
+  GAME_VERSION: 0.1,
 };
 
 Object.freeze(Config);

resources/js/game/GameManager.js

-const BACKGROUND_COLOR = "#333",
-  DEFAULT_GAZE_POINT_RADIUS = 15,
-  DEFAULT_GAZE_POINT_COLOR = "#ff007b",
-  FPS_FONT = "16px ShareTech",
-  FPS_COLOR = "#ffffff",
-  MAX_GAZE_POINT_AGE = 500;
+import GameRenderer from "./GameRenderer.js";
 
-var lastUpdate,
-  lastDelta,
-  fpsBuffer = [];
+class GameManager {
 
-class GameManger {
+	setOptions(options) {
 
-  constructor() {
-    this.gazePoints = new Map();
-  }
-
-  setCanvas(canvas) {
-    this.canvas = canvas;
-    this.context = this.canvas.getContext("2d", { alpha: false });
-    this.canvas.style.backgroundColor = BACKGROUND_COLOR;
-  }
-
-  setFrameRate(fps) {
-    this.fps = fps;
-  }
-
-  showFPS() {
-    this.shouldDisplayFrameRate = true;
-  }
-
-  hideFPS() {
-    this.shouldDisplayFrameRate = false;
-  }
-
-  setSize(width, height) {
-    this.canvas.width = width;
-    this.canvas.height = height;
-    this.canvas.style.width = `${width}px`;
-    this.canvas.style.height = `${height}px`;
 	}
 
 	start() {
-    let targetFrameTime = 1000 / this.fps;
-    this.setUpdateTime();
-    this.loop = setInterval(this.onTick.bind(this), targetFrameTime);
-  }
-
-  setUpdateTime() {
-    lastUpdate = Date.now();
-  }
-
-  setDelta() {
-    lastDelta = Date.now() - lastUpdate;
-  }
 		
-  addGazePoint(point) {
-    this.gazePoints.set(point.id, point);
-  }
-
-  removeGazePoint(point) {
-    this.gazePoints.delete(point.id);
-  }
-
-  onTick() {
-    this.setDelta();
-    this.updateGazePoints();
-    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    this.drawGazePoints();
-    if (this.shouldDisplayFrameRate === true) {
-      this.drawFrameRate();
-    }
-    this.setUpdateTime();
-  }
-
-  updateGazePoints() {
-    let now = Date.now();
-    for (let item of this.gazePoints) {
-      let point = item[1];
-      if (now - point.createdAt > MAX_GAZE_POINT_AGE) {
-        this.removeGazePoint(point);
-      }
-    }
-  }
-
-  drawGazePoints() {
-    let now = Date.now();
-    this.context.fillStyle = DEFAULT_GAZE_POINT_COLOR;
-    for (let item of this.gazePoints) {
-      let relativeAge = 1 - ((now - item[1].createdAt) /
-        MAX_GAZE_POINT_AGE);
-      this.context.save();
-      this.context.globalAlpha = relativeAge;
-      this.context.beginPath();
-      this.context.ellipse(item[1].targetX, item[1].targetY,
-        relativeAge * DEFAULT_GAZE_POINT_RADIUS, relativeAge * DEFAULT_GAZE_POINT_RADIUS, Math.PI / 4,
-        0, 2 * Math.PI);
-      this.context.fill();
-      this.context.closePath();
-      this.context.restore();
-    }
-  }
-
-  drawFrameRate() {
-    let fps = parseInt(1000 / lastDelta),
-    averageFps;
-    fpsBuffer.push(fps);
-    if(fpsBuffer.length === this.fps) {
-      averageFps = parseInt(fpsBuffer.reduce((a,b) => a + b, 0) / fpsBuffer.length);
-      fpsBuffer.shift();
-    }
-    this.context.beginPath();
-    this.context.font = FPS_FONT;
-    this.context.fillStyle = FPS_COLOR;
-    this.context.fillText(`FPS: ${averageFps}`, 30, 30);
-    this.context.closePath();
 	}
 
 }
 
-export default GameManger;
\ No newline at end of file
+export default new GameManager();
\ No newline at end of file

resources/js/game/GameRenderer.js

+const BACKGROUND_COLOR = "#333",
+  DEFAULT_GAZE_POINT_RADIUS = 15,
+  DEFAULT_GAZE_POINT_COLOR = "#3f0d76",
+  DEBUG_POSITION_OFFSET = 10,
+  DEBUG_FONT = "16px ShareTech",
+  DEBUG_COLOR = "#ffffff",
+  MAX_GAZE_POINT_AGE = 1000;
+
+var lastUpdate,
+  lastDelta,
+  fpsBuffer,
+  gazePoints,
+  version,
+  debug,
+  frameRate,
+  canvas,
+  context,
+  loop;
+
+function onTick() {
+  setDelta();
+  updateGazePoints();
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  drawGazePoints();
+  if (debug === true) {
+    drawDebugInfo();
+  }
+  setUpdateTime();
+}
+
+function setUpdateTime() {
+  lastUpdate = Date.now();
+}
+
+function setDelta() {
+  lastDelta = Date.now() - lastUpdate;
+}
+
+function addGazePoint(point) {
+  gazePoints.set(point.id, point);
+}
+
+function removeGazePoint(point) {
+  gazePoints.delete(point.id);
+}
+
+function updateGazePoints() {
+  let now = Date.now();
+  for (let item of gazePoints) {
+    let point = item[1];
+    if (now - point.createdAt > MAX_GAZE_POINT_AGE) {
+      removeGazePoint(point);
+    }
+  }
+}
+
+function drawGazePoints() {
+  let now = Date.now();
+  context.fillStyle = DEFAULT_GAZE_POINT_COLOR;
+  for (let item of gazePoints) {
+    let relativeAge = 1 - ((now - item[1].createdAt) /
+      MAX_GAZE_POINT_AGE);
+    context.save();
+    context.globalAlpha = relativeAge;
+    context.beginPath();
+    context.ellipse(item[1].targetX, item[1].targetY,
+      relativeAge * DEFAULT_GAZE_POINT_RADIUS, relativeAge *
+      DEFAULT_GAZE_POINT_RADIUS, Math.PI / 4,
+      0, 2 * Math.PI);
+    context.fill();
+    context.closePath();
+    context.restore();
+  }
+}
+
+function drawDebugInfo() {
+  let fps = parseInt(1000 / lastDelta),
+    averageFps;
+  fpsBuffer.push(fps);
+  if (fpsBuffer.length === frameRate) {
+    averageFps = parseInt(fpsBuffer.reduce((a, b) => a + b, 0) / fpsBuffer.length);
+    fpsBuffer.shift();
+  }
+  context.beginPath();
+  context.font = DEBUG_FONT;
+  context.fillStyle = DEBUG_COLOR;
+  context.fillText(`${version} | ${averageFps}fps`, DEBUG_POSITION_OFFSET, canvas.height-DEBUG_POSITION_OFFSET);
+  context.closePath();
+}
+
+class GameRenderer {
+
+  constructor() {
+    fpsBuffer = [];
+    gazePoints = new Map();
+  }
+
+  start(options) {
+    canvas = options.canvas;
+    canvas.width = options.width;
+    canvas.height = options.height;
+    canvas.style.width = `${options.width}px`;
+    canvas.style.height = `${options.height}px`;
+    context = canvas.getContext("2d", { alpha: false });
+    canvas.style.backgroundColor = BACKGROUND_COLOR;
+    frameRate = options.frameRate;
+    version = options.version;
+    debug = options.debug;
+    setUpdateTime();
+    loop = setInterval(onTick, (1000 / frameRate));
+  }
+
+  addGazePoint(point) {
+    addGazePoint(point);
+  }
+
+  removeGazePoint(point) {
+    removeGazePoint(point);
+  }
+
+}
+
+export default new GameRenderer();
\ No newline at end of file

resources/js/game/StarGazer.js

 import Logger from "../utils/Logger.js";
 import GameManager from "./GameManager.js";
+import GameRenderer from "./GameRenderer.js";
 
-var canvas, gm, provider;
+var canvas, provider;
 
-function init(config) {
+function init(options) {
   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();
-  provider = config.gazeDataProvider;
+  canvas = options.canvas;
+  GameRenderer.start({
+    canvas: canvas,
+    frameRate: options.fps,
+    version: options.version,
+    debug: options.showDebug,
+    width: options.width,
+    height: options.height,
+  });
+  provider = options.gazeDataProvider;
   provider.addEventListener("dataavailable", onGazeUpdate);
 }
 
@@ -22,7 +23,7 @@ function onGazeUpdate(event) {
   let gazePoint = event.data;
   gazePoint.linkTo(canvas);
   if (gazePoint.hasLink) {
-    gm.addGazePoint(gazePoint);
+    GameRenderer.addGazePoint(gazePoint);
   }
 }
 

resources/js/index.js

@@ -20,7 +20,8 @@ function prepareGame() {
   StarGazer.init({
     canvas: canvas,
     fps: Config.TARGET_FPS,
-    showFPS: Config.SHOW_FPS,
+    version: `Star Gazer, build ${Config.GAME_VERSION}`,
+    showDebug: Config.SHOW_DEBUG_INFO,
     width: Config.SCREEN_WIDTH,
     height: Config.SCREEN_HEIGHT,
     gazeDataProvider: dataProvider,