Add global GameConfiguration

resources/js/Config.js

-var Config = {
-  GAZE_SERVER_URL: "ws://localhost:8001/gaze",
-  TARGET_FPS: 60,
-  SCREEN_WIDTH: screen.width,
-  SCREEN_HEIGHT: screen.height,
-  GAME_VERSION: "$VERSION",
-};
-
-Object.freeze(Config);
-
-export default Config;
\ No newline at end of file

resources/js/config/GameConfiguration.js

+/* eslint-disable no-magic-numbers */
+
+var version,
+  gazeServerURL,
+  fps,
+  fpsBufferLength,
+  screenWidth,
+  screenHeight,
+  maxGazePointAge,
+  gazePointRadius,
+  gazePointColor,
+  maxNumberOfEnemies,
+  enemySpawnDelay,
+  playerDamage,
+  worldBackgroundColor,
+  debugInfoPosition,
+  debugInfoFont,
+  debugInfoFonColor,
+  showDebugInfoOnScreen,
+  showVerboseDebugInfoInConsole,
+  useMouseInput;
+
+class GameConfiguration {
+
+  constructor() {}
+
+  reset() {
+    version = "$VERSION";
+    gazeServerURL = "ws://localhost:8001/gaze";
+    fps = 60;
+    fpsBufferLength = 60;
+    screenWidth = screen.width;
+    screenHeight = screen.height;
+    maxGazePointAge = 500;
+    gazePointRadius = 15;
+    gazePointColor = "#4cd494";
+    maxNumberOfEnemies = 10;
+    enemySpawnDelay = 1000;
+    playerDamage = 15;
+    worldBackgroundColor = "#333";
+    debugInfoPosition = {
+      x: 10,
+      y: screenHeight - 10,
+    };
+    debugInfoFont = "16px ShareTech";
+    debugInfoFonColor = "#FFF";
+  }
+
+  setVersion(value) {
+    version = value;
+  }
+
+  getVersion() {
+    return version;
+  }
+
+  setGazeServerURL(value) {
+    gazeServerURL = value;
+  }
+
+  getGazeServerURL() {
+    return gazeServerURL;
+  }
+
+  setFPS(value) {
+    fps = value;
+  }
+
+  getFPS() {
+    return fps;
+  }
+
+  setFPSBufferLenght(value) {
+    fpsBufferLength = value;
+  }
+
+  getFPSBufferLenght() {
+    return fpsBufferLength;
+  }
+
+  setScreenWidth(value) {
+    screenWidth = value;
+  }
+
+  getScreenWidth() {
+    return screenWidth;
+  }
+
+  setScreenHeight(value) {
+    screenHeight = value;
+  }
+
+  getScreenHeight() {
+    return screenHeight;
+  }
+
+  setMaxGazePointAge(value) {
+    maxGazePointAge = value;
+  }
+
+  getMaxGazePointAge() {
+    return maxGazePointAge;
+  }
+
+  setGazePointRadius(value) {
+    gazePointRadius = value;
+  }
+
+  getGazePointRadius() {
+    return gazePointRadius;
+  }
+
+  setGazePointColor(value) {
+    gazePointColor = value;
+  }
+
+  getGazePointColor() {
+    return gazePointColor;
+  }
+
+  setMaxNumberOfEnemies(value) {
+    maxNumberOfEnemies = value;
+  }
+
+  getMaxNumberOfEnemies() {
+    return maxNumberOfEnemies;
+  }
+
+  setEnemySpawnDelay(value) {
+    enemySpawnDelay = value;
+  }
+
+  getEnemySpawnDelay() {
+    return enemySpawnDelay;
+  }
+
+  setPlayerDamage(value) {
+    playerDamage = value;
+  }
+
+  getPlayerDamage() {
+    return playerDamage;
+  }
+
+  setWorldBackgroundColor(value) {
+    worldBackgroundColor = value;
+  }
+
+  getWorldBackgroundColor() {
+    return worldBackgroundColor;
+  }
+
+  setDebugInfoPosition(value) {
+    debugInfoPosition = value;
+  }
+
+  getDebugInfoPosition() {
+    return debugInfoPosition;
+  }
+
+  setDebugInfoFont(value) {
+    debugInfoFont = value;
+  }
+
+  getDebugInfoFont() {
+    return debugInfoFont;
+  }
+
+  setDebugInfoFonColor(value) {
+    debugInfoFonColor = value;
+  }
+
+  getDebugInfoFonColor() {
+    return debugInfoFonColor;
+  }
+
+  setShowDebugInfoOnScreen(value) {
+    showDebugInfoOnScreen = value;
+  }
+
+  getShowDebugInfoOnScreen() {
+    return showDebugInfoOnScreen;
+  }
+
+  setShowVerboseDebugInfoInConsole(value) {
+    showVerboseDebugInfoInConsole = value;
+  }
+
+  getShowVerboseDebugInfoInConsole() {
+    return showVerboseDebugInfoInConsole;
+  }
+
+  setUseMouseInput(value) {
+    useMouseInput = value;
+  }
+
+  getUseMouseInput() {
+    return useMouseInput;
+  }
+}
+
+const Config = new GameConfiguration;
+Config.reset();
+
+export default Config;
\ No newline at end of file

