From d9c9c30fdda98f3ec6924271c0b4a64b09f70786 Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Tue, 31 Aug 2021 16:19:58 -0400 Subject: [PATCH] more conversion --- src/Corporation/OfficeSpace.ts | 121 +------------------- src/Corporation/ui/HireEmployeePopup.tsx | 137 +++++++++++++++++++++++ src/Corporation/ui/IndustryOffice.tsx | 14 ++- 3 files changed, 148 insertions(+), 124 deletions(-) create mode 100644 src/Corporation/ui/HireEmployeePopup.tsx diff --git a/src/Corporation/OfficeSpace.ts b/src/Corporation/OfficeSpace.ts index 4a419ffea..057813df2 100644 --- a/src/Corporation/OfficeSpace.ts +++ b/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) + "
" + - "Charisma: " + formatNumber(employee.cha, 1) + "
" + - "Experience: " + formatNumber(employee.exp, 1) + "
" + - "Creativity: " + formatNumber(employee.cre, 1) + "
" + - "Efficiency: " + formatNumber(employee.eff, 1) + "
" + - "Salary: " + numeralWrapper.format(employee.sal, '$0.000a') + " \ s
", - 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; diff --git a/src/Corporation/ui/HireEmployeePopup.tsx b/src/Corporation/ui/HireEmployeePopup.tsx new file mode 100644 index 000000000..e4571d220 --- /dev/null +++ b/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): void { + if (event.keyCode === 13) nameEmployee(); + } + + function onChange(event: React.ChangeEvent): void { + setName(event.target.value); + } + + return (<> +

Give your employee a nickname!

+ + + ); +} + +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 (
+ Intelligence: {formatNumber(props.employee.int, 1)}
+ Charisma: {formatNumber(props.employee.cha, 1)}
+ Experience: {formatNumber(props.employee.exp, 1)}
+ Creativity: {formatNumber(props.employee.cre, 1)}
+ Efficiency: {formatNumber(props.employee.eff, 1)}
+ Salary: {numeralWrapper.formatMoney(props.employee.sal)} \ s
+
); +} + +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 (<> +

Select one of the following candidates for hire:

+ + + + ); +} diff --git a/src/Corporation/ui/IndustryOffice.tsx b/src/Corporation/ui/IndustryOffice.tsx index faa35b039..fa09e3a12 100644 --- a/src/Corporation/ui/IndustryOffice.tsx +++ b/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 {

Office Space

Size: {office.employees.length} / {office.size} employees

-