diff --git a/css/corporation.scss b/css/corporation.scss new file mode 100644 index 000000000..d3fb6335b --- /dev/null +++ b/css/corporation.scss @@ -0,0 +1,4 @@ +#corporation-container { + position: fixed; + padding: 6px; +} diff --git a/src/Corporation/Corporation.tsx b/src/Corporation/Corporation.tsx index 288660213..465babe7a 100644 --- a/src/Corporation/Corporation.tsx +++ b/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(, 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. */ diff --git a/src/Corporation/ICorporation.ts b/src/Corporation/ICorporation.ts index 706f59b21..1b852830f 100644 --- a/src/Corporation/ICorporation.ts +++ b/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; } diff --git a/src/Corporation/ui/BuybackSharesPopup.tsx b/src/Corporation/ui/BuybackSharesPopup.tsx index 34843eeee..ed9fd7953 100644 --- a/src/Corporation/ui/BuybackSharesPopup.tsx +++ b/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(); } } diff --git a/src/Corporation/ui/CityTabs.tsx b/src/Corporation/ui/CityTabs.tsx index 0ab4c9d1a..d17a46f91 100644 --- a/src/Corporation/ui/CityTabs.tsx +++ b/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 { )} !old); + } const [divisionName, setDivisionName] = useState("Overview"); + useEffect(() => { + const id = setInterval(rerender, 150); + return () => clearInterval(id); + }, []); + return ( <>
@@ -64,7 +73,7 @@ export function HeaderTabs(props: IProps): React.ReactElement { ))}
- + ); } diff --git a/src/Corporation/ui/DiscontinueProductPopup.tsx b/src/Corporation/ui/DiscontinueProductPopup.tsx index c9fb2aeab..b258ea4fb 100644 --- a/src/Corporation/ui/DiscontinueProductPopup.tsx +++ b/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 ( diff --git a/src/Corporation/ui/FindInvestorsPopup.tsx b/src/Corporation/ui/FindInvestorsPopup.tsx index 55114a851..6aa1428f1 100644 --- a/src/Corporation/ui/FindInvestorsPopup.tsx +++ b/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 ( diff --git a/src/Corporation/ui/GoPublicPopup.tsx b/src/Corporation/ui/GoPublicPopup.tsx index bae76bd0e..39043a63f 100644 --- a/src/Corporation/ui/GoPublicPopup.tsx +++ b/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`, diff --git a/src/Corporation/ui/HireEmployeePopup.tsx b/src/Corporation/ui/HireEmployeePopup.tsx index c41a02620..690548256 100644 --- a/src/Corporation/ui/HireEmployeePopup.tsx +++ b/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 { <>

Select one of the following candidates for hire:

void; } export function Industry(props: IProps): React.ReactElement { @@ -25,16 +26,24 @@ export function Industry(props: IProps): React.ReactElement {
- +
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 {
{employeeManualAssignMode ? ( - + ) : ( - + )}
); diff --git a/src/Corporation/ui/IndustryOverview.tsx b/src/Corporation/ui/IndustryOverview.tsx index 4d2177873..34ea97d6a 100644 --- a/src/Corporation/ui/IndustryOverview.tsx +++ b/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( diff --git a/src/Corporation/ui/IndustryWarehouse.tsx b/src/Corporation/ui/IndustryWarehouse.tsx index 16ace3247..55181ebdb 100644 --- a/src/Corporation/ui/IndustryWarehouse.tsx +++ b/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( 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 ( diff --git a/src/Corporation/ui/MainPanel.tsx b/src/Corporation/ui/MainPanel.tsx index 2a8f7b77d..319aacff9 100644 --- a/src/Corporation/ui/MainPanel.tsx +++ b/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 (
- +
); } diff --git a/src/Corporation/ui/Overview.tsx b/src/Corporation/ui/Overview.tsx index 2fc605654..0121af4f3 100644 --- a/src/Corporation/ui/Overview.tsx +++ b/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) => ( - + ))}

Upgrades

{props.corp.upgrades .map((level: number, i: number) => CorporationUpgrades[i]) .map((upgrade: CorporationUpgrade) => ( - + ))} ); diff --git a/src/Corporation/ui/ResearchPopup.tsx b/src/Corporation/ui/ResearchPopup.tsx index 38d5323e0..7ae7f5771 100644 --- a/src/Corporation/ui/ResearchPopup.tsx +++ b/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"; diff --git a/src/Corporation/ui/Root.tsx b/src/Corporation/ui/Root.tsx deleted file mode 100644 index ef1e45407..000000000 --- a/src/Corporation/ui/Root.tsx +++ /dev/null @@ -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 ( -
- -
- ); -} diff --git a/src/Corporation/ui/SellSharesPopup.tsx b/src/Corporation/ui/SellSharesPopup.tsx index 756cc520a..b48bd9296 100644 --- a/src/Corporation/ui/SellSharesPopup.tsx +++ b/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(); } } diff --git a/src/Corporation/ui/UnlockUpgrade.tsx b/src/Corporation/ui/UnlockUpgrade.tsx index ece6204c1..b8f2b638c 100644 --- a/src/Corporation/ui/UnlockUpgrade.tsx +++ b/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 ( diff --git a/src/Corporation/ui/UpgradeOfficeSizePopup.tsx b/src/Corporation/ui/UpgradeOfficeSizePopup.tsx index e5bf664f5..6acc92c7a 100644 --- a/src/Corporation/ui/UpgradeOfficeSizePopup.tsx +++ b/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); } diff --git a/src/engine.jsx b/src/engine.jsx index 3eb785b4f..2621bc81b 100644 --- a/src/engine.jsx +++ b/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(, 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"; diff --git a/src/engineStyle.js b/src/engineStyle.js index 725dc7c02..c4292f512 100644 --- a/src/engineStyle.js +++ b/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"; diff --git a/src/index.html b/src/index.html index 151d86fcc..d682c2e6d 100644 --- a/src/index.html +++ b/src/index.html @@ -365,6 +365,7 @@
+