Added more abstraction for event listeners. Tested with traverse

resources/js/game/lib/containers/registrations/game-event-container.ts

@@ -0,0 +1,21 @@
+import {CoreContainer} from "../core-container";
+import GameEventListeners from "../../game/event-listeners/game-event-listeners";
+import MapListeners from "../../game/event-listeners/game/map-listeners";
+
+/**
+ * Register game event listeners here.
+ *
+ * @param container
+ */
+function gameEventContainer(container: CoreContainer) {
+
+    // Game Event Listeners:
+    // Classes are registered with their interface as their key.
+    container.register('GameListeners', {useClass: MapListeners});
+
+    // The Core Listener Class
+    container.register('game-event-listeners', GameEventListeners);
+
+}
+
+export default gameEventContainer;

resources/js/game/lib/containers/registrations/main-container.ts

@@ -0,0 +1,19 @@
+import {CoreContainer} from "../core-container";
+import CoreEventListener from "../../game/event-listeners/core-event-listener";
+
+/**
+ * Register core dependencies here.
+ *
+ * These dependencies are used by other classes that are registered in the
+ * container.
+ *
+ * @param container
+ */
+function mainContainer(container: CoreContainer) {
+
+    container.register('core-event-listener', {
+        useClass: CoreEventListener
+    });
+}
+
+export default mainContainer;

resources/js/game/lib/game/event-listeners/core-event-listener.ts

@@ -0,0 +1,47 @@
+import Echo from "laravel-echo";
+
+export default class CoreEventListener {
+
+    private echo?: Echo;
+
+    /**
+     * Initialize Laravel Echo
+     *
+     * @throws Error - if csrf token is missing.
+     */
+    public initialize(): void {
+        let token: HTMLMetaElement | null = document.head.querySelector('meta[name="csrf-token"]');
+
+        if (token === null) {
+            throw new Error('CSRF Token is missing. Failed to initialize.');
+        }
+
+        this.echo = new Echo({
+            broadcaster: 'pusher',
+            key: process.env.MIX_PUSHER_APP_KEY,
+            wsHost: window.location.hostname,
+            wsPort: 6001,
+            wssPort: 6001,
+            enabledTransports: ['ws', 'wss'],
+            namespace: 'App',
+            auth: {
+                headers: {
+                    'X-CSRF-TOKEN': token.content
+                }
+            }
+        });
+    }
+
+    /**
+     * Fetch an instance of echo.
+     *
+     * @throws Error - if echo is not initialized.
+     */
+    public getEcho(): Echo {
+        if (this.echo) {
+            return this.echo;
+        }
+
+        throw new Error('Echo has not been initialized.');
+    }
+}

resources/js/game/lib/game/event-listeners/game-event-listeners.ts

@@ -0,0 +1,46 @@
+import CoreEventListener from "./core-event-listener";
+import {singleton, inject} from "tsyringe";
+import {Channel} from "laravel-echo";
+import Game from "../../../game";
+import {serviceContainer} from "../../containers/core-container";
+import GameListener from "./game-listener";
+import MapListeners from "./game/map-listeners";
+
+@singleton()
+export default class GameEventListeners {
+
+    private component?: Game;
+
+    private userId?: number;
+
+    private traverseUpdate?: GameListener;
+
+    constructor(@inject(CoreEventListener) private coreEventListener: CoreEventListener) {}
+
+    public initialize(component: Game, userId: number): void {
+        this.component = component;
+        this.userId    = userId;
+
+        this.traverseUpdate = serviceContainer().fetch<GameListener>(MapListeners);
+    }
+
+    public registerEvents(): void {
+
+        if (!this.component || !this.userId) {
+            throw new Error('Need to call initialize on GameEventListeners first.');
+        }
+
+
+        if (this.traverseUpdate) {
+            this.traverseUpdate.initialize(this.component, this.userId);
+            this.traverseUpdate.register();
+        }
+    }
+
+    public listenToEvents(): void {
+
+        if (this.traverseUpdate) {
+            this.traverseUpdate.listen();
+        }
+    }
+}

resources/js/game/lib/game/event-listeners/game-listener.ts

@@ -0,0 +1,14 @@
+import Listener from "./listener";
+import Game from "../../../game";
+
+export default interface GameListener extends Listener {
+
+    /**
+     *
+     * Initialize the listener for the Game Component.
+     *
+     * @param component
+     * @param usrrId
+     */
+    initialize: (component: Game, userId: number) => void;
+}

resources/js/game/lib/game/event-listeners/game/map-listeners.ts

@@ -0,0 +1,53 @@
+import GameListener from "../game-listener";
+import Game from "../../../../game";
+import {inject, injectable} from "tsyringe";
+import CoreEventListener from "../core-event-listener";
+import {Channel} from "laravel-echo";
+
+@injectable()
+export default class MapListeners implements GameListener {
+
+    private component?: Game;
+
+    private userId?: number;
+
+    private traverseUpdate?: Channel;
+
+    constructor(@inject(CoreEventListener) private coreEventListener: CoreEventListener) {}
+
+    public initialize(component: Game, userId: number): void {
+        this.component = component;
+        this.userId    = userId;
+    }
+
+    public register(): void {
+        this.coreEventListener.initialize();
+
+        try {
+            const echo = this.coreEventListener.getEcho();
+
+            this.traverseUpdate = echo.private("update-plane-" + this.userId);
+        } catch (e: any|unknown) {
+            throw new Error(e);
+        }
+    }
+
+    public listen(): void {
+        if (this.traverseUpdate) {
+            this.traverseUpdate.listen(
+                "Game.Maps.Events.UpdateMap",
+                (event: any) => {
+                    if (!this.component) {
+                        return;
+                    }
+
+                    this.component.setStateFromData(event.mapDetails);
+
+                    this.component.updateQuestPlane(
+                        event.mapDetails.character_map.game_map.name
+                    );
+                }
+            );
+        }
+    }
+}

resources/js/game/lib/game/event-listeners/listener.ts

@@ -0,0 +1,16 @@
+export default interface Listener {
+
+    /**
+     * Use this to register your listener.
+     *
+     * This is to be called in the constructor of a react class component.
+     */
+    register: () => void;
+
+    /**
+     * Use this to listen to events from the server.
+     *
+     * This is to be called in the componentDidMount of a react class component.
+     */
+    listen: () => void;
+}