sidebar is react, fix a few bugs

src/Sidebar/ui/SidebarRoot.tsx

@@ -0,0 +1,270 @@
+import React, { useState, useEffect } from "react";
+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";
+
+interface IProps {
+  player: IPlayer;
+  engine: IEngine;
+}
+
+export function SidebarRoot(props: IProps): React.ReactElement {
+  const setRerender = useState(false)[1];
+  function rerender(): void {
+    setRerender((old) => !old);
+  }
+  const [divisionName, setDivisionName] = useState("Overview");
+
+  useEffect(() => {
+    const id = setInterval(rerender, 20);
+    return () => clearInterval(id);
+  }, []);
+
+  const [hackingOpen, setHackingOpen] = useState(true);
+  const [characterOpen, setCharacterOpen] = useState(true);
+  const [worldOpen, setWorldOpen] = useState(true);
+  const [helpOpen, setHelpOpen] = useState(true);
+
+  const flashTerminal =
+    ITutorial.currStep === iTutorialSteps.CharacterGoToTerminalPage ||
+    ITutorial.currStep === iTutorialSteps.ActiveScriptsPage;
+
+  const flashStats = ITutorial.currStep === iTutorialSteps.GoToCharacterPage;
+
+  const flashActiveScripts = ITutorial.currStep === iTutorialSteps.TerminalGoToActiveScriptsPage;
+
+  const flashHacknet = ITutorial.currStep === iTutorialSteps.GoToHacknetNodesPage;
+
+  const flashCity = ITutorial.currStep === iTutorialSteps.HacknetNodesGoToWorldPage;
+
+  const flashTutorial = ITutorial.currStep === iTutorialSteps.WorldDescription;
+
+  function clickTerminal() {
+    props.engine.loadTerminalContent();
+    if (flashTerminal) iTutorialNextStep();
+  }
+
+  function clickStats() {
+    props.engine.loadTerminalContent();
+    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 ||
+    props.player.augmentations.length > 0 ||
+    props.player.queuedAugmentations.length > 0 ||
+    props.player.sourceFiles.length > 0;
+
+  const canOpenFactions =
+    props.player.factionInvitations.length > 0 ||
+    props.player.factions.length > 0 ||
+    props.player.augmentations.length > 0 ||
+    props.player.queuedAugmentations.length > 0 ||
+    props.player.sourceFiles.length > 0;
+
+  const canOpenAugmentations =
+    props.player.augmentations.length > 0 ||
+    props.player.queuedAugmentations.length > 0 ||
+    props.player.sourceFiles.length > 0;
+
+  const canOpenSleeves = props.player.sleeves.length > 0;
+
+  const canCorporation = props.player.corporation != null;
+  const canGang = props.player.gang != null;
+
+  return (
+    <ul id="mainmenu" className="mainmenu noscrollbar noselect">
+      {/* Hacking dropdown */}
+      <li className="menu-header">
+        <button
+          id="hacking-menu-header"
+          className={
+            "noselect mainmenu-accordion-header" +
+            (hackingOpen ? " opened" : "") +
+            (flashTerminal ? " flashing-button" : "")
+          }
+          onClick={() => setHackingOpen((old) => !old)}
+        >
+          Hacking
+        </button>
+      </li>
+      {hackingOpen && (
+        <>
+          <li className="mainmenu-accordion-panel">
+            <button className={flashTerminal ? "flashing-button" : ""} onClick={clickTerminal}>
+              Terminal
+            </button>
+          </li>
+          <li className="mainmenu-accordion-panel">
+            <button onClick={() => props.engine.loadScriptEditorContent()}>Create Script</button>
+          </li>
+          <li className="mainmenu-accordion-panel">
+            <button className={flashActiveScripts ? "flashing-button" : ""} onClick={clickActiveScripts}>
+              Active Scripts
+            </button>
+          </li>
+          {canCreateProgram && (
+            <li className="mainmenu-accordion-panel">
+              <button onClick={() => props.engine.loadCreateProgramContent()}>
+                Create Program{programCount > 0 ? ` (${programCount})` : ""}
+              </button>
+            </li>
+          )}
+        </>
+      )}
+
+      {/* Character dropdown */}
+      <li className="menu-header">
+        <button
+          id="character-menu-header"
+          className={"noselect mainmenu-accordion-header" + (characterOpen ? " opened" : "")}
+          onClick={() => setCharacterOpen((old) => !old)}
+        >
+          Character
+        </button>
+      </li>
+      {characterOpen && (
+        <>
+          <li className="mainmenu-accordion-panel">
+            <button className={flashStats ? "flashing-button" : ""} onClick={clickStats}>
+              Stats
+            </button>
+          </li>
+          {canOpenFactions && (
+            <li className="mainmenu-accordion-panel">
+              <button onClick={() => props.engine.loadFactionsContent()}>
+                Factions
+                {props.player.factionInvitations.length > 0 ? ` (${props.player.factionInvitations.length})` : ""}
+              </button>
+              <span id="factions-notification" className="notification-off">
+                {" "}
+              </span>
+            </li>
+          )}
+          {canOpenAugmentations && (
+            <li className="mainmenu-accordion-panel">
+              <button onClick={() => props.engine.loadAugmentationsContent()}>
+                Augmentations
+                {props.player.queuedAugmentations.length > 0 ? ` (${props.player.queuedAugmentations.length})` : ""}
+              </button>
+              <span id="augmentations-notification" className="notification-off">
+                {" "}
+              </span>
+            </li>
+          )}
+          <li className="mainmenu-accordion-panel">
+            <button className={flashHacknet ? "flashing-button" : ""} onClick={clickHacknet}>
+              Hacknet
+            </button>
+          </li>
+          {canOpenSleeves && (
+            <li className="mainmenu-accordion-panel">
+              <button onClick={() => props.engine.loadSleevesContent()}>Sleeves</button>
+            </li>
+          )}
+        </>
+      )}
+      {/* World dropdown */}
+      <li className="menu-header">
+        <button
+          id="world-menu-header"
+          className={"noselect mainmenu-accordion-header" + (worldOpen ? " opened" : "")}
+          onClick={() => setWorldOpen((old) => !old)}
+        >
+          World
+        </button>
+      </li>
+
+      {worldOpen && (
+        <>
+          <li className="mainmenu-accordion-panel">
+            <button className={flashCity ? "flashing-button" : ""} onClick={clickCity}>
+              City
+            </button>
+          </li>
+          <li className="mainmenu-accordion-panel">
+            <button onClick={() => props.engine.loadTravelContent()}>Travel</button>
+          </li>
+          {props.player.companyName !== "" && (
+            <li className="mainmenu-accordion-panel">
+              <button onClick={() => props.engine.loadJobContent()}>Job</button>
+            </li>
+          )}
+          {props.player.hasWseAccount && (
+            <li className="mainmenu-accordion-panel">
+              <button onClick={() => props.engine.loadStockMarketContent()}>Stock Market</button>
+            </li>
+          )}
+          {props.player.bladeburner && (
+            <li className="mainmenu-accordion-panel">
+              <button onClick={() => props.engine.loadBladeburnerContent()}>Bladeburner</button>
+            </li>
+          )}
+          {canCorporation && (
+            <li className="mainmenu-accordion-panel">
+              <button onClick={() => props.engine.loadCorporationContent()}>Corp</button>
+            </li>
+          )}
+          {canGang && (
+            <li className="mainmenu-accordion-panel">
+              <button onClick={() => props.engine.loadGangContent()}>Gang</button>
+            </li>
+          )}
+        </>
+      )}
+      <li className="menu-header">
+        <button
+          id="help-menu-header"
+          className={"noselect mainmenu-accordion-header" + (helpOpen ? " opened" : "")}
+          onClick={() => setHelpOpen((old) => !old)}
+        >
+          Help
+        </button>
+      </li>
+      {helpOpen && (
+        <>
+          <li className="mainmenu-accordion-panel">
+            <button onClick={() => props.engine.loadMilestonesContent()}>Milestones</button>
+          </li>
+          <li className="mainmenu-accordion-panel">
+            <button className={flashTutorial ? "flashing-button" : ""} onClick={clickTutorial}>
+              Tutorial
+            </button>
+          </li>
+          {/*<li className="mainmenu-accordion-panel">
+            <button>Options</button>
+          </li>*/}
+          {process.env.NODE_ENV && (
+            <li className="mainmenu-accordion-panel">
+              <button onClick={() => props.engine.loadDevMenuContent()}>Dev</button>
+            </li>
+          )}
+        </>
+      )}
+    </ul>
+  );
+}