bunch of react conversion

src/Sidebar/ui/SidebarRoot.tsx

@@ -3,8 +3,14 @@ import { IEngine } from "../../IEngine";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { iTutorialSteps, iTutorialNextStep, ITutorial } from "../../InteractiveTutorial";
 import { getAvailableCreatePrograms } from "../../Programs/ProgramHelpers";
-import { ICorporation } from "../../Corporation/ICorporation";
-import { IGang } from "../../Gang/IGang";
+import { Settings } from "../../Settings/Settings";
+import { redPillFlag } from "../../RedPill";
+
+import { inMission } from "../../Missions";
+import { cinematicTextFlag } from "../../CinematicText";
+import { KEY } from "../../../utils/helpers/keyCodes";
+import { FconfSettings } from "../../Fconf/FconfSettings";
+import { Page, routing } from "../../ui/navigationTracking";
 
 interface IProps {
   player: IPlayer;
@@ -16,13 +22,13 @@ export function SidebarRoot(props: IProps): React.ReactElement {
   function rerender(): void {
     setRerender((old) => !old);
   }
-  const [divisionName, setDivisionName] = useState("Overview");
 
   useEffect(() => {
     const id = setInterval(rerender, 20);
     return () => clearInterval(id);
   }, []);
 
+  const [activeTab, setActiveTab] = useState("");
   const [hackingOpen, setHackingOpen] = useState(true);
   const [characterOpen, setCharacterOpen] = useState(true);
   const [worldOpen, setWorldOpen] = useState(true);
@@ -42,36 +48,6 @@ export function SidebarRoot(props: IProps): React.ReactElement {
 
   const flashTutorial = ITutorial.currStep === iTutorialSteps.WorldDescription;
 
-  function clickTerminal() {
-    props.engine.loadTerminalContent();
-    if (flashTerminal) iTutorialNextStep();
-  }
-
-  function clickStats() {
-    props.engine.loadCharacterContent();
-    if (flashStats) iTutorialNextStep();
-  }
-
-  function clickActiveScripts() {
-    props.engine.loadActiveScriptsContent();
-    if (flashActiveScripts) iTutorialNextStep();
-  }
-
-  function clickHacknet() {
-    props.engine.loadHacknetNodesContent();
-    if (flashHacknet) iTutorialNextStep();
-  }
-
-  function clickCity() {
-    props.engine.loadLocationContent();
-    if (flashCity) iTutorialNextStep();
-  }
-
-  function clickTutorial() {
-    props.engine.loadTutorialContent();
-    if (flashTutorial) iTutorialNextStep();
-  }
-
   const programCount = getAvailableCreatePrograms(props.player).length;
   const canCreateProgram =
     programCount > 0 ||
@@ -101,6 +77,182 @@ export function SidebarRoot(props: IProps): React.ReactElement {
   const canStockMarket = props.player.hasWseAccount;
   const canBladeburner = !!(props.player.bladeburner as any);
 
+  function clickTerminal(): void {
+    setActiveTab("Terminal");
+    props.engine.loadTerminalContent();
+    if (flashTerminal) iTutorialNextStep();
+  }
+
+  function clickCreateScripts(): void {
+    setActiveTab("CreateScripts");
+    props.engine.loadScriptEditorContent();
+  }
+
+  function clickStats(): void {
+    setActiveTab("Stats");
+    props.engine.loadCharacterContent();
+    if (flashStats) iTutorialNextStep();
+  }
+
+  function clickActiveScripts(): void {
+    setActiveTab("ActiveScripts");
+    props.engine.loadActiveScriptsContent();
+    if (flashActiveScripts) iTutorialNextStep();
+  }
+
+  function clickCreateProgram(): void {
+    setActiveTab("CreateProgram");
+    props.engine.loadCreateProgramContent();
+  }
+
+  function clickFactions(): void {
+    setActiveTab("Factions");
+    props.engine.loadFactionsContent();
+  }
+
+  function clickAugmentations(): void {
+    setActiveTab("Augmentations");
+    props.engine.loadAugmentationsContent();
+  }
+
+  function clickSleeves(): void {
+    setActiveTab("Sleeves");
+    props.engine.loadSleevesContent();
+  }
+
+  function clickHacknet(): void {
+    setActiveTab("Hacknet");
+    props.engine.loadHacknetNodesContent();
+    if (flashHacknet) iTutorialNextStep();
+  }
+
+  function clickCity(): void {
+    setActiveTab("City");
+    props.engine.loadLocationContent();
+    if (flashCity) iTutorialNextStep();
+  }
+
+  function clickTravel(): void {
+    setActiveTab("Travel");
+    props.engine.loadTravelContent();
+  }
+
+  function clickJob(): void {
+    setActiveTab("Job");
+    props.engine.loadJobContent();
+  }
+
+  function clickStockMarket(): void {
+    setActiveTab("StockMarket");
+    props.engine.loadStockMarketContent();
+  }
+
+  function clickBladeburner(): void {
+    setActiveTab("Bladeburner");
+    props.engine.loadBladeburnerContent();
+  }
+
+  function clickCorp(): void {
+    setActiveTab("Corp");
+    props.engine.loadCorporationContent();
+  }
+
+  function clickGang(): void {
+    setActiveTab("Gang");
+    props.engine.loadGangContent();
+  }
+
+  function clickTutorial(): void {
+    setActiveTab("Tutorial");
+    props.engine.loadTutorialContent();
+    if (flashTutorial) iTutorialNextStep();
+  }
+
+  function clickMilestones(): void {
+    setActiveTab("Milestones");
+    props.engine.loadMilestonesContent();
+  }
+
+  function clickDev(): void {
+    setActiveTab("Dev");
+    props.engine.loadDevMenuContent();
+  }
+
+  useEffect(() => {
+    // Shortcuts to navigate through the game
+    //  Alt-t - Terminal
+    //  Alt-c - Character
+    //  Alt-e - Script editor
+    //  Alt-s - Active scripts
+    //  Alt-h - Hacknet Nodes
+    //  Alt-w - City
+    //  Alt-j - Job
+    //  Alt-r - Travel Agency of current city
+    //  Alt-p - Create program
+    //  Alt-f - Factions
+    //  Alt-a - Augmentations
+    //  Alt-u - Tutorial
+    //  Alt-o - Options
+    function handleShortcuts(this: Document, event: KeyboardEvent): any {
+      if (Settings.DisableHotkeys) return;
+      if (props.player.isWorking || redPillFlag || inMission || cinematicTextFlag) return;
+      if (event.keyCode == KEY.T && event.altKey) {
+        event.preventDefault();
+        clickTerminal();
+      } else if (event.keyCode === KEY.C && event.altKey) {
+        event.preventDefault();
+        clickStats();
+      } else if (event.keyCode === KEY.E && event.altKey) {
+        event.preventDefault();
+        clickCreateScripts();
+      } else if (event.keyCode === KEY.S && event.altKey) {
+        event.preventDefault();
+        clickActiveScripts();
+      } else if (event.keyCode === KEY.H && event.altKey) {
+        event.preventDefault();
+        clickHacknet();
+      } else if (event.keyCode === KEY.W && event.altKey) {
+        event.preventDefault();
+        clickCity();
+      } else if (event.keyCode === KEY.J && event.altKey) {
+        event.preventDefault();
+        clickJob();
+      } else if (event.keyCode === KEY.R && event.altKey) {
+        event.preventDefault();
+        clickTravel();
+      } else if (event.keyCode === KEY.P && event.altKey) {
+        event.preventDefault();
+        clickCreateProgram();
+      } else if (event.keyCode === KEY.F && event.altKey) {
+        // Overriden by Fconf
+        if (routing.isOn(Page.Terminal) && FconfSettings.ENABLE_BASH_HOTKEYS) {
+          return;
+        }
+        event.preventDefault();
+        clickFactions();
+      } else if (event.keyCode === KEY.A && event.altKey) {
+        event.preventDefault();
+        clickAugmentations();
+      } else if (event.keyCode === KEY.U && event.altKey) {
+        event.preventDefault();
+        clickTutorial();
+      } else if (event.keyCode === KEY.B && event.altKey) {
+        event.preventDefault();
+        clickBladeburner();
+      } else if (event.keyCode === KEY.G && event.altKey) {
+        event.preventDefault();
+        clickGang();
+      }
+      // if (event.keyCode === KEY.O && event.altKey) {
+      //   event.preventDefault();
+      //   gameOptionsBoxOpen();
+      // }
+    }
+
+    document.addEventListener("keypress", handleShortcuts);
+    return () => document.removeEventListener("keypress", handleShortcuts);
+  }, []);
+
   return (
     <ul id="mainmenu" className="mainmenu noscrollbar noselect">
       {/* Hacking dropdown */}
@@ -119,22 +271,33 @@ export function SidebarRoot(props: IProps): React.ReactElement {
       </li>
       {hackingOpen && (
         <>
-          <li className="mainmenu-accordion-panel">
-            <button className={flashTerminal ? "flashing-button" : ""} onClick={clickTerminal}>
+          <li className={`mainmenu-accordion-panel`}>
+            <button
+              className={(flashTerminal ? "flashing-button" : "") + activeTab === "Terminal" ? " active" : ""}
+              onClick={clickTerminal}
+            >
               Terminal
             </button>
           </li>
-          <li className="mainmenu-accordion-panel">
-            <button onClick={() => props.engine.loadScriptEditorContent()}>Create Script</button>
+          <li className={`mainmenu-accordion-panel`}>
+            <button className={activeTab === "CreateScripts" ? " active" : ""} onClick={clickCreateScripts}>
+              Create Script
+            </button>
           </li>
-          <li className="mainmenu-accordion-panel">
-            <button className={flashActiveScripts ? "flashing-button" : ""} onClick={clickActiveScripts}>
+          <li className={`mainmenu-accordion-panel`}>
+            <button
+              className={(flashActiveScripts ? "flashing-button" : "") + activeTab === "ActiveScripts" ? " active" : ""}
+              onClick={clickActiveScripts}
+            >
               Active Scripts
             </button>
           </li>
           {canCreateProgram && (
-            <li className="mainmenu-accordion-panel">
-              <button className="notification" onClick={() => props.engine.loadCreateProgramContent()}>
+            <li className={`mainmenu-accordion-panel`}>
+              <button
+                className={"notification" + (activeTab === "CreateProgram" ? " active" : "")}
+                onClick={clickCreateProgram}
+              >
                 Create Program
                 {programCount > 0 && <span className="badge">{programCount}</span>}
               </button>
@@ -155,14 +318,17 @@ export function SidebarRoot(props: IProps): React.ReactElement {
       </li>
       {characterOpen && (
         <>
-          <li className="mainmenu-accordion-panel">
-            <button className={flashStats ? "flashing-button" : ""} onClick={clickStats}>
+          <li className={`mainmenu-accordion-panel`}>
+            <button
+              className={(flashStats ? "flashing-button" : "") + activeTab === "Stats" ? " active" : ""}
+              onClick={clickStats}
+            >
               Stats
             </button>
           </li>
           {canOpenFactions && (
-            <li className="mainmenu-accordion-panel">
-              <button className="notification" onClick={() => props.engine.loadFactionsContent()}>
+            <li className={`mainmenu-accordion-panel`}>
+              <button className={"notification" + (activeTab === "Factions" ? " active" : "")} onClick={clickFactions}>
                 Factions
                 {props.player.factionInvitations.length > 0 && (
                   <span className="badge">{props.player.factionInvitations.length}</span>
@@ -171,8 +337,11 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             </li>
           )}
           {canOpenAugmentations && (
-            <li className="mainmenu-accordion-panel">
-              <button className="notification" onClick={() => props.engine.loadAugmentationsContent()}>
+            <li className={`mainmenu-accordion-panel`}>
+              <button
+                className={"notification" + (activeTab === "Augmentations" ? " active" : "")}
+                onClick={clickAugmentations}
+              >
                 Augmentations
                 {props.player.queuedAugmentations.length > 0 && (
                   <span className="badge">{props.player.queuedAugmentations.length}</span>
@@ -180,14 +349,19 @@ export function SidebarRoot(props: IProps): React.ReactElement {
               </button>
             </li>
           )}
-          <li className="mainmenu-accordion-panel">
-            <button className={flashHacknet ? "flashing-button" : ""} onClick={clickHacknet}>
+          <li className={`mainmenu-accordion-panel`}>
+            <button
+              className={(flashHacknet ? "flashing-button" : "") + activeTab === "Hacknet" ? " active" : ""}
+              onClick={clickHacknet}
+            >
               Hacknet
             </button>
           </li>
           {canOpenSleeves && (
-            <li className="mainmenu-accordion-panel">
-              <button onClick={() => props.engine.loadSleevesContent()}>Sleeves</button>
+            <li className={`mainmenu-accordion-panel`}>
+              <button className={activeTab === "Sleeves" ? " active" : ""} onClick={clickSleeves}>
+                Sleeves
+              </button>
             </li>
           )}
         </>
@@ -205,37 +379,52 @@ export function SidebarRoot(props: IProps): React.ReactElement {
 
       {worldOpen && (
         <>
-          <li className="mainmenu-accordion-panel">
-            <button className={flashCity ? "flashing-button" : ""} onClick={clickCity}>
+          <li className={`mainmenu-accordion-panel`}>
+            <button
+              className={(flashCity ? "flashing-button" : "") + activeTab === "City" ? " active" : ""}
+              onClick={clickCity}
+            >
               City
             </button>
           </li>
-          <li className="mainmenu-accordion-panel">
-            <button onClick={() => props.engine.loadTravelContent()}>Travel</button>
+          <li className={`mainmenu-accordion-panel`}>
+            <button className={activeTab === "Travel" ? " active" : ""} onClick={clickTravel}>
+              Travel
+            </button>
           </li>
           {canJob && (
-            <li className="mainmenu-accordion-panel">
-              <button onClick={() => props.engine.loadJobContent()}>Job</button>
+            <li className={`mainmenu-accordion-panel`}>
+              <button className={activeTab === "Job" ? " active" : ""} onClick={clickJob}>
+                Job
+              </button>
             </li>
           )}
           {canStockMarket && (
-            <li className="mainmenu-accordion-panel">
-              <button onClick={() => props.engine.loadStockMarketContent()}>Stock Market</button>
+            <li className={`mainmenu-accordion-panel`}>
+              <button className={activeTab === "StockMarket" ? " active" : ""} onClick={clickStockMarket}>
+                Stock Market
+              </button>
             </li>
           )}
           {canBladeburner && (
-            <li className="mainmenu-accordion-panel">
-              <button onClick={() => props.engine.loadBladeburnerContent()}>Bladeburner</button>
+            <li className={`mainmenu-accordion-panel`}>
+              <button className={activeTab === "Bladeburner" ? " active" : ""} onClick={clickBladeburner}>
+                Bladeburner
+              </button>
             </li>
           )}
           {canCorporation && (
-            <li className="mainmenu-accordion-panel">
-              <button onClick={() => props.engine.loadCorporationContent()}>Corp</button>
+            <li className={`mainmenu-accordion-panel`}>
+              <button className={activeTab === "Corp" ? " active" : ""} onClick={clickCorp}>
+                Corp
+              </button>
             </li>
           )}
           {canGang && (
-            <li className="mainmenu-accordion-panel">
-              <button onClick={() => props.engine.loadGangContent()}>Gang</button>
+            <li className={`mainmenu-accordion-panel`}>
+              <button className={activeTab === "Gang" ? " active" : ""} onClick={clickGang}>
+                Gang
+              </button>
             </li>
           )}
         </>
@@ -251,11 +440,16 @@ export function SidebarRoot(props: IProps): React.ReactElement {
       </li>
       {helpOpen && (
         <>
-          <li className="mainmenu-accordion-panel">
-            <button onClick={() => props.engine.loadMilestonesContent()}>Milestones</button>
+          <li className={`mainmenu-accordion-panel`}>
+            <button className={activeTab === "Milestones" ? " active" : ""} onClick={clickMilestones}>
+              Milestones
+            </button>
           </li>
-          <li className="mainmenu-accordion-panel">
-            <button className={flashTutorial ? "flashing-button" : ""} onClick={clickTutorial}>
+          <li className={`mainmenu-accordion-panel`}>
+            <button
+              className={(flashTutorial ? "flashing-button" : "") + activeTab === "Tutorial" ? " active" : ""}
+              onClick={clickTutorial}
+            >
               Tutorial
             </button>
           </li>
@@ -263,8 +457,10 @@ export function SidebarRoot(props: IProps): React.ReactElement {
             <button>Options</button>
           </li>*/}
           {process.env.NODE_ENV === "development" && (
-            <li className="mainmenu-accordion-panel">
-              <button onClick={() => props.engine.loadDevMenuContent()}>Dev</button>
+            <li className={`mainmenu-accordion-panel`}>
+              <button className={activeTab === "Dev" ? " active" : ""} onClick={clickDev}>
+                Dev
+              </button>
             </li>
           )}
         </>