fix: Resolve build errors, circular dependencies, and config sync loop (@eikomaniac)

backend/src/utils/misc.ts

@@ -189,7 +189,7 @@ export function formatSeconds(
 }
 
 export function intersect<T>(a: T[], b: T[], removeDuplicates = false): T[] {
-  let t;
+  let t: T[];
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   if (b.length > a.length) (t = b), (b = a), (a = t); // indexOf to loop over shorter
   const filtered = a.filter(function (e) {
@@ -198,9 +198,8 @@ export function intersect<T>(a: T[], b: T[], removeDuplicates = false): T[] {
   return removeDuplicates ? [...new Set(filtered)] : filtered;
 }
 
-
 export function escapeHTML(str: string): string {
-  return String(str).replace(/[^\w. ]/gi, function (c) {
+  return str.replace(/[^\w. ]/gi, function (c) {
     return "&#" + c.charCodeAt(0) + ";";
   });
 }

frontend/src/html/pages/test.html

@@ -557,10 +557,10 @@
           <i class="fas fa-fw fa-ad"></i>
         </button> -->
         </div>
-      </div>
-      <div class="loginTip">
-        <a href="/login" router-link>Sign in</a>
-        to save your result
+        <div class="loginTip">
+          <a href="/login" router-link>Sign in</a>
+          to save your result
+        </div>
       </div>
       <div class="ssWatermark hidden">monkeytype.com</div>
     </div>

frontend/src/styles/test.scss

@@ -645,6 +645,7 @@
       "tribeResults tribeResults"
       "stats chart"
       "morestats morestats"
+      "bottom bottom"
       "tribeBottom tribeBottom";
     // "wordsHistory wordsHistory"
     // "buttons buttons"
@@ -780,6 +781,10 @@
       -webkit-user-select: none;
     }
 
+    .bottom {
+      grid-area: bottom;
+    }
+
     .chart {
       grid-area: chart;
       width: 100%;

frontend/src/styles/tribe.scss

@@ -711,9 +711,17 @@
   }
 }
 
-.pageTest #typingTest .tribeBars,
 .pageTribe .tribeBars {
   grid-area: players;
+}
+
+.pageTest #typingTest .tribeBars {
+  margin-bottom: 1em;
+  font-size: 1rem;
+}
+
+.pageTest #typingTest .tribeBars,
+.pageTribe .tribeBars {
   td {
     padding: 0 0.5rem;
   }

frontend/src/ts/commandline/commandline-metadata.ts

@@ -732,4 +732,16 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
       options: "fromSchema",
     },
   },
+
+  //tribe
+  tribeDelta: {
+    subgroup: {
+      options: "fromSchema",
+    },
+  },
+  tribeCarets: {
+    subgroup: {
+      options: "fromSchema",
+    },
+  },
 };

frontend/src/ts/commandline/lists.ts

@@ -60,6 +60,12 @@ const adsCommand = buildCommandForConfigKey("ads");
 const minSpeedCommand = buildCommandForConfigKey("minWpm");
 const minAccCommand = buildCommandForConfigKey("minAcc");
 const paceCaretCommand = buildCommandForConfigKey("paceCaret");
