more conversion

src/Corporation/ui/CorporationUIEventHandler.js

@@ -1474,171 +1474,6 @@ export class CorporationEventHandler {
         input.focus();
     }
 
-    // Creates a popup that lets the player throw an office party
-    createThrowOfficePartyPopup(office) {
-        const popupId = "cmpy-mgmt-throw-office-party-popup";
-        const txt = createElement("p", {
-            innerText:"Enter the amount of money you would like to spend PER EMPLOYEE " +
-                      "on this office party",
-        });
-        const totalCostTxt = createElement("p", {
-            innerText:"Throwing this party will cost a total of $0",
-        });
-        let confirmBtn;
-        const input = createElement("input", {
-            type: "number", margin: "5px", placeholder: "$ / employee",
-            inputListener: () => {
-                if (isNaN(input.value) || input.value < 0) {
-                    totalCostTxt.innerText = "Invalid value entered!"
-                } else {
-                    const totalCost = input.value * office.employees.length;
-                    totalCostTxt.innerText = "Throwing this party will cost a total of " + numeralWrapper.format(totalCost, '$0.000a');
-                }
-            },
-            onkeyup:(e)=>{
-                e.preventDefault();
-                if (e.keyCode === KEY.ENTER) {confirmBtn.click();}
-            },
-        });
-        confirmBtn = createElement("button", {
-            class: "std-button",
-            innerText: "Throw Party",
-            clickListener:()=>{
-                if (isNaN(input.value) || input.value < 0) {
-                    dialogBoxCreate("Invalid value entered");
-                } else {
-                    var totalCost = input.value * office.employees.length;
-                    if (this.corp.funds.lt(totalCost)) {
-                        dialogBoxCreate("You don't have enough company funds to throw this.corp party!");
-                    } else {
-                        this.corp.funds = this.corp.funds.minus(totalCost);
-                        var mult;
-                        for (let fooit = 0; fooit < office.employees.length; ++fooit) {
-                            mult = office.employees[fooit].throwParty(input.value);
-                        }
-                        dialogBoxCreate("You threw a party for the office! The morale and happiness " +
-                                        "of each employee increased by " + numeralWrapper.formatPercentage((mult-1)));
-                        removeElementById(popupId);
-                    }
-                }
-                return false;
-            },
-        });
-        const cancelBtn = createPopupCloseButton(popupId, { class: "std-button", innerText: "Cancel" });
-
-        createPopup(popupId, [txt, totalCostTxt, input, confirmBtn, cancelBtn]);
-        input.focus();
-    }
-
-    // Creates a popup that lets the player upgrade the current OfficeSpace's size
-    createUpgradeOfficeSizePopup(office) {
-        const popupId = "cmpy-mgmt-upgrade-office-size-popup";
-        const initialPriceMult = Math.round(office.size / OfficeInitialSize);
-        const costMultiplier = 1.09;
-        const upgradeCost = OfficeInitialCost * Math.pow(costMultiplier, initialPriceMult);
-
-        // Calculate cost to upgrade size by 15 employees
-        let mult = 0;
-        for (let i = 0; i < 5; ++i) {
-            mult += (Math.pow(costMultiplier, initialPriceMult + i));
-        }
-        const upgradeCost15 = OfficeInitialCost * mult;
-
-        //Calculate max upgrade size and cost
-        let maxMult = (this.corp.funds.dividedBy(OfficeInitialCost)).toNumber();
-        let maxNum = 1;
-        mult = Math.pow(costMultiplier, initialPriceMult);
-        while(maxNum < 50) { //Hard cap of 50x (extra 150 employees)
-            if (mult >= maxMult) {break;}
-            let multIncrease = Math.pow(costMultiplier, initialPriceMult + maxNum);
-            if (mult + multIncrease > maxMult) {
-                break;
-            } else {
-                mult += multIncrease;
-            }
-            ++maxNum;
-        }
-        const upgradeCostMax = OfficeInitialCost * mult;
-
-        const text = createElement("p", {
-            innerText:"Increase the size of your office space to fit additional employees!",
-        });
-        const text2 = createElement("p", { innerText: "Upgrade size: " });
-
-        const confirmBtn = createElement("button", {
-            class: this.corp.funds.lt(upgradeCost) ? "a-link-button-inactive" : "a-link-button",
-            display:"inline-block", margin:"4px", innerText:"by 3",
-            tooltip:numeralWrapper.format(upgradeCost, "$0.000a"),
-            clickListener:()=>{
-                if (this.corp.funds.lt(upgradeCost)) {
-                    dialogBoxCreate("You don't have enough company funds to purchase this upgrade!");
-                } else {
-                    office.size += OfficeInitialSize;
-                    this.corp.funds = this.corp.funds.minus(upgradeCost);
-                    dialogBoxCreate("Office space increased! It can now hold " + office.size + " employees");
-                    this.rerender();
-                }
-                removeElementById(popupId);
-                return false;
-            },
-        });
-        const confirmBtn15 = createElement("button", {
-            class: this.corp.funds.lt(upgradeCost15) ? "a-link-button-inactive" : "a-link-button",
-            display:"inline-block", margin:"4px", innerText:"by 15",
-            tooltip:numeralWrapper.format(upgradeCost15, "$0.000a"),
-            clickListener:()=>{
-                if (this.corp.funds.lt(upgradeCost15)) {
-                    dialogBoxCreate("You don't have enough company funds to purchase this upgrade!");
-                } else {
-                    office.size += (OfficeInitialSize * 5);
-                    this.corp.funds = this.corp.funds.minus(upgradeCost15);
-                    dialogBoxCreate("Office space increased! It can now hold " + office.size + " employees");
-                    this.rerender();
-                }
-                removeElementById(popupId);
-                return false;
-            },
-        });
-        const confirmBtnMax = createElement("button", {
-            class:this.corp.funds.lt(upgradeCostMax) ? "a-link-button-inactive" : "a-link-button",
-            display:"inline-block", margin:"4px", innerText:"by MAX (" + maxNum*OfficeInitialSize + ")",
-            tooltip:numeralWrapper.format(upgradeCostMax, "$0.000a"),
-            clickListener:()=>{
-                if (this.corp.funds.lt(upgradeCostMax)) {
-                    dialogBoxCreate("You don't have enough company funds to purchase this upgrade!");
-                } else {
-                    office.size += (OfficeInitialSize * maxNum);
-                    this.corp.funds = this.corp.funds.minus(upgradeCostMax);
-                    dialogBoxCreate("Office space increased! It can now hold " + office.size + " employees");
-                    this.rerender();
-                }
-                removeElementById(popupId);
-                return false;
-            },
-        });
-        const cancelBtn = createPopupCloseButton(popupId, { innerText: "Cancel" });
-        cancelBtn.style.margin = "4px";
-
-        createPopup(popupId, [text, text2, confirmBtn, confirmBtn15, confirmBtnMax, cancelBtn]);
-    }
-
-    // Purchases a new Warehouse
-    purchaseWarehouse(division, city) {
-        const corp = this.corp;
-        if (corp.funds.lt(WarehouseInitialCost)) {
-            dialogBoxCreate("You do not have enough funds to do this!");
-        } else {
-            division.warehouses[city] = new Warehouse({
-                corp: corp,
-                industry: division,
-                loc: city,
-                size: WarehouseInitialSize,
-            });
-            corp.funds = corp.funds.minus(WarehouseInitialCost);
-            this.rerender();
-        }
-    }
-
     rerender() {
         this.corp.rerender();
     }