resources/js/game/GameConfig.js

-var Config = {
-  MAX_GAZE_POINT_AGE: 500,
-  MAX_NUMBER_OF_ENEMIES: 10,
-  TARGET_RADIUS: 100,
-  DEFAULT_PLAYER_DAMAGE: 5,
-  ENEMEY_SPAWN_DELAY: 1000,
-  FPS_BUFFER_LENGTH: 50,
-  BACKGROUND_COLOR: "#333",
-  DEFAULT_GAZE_POINT_RADIUS: 15,
-  DEFAULT_GAZE_POINT_COLOR: "#4cd494",
-  DEBUG_POSITION_OFFSET: 10,
-  DEBUG_FONT: "16px ShareTech",
-  DEBUG_COLOR: "#ffffff",
-};
-
-Object.freeze(Config);
-
-export default Config;
\ No newline at end of file

resources/js/game/GameManager.js

+import GameConfig from "../config/GameConfiguration.js";
 import Logger from "../utils/Logger.js";
-import Config from "./GameConfig.js";
 import Time from "../utils/Time.js";
 import GameRenderer from "./GameRenderer.js";
 import Enemy from "./objects/Enemy.js";
-import World from "./objects/World.js";
+import Planet from "./objects/Planet.js";
 
 var gameLoop,
-  gameArea,
-  lastUpdate,
-  lastEnemySpawn,
-  options,
-  world,
+  stage,
+  planet,
   enemies,
