more conversion

src/Corporation/OfficeSpace.ts

@@ -1,22 +1,11 @@
 import { EmployeePositions } from "./EmployeePositions";
 import { CorporationConstants } from "./data/Constants";
 import { getRandomInt } from "../../utils/helpers/getRandomInt";
-import { formatNumber, generateRandomString } from "../../utils/StringHelperFunctions";
+import { generateRandomString } from "../../utils/StringHelperFunctions";
 import { Generic_fromJSON, Generic_toJSON, Reviver } from "../../utils/JSONReviver";
-import { yesNoTxtInpBoxCreate,
-         yesNoTxtInpBoxGetYesButton,
-         yesNoTxtInpBoxGetNoButton,
-         yesNoTxtInpBoxGetInput,
-         yesNoTxtInpBoxClose } from "../../utils/YesNoBox";
-import { dialogBoxCreate } from "../../utils/DialogBox";
-import { createPopup } from "../../utils/uiHelpers/createPopup";
-import { removeElementById } from "../../utils/uiHelpers/removeElementById";
-import { createElement } from "../../utils/uiHelpers/createElement";
-import { numeralWrapper } from "../ui/numeralFormat";
 import { Employee } from "./Employee";
 import { IIndustry } from "./IIndustry";
 import { ICorporation } from './ICorporation';
