removed Corporation rerender and drilled down a rerender function in the react.

css/corporation.scss

@@ -0,0 +1,4 @@
+#corporation-container {
+	position: fixed;
+	padding: 6px;
+}

src/Corporation/Corporation.tsx

@@ -10,18 +10,11 @@ import { showLiterature } from "../Literature/LiteratureHelpers";
 import { LiteratureNames } from "../Literature/data/LiteratureNames";
 import { IPlayer } from "../PersonObjects/IPlayer";
 
-import { Page, routing } from "../ui/navigationTracking";
-
 import { dialogBoxCreate } from "../../utils/DialogBox";
 import { Reviver, Generic_toJSON, Generic_fromJSON } from "../../utils/JSONReviver";
-import { createElement } from "../../utils/uiHelpers/createElement";
 import { isString } from "../../utils/helpers/isString";
-import { removeElementById } from "../../utils/uiHelpers/removeElementById";
 
 // UI Related Imports
-import React from "react";
-import ReactDOM from "react-dom";
-import { CorporationRoot } from "./ui/Root";
 
 import Decimal from "decimal.js";
 
@@ -29,8 +22,6 @@ interface IParams {
   name?: string;
 }
 
-let companyManagementDiv: HTMLDivElement | null = null;
-
 export class Corporation {
   name = "The Corporation";
 
@@ -155,8 +146,6 @@ export class Corporation {
       }
 
       this.state.nextState();
-
-      if (routing.isOn(Page.Corporation)) this.rerender(player);
     }
   }
 
@@ -428,39 +417,6 @@ export class Corporation {
     return;
   }
 
-  createUI(player: IPlayer): void {
-    companyManagementDiv = createElement("div", {
-      id: "cmpy-mgmt-container",
-      position: "fixed",
-      class: "generic-menupage-container",
-    }) as HTMLDivElement;
-    const game = document.getElementById("entire-game-container");
-    if (game) game.appendChild(companyManagementDiv);
-
-    this.rerender(player);
-  }
-
-  rerender(player: IPlayer): void {
-    if (companyManagementDiv == null) {
-      console.warn(`Corporation.rerender() called when companyManagementDiv is null`);
-      return;
-    }
-    if (!routing.isOn(Page.Corporation)) return;
-
-    ReactDOM.render(<CorporationRoot corp={this} player={player} />, companyManagementDiv);
-  }
-
-  clearUI(): void {
-    if (companyManagementDiv instanceof HTMLElement) {
-      ReactDOM.unmountComponentAtNode(companyManagementDiv);
-      removeElementById(companyManagementDiv.id);
-    }
-
-    companyManagementDiv = null;
-    const character = document.getElementById("character-overview-wrapper");
-    if (character) character.style.visibility = "visible";
-  }
-
   /**
    * Serialize the current object to a JSON save state.
    */

src/Corporation/ICorporation.ts

@@ -54,8 +54,5 @@ export interface ICorporation {
   getSalesMultiplier(): number;
   getScientificResearchMultiplier(): number;
   getStarterGuide(player: IPlayer): void;
-  createUI(player: IPlayer): void;
-  rerender(player: IPlayer): void;
-  clearUI(): void;
   toJSON(): any;
 }

src/Corporation/ui/BuybackSharesPopup.tsx

@@ -9,6 +9,7 @@ interface IProps {
   player: IPlayer;
   popupId: string;
   corp: ICorporation;
+  rerender: () => void;
 }
 
 // Create a popup that lets the player buyback shares
@@ -53,7 +54,7 @@ export function BuybackSharesPopup(props: IProps): React.ReactElement {
       props.corp.issuedShares -= shares;
       props.player.loseMoney(shares * buybackPrice);
       removePopup(props.popupId);
-      props.corp.rerender(props.player);
+      props.rerender();
     }
   }
 

src/Corporation/ui/CityTabs.tsx

@@ -47,6 +47,7 @@ interface IProps {
   division: IIndustry;
   corp: ICorporation;
   player: IPlayer;
+  rerender: () => void;
 }
 
 export function CityTabs(props: IProps): React.ReactElement {
@@ -72,6 +73,7 @@ export function CityTabs(props: IProps): React.ReactElement {
       )}
       <ExpandButton corp={props.corp} division={props.division} setCity={setCity} />
       <Industry
