Hacking missions inside GameRoot

src/Faction/ui/FactionRoot.tsx

@@ -23,7 +23,6 @@ import { CreateGangPopup } from "./CreateGangPopup";
 
 type IProps = {
   faction: Faction;
-  startHackingMissionFn: (faction: Faction) => void;
 };
 
 // Info text for all options on the UI
@@ -114,7 +113,7 @@ export function FactionRoot(props: IProps): React.ReactElement {
 
   function startHackingMission(faction: Faction): void {
     player.singularityStopWork();
-    props.startHackingMissionFn(faction);
+    router.toHackingMission(faction);
   }
 
   function startSecurityWork(faction: Faction): void {

src/HackingMission/ui/HackingMissionRoot.tsx

@@ -0,0 +1,13 @@
+import React, { useEffect } from "react";
+
+import { startHackingMission } from "../../Faction/FactionHelpers";
+import { Faction } from "../../Faction/Faction";
+
+interface IProps {
+  faction: Faction;
+}
+
+export function HackingMissionRoot(props: IProps): React.ReactElement {
+  useEffect(() => startHackingMission(props.faction));
+  return <div id="mission-container"></div>;
+}

src/Missions.jsx

@@ -10,6 +10,7 @@ import { getRandomInt } from "../utils/helpers/getRandomInt";
 import { isString } from "../utils/helpers/isString";
 
 import { clearEventListeners } from "../utils/uiHelpers/clearEventListeners";
+import { Router } from "./ui/GameRoot";
 
 // For some reason `jsplumb` needs to be imported exactly like this,
 // lowercase p, and later in the code used as `jsPlumb` uppercase P. wtf.
@@ -1593,6 +1594,7 @@ HackingMission.prototype.finishMission = function (win) {
   } else {
     dialogBoxCreate("Mission lost/forfeited! You did not gain any faction reputation.");
   }
+  Router.toFaction();
 };
 
 export { HackingMission, inMission, setInMission, currMission };

src/engine.jsx

@@ -51,12 +51,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 
 const Engine = {
-  // Display objects
-  // TODO-Refactor this into its own component
-  Display: {
-    missionContent: null,
-  },
-
   indexedDb: undefined,
 
   // Time variables (milliseconds unix epoch time)
@@ -258,7 +252,6 @@ const Engine = {
     // Load game from save or create new game
     if (loadGame(saveString)) {
       initBitNodeMultipliers(Player);
-      Engine.setDisplayElements(); // Sets variables for important DOM elements
       updateSourceFileFlags(Player);
       initAugmentations(); // Also calls Player.reapplyAllAugmentations()
       Player.reapplyAllSourceFiles();
@@ -418,11 +411,6 @@ const Engine = {
     );
   },
 
-  setDisplayElements: function () {
-    Engine.Display.missionContent = document.getElementById("mission-container");
-    Engine.Display.missionContent.style.display = "none";
-  },
-
   start: function () {
     // Get time difference
     const _thisUpdate = new Date().getTime();

src/index.html

@@ -45,18 +45,6 @@
         <div id="generic-react-container"></div>
       </div>
 
-      <div id="mission-container" class="generic-fullscreen-container"></div>
-
-      <!-- Interactive Tutorial Text Screen -->
-      <div id="interactive-tutorial-wrapper">
-        <div id="interactive-tutorial-container">
-          <p id="interactive-tutorial-text"></p>
-          <button id="interactive-tutorial-exit">Exit Tutorial</button>
-          <button id="interactive-tutorial-next">Next</button>
-          <button id="interactive-tutorial-back">Back</button>
-        </div>
-      </div>
-
       <!-- Status text -->
       <div id="status-text-container">
         <p id="status-text"></p>

src/ui/GameRoot.tsx

@@ -56,6 +56,7 @@ import { TerminalRoot } from "../Terminal/ui/TerminalRoot";
 import { TutorialRoot } from "../Tutorial/ui/TutorialRoot";
 import { ActiveScriptsRoot } from "../ui/ActiveScripts/ActiveScriptsRoot";
 import { FactionsRoot } from "../Faction/ui/FactionsRoot";
+import { HackingMissionRoot } from "../HackingMission/ui/HackingMissionRoot";
 import { FactionRoot } from "../Faction/ui/FactionRoot";
 import { CharacterStats } from "./CharacterStats";
 import { TravelAgencyRoot } from "../Locations/ui/TravelAgencyRoot";
@@ -65,7 +66,6 @@ import { CharacterOverview } from "./React/CharacterOverview";
 import { BladeburnerCinematic } from "../Bladeburner/ui/BladeburnerCinematic";
 import { workerScripts } from "../Netscript/WorkerScripts";
 
-import { startHackingMission } from "../Faction/FactionHelpers";
 import { enterBitNode } from "../RedPill";
 import { Context } from "./Context";
 
@@ -173,6 +173,9 @@ export let Router: IRouter = {
   toLocation: () => {
     throw new Error("Router called before initialization");
   },
+  toHackingMission: () => {
+    throw new Error("Router called before initialization");
+  },
 };
 
 function determineStartPage(player: IPlayer): Page {
@@ -262,6 +265,10 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
       setLocation(location);
       setPage(Page.Location);
     },
+    toHackingMission: (faction: Faction) => {
+      setPage(Page.HackingMission);
+      setFaction(faction);
+    },
   };
 
   useEffect(() => {
@@ -284,6 +291,8 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
           <BitverseRoot flume={flume} enter={enterBitNode} quick={quick} />
         ) : page === Page.Infiltration ? (
           <InfiltrationRoot location={location} />
+        ) : page === Page.HackingMission ? (
+          <HackingMissionRoot faction={faction} />
         ) : page === Page.BladeburnerCinematic ? (
           <BladeburnerCinematic />
         ) : page === Page.Work ? (
@@ -309,7 +318,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
               ) : page === Page.Factions ? (
                 <FactionsRoot player={player} router={Router} />
               ) : page === Page.Faction ? (
-                <FactionRoot faction={faction} startHackingMissionFn={startHackingMission} />
+                <FactionRoot faction={faction} />
               ) : page === Page.Milestones ? (
                 <MilestonesRoot player={player} />
               ) : page === Page.Tutorial ? (

src/ui/React/CharacterOverview.tsx

@@ -117,7 +117,6 @@ export function CharacterOverview({ save }: IProps): React.ReactElement {
   const player = use.Player();
   const router = use.Router();
 
-  if (router.page() === Page.BitVerse) return <></>;
   const setRerender = useState(false)[1];
 
   useEffect(() => {

src/ui/React/Overview.tsx

@@ -5,6 +5,8 @@ import Box from "@mui/material/Box";
 import Collapse from "@mui/material/Collapse";
 import Fab from "@mui/material/Fab";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import { use } from "../Context";
+import { Page } from "../Router";
 
 const useStyles = makeStyles({
   nobackground: {
@@ -19,6 +21,8 @@ interface IProps {
 export function Overview({ children }: IProps): React.ReactElement {
   const [open, setOpen] = useState(true);
   const classes = useStyles();
+  const router = use.Router();
+  if (router.page() === Page.BitVerse || router.page() === Page.HackingMission) return <></>;
   return (
     <div style={{ position: "fixed", top: 0, right: 0, zIndex: 1500 }}>
       <Box display="flex" justifyContent="flex-end" flexDirection={"column"}>

src/ui/Router.ts

@@ -34,6 +34,7 @@ export enum Page {
   Work,
   BladeburnerCinematic,
   Location,
+  HackingMission,
 }
 
 /**
@@ -73,4 +74,5 @@ export interface IRouter {
   toWork(): void;
   toBladeburnerCinematic(): void;
   toLocation(location: Location): void;
+  toHackingMission(faction: Faction): void;
 }