-  gazePoints;
+  gazePoints,
+  lastUpdate,
+  lastEnemySpawn;
 
 function onTick() {
   let now = Date.now(),
@@ -26,31 +25,28 @@ function onTick() {
 function getCurrentState(delta) {
   return {
     delta: delta,
-    frameRate: options.frameRate,
-    objects: [...enemies, world],
+    objects: [...enemies, planet],
     gazePoints: gazePoints,
-    debug: options.debug,
   };
 }
 
 function updateGazePoints(now) {
   for (let i = gazePoints.length - 1; i >= 0; i--) {
     let age = now - gazePoints[i].createdAt;
-    if (age > Config.MAX_GAZE_POINT_AGE) {
+    if (age > GameConfig.getMaxGazePointAge()) {
       gazePoints.splice(i, 1);
     } else {
-      gazePoints[i].relativeAge = age / Config.MAX_GAZE_POINT_AGE;
+      gazePoints[i].relativeAge = age / GameConfig.getMaxGazePointAge();
     }
   }
 }
 
 function updateEnemies(now, delta) {
   let currentGazePosition = gazePoints[gazePoints.length - 1];
-  if ((now - lastEnemySpawn) >= Config.ENEMEY_SPAWN_DELAY) {
-    if (enemies.length < Config.MAX_NUMBER_OF_ENEMIES) {
+  if ((now - lastEnemySpawn) >= GameConfig.getEnemySpawnDelay()) {
+    if (enemies.length < GameConfig.getMaxNumberOfEnemies()) {
       Logger.log("Add new enemy", "Game");
-      enemies.push(Enemy.createEnemy(gameArea.width, -50, gameArea.center.x,
-        gameArea.center.y));
+      enemies.push(Enemy.createEnemy(GameConfig.getScreenWidth(), -50, planet.x, planet.y));
       lastEnemySpawn = now;
     }
   }
@@ -58,11 +54,11 @@ function updateEnemies(now, delta) {
     // Update enemy's position 
     enemies[i].update(delta);
     // Check if enemy has hit target
-    if (world.isHitBy(enemies[i])) {
+    if (planet.isHitBy(enemies[i])) {
       Logger.log(`Enemy hit target for ${enemies[i].damage} dmg`, "Game");
-      // Reduce world health after enemy has hit
-      world.health -= enemies[i].damage;
-      if (world.health <= 0) {
+      // Reduce planet health after enemy has hit
+      planet.health -= enemies[i].damage;
+      if (planet.health <= 0) {
         onWorldDestroyed();
       }
       // Remove enemy after it has hit target
@@ -81,7 +77,7 @@ function updateEnemies(now, delta) {
         y: currentGazePosition.targetY,
       })) {
       // Update enemy's health 
-      enemies[i].health -= Config.DEFAULT_PLAYER_DAMAGE;
+      enemies[i].health -= GameConfig.getPlayerDamage();
       // Remove enemy if destroyed
       if (enemies[i].health <= 0) {
         Logger.log(`Enemy destroyed by player`, "Game");
@@ -93,32 +89,23 @@ function updateEnemies(now, delta) {
 }
 
 function onWorldDestroyed() {
-  Logger.log(`World destroyed [Current health ${world.health}]`, "Game");
+  Logger.log(`World destroyed [Current health ${planet.health}]`, "Game");
 }
 
 class GameManager {
 
-  init(gameOptions) {
-    options = gameOptions;
-    gameArea = {
-      width: options.width,
-      height: options.height,
-      center: {
-        x: options.width / 2,
-        y: options.height / 2,
-      },
-    };
+  init(canvasStage) {
+    stage = canvasStage;
     enemies = [];
     gazePoints = [];
-    world = new World(gameArea.center.x, gameArea.center.y);
+    planet = new Planet(GameConfig.getScreenWidth()/2, GameConfig.getScreenHeight());
     lastEnemySpawn = 0;
   }
 
   start() {
-
-    GameRenderer.init(options.canvas, options.width, options.height, options.version);
+    GameRenderer.init(stage);
     lastUpdate = Date.now();
-    gameLoop = setInterval(onTick, (Time.ONE_SECOND_IN_MS / options.frameRate));
+    gameLoop = setInterval(onTick, (Time.ONE_SECOND_IN_MS / GameConfig.getFPS()));
   }
 
   addGazePoint(point) {

resources/js/game/GameRenderer.js

-import Config from "./GameConfig.js";
+import GameConfig from "../config/GameConfiguration.js";
 import Time from "../utils/Time.js";
 
 var canvas,
   context,
-  gameVersion,
   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 (state.debug === true) {
+  if (GameConfig.getShowDebugInfoOnScreen() === true) {
     drawDebugInfo();
   }
 }
 
-// Move fps callculation to manager since we need it there to use delta
+// 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 === Config.FPS_BUFFER_LENGTH) {
+  if (fpsBuffer.length === GameConfig.getFPSBufferLenght()) {
     currentFPS = parseInt(fpsBuffer.reduce((a, b) => a + b, 0) /
       fpsBuffer.length);
     fpsBuffer.shift();
@@ -35,7 +35,7 @@ function drawObjects(objects) {
 }
 
 function drawGazePoints(gazePoints) {
-  context.fillStyle = Config.DEFAULT_GAZE_POINT_COLOR;
+  context.fillStyle = GameConfig.getGazePointColor();
   for (let i = 0; i < gazePoints.length; i++) {
     drawSingleGazePoint(gazePoints[i]);
   }
@@ -43,7 +43,7 @@ function drawGazePoints(gazePoints) {
 
 function drawSingleGazePoint(gazePoint) {
   let inversedAge = 1 - gazePoint.relativeAge,
-    radius = inversedAge * Config.DEFAULT_GAZE_POINT_RADIUS;
+    radius = inversedAge * GameConfig.getGazePointRadius();
   context.save();
   context.globalAlpha = inversedAge;
   context.beginPath();
@@ -56,26 +56,24 @@ function drawSingleGazePoint(gazePoint) {
 
 function drawDebugInfo() {
   context.beginPath();
-  context.font = Config.DEBUG_FONT;
-  context.fillStyle = Config.DEBUG_COLOR;
-  context.fillText(`${gameVersion} | ${currentFPS}fps`, Config.DEBUG_POSITION_OFFSET,
-    canvas.height - Config.DEBUG_POSITION_OFFSET);
+  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, width, height, version) {
+  init(gameCanvas) {
     fpsBuffer = [];
     currentFPS = 0;
-    gameVersion = version;
     canvas = gameCanvas;
-    canvas.width = width;
-    canvas.height = height;
-    canvas.style.width = `${width}px`;
-    canvas.style.height = `${height}px`;
+    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 = Config.BACKGROUND_COLOR;
+    canvas.style.backgroundColor = GameConfig.getWorldBackgroundColor();
   }
 
   render(state) {

resources/js/game/StarGazer.js

 import Logger from "../utils/Logger.js";
 import GameManager from "./GameManager.js";
 
-var canvas, provider;
+var stage, provider;
 
 function init(options) {
   Logger.log("Starting StarGazer game", "Game");
-  canvas = options.canvas;
-  GameManager.init({
-    canvas: canvas,
-    frameRate: options.fps,
-    version: options.version,
-    debug: options.showDebug,
-    width: options.width,
-    height: options.height,
-  });
+  stage = options.canvas;
+  GameManager.init(stage);
   GameManager.start();
   provider = options.gazeDataProvider;
   provider.addEventListener("dataavailable", onGazeUpdate);
@@ -21,7 +14,7 @@ function init(options) {
 
 function onGazeUpdate(event) {
   let gazePoint = event.data;
-  gazePoint.linkTo(canvas);
+  gazePoint.linkTo(stage);
   if (gazePoint.hasLink) {
     GameManager.addGazePoint(gazePoint);
   }

resources/js/game/objects/World.js → resources/js/game/objects/Planet.js

 import GameObject from "./GameObject.js";
 
 const DEFAULT_HEALTH = 100,
-  DEFAULT_WIDTH = 200,
-  DEFAULT_HEIGHT = 200,
-  DEFAULT_HIT_BOX_RADIUS = 100,
-  DEFAULT_WORLD_COLOR = "#0d396f",
-  DEFAULT_WORLD_BORDER_COLOR = "#dafffe",
-  DEFAULT_WORLD_BORDER_WIDTH = "10";
+  DEFAULT_WIDTH = 500,
+  DEFAULT_HEIGHT = 500,
+  DEFAULT_HIT_BOX_RADIUS = 270,
+  DEFAULT_PLANET_COLOR = "#5bbe61",
+  DEFAULT_PLANET_BORDER_COLOR = "#dafffe",
+  DEFAULT_PLANET_BORDER_WIDTH = "20";
 
-class World extends GameObject {
+class Planet extends GameObject {
 
   constructor(x, y) {
     super(x, y, DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_HIT_BOX_RADIUS,
-      0, 0, DEFAULT_WORLD_COLOR);
+      0, 0, DEFAULT_PLANET_COLOR);
     this.health = DEFAULT_HEALTH;
-    this.borderColor = DEFAULT_WORLD_BORDER_COLOR;
-    this.borderWidth = DEFAULT_WORLD_BORDER_WIDTH;
+    this.borderColor = DEFAULT_PLANET_BORDER_COLOR;
+    this.borderWidth = DEFAULT_PLANET_BORDER_WIDTH;
   }
 
   draw(context) {
@@ -34,4 +34,4 @@ class World extends GameObject {
 
 }
 
-export default World;
\ No newline at end of file
+export default Planet;
\ No newline at end of file

resources/js/index.js

-import Config from "./Config.js";
+import GameConfig from "./config/GameConfiguration.js";
 import Logger from "./utils/Logger.js";
 import StarGazer from "./game/StarGazer.js";
 import FakeGazeDataProvider from "./gaze/FakeGazeDataProvider.js";
 import GazeDataProvider from "./gaze/GazeDataProvider.js";
 
 var canvas = document.querySelector("canvas"),
-  starScreen = document.querySelector("#startScreen"),
-  options = {
-    useMouse: false, // Defauls set in HTML document with checked attribute
-    showDebug: false, // Defauls set in HTML document with checked attribute
-    logToConsole: false, // Defauls set in HTML document with checked attribute
-  };
+  starScreen = document.querySelector("#startScreen");
 
 function init() {
   loadOptions();
-  if (options.logToConsole === true) {
+  if (GameConfig.getShowVerboseDebugInfoInConsole() === true) {
     Logger.enable();
   }
-  document.querySelector("#versionInfo").innerHTML = `build ${Config.GAME_VERSION}`;
+  document.querySelector("#versionInfo").innerHTML =
+    `build ${GameConfig.getVersion()}`;
   document.querySelector("#startButton").addEventListener("click",
     prepareGame);
 }
 
 function loadOptions() {
-  options.useMouse = document.querySelector("#useMouseInput").checked;
-  options.showDebug = document.querySelector("#showDebugInfo").checked;
-  options.logToConsole = document.querySelector("#logToConsole").checked;
+  let useMouse = document.querySelector("#useMouseInput").checked,
+    showDebug = document.querySelector("#showDebugInfo").checked,
+    logToConsole = document.querySelector("#logToConsole").checked;
+  GameConfig.setUseMouseInput(useMouse);
+  GameConfig.setShowDebugInfoOnScreen(showDebug);
+  GameConfig.setShowVerboseDebugInfoInConsole(logToConsole);
 }
 
 function prepareGame() {
   loadOptions();
   StarGazer.init({
     canvas: canvas,
-    fps: Config.TARGET_FPS,
-    version: `Star Gazer, build ${Config.GAME_VERSION}`,
-    showDebug: options.showDebug,
-    width: Config.SCREEN_WIDTH,
-    height: Config.SCREEN_HEIGHT,
     gazeDataProvider: getDataProvider(),
   });
   canvas.requestFullscreen().then(startGame);
@@ -49,12 +43,12 @@ function startGame() {
 
 function getDataProvider() {
   let provider;
-  if (options.useMouse === true) {
+  if (GameConfig.getUseMouseInput() === true) {
     provider = new FakeGazeDataProvider();
   } else {
     provider = new GazeDataProvider();
   }
-  provider.start(Config.GAZE_SERVER_URL);
+  provider.start(GameConfig.getGazeServerURL());
   return provider;
 }