From 8bb4e8b7cf7d4a37ce439c28c6ebe83d7e48e728 Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Sat, 28 Aug 2021 13:07:35 -0400 Subject: [PATCH] more conversion --- .../ui/CorporationUIEventHandler.js | 165 ------------------ src/Corporation/ui/IndustryOffice.tsx | 31 +++- src/Corporation/ui/IndustryWarehouse.tsx | 18 +- src/Corporation/ui/ThrowPartyPopup.tsx | 57 ++++++ src/Corporation/ui/UpgradeOfficeSizePopup.tsx | 77 ++++++++ 5 files changed, 174 insertions(+), 174 deletions(-) create mode 100644 src/Corporation/ui/ThrowPartyPopup.tsx create mode 100644 src/Corporation/ui/UpgradeOfficeSizePopup.tsx diff --git a/src/Corporation/ui/CorporationUIEventHandler.js b/src/Corporation/ui/CorporationUIEventHandler.js index a3b6e11d8..2a7db33aa 100644 --- a/src/Corporation/ui/CorporationUIEventHandler.js +++ b/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(); } diff --git a/src/Corporation/ui/IndustryOffice.tsx b/src/Corporation/ui/IndustryOffice.tsx index 93758e70f..c2b2438b8 100644 --- a/src/Corporation/ui/IndustryOffice.tsx +++ b/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 = () => { - if (office.atCapacity()) { return; } + function autohireEmployeeButtonOnClick(): void { + if (office.atCapacity()) return; office.hireRandomEmployee(); props.corp.rerender(); } - // Upgrade Office Size Button - const upgradeOfficeSizeOnClick = props.eventHandler.createUpgradeOfficeSizePopup.bind(props.eventHandler, office); + function openUpgradeOfficeSizePopup(): void { + const popupId = "cmpy-mgmt-upgrade-office-size-popup"; + createPopup(popupId, UpgradeOfficeSizePopup, { + office: office, + corp: props.corp, + popupId: popupId, + }); + } - // Throw Office Party - const throwOfficePartyOnClick = props.eventHandler.createThrowOfficePartyPopup.bind(props.eventHandler, office); + function openThrowPartyPopup(): void { + const popupId = "cmpy-mgmt-throw-office-party-popup"; + createPopup(popupId, ThrowPartyPopup, { + office: office, + corp: props.corp, + popupId: popupId, + }); + } return (
@@ -598,7 +613,7 @@ export function IndustryOffice(props: IProps): React.ReactElement {
- { !division.hasResearch("AutoPartyManager") && -
diff --git a/src/Corporation/ui/ThrowPartyPopup.tsx b/src/Corporation/ui/ThrowPartyPopup.tsx new file mode 100644 index 000000000..ff267fa38 --- /dev/null +++ b/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(null); + + function changeCost(event: React.ChangeEvent): 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

Invalid value entered!

+ if(cost === null) cost = 0; + return

Throwing this party will cost a total of {numeralWrapper.formatMoney(cost * props.office.employees.length)}

+ } + + function onKeyDown(event: React.KeyboardEvent) { + if (event.keyCode === 13) throwParty(); + } + + return (<> +

Enter the amount of money you would like to spend PER EMPLOYEE on this office party

+ + + + ); +} \ No newline at end of file diff --git a/src/Corporation/ui/UpgradeOfficeSizePopup.tsx b/src/Corporation/ui/UpgradeOfficeSizePopup.tsx new file mode 100644 index 000000000..b40cf75dd --- /dev/null +++ b/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 (); + } + + return (<> +

Increase the size of your office space to fit additional employees!

+

Upgrade size:

+ + + + ); +} \ No newline at end of file