Merge pull request #38 from SaltieRL/pa-bug-fixes

General bug fixes and adjustments

Author: Abbondanzo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "replay-viewer",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Rocket League replay viewer React component and tooling",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

src/constants/eventNames.ts

@@ -1,3 +1,5 @@
 export const CAMERA_CHANGE = "CAMERA_CHANGE"
 export const CAMERA_FRAME_UPDATE = "CAMERA_FRAME_UPDATE"
 export const PLAY_PAUSE = "PLAY_PAUSE"
+export const FRAME = "FRAME"
+export const CANVAS_RESIZE = "CANVAS_RESIZE"

src/eventbus/EventBus.ts

@@ -31,6 +31,9 @@ class EventBus {
     if (!this.listeners[type]) {
       this.listeners[type] = []
     }
+    // Remove duplicate event listeners
+    this.removeEventListener(type, callback, scope)
+    // Add this listener to the list
     this.listeners[type].push({ type, callback, scope })
   }
 

src/eventbus/events/cameraChange.ts

@@ -3,6 +3,9 @@ import { Camera } from "three"
 import { CAMERA_CHANGE } from "../../constants/eventNames"
 import EventBus from "../EventBus"
 
+/**
+ * Event fired when the active camera is updated with a new object.
+ */
 export interface CameraChangeEvent {
   camera: Camera
 }

src/eventbus/events/cameraFrameUpdate.ts

@@ -3,6 +3,9 @@ import { Vector3 } from "three"
 import { CAMERA_FRAME_UPDATE } from "../../constants/eventNames"
 import EventBus from "../EventBus"
 
