From 854239ceb1834a09db3bd58de7cc7a17bf9c67af Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Wed, 29 Sep 2021 17:41:19 -0400 Subject: [PATCH] convert some corp to mui --- src/Corporation/Employee.ts | 68 ---- src/Corporation/ui/Industry.tsx | 8 +- src/Corporation/ui/IndustryOffice.tsx | 535 +++++++++++++------------- 3 files changed, 269 insertions(+), 342 deletions(-) diff --git a/src/Corporation/Employee.ts b/src/Corporation/Employee.ts index e38522009..fe5807460 100644 --- a/src/Corporation/Employee.ts +++ b/src/Corporation/Employee.ts @@ -139,74 +139,6 @@ export class Employee { return mult; } - //'panel' is the DOM element on which to create the UI - createUI(panel: HTMLElement, corporation: ICorporation, industry: IIndustry): void { - const effCre = this.cre * corporation.getEmployeeCreMultiplier() * industry.getEmployeeCreMultiplier(), - effCha = this.cha * corporation.getEmployeeChaMultiplier() * industry.getEmployeeChaMultiplier(), - effInt = this.int * corporation.getEmployeeIntMultiplier() * industry.getEmployeeIntMultiplier(), - effEff = this.eff * corporation.getEmployeeEffMultiplier() * industry.getEmployeeEffMultiplier(); - panel.style.color = "white"; - panel.appendChild( - createElement("p", { - id: "cmpy-mgmt-employee-" + this.name + "-panel-text", - innerHTML: - "Morale: " + - formatNumber(this.mor, 3) + - "
" + - "Happiness: " + - formatNumber(this.hap, 3) + - "
" + - "Energy: " + - formatNumber(this.ene, 3) + - "
" + - "Intelligence: " + - formatNumber(effInt, 3) + - "
" + - "Charisma: " + - formatNumber(effCha, 3) + - "
" + - "Experience: " + - formatNumber(this.exp, 3) + - "
" + - "Creativity: " + - formatNumber(effCre, 3) + - "
" + - "Efficiency: " + - formatNumber(effEff, 3) + - "
" + - "Salary: " + - numeralWrapper.format(this.sal, "$0.000a") + - "/ s
", - }), - ); - - //Selector for employee position - const selector = createElement("select", {}) as HTMLSelectElement; - for (const key in EmployeePositions) { - if (EmployeePositions.hasOwnProperty(key)) { - selector.add( - createElement("option", { - text: EmployeePositions[key], - value: EmployeePositions[key], - }) as HTMLOptionElement, - ); - } - } - - selector.addEventListener("change", () => { - this.pos = selector.options[selector.selectedIndex].value; - }); - - //Set initial value of selector - for (let i = 0; i < selector.length; ++i) { - if (selector.options[i].value === this.pos) { - selector.selectedIndex = i; - break; - } - } - panel.appendChild(selector); - } - copy(): Employee { const employee = new Employee(); employee.name = this.name; diff --git a/src/Corporation/ui/Industry.tsx b/src/Corporation/ui/Industry.tsx index 5d29a1532..3917630ce 100644 --- a/src/Corporation/ui/Industry.tsx +++ b/src/Corporation/ui/Industry.tsx @@ -32,13 +32,7 @@ export function Industry(props: IProps): React.ReactElement { currentCity={props.city} office={props.office} /> - +
void; } @@ -42,27 +51,35 @@ interface ISwitchProps { function SwitchButton(props: ISwitchProps): React.ReactElement { if (props.manualMode) { return ( - + + Switch to Automatic Assignment Mode, which will automatically assign employees to your selected jobs. You + simply have to select the number of assignments for each job + + } + > + + ); } else { return ( - + + Switch to Manual Assignment Mode, which allows you to specify which employees should get which jobs + + } + > + + ); } } function ManualManagement(props: IProps): React.ReactElement { + const corp = useCorporation(); + const division = useDivision(); const [employee, setEmployee] = useState( props.office.employees.length > 0 ? props.office.employees[0] : null, ); @@ -76,11 +93,15 @@ function ManualManagement(props: IProps): React.ReactElement { // Employee Selector const employees = []; for (let i = 0; i < props.office.employees.length; ++i) { - employees.push(); + employees.push( + + {props.office.employees[i].name} + , + ); } - function employeeSelectorOnChange(e: React.ChangeEvent): void { - const name = getSelectText(e.target); + function employeeSelectorOnChange(e: SelectChangeEvent): void { + const name = e.target.value; for (let i = 0; i < props.office.employees.length; ++i) { if (name === props.office.employees[i].name) { setEmployee(props.office.employees[i]); @@ -98,19 +119,18 @@ function ManualManagement(props: IProps): React.ReactElement { const positionNames = Object.values(EmployeePositions); for (let i = 0; i < positionNames.length; ++i) { employeePositions.push( - , + , ); if (emp != null && emp.pos === positionNames[i]) { employeePositionSelectorInitialValue = positionNames[i]; } } - function employeePositionSelectorOnChange(e: React.ChangeEvent): void { + function employeePositionSelectorOnChange(e: SelectChangeEvent): void { if (employee === null) return; - const pos = getSelectText(e.target); - employee.pos = pos; + employee.pos = e.target.value; props.rerender(); } @@ -118,16 +138,16 @@ function ManualManagement(props: IProps): React.ReactElement { const nf = "0.000"; // Employee stats (after applying multipliers) - const effCre = emp ? emp.cre * props.corp.getEmployeeCreMultiplier() * props.division.getEmployeeCreMultiplier() : 0; - const effCha = emp ? emp.cha * props.corp.getEmployeeChaMultiplier() * props.division.getEmployeeChaMultiplier() : 0; - const effInt = emp ? emp.int * props.corp.getEmployeeIntMultiplier() * props.division.getEmployeeIntMultiplier() : 0; - const effEff = emp ? emp.eff * props.corp.getEmployeeEffMultiplier() * props.division.getEmployeeEffMultiplier() : 0; + const effCre = emp ? emp.cre * corp.getEmployeeCreMultiplier() * division.getEmployeeCreMultiplier() : 0; + const effCha = emp ? emp.cha * corp.getEmployeeChaMultiplier() * division.getEmployeeChaMultiplier() : 0; + const effInt = emp ? emp.int * corp.getEmployeeIntMultiplier() * division.getEmployeeIntMultiplier() : 0; + const effEff = emp ? emp.eff * corp.getEmployeeEffMultiplier() * division.getEmployeeEffMultiplier() : 0; return (
- {employees} - + {employee != null && (

Morale: {numeralWrapper.format(employee.mor, nf)} @@ -150,13 +170,9 @@ function ManualManagement(props: IProps): React.ReactElement {

)} {employee != null && ( - {employeePositions} - + )}
); @@ -164,15 +180,14 @@ function ManualManagement(props: IProps): React.ReactElement { interface IAutoAssignProps { office: OfficeSpace; - corp: ICorporation; - division: IIndustry; - player: IPlayer; job: string; desc: string; rerender: () => void; } function AutoAssignJob(props: IAutoAssignProps): React.ReactElement { + const corp = useCorporation(); + const division = useDivision(); const numJob = countEmployee(props.office.employees, props.job); const numUnassigned = countEmployee(props.office.employees, EmployeePositions.Unassigned); function assignEmployee(): void { @@ -182,42 +197,43 @@ function AutoAssignJob(props: IAutoAssignProps): React.ReactElement { } props.office.assignEmployeeToJob(props.job); - props.office.calculateEmployeeProductivity(props.corp, props.division); + props.office.calculateEmployeeProductivity(corp, division); props.rerender(); } function unassignEmployee(): void { props.office.unassignEmployeeFromJob(props.job); - props.office.calculateEmployeeProductivity(props.corp, props.division); + props.office.calculateEmployeeProductivity(corp, division); props.rerender(); } - const positionHeaderStyle = { - fontSize: "15px", - margin: "5px 0px 5px 0px", - width: "50%", - }; return ( - <> -

- {props.job} ({numJob}){props.desc} -

- - -
- + + + + + {props.job} ({numJob}) + + + + + + + + + + + + ); } function AutoManagement(props: IProps): React.ReactElement { + const corp = useCorporation(); + const division = useDivision(); const numUnassigned = countEmployee(props.office.employees, EmployeePositions.Unassigned); - const vechain = props.corp.unlockUpgrades[4] === 1; // Has Vechain upgrade + const vechain = corp.unlockUpgrades[4] === 1; // Has Vechain upgrade - // Calculate average morale, happiness, and energy. Also salary - // TODO is this efficient? + // Calculate average morale, happiness, energy, and salary. let totalMorale = 0, totalHappiness = 0, totalEnergy = 0, @@ -240,50 +256,54 @@ function AutoManagement(props: IProps): React.ReactElement { return ( <> -

- Unassigned Employees: {numUnassigned} -

-
- - - - - - - - - - - - - - - - -
-

Avg Employee Morale:

- 		-

{numeralWrapper.format(avgMorale, "0.000")}

-
-

Avg Employee Happiness:

- 		-

{numeralWrapper.format(avgHappiness, "0.000")}

-
-

Avg Employee Energy:

- 		-

{numeralWrapper.format(avgEnergy, "0.000")}

-
-

Total Employee Salary:

- 		-

+ + + + + Unassigned Employees: + + + {numUnassigned} + + + + + Avg Employee Morale: + + + {numeralWrapper.format(avgMorale, "0.000")} + + + + + Avg Employee Happiness: + + + {numeralWrapper.format(avgHappiness, "0.000")} + + + + + Avg Employee Energy: + + + {numeralWrapper.format(avgEnergy, "0.000")} + + + + + Total Employee Salary: + + + -

- - + + + {vechain && ( <> - - - - - - - - - - - - + + + + + + The effect this office's 'Business' employees has on boosting sales} + > + Business Multiplier: + + + + x{numeralWrapper.format(division.getBusinessFactor(props.office), "0.000")} + + )} - -
+ +

Material Production: @@ -292,120 +312,112 @@ function AutoManagement(props: IProps): React.ReactElement { and Management employees

- 		-

{numeralWrapper.format(props.division.getOfficeProductivity(props.office), "0.000")}

-
-

- Product Production: - - The base amount of any given Product this office can produce. Does not include production - multipliers from upgrades and materials. This value is based off the productivity of your - Operations, Engineering, and Management employees - -

- 		-

+ + +

{numeralWrapper.format(division.getOfficeProductivity(props.office), "0.000")}

+ + + + + + The base amount of any given Product this office can produce. Does not include production + multipliers from upgrades and materials. This value is based off the productivity of your + Operations, Engineering, and Management employees + + } + > + Product Production: + + + + {numeralWrapper.format( - props.division.getOfficeProductivity(props.office, { + division.getOfficeProductivity(props.office, { forProduct: true, }), "0.000", )} -

-
-

- Business Multiplier: - - The effect this office's 'Business' employees has on boosting sales - -

- 		-

x{numeralWrapper.format(props.division.getBusinessFactor(props.office), "0.000")}

-
- + +

- + + + - + - + - + - + + + + +
); } export function IndustryOffice(props: IProps): React.ReactElement { + const player = use.Player(); + const corp = useCorporation(); + const division = useDivision(); const [employeeManualAssignMode, setEmployeeManualAssignMode] = useState(false); const buttonStyle = { @@ -428,19 +440,12 @@ export function IndustryOffice(props: IProps): React.ReactElement { createPopup(popupId, HireEmployeePopup, { rerender: props.rerender, office: props.office, - corp: props.corp, + corp: corp, popupId: popupId, - player: props.player, + player: player, }); } - // Autohire employee button - let autohireEmployeeButtonClass = "tooltip"; - if (props.office.atCapacity()) { - autohireEmployeeButtonClass += " a-link-button-inactive"; - } else { - autohireEmployeeButtonClass += " std-button"; - } function autohireEmployeeButtonOnClick(): void { if (props.office.atCapacity()) return; props.office.hireRandomEmployee(); @@ -452,9 +457,9 @@ export function IndustryOffice(props: IProps): React.ReactElement { createPopup(popupId, UpgradeOfficeSizePopup, { rerender: props.rerender, office: props.office, - corp: props.corp, + corp: corp, popupId: popupId, - player: props.player, + player: player, }); } @@ -462,74 +467,70 @@ export function IndustryOffice(props: IProps): React.ReactElement { const popupId = "cmpy-mgmt-throw-office-party-popup"; createPopup(popupId, ThrowPartyPopup, { office: props.office, - corp: props.corp, + corp: corp, popupId: popupId, }); } return (
-

Office Space

-

+ Office Space + Size: {props.office.employees.length} / {props.office.size} employees -

- - -
- - {!props.division.hasResearch("AutoPartyManager") && ( - + + + Automatically hires an employee and gives him/her a random name}> + + + + +
+ Upgrade the office's size so that it can hold more employees!}> + + + + + + {!division.hasResearch("AutoPartyManager") && ( + Throw an office party to increase your employee's morale and happiness} > - Throw Party - - "Throw an office party to increase your employee's morale and happiness" + + - + )} +
-
- -
+ {employeeManualAssignMode ? ( - + ) : ( - + )}
);