+const modeCommand = buildCommandForConfigKey("mode");
+const timeCommand = buildCommandForConfigKey("time");
+const wordsCommand = buildCommandForConfigKey("words");
+const quoteLengthCommand = buildCommandForConfigKey("quoteLength");
+const punctuationCommand = buildCommandForConfigKey("punctuation");
+const numbersCommand = buildCommandForConfigKey("numbers");
 
 export const commands: CommandsSubgroup = {
   title: "",
@@ -68,12 +74,12 @@ export const commands: CommandsSubgroup = {
     ...ResultScreenCommands,
 
     //test screen
-    buildCommandForConfigKey("punctuation"),
-    buildCommandForConfigKey("numbers"),
-    buildCommandForConfigKey("mode"),
-    buildCommandForConfigKey("time"),
-    buildCommandForConfigKey("words"),
-    buildCommandForConfigKey("quoteLength"),
+    punctuationCommand,
+    numbersCommand,
+    modeCommand,
+    timeCommand,
+    wordsCommand,
+    quoteLengthCommand,
     languageCommand,
     {
       id: "changeCustomModeText",
@@ -371,12 +377,12 @@ const lists = {
   tags: TagsCommands[0]?.subgroup,
   resultSaving: ResultSavingCommands[0]?.subgroup,
   blindMode: blindModeCommand.subgroup,
-  mode: ModeCommands[0]?.subgroup,
-  time: TimeCommands[0]?.subgroup,
-  words: WordsCommands[0]?.subgroup,
-  quoteLength: QuoteLengthCommands[0]?.subgroup,
-  punctuation: PunctuationCommands[0]?.subgroup,
-  numbers: NumbersCommands[0]?.subgroup,
+  mode: modeCommand.subgroup,
+  time: timeCommand.subgroup,
+  words: wordsCommand.subgroup,
+  quoteLength: quoteLengthCommand.subgroup,
+  punctuation: punctuationCommand.subgroup,
+  numbers: numbersCommand.subgroup,
 };
 
 export function doesListExist(listName: string): boolean {

frontend/src/ts/config.ts

@@ -210,17 +210,29 @@ export function genericSet<T extends keyof ConfigSchemas.Config>(
 }
 
 //numbers
-export function setNumbers(numb: boolean, nosave?: boolean): boolean {
-  return genericSet("numbers", numb, nosave);
+export function setNumbers(
+  numb: boolean,
+  nosave?: boolean,
+  tribeOverride = false
+): boolean {
+  return genericSet("numbers", numb, nosave, tribeOverride);
 }
 
 //punctuation
-export function setPunctuation(punc: boolean, nosave?: boolean): boolean {
-  return genericSet("punctuation", punc, nosave);
+export function setPunctuation(
+  punc: boolean,
+  nosave?: boolean,
+  tribeOverride = false
+): boolean {
+  return genericSet("punctuation", punc, nosave, tribeOverride);
 }
 
-export function setMode(mode: Mode, nosave?: boolean): boolean {
-  return genericSet("mode", mode, nosave);
+export function setMode(
+  mode: Mode,
+  nosave?: boolean,
+  tribeOverride = false
+): boolean {
+  return genericSet("mode", mode, nosave, tribeOverride);
 }
 
 export function setPlaySoundOnError(

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

@@ -1008,12 +1008,12 @@ $(document).on("keydown", async (event) => {
     if (TribeState.getState() >= 5) {
       if (TribeState.getState() > 5 && TribeState.getState() < 21) return;
       if (TribeState.getState() === 5 && ActivePage.get() !== "tribe") {
-        navigate("/tribe");
+        void navigate("/tribe");
         return;
       }
     } else {
       if (ActivePage.get() !== "test") {
-        navigate("/");
+        void navigate("/");
         return;
       }
     }
@@ -1061,10 +1061,10 @@ $(document).on("keydown", async (event) => {
         event,
       });
     } else {
-      handleChar("\n", TestInput.input.current.length);
+      void handleChar("\n", TestInput.input.current.length);
       setWordsInput(" " + TestInput.input.current);
       if (Config.tapeMode !== "off") {
-        TestUI.scrollTape();
+        void TestUI.scrollTape();
       }
     }
   }
@@ -1093,12 +1093,12 @@ $(document).on("keydown", async (event) => {
     if (TribeState.getState() >= 5) {
       if (TribeState.getState() > 5 && TribeState.getState() < 21) return;
       if (TribeState.getState() === 5 && ActivePage.get() !== "tribe") {
-        navigate("/tribe");
+        void navigate("/tribe");
         return;
       }
     } else {
       if (ActivePage.get() !== "test") {
-        navigate("/");
+        void navigate("/");
         return;
       }
     }
@@ -1146,10 +1146,10 @@ $(document).on("keydown", async (event) => {
         event,
       });
     } else {
-      handleChar("\n", TestInput.input.current.length);
+      void handleChar("\n", TestInput.input.current.length);
       setWordsInput(" " + TestInput.input.current);
       if (Config.tapeMode !== "off") {
-        TestUI.scrollTape();
+        void TestUI.scrollTape();
       }
     }
   }

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

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

frontend/src/ts/elements/input-suggestions.ts

@@ -1,8 +1,8 @@
 import * as TribeTypes from "../tribe/types";
 
 export class InputSuggestions {
-  private inputElement: JQuery<HTMLElement>;
-  private suggestionsElement: JQuery<HTMLElement> | undefined;
+  private inputElement: JQuery;
+  private suggestionsElement: JQuery | undefined;
   private maxSuggestions: number;
   private selectedIndex: number | undefined;
   private prefix: string;
@@ -14,7 +14,7 @@ export class InputSuggestions {
   private applyWith: string[];
 
   constructor(
-    inputElement: JQuery<HTMLElement>,
+    inputElement: JQuery,
     prefix: string,
     suffix: string,
     maxSuggestions: number,

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

@@ -0,0 +1,25 @@
+type NavigateOptions = {
+  force?: boolean;
+  tribeOverride?: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface NavigationService {
+  navigate(url: string, options?: NavigateOptions): void;
+}
+
+let service: NavigationService | undefined;
+
+export function setNavigationService(s: NavigationService): void {
+  if (service !== undefined) {
+    throw new Error("NavigationService already initialized");
+  }
+  service = s;
+}
+
+export function navigate(url: string, options?: NavigateOptions): void {
+  if (service === undefined) {
+    throw new Error("NavigationService not initialized");
+  }
+  service.navigate(url, options);
+}

frontend/src/ts/pages/test.ts

@@ -17,11 +17,10 @@ export const page = new Page({
   beforeHide: async (): Promise<void> => {
     $("#wordsInput").trigger("focusout");
   },
-  afterHide: async (options): Promise<void> => {
+  afterHide: async (): Promise<void> => {
     ManualRestart.set();
     TestLogic.restart({
       noAnim: true,
-      tribeOverride: options.tribeOverride ?? false,
     });
     void Funbox.clear();
     void ModesNotice.update();

frontend/src/ts/pages/tribe.ts

@@ -4,7 +4,7 @@ import * as TribeState from "../tribe/tribe-state";
 import * as TribeChat from "../tribe/tribe-chat";
 
 export const page = new Page({
-  name: "tribe",
+  id: "tribe",
   element: $(".page.pageTribe"),
   path: "/tribe",
   beforeHide: async () => {

frontend/src/ts/popups/tribe-browse-public-rooms-popup.ts

@@ -56,7 +56,7 @@ export function show(): void {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 125, () => {
-        $("#tribeBrowsePublicRoomsPopup .search").focus();
+        $("#tribeBrowsePublicRoomsPopup .search").trigger("focus");
         $("#tribeBrowsePublicRoomsPopup .search").val("");
       });
   }

frontend/src/ts/popups/tribe-room-code-popup.ts

@@ -8,7 +8,7 @@ export function show(): void {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 125, () => {
-        $("#tribeRoomCodePopup input").focus();
+        $("#tribeRoomCodePopup input").trigger("focus");
         $("#tribeRoomCodePopup input").val("");
       });
   }

frontend/src/ts/test/test-logic.ts

@@ -807,7 +807,7 @@ export async function retrySavingResult(): Promise<void> {
 
   const tribeChartData = {
     wpm: [...(completedEvent.chartData as ChartData).wpm],
-    raw: [...(completedEvent.chartData as ChartData).raw],
+    burst: [...(completedEvent.chartData as ChartData).burst],
     err: [...(completedEvent.chartData as ChartData).err],
   };
 
@@ -1302,7 +1302,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
 
   const tribeChartData = {
     wpm: [...(completedEvent.chartData as ChartData).wpm],
-    raw: [...(completedEvent.chartData as ChartData).raw],
+    burst: [...(completedEvent.chartData as ChartData).burst],
     err: [...(completedEvent.chartData as ChartData).err],
   };
 

frontend/src/ts/test/test-state.ts

@@ -14,6 +14,7 @@ export let isLanguageRightToLeft = false;
 export let isDirectionReversed = false;
 export let testRestarting = false;
 export let resultVisible = false;
+export let removedUIWordCount = 0;
 
 export function setRepeated(tf: boolean): void {
   isRepeated = tf;
@@ -85,3 +86,11 @@ export function setTestRestarting(val: boolean): void {
 export function setResultVisible(val: boolean): void {
   resultVisible = val;
 }
+
+export function setRemovedUIWordCount(val: number): void {
+  removedUIWordCount = val;
+}
+
+export function incrementRemovedUIWordCount(): void {
+  removedUIWordCount++;
+}