+/**
+ * Event that fires telling all cameras to adjust their settings.
+ */
 export interface CameraFrameUpdateEvent {
   ballPosition: Vector3
   ballCam: boolean

src/eventbus/events/canvasResize.ts

@@ -0,0 +1,16 @@
+import { CANVAS_RESIZE } from "../../constants/eventNames"
+import EventBus from "../EventBus"
+
+/**
+ * Fires when the main canvas is resized and its dimensions are adjusted.
+ */
+export interface CanvasResizeEvent {
+  width: number
+  height: number
+}
+
+export const {
+  addEventListener: addCanvasResizeListener,
+  removeEventListener: removeCanvasResizeListener,
+  dispatch: dispatchCanvasResizeEvent,
+} = EventBus.buildEvent<CanvasResizeEvent>(CANVAS_RESIZE)

src/eventbus/events/frame.ts

@@ -0,0 +1,15 @@
+import { FRAME } from "../../constants/eventNames"
+import EventBus from "../EventBus"
+
+/**
+ * Fires each time the global game clock advances a frame or updates its current frame.
+ */
+export interface FrameEvent {
+  frame: number
+}
+
+export const {
+  addEventListener: addFrameListener,
+  removeEventListener: removeFrameListener,
+  dispatch: dispatchFrameEvent,
+} = EventBus.buildEvent<FrameEvent>(FRAME)

src/eventbus/events/playPause.ts

@@ -0,0 +1,15 @@
+import { PLAY_PAUSE } from "../../constants/eventNames"
+import EventBus from "../EventBus"
+
+/**
+ * Fires when the global game clock has paused.
+ */
+export interface PlayPauseEvent {
+  paused: boolean
+}
+
+export const {
+  addEventListener: addPlayPauseListener,
+  removeEventListener: removePlayPauseListener,
+  dispatch: dispatchPlayPauseEvent,
+} = EventBus.buildEvent<PlayPauseEvent>(PLAY_PAUSE)

src/managers/CameraManager.ts

@@ -8,6 +8,12 @@ import {
 } from "../constants/gameObjectNames"
 import { dispatchCameraChange } from "../eventbus/events/cameraChange"
 import { dispatchCameraFrameUpdate } from "../eventbus/events/cameraFrameUpdate"
+import {
+  addCanvasResizeListener,
+  CanvasResizeEvent,
+  removeCanvasResizeListener,
+} from "../eventbus/events/canvasResize"
+import { addFrameListener, removeFrameListener } from "../eventbus/events/frame"
 import SceneManager from "./SceneManager"
 
 const ORTHOGRAPHIC_CAMERA_NAMES: string[] = Object.keys(ORTHOGRAPHIC).map(
@@ -33,15 +39,18 @@ class CameraManager {
 
     this.activeCamera.position.z = 5000
     this.activeCamera.position.y = 750
+
+    addFrameListener(this.update)
+    addCanvasResizeListener(this.updateSize)
   }
 
-  updateSize(width: number, height: number) {
+  private readonly updateSize = ({ width, height }: CanvasResizeEvent) => {
     this.width = width
     this.height = height
     this.updateCameraSize()
   }
 
-  update() {
+  private readonly update = () => {
     const { position } = SceneManager.getInstance().ball.ball
     dispatchCameraFrameUpdate({
       ballPosition: position,
@@ -105,6 +114,25 @@ class CameraManager {
       camera.aspect = width / height
       camera.updateProjectionMatrix()
     } else if (camera instanceof OrthographicCamera) {
+      /**
+       * Here, we are computing the zoom of the camera given the aspect ratio. For cameras with an
+       * aspect ratio greater than 4:3, we base the zoom on the height. Otherwise, we use width. The
+       * minimum zoom should always be 0.02.
+       *
+       * The zoom when based on the height is a simple linear function y = x / 12500 + 0.01, where x
+       * is the new height and y is the desired zoom.
+       *
+       * The denominator of the width-based computation is simply the slope of the previous
+       * function, 12500, multiplied by 1.3 since this is aspect ratio breaking point we have set in
+       * the if statement.
+       */
+      if (width / height > 1.3) {
+        const newZoom = height / 12500 + 0.01
+        camera.zoom = Math.max(newZoom, 0.02)
+      } else {
+        const newZoom = width / 16250 + 0.01
+        camera.zoom = Math.max(newZoom, 0.02)
+      }
       camera.left = -width / 2
       camera.right = width / 2
       camera.top = height / 2
@@ -116,6 +144,7 @@ class CameraManager {
   private setActiveCamera(camera: Camera) {
     this.activeCamera = camera
     this.updateCameraSize()
+    this.update()
   }
 
   /**
@@ -134,6 +163,14 @@ class CameraManager {
     CameraManager.instance = new CameraManager()
     return CameraManager.instance
   }
+  static destruct() {
+    const { instance } = CameraManager
+    if (instance) {
+      removeFrameListener(instance.update)
+      removeCanvasResizeListener(instance.updateSize)
+      CameraManager.instance = undefined
+    }
+  }
 }
 
 export interface CameraLocationOptions {

src/managers/GameManager.ts

@@ -2,7 +2,26 @@ import { WebGLRenderer } from "three"
 
 import defaultGameBuilder from "../builders/GameBuilder"
 import EventBus from "../eventbus/EventBus"
-import FPSClock, { FPSClockSubscriberOptions } from "../utils/FPSClock"
+import {
+  addCameraChangeListener,
+  removeCameraChangeListener,
+} from "../eventbus/events/cameraChange"
+import {
+  addCanvasResizeListener,
+  CanvasResizeEvent,
+  removeCanvasResizeListener,
+} from "../eventbus/events/canvasResize"
+import {
+  addFrameListener,
+  FrameEvent,
+  removeFrameListener,
+} from "../eventbus/events/frame"
+import {
+  addPlayPauseListener,
+  PlayPauseEvent,
+  removePlayPauseListener,
+} from "../eventbus/events/playPause"
+import FPSClock from "../utils/FPSClock"
 import AnimationManager from "./AnimationManager"
 import CameraManager from "./CameraManager"
 import SceneManager from "./SceneManager"
@@ -21,18 +40,22 @@ export class GameManager {
     this.animate = this.animate.bind(this)
     this.render = this.render.bind(this)
     this.clock = clock
-    clock.subscribe(this.animate)
 
     AnimationManager.getInstance().playAnimationClips()
+    addPlayPauseListener(this.onPlayPause)
+    addFrameListener(this.animate)
+    addCanvasResizeListener(this.updateSize)
+    addCameraChangeListener(this.render)
   }
 
-  animate({  }: FPSClockSubscriberOptions) {
+  onPlayPause = ({ paused }: PlayPauseEvent) => {
+    paused ? this.clock.pause() : this.clock.play()
+  }
+
+  animate({  }: FrameEvent) {
     const delta = this.clock.getDelta()
-    CameraManager.getInstance().update()
 
     if (delta) {
-      SceneManager.getInstance().update()
-      CameraManager.getInstance().update()
       AnimationManager.getInstance().updateAnimationClips(delta)
       this.render()
     }
@@ -42,31 +65,26 @@ export class GameManager {
     return this.renderer.domElement
   }
 
-  updateSize(width: number = 640, height: number = 480) {
-    CameraManager.getInstance().updateSize(width, height)
-    this.renderer.setSize(width, height)
-    this.render()
-  }
-
-  render() {
+  private readonly render = () => {
     const { scene } = SceneManager.getInstance()
     const { activeCamera } = CameraManager.getInstance()
     this.renderer.render(scene, activeCamera)
   }
 
-  static builder = defaultGameBuilder
-
-  private destruct() {
-    this.clock.unsubscribe(this.animate)
-    this.clock.reset()
-    EventBus.reset()
+  private readonly updateSize = ({
+    width = 640,
+    height = 480,
+  }: CanvasResizeEvent) => {
+    this.renderer.setSize(width, height)
+    this.render()
   }
 
   /**
    * ========================================
    * Managers are singletons
    * ========================================
    */
+  static builder = defaultGameBuilder
   private static instance?: GameManager
   static getInstance() {
     if (!GameManager.instance) {
@@ -75,10 +93,24 @@ export class GameManager {
     return GameManager.instance
   }
   static init(options: GameManagerOptions) {
-    if (GameManager.instance) {
-      GameManager.instance.destruct()
-    }
     GameManager.instance = new GameManager(options)
     return GameManager.instance
   }
+  static destruct() {
+    // Destruct other managers
+    SceneManager.destruct()
+    CameraManager.destruct()
+
+    // Handle destruction of the existing game
+    const { instance } = GameManager
+    if (instance) {
+      removePlayPauseListener(instance.onPlayPause)
+      removeFrameListener(instance.animate)
+      removeCanvasResizeListener(instance.updateSize)
+      removeCameraChangeListener(instance.render)
+      instance.clock.reset()
+      EventBus.reset()
+      GameManager.instance = undefined
+    }
+  }
 }