src/Corporation/ui/IndustryOffice.tsx

@@ -9,6 +9,9 @@ import { EmployeePositions }        from "../EmployeePositions";
 import { numeralWrapper }           from "../../ui/numeralFormat";
 
 import { getSelectText }            from "../../../utils/uiHelpers/getSelectData";
+import { createPopup }              from "../../ui/React/createPopup";
+import { UpgradeOfficeSizePopup }   from "./UpgradeOfficeSizePopup";
+import { ThrowPartyPopup }          from "./ThrowPartyPopup";
 
 interface IProps {
     routing: any;
@@ -565,17 +568,29 @@ export function IndustryOffice(props: IProps): React.ReactElement {
     } else {
         autohireEmployeeButtonClass += " std-button";
     }
-    const autohireEmployeeButtonOnClick = () => {
+    function autohireEmployeeButtonOnClick(): void {
-        if (office.atCapacity()) { return; }
+        if (office.atCapacity()) return;
         office.hireRandomEmployee();
         props.corp.rerender();
     }
 
-    // Upgrade Office Size Button
+    function openUpgradeOfficeSizePopup(): void {
-    const upgradeOfficeSizeOnClick = props.eventHandler.createUpgradeOfficeSizePopup.bind(props.eventHandler, office);
+        const popupId = "cmpy-mgmt-upgrade-office-size-popup";
+        createPopup(popupId, UpgradeOfficeSizePopup, {
+            office: office,
+            corp: props.corp,
+            popupId: popupId,
+        });
+    }
 
-    // Throw Office Party
+    function openThrowPartyPopup(): void {
-    const throwOfficePartyOnClick = props.eventHandler.createThrowOfficePartyPopup.bind(props.eventHandler, office);
+        const popupId = "cmpy-mgmt-throw-office-party-popup";
+        createPopup(popupId, ThrowPartyPopup, {
+            office: office,
+            corp: props.corp,
+            popupId: popupId,
+        });
+    }
 
     return (
         <div className={"cmpy-mgmt-employee-panel"}>
@@ -598,7 +613,7 @@ export function IndustryOffice(props: IProps): React.ReactElement {
                 </span>
             </button>
             <br />
-            <button className={"std-button tooltip"} onClick={upgradeOfficeSizeOnClick} style={buttonStyle}>
+            <button className={"std-button tooltip"} onClick={openUpgradeOfficeSizePopup} style={buttonStyle}>
                 Upgrade size
                 <span className={"tooltiptext"}>
                     Upgrade the office's size so that it can hold more employees!
@@ -606,7 +621,7 @@ export function IndustryOffice(props: IProps): React.ReactElement {
             </button>
             {
                 !division.hasResearch("AutoPartyManager") &&
-                <button className={"std-button tooltip"} onClick={throwOfficePartyOnClick} style={buttonStyle}>
+                <button className={"std-button tooltip"} onClick={openThrowPartyPopup} style={buttonStyle}>
                     Throw Party
                     <span className={"tooltiptext"}>
                         "Throw an office party to increase your employee's morale and happiness"

src/Corporation/ui/IndustryWarehouse.tsx

@@ -9,6 +9,7 @@ import { Product }                      from "../Product";
 import { Warehouse }                    from "../Warehouse";
 
 import { numeralWrapper }               from "../../ui/numeralFormat";
+import { dialogBoxCreate }              from "../../../utils/DialogBox";
 
 import { isString }                     from "../../../utils/helpers/isString";
 
@@ -527,12 +528,27 @@ export function IndustryWarehouse(props: IProps) {
     }
     const warehouse = division.warehouses[props.currentCity];
 
+    function purchaseWarehouse(division: any, city: string) {
+        if (props.corp.funds.lt(CorporationConstants.WarehouseInitialCost)) {
+            dialogBoxCreate("You do not have enough funds to do this!");
+        } else {
+            division.warehouses[city] = new Warehouse({
+                corp: props.corp,
+                industry: division,
+                loc: city,
+                size: CorporationConstants.WarehouseInitialSize,
+            });
+            props.corp.funds = props.corp.funds.minus(CorporationConstants.WarehouseInitialCost);
+            props.corp.rerender();
+        }
+    }
+
     if (warehouse instanceof Warehouse) {
         return renderWarehouseUI();
     } else {
         return (
             <div className={"cmpy-mgmt-warehouse-panel"}>
-                <button className={"std-button"} onClick={() => props.eventHandler.purchaseWarehouse(division, props.currentCity)}>
+                <button className={"std-button"} onClick={() => purchaseWarehouse(division, props.currentCity)}>
                     Purchase Warehouse ({numeralWrapper.formatMoney(CorporationConstants.WarehouseInitialCost)})
                 </button>
             </div>

src/Corporation/ui/ThrowPartyPopup.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { removePopup } from "../../ui/React/createPopup";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { dialogBoxCreate } from "../../../utils/DialogBox";
+import { IOfficeSpace } from "../IOfficeSpace";
+
+interface IProps {
+    office: IOfficeSpace;
+    corp: any;
+    popupId: string;
+}
+
+export function ThrowPartyPopup(props: IProps): React.ReactElement {
+    const [cost, setCost] = useState<number | null>(null);
+
+    function changeCost(event: React.ChangeEvent<HTMLInputElement>): void {
+        setCost(parseFloat(event.target.value));
+    }
+
+    function throwParty() {
+        if (cost === null || isNaN(cost) || cost < 0) {
+            dialogBoxCreate("Invalid value entered");
+        } else {
+            const totalCost = cost * props.office.employees.length;
+            if (props.corp.funds.lt(totalCost)) {
+                dialogBoxCreate("You don't have enough company funds to throw a party!");
+            } else {
+                props.corp.funds = props.corp.funds.minus(totalCost);
+                let mult;
+                for (let fooit = 0; fooit < props.office.employees.length; ++fooit) {
+                    mult = props.office.employees[fooit].throwParty(cost);
+                }
+                dialogBoxCreate("You threw a party for the office! The morale and happiness " +
+                                "of each employee increased by " + numeralWrapper.formatPercentage((mult-1)));
+                removePopup(props.popupId);
+            }
+        }
+    }
+
+    function EffectText(props: {cost: number | null, office: IOfficeSpace}): React.ReactElement {
+        let cost = props.cost;
+        if(cost !== null && (isNaN(cost) || cost < 0)) return <p>Invalid value entered!</p>
+        if(cost === null) cost = 0;
+        return <p>Throwing this party will cost a total of {numeralWrapper.formatMoney(cost * props.office.employees.length)}</p>
+    }
+
+    function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+        if (event.keyCode === 13) throwParty();
+    }
+
+    return (<>
+        <p>Enter the amount of money you would like to spend PER EMPLOYEE on this office party</p>
+        <EffectText cost={cost} office={props.office} />
+        <input autoFocus={true} className="text-input" type="number" style={{margin: "5px"}} placeholder="$ / employee" onChange={changeCost} onKeyDown={onKeyDown} />
+        <button className="std-button" onClick={throwParty}>Throw Party</button>
+    </>);
+}

src/Corporation/ui/UpgradeOfficeSizePopup.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { removePopup } from "../../ui/React/createPopup";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { dialogBoxCreate } from "../../../utils/DialogBox";
+import { CorporationConstants } from "../data/Constants";
+import { IOfficeSpace } from "../IOfficeSpace";
+
+interface IProps {
+    office: IOfficeSpace;
+    corp: any;
+    popupId: string;
+}
+
+export function UpgradeOfficeSizePopup(props: IProps): React.ReactElement {
+    const initialPriceMult = Math.round(props.office.size / CorporationConstants.OfficeInitialSize);
+    const costMultiplier = 1.09;
+    const upgradeCost = CorporationConstants.OfficeInitialCost * Math.pow(costMultiplier, initialPriceMult);
+
+    // Calculate cost to upgrade size by 15 employees
+    let mult = 0;
+    for (let i = 0; i < 5; ++i) {
+        mult += (Math.pow(costMultiplier, initialPriceMult + i));
+    }
+    const upgradeCost15 = CorporationConstants.OfficeInitialCost * mult;
+
+    //Calculate max upgrade size and cost
+    let maxMult = (props.corp.funds.dividedBy(CorporationConstants.OfficeInitialCost)).toNumber();
+    let maxNum = 1;
+    mult = Math.pow(costMultiplier, initialPriceMult);
+    while(maxNum < 50) { //Hard cap of 50x (extra 150 employees)
+        if (mult >= maxMult) break;
+        let multIncrease = Math.pow(costMultiplier, initialPriceMult + maxNum);
+        if (mult + multIncrease > maxMult) {
+            break;
+        } else {
+            mult += multIncrease;
+        }
+        ++maxNum;
+    }
+    const upgradeCostMax = CorporationConstants.OfficeInitialCost * mult;
+
+    function upgradeSize(cost: number, size: number): void {
+        if (props.corp.funds.lt(cost)) {
+            dialogBoxCreate("You don't have enough company funds to purchase this upgrade!");
+        } else {
+            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();
+        }
+        removePopup(props.popupId);
+    }
+
+    interface IUpgradeButton {
+        cost: number;
+        size: number;
+        corp: any;
+    }
+
+    function UpgradeSizeButton(props: IUpgradeButton): React.ReactElement {
+        return (<button
+            className={"tooltip "+(props.corp.funds.lt(props.cost) ? "a-link-button-inactive" : "a-link-button")}
+            style={{display:"inline-block", margin:"4px"}}
+            onClick={() => upgradeSize(props.cost, props.size)}
+        >by {props.size}
+        <span className="tooltiptext">{numeralWrapper.formatMoney(props.cost)}</span>
+        </button>);
+    }
+
+    return (<>
+        <p>Increase the size of your office space to fit additional employees!</p>
+        <p>Upgrade size: </p>
+        <UpgradeSizeButton corp={props.corp} cost={upgradeCost} size={CorporationConstants.OfficeInitialSize} />
+        <UpgradeSizeButton corp={props.corp} cost={upgradeCost15} size={CorporationConstants.OfficeInitialSize * 5} />
+        <UpgradeSizeButton corp={props.corp} cost={upgradeCostMax} size={maxNum*CorporationConstants.OfficeInitialSize} />
+    </>);
+}