+        rerender={props.rerender}
         corp={props.corp}
         division={props.division}
         city={city}

src/Corporation/ui/CorporationRoot.tsx

@@ -1,7 +1,7 @@
 // React Components for the Corporation UI's navigation tabs
 // These are the tabs at the top of the UI that let you switch to different
 // divisions, see an overview of your corporation, or create a new industry
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { HeaderTab } from "./HeaderTab";
 import { IIndustry } from "../IIndustry";
 import { NewIndustryPopup } from "./NewIndustryPopup";
@@ -42,9 +42,18 @@ interface IProps {
   player: IPlayer;
 }
 
-export function HeaderTabs(props: IProps): React.ReactElement {
+export function CorporationRoot(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, 150);
+    return () => clearInterval(id);
+  }, []);
+
   return (
     <>
       <div>
@@ -64,7 +73,7 @@ export function HeaderTabs(props: IProps): React.ReactElement {
         ))}
         <ExpandButton corp={props.corp} setDivisionName={setDivisionName} />
       </div>
-      <MainPanel corp={props.corp} divisionName={divisionName} player={props.player} />
+      <MainPanel rerender={rerender} corp={props.corp} divisionName={divisionName} player={props.player} />
     </>
   );
 }

src/Corporation/ui/DiscontinueProductPopup.tsx

@@ -11,6 +11,7 @@ interface IProps {
   corp: ICorporation;
   popupId: string;
   player: IPlayer;
+  rerender: () => void;
 }
 
 // Create a popup that lets the player discontinue a product
