GameManager.js

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,
  lastDelta;

class GameManger {

  constructor() {
    this.gazePoints = new Map();
  }

  setCanvas(canvas) {
    this.canvas = canvas;
    this.context = this.canvas.getContext("2d");
    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) {
      this.context.save();
      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,
        0, 2 * Math.PI);
      this.context.fill();
      this.context.closePath();
      this.context.restore();
    }
  }

  drawFrameRate() {
    let fps = parseInt(1000 / lastDelta);
    this.context.beginPath();
    this.context.font = "20px Arial";
    this.context.fillStyle = FPS_COLOR;
    this.context.fillText(`FPS: ${fps}`, 30, 30);
    this.context.closePath();
  }

}

export default GameManger;