GameRenderer.js

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

var canvas,
  context,
  fpsBuffer,
  currentFPS,
  lastDebugFrame = 0;

function draw(state, delta) {
  updateFPS(delta);
  context.clearRect(0, 0, canvas.width, canvas.height);
  drawEnemies(state.enemies);
  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 drawEnemies(enemies) {
  for (let i = 0; i < enemies.length; i++) {
    Enemy.draw.call(enemies[i], context);
  }
}

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

function drawSingleGazePoint(gazePoint) {
  if(Date.now() - lastDebugFrame > 1000) {
    console.log(gazePoint);
    lastDebugFrame = Date.now();
    console.log((1 - gazePoint.relativeAge) * GameConfig.getGazePointRadius());
    console.log((1 - gazePoint.relativeAge));
  }
  let inversedAge = 1 - gazePoint.relativeAge,
    radius = inversedAge * GameConfig.getGazePointRadius();
  context.save();
  context.globalAlpha = inversedAge;
  context.globalAlpha = 1;
  context.beginPath();
  context.ellipse(gazePoint.screenX, gazePoint.screenY, 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, delta) {
    draw(state, delta);
  }

}

export default new GameRenderer();