-import { IPlayer } from "../PersonObjects/IPlayer";
 
 interface IParams {
     loc?: string;
@@ -139,114 +128,6 @@ export class OfficeSpace {
         this.employeeProd.total = total;
     }
 
-    //Takes care of UI as well
-    findEmployees(player: IPlayer, corporation: ICorporation): void {
-        if (this.atCapacity()) { return; }
-        if (document.getElementById("cmpy-mgmt-hire-employee-popup") != null) {return;}
-
-        //Generate three random employees (meh, decent, amazing)
-        const mult1 = getRandomInt(25, 50)/100,
-            mult2 = getRandomInt(51, 75)/100,
-            mult3 = getRandomInt(76, 100)/100;
-        const int = getRandomInt(50, 100),
-            cha = getRandomInt(50, 100),
-            exp = getRandomInt(50, 100),
-            cre = getRandomInt(50, 100),
-            eff = getRandomInt(50, 100),
-            sal = CorporationConstants.EmployeeSalaryMultiplier * (int + cha + exp + cre + eff);
-
-        const emp1 = new Employee({
-            intelligence: int * mult1,
-            charisma: cha * mult1,
-            experience: exp * mult1,
-            creativity: cre * mult1,
-            efficiency: eff * mult1,
-            salary: sal * mult1,
-        });
-
-        const emp2 = new Employee({
-            intelligence: int * mult2,
-            charisma: cha * mult2,
-            experience: exp * mult2,
-            creativity: cre * mult2,
-            efficiency: eff * mult2,
-            salary: sal * mult2,
-        });
-
-        const emp3 = new Employee({
-            intelligence: int * mult3,
-            charisma: cha * mult3,
-            experience: exp * mult3,
-            creativity: cre * mult3,
-            efficiency: eff * mult3,
-            salary: sal * mult3,
-        });
-
-        const text = createElement("h1", {
-            innerHTML: "Select one of the following candidates for hire:",
-        });
-
-        function createEmpDiv(employee: Employee, office: OfficeSpace): HTMLElement {
-            const div = createElement("div", {
-                class:"cmpy-mgmt-find-employee-option",
-                innerHTML:  "Intelligence: " + formatNumber(employee.int, 1) + "<br>" +
-                            "Charisma: " + formatNumber(employee.cha, 1) + "<br>" +
-                            "Experience: " + formatNumber(employee.exp, 1) + "<br>" +
-                            "Creativity: " + formatNumber(employee.cre, 1) + "<br>" +
-                            "Efficiency: " + formatNumber(employee.eff, 1) + "<br>" +
-                            "Salary: " + numeralWrapper.format(employee.sal, '$0.000a') + " \ s<br>",
-                clickListener: () => {
-                    office.hireEmployee(player, employee, corporation);
-                    removeElementById("cmpy-mgmt-hire-employee-popup");
-                    return false;
-                },
-            });
-            return div;
-        }
-
-        const cancelBtn = createElement("a", {
-            class:"a-link-button",
-            innerText:"Cancel",
-            float:"right",
-            clickListener:() => {
-                removeElementById("cmpy-mgmt-hire-employee-popup");
-                return false;
-            },
-        });
-
-        const elems = [text,
-                     createEmpDiv(emp1, this),
-                     createEmpDiv(emp2, this),
-                     createEmpDiv(emp3, this),
-                     cancelBtn];
-
-        createPopup("cmpy-mgmt-hire-employee-popup", elems);
-    }
-
-    hireEmployee(player: IPlayer, employee: Employee, corporation: ICorporation): void {
-        const yesBtn = yesNoTxtInpBoxGetYesButton(),
-            noBtn = yesNoTxtInpBoxGetNoButton();
-        yesBtn.innerHTML = "Hire";
-        noBtn.innerHTML = "Cancel";
-        yesBtn.addEventListener("click", () => {
-            const name = yesNoTxtInpBoxGetInput();
-            for (let i = 0; i < this.employees.length; ++i) {
-                if (this.employees[i].name === name) {
-                    dialogBoxCreate("You already have an employee with this nickname! Please give every employee a unique nickname.");
-                    return false;
-                }
-            }
-            employee.name = name;
-            this.employees.push(employee);
-            corporation.rerender(player);
-            return yesNoTxtInpBoxClose();
-        });
-        noBtn.addEventListener("click", () => {
-            return yesNoTxtInpBoxClose();
-        });
-        yesNoTxtInpBoxCreate("Give your employee a nickname!");
-    }
-
     hireRandomEmployee(): Employee | undefined {
         if (this.atCapacity()) return;
         if (document.getElementById("cmpy-mgmt-hire-employee-popup") != null) return;

src/Corporation/ui/HireEmployeePopup.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { createPopup, removePopup } from "../../ui/React/createPopup";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { CorporationConstants } from "../data/Constants";
+import { ICorporation } from "../ICorporation";
+import { OfficeSpace } from "../OfficeSpace";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { getRandomInt } from "../../../utils/helpers/getRandomInt";
+import { formatNumber } from "../../../utils/StringHelperFunctions";
+import { Employee } from "../Employee";
+import { dialogBoxCreate } from "../../../utils/DialogBox";
+
+interface INameEmployeeProps {
+    office: OfficeSpace;
+    corp: ICorporation;
+    popupId: string;
+    employee: Employee;
+    player: IPlayer;
+}
+
+function NameEmployeePopup(props: INameEmployeeProps): React.ReactElement {
+    const [name, setName] = useState('');
+    function nameEmployee(): void {
+        for (let i = 0; i < props.office.employees.length; ++i) {
+            if (props.office.employees[i].name === name) {
+                dialogBoxCreate("You already have an employee with this nickname!");
+                return;
+            }
+        }
+        props.employee.name = name;
+        props.office.employees.push(props.employee);
+        props.corp.rerender(props.player);
+        removePopup(props.popupId);
+    }
+
+    function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
+        if (event.keyCode === 13) nameEmployee();
+    }
+
+    function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
+        setName(event.target.value);
+    }
+
+    return (<>
+        <p>Give your employee a nickname!</p>
+        <input value={name} className="text-input" type="text" placeholder="Employee nickname" onKeyDown={onKeyDown} onChange={onChange} />
+        <button className="std-button" onClick={nameEmployee}>Hire!</button>
+    </>);
+}
+
+interface IHireEmployeeProps {
+    employee: Employee;
+    office: OfficeSpace;
+    popupId: string;
+    player: IPlayer;
+    corp: ICorporation;
+}
+
+function HireEmployeeButton(props: IHireEmployeeProps): React.ReactElement {
+    function hire(): void {
+        const popupId = "cmpy-mgmt-name-employee-popup";
+        createPopup(popupId, NameEmployeePopup, {
+            office: props.office,
+            corp: props.corp,
+            popupId: popupId,
+            player: props.player,
+            employee: props.employee,
+        });
+        removePopup(props.popupId);
+    }
+
+    return (<div onClick={hire} className="cmpy-mgmt-find-employee-option">
+        Intelligence: {formatNumber(props.employee.int, 1)}<br />
+        Charisma: {formatNumber(props.employee.cha, 1)}<br />
+        Experience: {formatNumber(props.employee.exp, 1)}<br />
+        Creativity: {formatNumber(props.employee.cre, 1)}<br />
+        Efficiency: {formatNumber(props.employee.eff, 1)}<br />
+        Salary: {numeralWrapper.formatMoney(props.employee.sal)} \ s<br />
+    </div>);
+}
+
+interface IProps {
+    office: OfficeSpace;
+    corp: ICorporation;
+    popupId: string;
+    player: IPlayer;
+}
+
+// Create a popup that lets the player manage exports
+export function HireEmployeePopup(props: IProps): React.ReactElement {
+    if (props.office.atCapacity()) return (<></>);
+
+    //Generate three random employees (meh, decent, amazing)
+    const mult1 = getRandomInt(25, 50)/100;
+    const mult2 = getRandomInt(51, 75)/100;
+    const mult3 = getRandomInt(76, 100)/100;
+    const int = getRandomInt(50, 100);
+    const cha = getRandomInt(50, 100);
+    const exp = getRandomInt(50, 100);
+    const cre = getRandomInt(50, 100);
+    const eff = getRandomInt(50, 100);
+    const sal = CorporationConstants.EmployeeSalaryMultiplier * (int + cha + exp + cre + eff);
+
+    const emp1 = new Employee({
+        intelligence: int * mult1,
+        charisma: cha * mult1,
+        experience: exp * mult1,
+        creativity: cre * mult1,
+        efficiency: eff * mult1,
+        salary: sal * mult1,
+    });
+
+    const emp2 = new Employee({
+        intelligence: int * mult2,
+        charisma: cha * mult2,
+        experience: exp * mult2,
+        creativity: cre * mult2,
+        efficiency: eff * mult2,
+        salary: sal * mult2,
+    });
+
+    const emp3 = new Employee({
+        intelligence: int * mult3,
+        charisma: cha * mult3,
+        experience: exp * mult3,
+        creativity: cre * mult3,
+        efficiency: eff * mult3,
+        salary: sal * mult3,
+    });
+
+    return (<>
+        <h1>Select one of the following candidates for hire:</h1>
+        <HireEmployeeButton employee={emp1} office={props.office} corp={props.corp} popupId={props.popupId} player={props.player} />
+        <HireEmployeeButton employee={emp2} office={props.office} corp={props.corp} popupId={props.popupId} player={props.player} />
+        <HireEmployeeButton employee={emp3} office={props.office} corp={props.corp} popupId={props.popupId} player={props.player} />
+    </>);
+}

