refactor(frontend): use subscribe/dispatch pattern for navigation event (@eikomaniac)

frontend/src/ts/controllers/route-controller.ts

@@ -9,7 +9,7 @@ import * as Notifications from "../elements/notifications";
 import tribeSocket from "../tribe/tribe-socket";
 import { setAutoJoin } from "../tribe/tribe-auto-join";
 import { LoadingOptions } from "../pages/page";
-import { setNavigationService } from "../observables/navigate-event";
+import * as NavigationEvent from "../observables/navigation-event";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
@@ -312,10 +312,8 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 });
 
-// Register navigation service for modules that can't directly import navigate
+// Subscribe to navigation events from modules that can't directly import navigate
 // due to circular dependency constraints
-setNavigationService({
-  navigate(url, options) {
-    void navigate(url, options);
-  },
+NavigationEvent.subscribe((url, options) => {
+  void navigate(url, options);
 });

frontend/src/ts/observables/navigation-event.ts

@@ -0,0 +1,23 @@
+type NavigateOptions = {
+  force?: boolean;
+  tribeOverride?: boolean;
+};
+
+type SubscribeFunction = (url: string, options?: NavigateOptions) => void;
+
+const subscribers: SubscribeFunction[] = [];
+
+export function subscribe(fn: SubscribeFunction): void {
+  subscribers.push(fn);
+}
+
+export function dispatch(url: string, options?: NavigateOptions): void {
+  subscribers.forEach((fn) => {
+    try {
+      fn(url, options);
+    } catch (e) {
+      console.error("Navigate event subscriber threw an error");
+      console.error(e);
+    }
+  });
+}

frontend/src/ts/tribe/tribe.ts

@@ -29,7 +29,7 @@ import * as TestStats from "../test/test-stats";
 import * as TestInput from "../test/test-input";
 import * as TribeCarets from "./tribe-carets";
 import * as TribeTypes from "./types";
-import { navigate } from "../observables/navigate-event";
+import * as NavigationEvent from "../observables/navigation-event";
 import { ColorName } from "../elements/theme-colors";
 import * as TribeAutoJoin from "./tribe-auto-join";
 
@@ -392,7 +392,7 @@ TribeSocket.in.room.left(() => {
   updateState(1);
   TribePageMenu.enableButtons();
   if (!$(".pageTribe").hasClass("active")) {
-    navigate("/tribe");
+    NavigationEvent.dispatch("/tribe");
   }
   TribeCarets.destroyAll();
   TribeSound.play("leave");
@@ -521,7 +521,7 @@ TribeSocket.in.room.initRace((data) => {
   } else {
     //TODO update lobby bars
     if (ActivePage.get() !== "tribe") {
-      navigate("/tribe", {
+      NavigationEvent.dispatch("/tribe", {
         tribeOverride: true,
       });
     }
@@ -531,7 +531,7 @@ TribeSocket.in.room.initRace((data) => {
   }
   if (room) room.seed = data.seed;
   Random.setSeed(TribeState.getRoom()?.seed.toString() ?? "");
-  navigate("/", {
+  NavigationEvent.dispatch("/", {
     tribeOverride: true,
     force: true,
   });
@@ -766,7 +766,7 @@ TribeSocket.in.room.readyTimerOver(() => {
 });
 
 TribeSocket.in.room.backToLobby(() => {
-  navigate("/tribe");
+  NavigationEvent.dispatch("/tribe");
 });
 
 TribeSocket.in.room.finalPositions((data) => {