Add support for game over / restarting the game (google#150)

* Add support for gameover / restarting the game

- Pulled everything that needs to be reset into a level class
- Updating many references
- Trigger the shared gameover screen
- Create a new level when the game is restarted
- Keep the main loop running the whole time

Author: Jezzamonn

static/scenes/railroad/js/game.js

@@ -2,19 +2,34 @@
 
 goog.provide('app.Game');
 
-goog.require('app.Constants');
 goog.require('app.Scene');
 goog.require('app.Present');
+goog.require('app.Constants');
+goog.require('app.Level');
 goog.require('app.shared.Scoreboard');
-goog.require('app.systems.CameraSystem');
-goog.require('app.systems.ElvesSystem');
-goog.require('app.systems.RaycasterSystem');
-goog.require('app.systems.PresentSystem');
+goog.require('app.shared.Gameover');
+
+/**
+ * Maximum time allowed between updates. If the player's computer was locked or
+ * the window was inactive, we could potentially have a very large delta between
+ * frames. This keeps the game somewhat paused when the user is inactive.
+ */
+const maxTimeStep = 0.5;
 
 class Game {
 
   constructor() {
     this.paused = false;
+
+    this.scoreboard = new app.shared.Scoreboard(this, null, app.Constants.LEVEL_COUNT);
+    this.gameoverView = new app.shared.Gameover(this);
+
+    this.renderer = new THREE.WebGLRenderer();
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.shadowMap.enabled = true;
+
+    this.level = undefined;
+
     this.previousSeconds = Date.now() / 1000;
   }
 
@@ -30,37 +45,28 @@ class Game {
    * game.
    */
   async start(container) {
-    this.renderer = new THREE.WebGLRenderer();
-    this.renderer.setSize(window.innerWidth, window.innerHeight);
-    this.renderer.shadowMap.enabled = true;
     container.appendChild(this.renderer.domElement);
 
     await Promise.all([
       app.Scene.preload(),
       app.Present.preload(),
     ]);
 
-    this.placeholderScene = new app.Scene();
-    this.camera = this.placeholderScene.getCamera();
-    this.scoreboard = new app.shared.Scoreboard(this, undefined, app.Constants.NUM_LEVELS);
-    this.elvesSystem = new app.ElvesSystem(this.camera, this.placeholderScene);
-    this.presentSystem = new app.PresentSystem(this.placeholderScene);
-    this.raycasterSystem = new app.RaycasterSystem(this.renderer, this.camera, this.placeholderScene, this.scoreboard);
-
     this.setUpListeners();
     this.mainLoop();
 
-    window.addEventListener('resize', () => {
-      this.camera.aspect = window.innerWidth / window.innerHeight;
-      this.camera.updateProjectionMatrix();
-      this.renderer.setSize(window.innerWidth, window.innerHeight);
-      console.log(this.camera);
-    });
+    this.startLevel();
+  }
+
+  startLevel() {
+    if (this.level) {
+      this.level.cleanUp();
+    }
+    this.level = new Level(this.renderer, (score) => this.scoreboard.addScore(score));
   }
 
   pause() {
     this.paused = true;
-    this.previousSeconds = null;
   }
 
   resume() {
@@ -70,65 +76,67 @@ class Game {
     }
     this.paused = false;
     this.previousSeconds = Date.now() / 1000;
-    this.mainLoop();
   }
 
   restart() {
-    if (!this.paused) {
-      console.warn('Game must be paused before it can be restarted');
-      return;
-    }
-    console.log('TODO');
+    this.startLevel();
     this.paused = false;
-    this.mainLoop();
+    this.scoreboard.restart()
   }
 
   gameover() {
-    console.error('TODO');
+    this.paused = true;
+    this.gameoverView.show();
   }
 
   mainLoop() {
-    if (this.paused) {
-      return;
-    }
     this.update();
     this.render();
 
     requestAnimationFrame(() => this.mainLoop());
   }
 
   render() {
-    this.renderer.render(this.placeholderScene.scene, this.camera);
+    if (this.paused) {
+      return;
+    }
+
+    if (this.level) {
+      this.level.render(this.renderer);
+    }
   }
 
   /**
    * Handles the main logic for the game by making each system update.
    */
   update() {
     const nowSeconds = Date.now() / 1000;
-    const deltaSeconds = nowSeconds - this.previousSeconds;
-    this.placeholderScene.update(deltaSeconds);
-    this.elvesSystem.update(deltaSeconds);
-    this.presentSystem.update(deltaSeconds);
-    this.scoreboard.onFrame(deltaSeconds);
+    const deltaSeconds = Math.min(nowSeconds - this.previousSeconds, maxTimeStep);
+
+    if (!this.paused && this.level) {
+      this.level.update(deltaSeconds);
+      this.scoreboard.onFrame(deltaSeconds);
+    }
+
     this.previousSeconds = nowSeconds;
-    
   }
 
   setUpListeners() {
-    this.clickListener = this.renderer.domElement.addEventListener('click', (click) => {
+    this.renderer.domElement.addEventListener('click', (click) => {
       this.handleClick(click);
     });
+
+    window.addEventListener('resize', () => {
+      this.renderer.setSize(window.innerWidth, window.innerHeight);
+      if (this.level) {
+        this.level.scene.updateCameraSize();
+      }
+    });
   }
 
   handleClick(clickEvent) {
-    const nowSeconds = Date.now() / 1000;
-    const intersections = this.raycasterSystem.cast(clickEvent);
-
-    // Test present shot
-    // const aim = this.placeholderScene.getCameraPosition(nowSeconds + 30);
-    if (intersections.length > 0) {
-      this.presentSystem.shoot(intersections[0].point);
+    if (!this.paused && this.level) {
+      this.level.handleClick(clickEvent);
     }
   }
 }

static/scenes/railroad/js/level.js

@@ -0,0 +1,51 @@
+goog.provide('app.Level');
+
+goog.require('app.Scene');
+goog.require('app.systems.CameraSystem');
+goog.require('app.systems.ElvesSystem');
+goog.require('app.systems.RaycasterSystem');
+goog.require('app.systems.PresentSystem');
+
+/**
+ * Handles everything that lives within one level.
+ *
+ * For each new level, and when the game is restarted, a new instance will be created.
+ */
+class Level {
+
+  /**
+   * @param {*} renderer ThreeJS renderer.
+   * @param { function(number):void } addScore Function for adding to the game's score.
+   */
+  constructor(renderer, addScore) {
+    this.scene = new app.Scene();
+    this.camera = this.scene.getCamera();
+    this.elvesSystem = new app.ElvesSystem(this.camera, this.scene);
+    this.presentSystem = new app.PresentSystem(this.scene);
+    this.raycasterSystem = new app.RaycasterSystem(renderer, this.camera, this.scene, addScore);
+  }
+
+  cleanUp() {
+    // For the moment, it seems like nothing is actually needed here.
+  }
+
+  render(renderer) {
+    renderer.render(this.scene.scene, this.camera);
+  }
+
+  update(deltaSeconds) {
+    this.scene.update(deltaSeconds);
+    this.elvesSystem.update(deltaSeconds);
+    this.presentSystem.update(deltaSeconds);
+  }
+
+  handleClick(clickEvent) {
+    const intersections = this.raycasterSystem.cast(clickEvent);
+
+    if (intersections.length > 0) {
+      this.presentSystem.shoot(intersections[0].point);
+    }
+  }
+}
+
+app.Level = Level;

static/scenes/railroad/js/scene.js

@@ -53,6 +53,11 @@ class Scene {
     this.mixer.update(deltaSeconds);
   }
 
+  updateCameraSize() {
+    this.camera.aspect = window.innerWidth / window.innerHeight;
+    this.camera.updateProjectionMatrix();
+  }
+
   getCamera() {
     return this.camera;
   }

static/scenes/railroad/js/systems/raycaster.js

@@ -2,11 +2,17 @@ goog.provide('app.systems.RaycasterSystem');
 
 class RaycasterSystem {
 
-  constructor(renderer, camera, placeholderScene, scoreboard) {
+  /**
+   * @param {*} renderer ThreeJS renderer.
+   * @param {*} camera ThreeJS camera.
+   * @param { app.Scene } placeholderScene Our scene class
+   * @param { function(number):void } addScore Function for adding to the game's score.
+   */
+  constructor(renderer, camera, scene, addScore) {
     this.renderer = renderer;
     this.camera = camera;
-    this.placeholderScene = placeholderScene;
-    this.scoreboard = scoreboard;
+    this.scene = scene;
+    this.addScore = addScore;
     this.raycaster = new THREE.Raycaster();
   }
 
@@ -23,7 +29,7 @@ class RaycasterSystem {
     ray.x = (clickEvent.clientX / this.renderer.domElement.width) * 2 - 1;
     ray.y = -(clickEvent.clientY / this.renderer.domElement.height) * 2 + 1; 
     this.raycaster.setFromCamera(ray, this.camera);
-    return this.raycaster.intersectObjects(this.placeholderScene.scene.children, true);
+    return this.raycaster.intersectObjects(this.scene.scene.children, true);
   }
 
   updateScore(intersections) {
@@ -35,10 +41,10 @@ class RaycasterSystem {
       if (object.userData.clickable.type === 'elf') {
         score += 1;
       } else if (object.userData.clickable.type === 'ice') {
-        this.placeholderScene.setTimeScale(0.5);
+        this.scene.setTimeScale(0.5);
       }
     }
-    this.scoreboard.addScore(score);
+    this.addScore(score);
   }
 }