GameRenderer.js

import GameConfig from "../config/GameConfiguration.js";
import Time from "../utils/Time.js";

var canvas,
  context,
  fpsBuffer,
  currentFPS;

// TODO: Look for values to be copied and stored from GameConfig to reduce access time
function draw(state) {
  updateFPS(state.delta);
  context.clearRect(0, 0, canvas.width, canvas.height);
  drawObjects(state.objects);
  drawGazePoints(state.gazePoints);
  if (GameConfig.getShowDebugInfoOnScreen() === true) {
    drawDebugInfo();
  }
}

// TODO: Move fps callculation to manager since we need it there to use delta
function updateFPS(delta) {
  let fps = Time.ONE_SECOND_IN_MS / delta;
  fpsBuffer.push(fps);
  if (fpsBuffer.length === GameConfig.getFPSBufferLenght()) {
    currentFPS = parseInt(fpsBuffer.reduce((a, b) => a + b, 0) /
      fpsBuffer.length);
    fpsBuffer.shift();
  }
}

function drawObjects(objects) {
  for (let i = 0; i < objects.length; i++) {
    objects[i].draw(context);
  }
}

function drawGazePoints(gazePoints) {
  context.fillStyle = GameConfig.getGazePointColor();
  for (let i = 0; i < gazePoints.length; i++) {
    drawSingleGazePoint(gazePoints[i]);
  }
}

function drawSingleGazePoint(gazePoint) {
  let inversedAge = 1 - gazePoint.relativeAge,
    radius = inversedAge * GameConfig.getGazePointRadius();
  context.save();
  context.globalAlpha = inversedAge;
  context.beginPath();
  context.ellipse(gazePoint.targetX, gazePoint.targetY, radius, radius, Math.PI /
    4, 0, 2 * Math.PI);
  context.closePath();
  context.fill();
  context.restore();
}

function drawDebugInfo() {
  context.beginPath();
  context.font = GameConfig.getDebugInfoFont();
  context.fillStyle = GameConfig.getDebugInfoFonColor();
  context.fillText(`${GameConfig.getVersion()} | ${currentFPS}fps`, GameConfig.getDebugInfoPosition().x, GameConfig.getDebugInfoPosition().y);
  context.closePath();
}

class GameRenderer {

  init(gameCanvas) {
    fpsBuffer = [];
    currentFPS = 0;
    canvas = gameCanvas;
    canvas.width = GameConfig.getScreenWidth();
    canvas.height = GameConfig.getScreenHeight();
    canvas.style.width = `${GameConfig.getScreenWidth()}px`;
    canvas.style.height = `${GameConfig.getScreenHeight()}px`;
    context = canvas.getContext("2d", { alpha: false });
    canvas.style.backgroundColor = GameConfig.getWorldBackgroundColor();
  }

  render(state) {
    draw(state);
  }

}

export default new GameRenderer();