src/Corporation/ui/IndustryOffice.tsx

@@ -11,6 +11,7 @@ import { numeralWrapper }           from "../../ui/numeralFormat";
 import { getSelectText }            from "../../../utils/uiHelpers/getSelectData";
 import { createPopup }              from "../../ui/React/createPopup";
 import { UpgradeOfficeSizePopup }   from "./UpgradeOfficeSizePopup";
+import { HireEmployeePopup }        from "./HireEmployeePopup";
 import { ThrowPartyPopup }          from "./ThrowPartyPopup";
 import { ICorporation }             from "../ICorporation";
 import { IPlayer }                  from "../../PersonObjects/IPlayer";
@@ -550,7 +551,6 @@ export function IndustryOffice(props: IProps): React.ReactElement {
         )
     }
 
-    const corp = props.corp;
     const division = props.routing.currentDivision; // Validated in constructor
     if(division === null) return (<></>);
     const office = division.offices[props.currentCity]; // Validated in constructor
@@ -570,9 +570,15 @@ export function IndustryOffice(props: IProps): React.ReactElement {
         }
     }
 
-    function hireEmployeeButtonOnClick(): void {
+    function openHireEmployeePopup(): void {
         if(office === 0) return;
-        office.findEmployees(props.player, corp);
+        const popupId = "cmpy-mgmt-hire-employee-popup";
+        createPopup(popupId, HireEmployeePopup, {
+            office: office,
+            corp: props.corp,
+            popupId: popupId,
+            player: props.player,
+        });
     }
 
     // Autohire employee button
@@ -614,7 +620,7 @@ export function IndustryOffice(props: IProps): React.ReactElement {
         <div className={"cmpy-mgmt-employee-panel"}>
             <h1 style={{ margin: "4px 0px 5px 0px" }}>Office Space</h1>
             <p>Size: {office.employees.length} / {office.size} employees</p>
-            <button className={hireEmployeeButtonClass} onClick={hireEmployeeButtonOnClick} style={buttonStyle}>
+            <button className={hireEmployeeButtonClass} onClick={openHireEmployeePopup} style={buttonStyle}>
                 Hire Employee
                 {
                     office.employees.length === 0 &&