@@ -18,7 +19,7 @@ export function DiscontinueProductPopup(props: IProps): React.ReactElement {
   function discontinue(): void {
     props.industry.discontinueProduct(props.product);
     removePopup(props.popupId);
-    props.corp.rerender(props.player);
+    props.rerender();
   }
 
   return (

src/Corporation/ui/FindInvestorsPopup.tsx

@@ -9,6 +9,7 @@ interface IProps {
   corp: ICorporation;
   popupId: string;
   player: IPlayer;
+  rerender: () => void;
 }
 
 // Create a popup that lets the player manage exports
@@ -43,7 +44,7 @@ export function FindInvestorsPopup(props: IProps): React.ReactElement {
     props.corp.fundingRound++;
     props.corp.addFunds(funding);
     props.corp.numShares -= investShares;
-    props.corp.rerender(props.player);
+    props.rerender();
     removePopup(props.popupId);
   }
   return (

src/Corporation/ui/GoPublicPopup.tsx

@@ -9,6 +9,7 @@ interface IProps {
   corp: ICorporation;
   popupId: string;
   player: IPlayer;
+  rerender: () => void;
 }
 
 // Create a popup that lets the player manage exports
@@ -32,7 +33,7 @@ export function GoPublicPopup(props: IProps): React.ReactElement {
     props.corp.issuedShares = numShares;
     props.corp.numShares -= numShares;
     props.corp.addFunds(numShares * initialSharePrice);
-    props.corp.rerender(props.player);
+    props.rerender();
     dialogBoxCreate(
       `You took your ${props.corp.name} public and earned ` +
         `${numeralWrapper.formatMoney(numShares * initialSharePrice)} in your IPO`,

src/Corporation/ui/HireEmployeePopup.tsx

@@ -16,6 +16,7 @@ interface INameEmployeeProps {
   popupId: string;
   employee: Employee;
   player: IPlayer;
+  rerender: () => void;
 }
 
 function NameEmployeePopup(props: INameEmployeeProps): React.ReactElement {
@@ -29,7 +30,7 @@ function NameEmployeePopup(props: INameEmployeeProps): React.ReactElement {
     }
     props.employee.name = name;
     props.office.employees.push(props.employee);
-    props.corp.rerender(props.player);
+    props.rerender();
     removePopup(props.popupId);
   }
 
@@ -65,12 +66,14 @@ interface IHireEmployeeProps {
   popupId: string;
   player: IPlayer;
   corp: ICorporation;
+  rerender: () => void;
 }
 
 function HireEmployeeButton(props: IHireEmployeeProps): React.ReactElement {
   function hire(): void {
     const popupId = "cmpy-mgmt-name-employee-popup";
     createPopup(popupId, NameEmployeePopup, {
+      rerender: props.rerender,
       office: props.office,
       corp: props.corp,
       popupId: popupId,
@@ -102,6 +105,7 @@ interface IProps {
   corp: ICorporation;
   popupId: string;
   player: IPlayer;
+  rerender: () => void;
 }
 
 // Create a popup that lets the player manage exports
@@ -150,6 +154,7 @@ export function HireEmployeePopup(props: IProps): React.ReactElement {
     <>
       <h1>Select one of the following candidates for hire:</h1>
       <HireEmployeeButton
+        rerender={props.rerender}
         employee={emp1}
         office={props.office}
         corp={props.corp}
@@ -157,6 +162,7 @@ export function HireEmployeePopup(props: IProps): React.ReactElement {
         player={props.player}
       />
       <HireEmployeeButton
+        rerender={props.rerender}
         employee={emp2}
         office={props.office}
         corp={props.corp}
@@ -164,6 +170,7 @@ export function HireEmployeePopup(props: IProps): React.ReactElement {
         player={props.player}
       />
       <HireEmployeeButton
+        rerender={props.rerender}
         employee={emp3}
         office={props.office}
         corp={props.corp}

src/Corporation/ui/Industry.tsx

@@ -18,6 +18,7 @@ interface IProps {
   warehouse: Warehouse | 0;
   office: OfficeSpace;
   player: IPlayer;
+  rerender: () => void;
 }
 
 export function Industry(props: IProps): React.ReactElement {
@@ -25,16 +26,24 @@ export function Industry(props: IProps): React.ReactElement {
     <div>
       <div className={"cmpy-mgmt-industry-left-panel"}>
         <IndustryOverview
+          rerender={props.rerender}
           player={props.player}
           corp={props.corp}
           division={props.division}
           currentCity={props.city}
           office={props.office}
         />
-        <IndustryOffice player={props.player} corp={props.corp} division={props.division} office={props.office} />
+        <IndustryOffice
+          rerender={props.rerender}
+          player={props.player}
+          corp={props.corp}
+          division={props.division}
+          office={props.office}
+        />
       </div>
       <div className={"cmpy-mgmt-industry-right-panel"}>
         <IndustryWarehouse
+          rerender={props.rerender}
           player={props.player}
           corp={props.corp}
           currentCity={props.city}

src/Corporation/ui/IndustryOffice.tsx

@@ -23,6 +23,7 @@ interface IProps {
   division: IIndustry;
   office: OfficeSpace;
   player: IPlayer;
+  rerender: () => void;
 }
 
 function countEmployee(employees: Employee[], job: string): number {
@@ -87,7 +88,7 @@ function ManualManagement(props: IProps): React.ReactElement {
       }
     }
 
-    props.corp.rerender(props.player);
+    props.rerender();
   }
 
   // Employee Positions Selector
@@ -110,7 +111,7 @@ function ManualManagement(props: IProps): React.ReactElement {
     if (employee === null) return;
     const pos = getSelectText(e.target);
     employee.pos = pos;
-    props.corp.rerender(props.player);
+    props.rerender();
   }
 
   // Numeraljs formatter
@@ -168,6 +169,7 @@ interface IAutoAssignProps {
   player: IPlayer;
   job: string;
   desc: string;
+  rerender: () => void;
 }
 
 function AutoAssignJob(props: IAutoAssignProps): React.ReactElement {
@@ -181,13 +183,13 @@ function AutoAssignJob(props: IAutoAssignProps): React.ReactElement {
 
     props.office.assignEmployeeToJob(props.job);
     props.office.calculateEmployeeProductivity(props.corp, props.division);
-    props.corp.rerender(props.player);
+    props.rerender();
   }
 
   function unassignEmployee(): void {
     props.office.unassignEmployeeFromJob(props.job);
     props.office.calculateEmployeeProductivity(props.corp, props.division);
-    props.corp.rerender(props.player);
+    props.rerender();
   }
   const positionHeaderStyle = {
     fontSize: "15px",
@@ -335,6 +337,7 @@ function AutoManagement(props: IProps): React.ReactElement {
         </tbody>
       </table>
       <AutoAssignJob
+        rerender={props.rerender}
         office={props.office}
         corp={props.corp}
         division={props.division}
@@ -344,6 +347,7 @@ function AutoManagement(props: IProps): React.ReactElement {
       />
 
       <AutoAssignJob
+        rerender={props.rerender}
         office={props.office}
         corp={props.corp}
         division={props.division}
@@ -355,6 +359,7 @@ function AutoManagement(props: IProps): React.ReactElement {
       />
 
       <AutoAssignJob
+        rerender={props.rerender}
         office={props.office}
         corp={props.corp}
         division={props.division}
@@ -364,6 +369,7 @@ function AutoManagement(props: IProps): React.ReactElement {
       />
 
       <AutoAssignJob
+        rerender={props.rerender}
         office={props.office}
         corp={props.corp}
         division={props.division}
@@ -375,6 +381,7 @@ function AutoManagement(props: IProps): React.ReactElement {
       />
 
       <AutoAssignJob
+        rerender={props.rerender}
         office={props.office}
         corp={props.corp}
         division={props.division}
@@ -384,6 +391,7 @@ function AutoManagement(props: IProps): React.ReactElement {
       />
 
       <AutoAssignJob
+        rerender={props.rerender}
         office={props.office}
         corp={props.corp}
         division={props.division}
@@ -418,6 +426,7 @@ export function IndustryOffice(props: IProps): React.ReactElement {
   function openHireEmployeePopup(): void {
     const popupId = "cmpy-mgmt-hire-employee-popup";
     createPopup(popupId, HireEmployeePopup, {
+      rerender: props.rerender,
       office: props.office,
       corp: props.corp,
       popupId: popupId,
@@ -435,12 +444,13 @@ export function IndustryOffice(props: IProps): React.ReactElement {
   function autohireEmployeeButtonOnClick(): void {
     if (props.office.atCapacity()) return;
     props.office.hireRandomEmployee();
-    props.corp.rerender(props.player);
+    props.rerender();
   }
 
   function openUpgradeOfficeSizePopup(): void {
     const popupId = "cmpy-mgmt-upgrade-office-size-popup";
     createPopup(popupId, UpgradeOfficeSizePopup, {
+      rerender: props.rerender,
       office: props.office,
       corp: props.corp,
       popupId: popupId,
@@ -505,9 +515,21 @@ export function IndustryOffice(props: IProps): React.ReactElement {
         <SwitchButton manualMode={employeeManualAssignMode} switchMode={setEmployeeManualAssignMode} />
       </div>
       {employeeManualAssignMode ? (
-        <ManualManagement corp={props.corp} division={props.division} office={props.office} player={props.player} />
+        <ManualManagement
+          rerender={props.rerender}
+          corp={props.corp}
+          division={props.division}
+          office={props.office}
+          player={props.player}
+        />
       ) : (
-        <AutoManagement corp={props.corp} division={props.division} office={props.office} player={props.player} />
+        <AutoManagement
+          rerender={props.rerender}
+          corp={props.corp}
+          division={props.division}
+          office={props.office}
+          player={props.player}
+        />
       )}
     </div>
   );

src/Corporation/ui/IndustryOverview.tsx

@@ -23,6 +23,7 @@ interface IProps {
   division: IIndustry;
   office: OfficeSpace;
   player: IPlayer;
+  rerender: () => void;
 }
 
 export function IndustryOverview(props: IProps): React.ReactElement {
@@ -281,8 +282,7 @@ export function IndustryOverview(props: IProps): React.ReactElement {
           corporation: props.corp,
           office: props.office,
         });
-        // corp.displayDivisionContent(division, city);
-        props.corp.rerender(props.player);
+        props.rerender();
       }
 
       upgrades.push(

src/Corporation/ui/IndustryWarehouse.tsx

@@ -36,6 +36,7 @@ interface IProductProps {
   city: string;
   product: Product;
   player: IPlayer;
+  rerender: () => void;
 }
 
 // Creates the UI for a single Product type
@@ -132,6 +133,7 @@ function ProductComponent(props: IProductProps): React.ReactElement {
   function openDiscontinueProductPopup(): void {
     const popupId = "cmpy-mgmt-discontinue-product-popup";
     createPopup(popupId, DiscontinueProductPopup, {
+      rerender: props.rerender,
       product: product,
       industry: division,
       corp: props.corp,
@@ -251,6 +253,7 @@ interface IMaterialProps {
   warehouse: Warehouse;
   city: string;
   mat: Material;
+  rerender: () => void;
 }
 
 // Creates the UI for a single Material type
@@ -444,6 +447,7 @@ interface IProps {
   warehouse: Warehouse | 0;
   currentCity: string;
   player: IPlayer;
+  rerender: () => void;
 }
 
 export function IndustryWarehouse(props: IProps): React.ReactElement {
@@ -465,7 +469,7 @@ export function IndustryWarehouse(props: IProps): React.ReactElement {
       ++props.warehouse.level;
       props.warehouse.updateSize(props.corp, props.division);
       props.corp.funds = props.corp.funds.minus(sizeUpgradeCost);
-      props.corp.rerender(props.player);
+      props.rerender();
     }
 
     function openSmartSupplyPopup(): void {
@@ -523,6 +527,7 @@ export function IndustryWarehouse(props: IProps): React.ReactElement {
         if (isRelevantMaterial(matName, props.division)) {
           mats.push(
             <MaterialComponent
+              rerender={props.rerender}
               city={props.currentCity}
               corp={props.corp}
               division={props.division}
@@ -543,6 +548,7 @@ export function IndustryWarehouse(props: IProps): React.ReactElement {
         if (product instanceof Product) {
           products.push(
             <ProductComponent
+              rerender={props.rerender}
               player={props.player}
               city={props.currentCity}
               corp={props.corp}
@@ -607,7 +613,7 @@ export function IndustryWarehouse(props: IProps): React.ReactElement {
         size: CorporationConstants.WarehouseInitialSize,
       });
       props.corp.funds = props.corp.funds.minus(CorporationConstants.WarehouseInitialCost);
-      props.corp.rerender(props.player);
+      props.rerender();
     }
   }
 

src/Corporation/ui/LevelableUpgrade.tsx

@@ -12,6 +12,7 @@ interface IProps {
   upgrade: CorporationUpgrade;
   corp: ICorporation;
   player: IPlayer;
+  rerender: () => void;
 }
 
 export function LevelableUpgrade(props: IProps): React.ReactElement {
@@ -35,7 +36,7 @@ export function LevelableUpgrade(props: IProps): React.ReactElement {
     } catch (err) {
       dialogBoxCreate(err + "");
     }
-    props.corp.rerender(props.player);
+    props.rerender();
   }
 
   return (

src/Corporation/ui/MainPanel.tsx

@@ -15,6 +15,7 @@ interface IProps {
   corp: ICorporation;
   player: IPlayer;
   divisionName: string;
+  rerender: () => void;
 }
 
 export function MainPanel(props: IProps): React.ReactElement {
@@ -32,7 +33,13 @@ export function MainPanel(props: IProps): React.ReactElement {
   } else {
     return (
       <div id="cmpy-mgmt-panel">
-        <CityTabs division={division} corp={props.corp} city={CityName.Sector12} player={props.player} />
+        <CityTabs
+          rerender={props.rerender}
+          division={division}
+          corp={props.corp}
+          city={CityName.Sector12}
+          player={props.player}
+        />
       </div>
     );
   }

src/Corporation/ui/Overview.tsx

@@ -25,6 +25,7 @@ import { ICorporation } from "../ICorporation";
 interface IProps {
   corp: ICorporation;
   player: IPlayer;
+  rerender: () => void;
 }
 
 export function Overview(props: IProps): React.ReactElement {
@@ -128,6 +129,7 @@ export function Overview(props: IProps): React.ReactElement {
   function openFindInvestorsPopup(): void {
     const popupId = "cmpy-mgmt-find-investors-popup";
     createPopup(popupId, FindInvestorsPopup, {
+      rerender: props.rerender,
       player: props.player,
       popupId: popupId,
       corp: props.corp,
@@ -137,6 +139,7 @@ export function Overview(props: IProps): React.ReactElement {
   function openGoPublicPopup(): void {
     const popupId = "cmpy-mgmt-go-public-popup";
     createPopup(popupId, GoPublicPopup, {
+      rerender: props.rerender,
       player: props.player,
       popupId: popupId,
       corp: props.corp,
@@ -182,12 +185,14 @@ export function Overview(props: IProps): React.ReactElement {
       corp: props.corp,
       player: props.player,
       popupId: popupId,
+      rerender: props.rerender,
     });
   }
 
   function openBuybackSharesPopup(): void {
     const popupId = "corp-buyback-shares-popup";
     createPopup(popupId, BuybackSharesPopup, {
+      rerender: props.rerender,
       player: props.player,
       popupId: popupId,
       corp: props.corp,
@@ -277,14 +282,26 @@ export function Overview(props: IProps): React.ReactElement {
         {Object.values(CorporationUnlockUpgrades)
           .filter((upgrade: CorporationUnlockUpgrade) => props.corp.unlockUpgrades[upgrade[0]] === 0)
           .map((upgrade: CorporationUnlockUpgrade) => (
-            <UnlockUpgrade player={props.player} corp={props.corp} upgradeData={upgrade} key={upgrade[0]} />
+            <UnlockUpgrade
+              rerender={props.rerender}
+              player={props.player}
+              corp={props.corp}
+              upgradeData={upgrade}
+              key={upgrade[0]}
+            />
           ))}
 
         <h1 className={"cmpy-mgmt-upgrade-header"}> Upgrades </h1>
         {props.corp.upgrades
           .map((level: number, i: number) => CorporationUpgrades[i])
           .map((upgrade: CorporationUpgrade) => (
-            <LevelableUpgrade player={props.player} corp={props.corp} upgrade={upgrade} key={upgrade[0]} />
+            <LevelableUpgrade
+              rerender={props.rerender}
+              player={props.player}
+              corp={props.corp}
+              upgrade={upgrade}
+              key={upgrade[0]}
+            />
           ))}
       </div>
     );

src/Corporation/ui/ResearchPopup.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { dialogBoxCreate } from "../../../utils/DialogBox";
-import { createElement } from "../../../utils/uiHelpers/createElement";
 import { removePopup } from "../../ui/React/createPopup";
 import { IndustryResearchTrees } from "../IndustryData";
 import { CorporationConstants } from "../data/Constants";

src/Corporation/ui/Root.tsx

@@ -1,19 +0,0 @@
-// Root React Component for the Corporation UI
-import React from "react";
-
-import { HeaderTabs } from "./HeaderTabs";
-import { IPlayer } from "../../PersonObjects/IPlayer";
-import { ICorporation } from "../ICorporation";
-
-interface IProps {
-  corp: ICorporation;
-  player: IPlayer;
-}
-
-export function CorporationRoot(props: IProps): React.ReactElement {
-  return (
-    <div>
-      <HeaderTabs corp={props.corp} player={props.player} />
-    </div>
-  );
-}

src/Corporation/ui/SellSharesPopup.tsx

@@ -10,6 +10,7 @@ interface IProps {
   corp: ICorporation;
   player: IPlayer;
   popupId: string;
+  rerender: () => void;
 }
 
 // Create a popup that lets the player sell Corporation shares
@@ -75,7 +76,7 @@ export function SellSharesPopup(props: IProps): React.ReactElement {
           `as a result of dilution.`,
       );
 
-      props.corp.rerender(props.player);
+      props.rerender();
     }
   }
 

src/Corporation/ui/UnlockUpgrade.tsx

@@ -12,6 +12,7 @@ interface IProps {
   upgradeData: CorporationUnlockUpgrade;
   corp: ICorporation;
   player: IPlayer;
+  rerender: () => void;
 }
 
 export function UnlockUpgrade(props: IProps): React.ReactElement {
@@ -29,7 +30,7 @@ export function UnlockUpgrade(props: IProps): React.ReactElement {
     } catch (err) {
       dialogBoxCreate(err + "");
     }
-    props.corp.rerender(props.player);
+    props.rerender();
   }
 
   return (

src/Corporation/ui/UpgradeOfficeSizePopup.tsx

@@ -12,6 +12,7 @@ interface IProps {
   corp: ICorporation;
   popupId: string;
   player: IPlayer;
+  rerender: () => void;
 }
 
 export function UpgradeOfficeSizePopup(props: IProps): React.ReactElement {
@@ -50,7 +51,7 @@ export function UpgradeOfficeSizePopup(props: IProps): React.ReactElement {
       props.office.size += size;
       props.corp.funds = props.corp.funds.minus(cost);
       dialogBoxCreate("Office space increased! It can now hold " + props.office.size + " employees");
-      props.corp.rerender(props.player);
+      props.rerender();
     }
     removePopup(props.popupId);
   }

src/engine.jsx

@@ -21,6 +21,7 @@ import { processPassiveFactionRepGain, inviteToFaction } from "./Faction/Faction
 import { FactionList } from "./Faction/ui/FactionList";
 import { Root as BladeburnerRoot } from "./Bladeburner/ui/Root";
 import { Root as GangRoot } from "./Gang/ui/Root";
+import { CorporationRoot } from "./Corporation/ui/CorporationRoot";
 import { displayInfiltrationContent } from "./Infiltration/Helper";
 import {
   getHackingWorkRepGain,
@@ -188,6 +189,7 @@ const Engine = {
     stockMarketContent: null,
     gangContent: null,
     bladeburnerContent: null,
+    corporationContent: null,
     locationContent: null,
     workInProgressContent: null,
     redPillContent: null,
@@ -409,7 +411,8 @@ const Engine = {
     if (!(Player.corporation instanceof Corporation)) return;
     Engine.hideAllContent();
     routing.navigateTo(Page.Corporation);
-    Player.corporation.createUI(Player);
+    Engine.Display.corporationContent.style.display = "block";
+    ReactDOM.render(<CorporationRoot corp={Player.corporation} player={Player} />, Engine.Display.corporationContent);
   },
 
   loadBladeburnerContent: function () {
@@ -483,16 +486,15 @@ const Engine = {
     Engine.Display.bladeburnerContent.style.display = "none";
     ReactDOM.unmountComponentAtNode(Engine.Display.bladeburnerContent);
 
+    Engine.Display.corporationContent.style.display = "none";
+    ReactDOM.unmountComponentAtNode(Engine.Display.corporationContent);
+
     Engine.Display.workInProgressContent.style.display = "none";
     Engine.Display.redPillContent.style.display = "none";
     Engine.Display.cinematicTextContent.style.display = "none";
     Engine.Display.stockMarketContent.style.display = "none";
     Engine.Display.missionContent.style.display = "none";
 
-    if (Player.corporation instanceof Corporation) {
-      Player.corporation.clearUI(Player);
-    }
-
     clearResleevesPage();
     clearSleevesPage();
 
@@ -1250,6 +1252,9 @@ const Engine = {
     Engine.Display.bladeburnerContent = document.getElementById("bladeburner-container");
     Engine.Display.bladeburnerContent.style.display = "none";
 
+    Engine.Display.corporationContent = document.getElementById("corporation-container");
+    Engine.Display.corporationContent.style.display = "none";
+
     Engine.Display.missionContent = document.getElementById("mission-container");
     Engine.Display.missionContent.style.display = "none";
 

src/engineStyle.js

@@ -32,3 +32,4 @@ import "../css/dev-menu.css";
 import "../css/casino.scss";
 import "../css/milestones.scss";
 import "../css/infiltration.scss";
+import "../css/corporation.scss";

src/index.html

@@ -365,6 +365,7 @@
       <div id="stock-market-container" class="generic-menupage-container"></div>
       <div id="bladeburner-container" class="generic-menupage-container"></div>
       <div id="gang-container" class="generic-menupage-container"></div>
+      <div id="corporation-container" class="generic-menupage-container"></div>
 
       <!-- Generic Yes/No Pop Up box -->
       <div id="yes-no-box-container" class="popup-box-container">