From 5cce1c255ca9542647abb4470dc19fcc267b1575 Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Wed, 29 Sep 2021 19:05:25 -0400 Subject: [PATCH] convert some corp to mui --- src/Corporation/OfficeSpace.ts | 13 +- src/Corporation/ui/HireEmployeePopup.tsx | 182 --------------- src/Corporation/ui/Industry.tsx | 9 +- src/Corporation/ui/IndustryOffice.tsx | 151 ++++-------- src/Corporation/ui/IndustryOverview.tsx | 142 ++++++------ src/Corporation/ui/LevelableUpgrade.tsx | 26 ++- src/Corporation/ui/Overview.tsx | 216 +++++++++--------- src/Corporation/ui/ThrowPartyModal.tsx | 84 +++++++ src/Corporation/ui/ThrowPartyPopup.tsx | 72 ------ src/Corporation/ui/UnlockUpgrade.tsx | 24 +- src/Corporation/ui/UpgradeOfficeSizeModal.tsx | 92 ++++++++ src/Corporation/ui/UpgradeOfficeSizePopup.tsx | 91 -------- 12 files changed, 444 insertions(+), 658 deletions(-) delete mode 100644 src/Corporation/ui/HireEmployeePopup.tsx create mode 100644 src/Corporation/ui/ThrowPartyModal.tsx delete mode 100644 src/Corporation/ui/ThrowPartyPopup.tsx create mode 100644 src/Corporation/ui/UpgradeOfficeSizeModal.tsx delete mode 100644 src/Corporation/ui/UpgradeOfficeSizePopup.tsx diff --git a/src/Corporation/OfficeSpace.ts b/src/Corporation/OfficeSpace.ts index b66775ba9..995e0810b 100644 --- a/src/Corporation/OfficeSpace.ts +++ b/src/Corporation/OfficeSpace.ts @@ -122,7 +122,6 @@ export class OfficeSpace { if (document.getElementById("cmpy-mgmt-hire-employee-popup") != null) return; //Generate three random employees (meh, decent, amazing) - const mult = getRandomInt(76, 100) / 100; const int = getRandomInt(50, 100), cha = getRandomInt(50, 100), exp = getRandomInt(50, 100), @@ -131,12 +130,12 @@ export class OfficeSpace { sal = CorporationConstants.EmployeeSalaryMultiplier * (int + cha + exp + cre + eff); const emp = new Employee({ - intelligence: int * mult, - charisma: cha * mult, - experience: exp * mult, - creativity: cre * mult, - efficiency: eff * mult, - salary: sal * mult, + intelligence: int, + charisma: cha, + experience: exp, + creativity: cre, + efficiency: eff, + salary: sal, }); const name = generateRandomString(7); diff --git a/src/Corporation/ui/HireEmployeePopup.tsx b/src/Corporation/ui/HireEmployeePopup.tsx deleted file mode 100644 index b4c766d9c..000000000 --- a/src/Corporation/ui/HireEmployeePopup.tsx +++ /dev/null @@ -1,182 +0,0 @@ -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 "../../ui/React/DialogBox"; - -interface INameEmployeeProps { - office: OfficeSpace; - corp: ICorporation; - popupId: string; - employee: Employee; - player: IPlayer; - rerender: () => void; -} - -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.rerender(); - 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; - rerender: () => void; -} - -function HireEmployeeButton(props: IHireEmployeeProps): React.ReactElement { - function hire(): void { - const popupId = "cmpy-mgmt-name-employee-popup"; - createPopup(popupId, NameEmployeePopup, { - rerender: props.rerender, - 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; - rerender: () => void; -} - -// 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/Industry.tsx b/src/Corporation/ui/Industry.tsx index 3917630ce..42e3a244c 100644 --- a/src/Corporation/ui/Industry.tsx +++ b/src/Corporation/ui/Industry.tsx @@ -24,14 +24,7 @@ export function Industry(props: IProps): React.ReactElement { return (
- +
diff --git a/src/Corporation/ui/IndustryOffice.tsx b/src/Corporation/ui/IndustryOffice.tsx index 4184f2acb..2ab9624f3 100644 --- a/src/Corporation/ui/IndustryOffice.tsx +++ b/src/Corporation/ui/IndustryOffice.tsx @@ -8,18 +8,15 @@ import { EmployeePositions } from "../EmployeePositions"; import { numeralWrapper } from "../../ui/numeralFormat"; -import { createPopup } from "../../ui/React/createPopup"; -import { UpgradeOfficeSizePopup } from "./UpgradeOfficeSizePopup"; -import { HireEmployeePopup } from "./HireEmployeePopup"; -import { ThrowPartyPopup } from "./ThrowPartyPopup"; +import { UpgradeOfficeSizeModal } from "./UpgradeOfficeSizeModal"; +import { ThrowPartyModal } from "./ThrowPartyModal"; import { Money } from "../../ui/React/Money"; -import { use } from "../../ui/Context"; import { useCorporation, useDivision } from "./Context"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import IconButton from "@mui/material/IconButton"; -import Box from "@mui/material/Box"; +import Paper from "@mui/material/Paper"; import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; import Tooltip from "@mui/material/Tooltip"; @@ -84,12 +81,6 @@ function ManualManagement(props: IProps): React.ReactElement { props.office.employees.length > 0 ? props.office.employees[0] : null, ); - const employeeInfoDivStyle = { - color: "white", - margin: "4px", - padding: "4px", - }; - // Employee Selector const employees = []; for (let i = 0; i < props.office.employees.length; ++i) { @@ -144,12 +135,12 @@ function ManualManagement(props: IProps): React.ReactElement { const effEff = emp ? emp.eff * corp.getEmployeeEffMultiplier() * division.getEmployeeEffMultiplier() : 0; return ( -
+ <> {employee != null && ( -

+ Morale: {numeralWrapper.format(employee.mor, nf)}
Happiness: {numeralWrapper.format(employee.hap, nf)} @@ -167,14 +158,14 @@ function ManualManagement(props: IProps): React.ReactElement { Efficiency: {numeralWrapper.format(effEff, nf)}
Salary: -

+ )} {employee != null && ( )} -
+ ); } @@ -304,17 +295,22 @@ function AutoManagement(props: IProps): React.ReactElement { <> -

- Material Production: - - The base amount of material 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 - -

+ + The base amount of material 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 + + } + > + Material Production: + -

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

+ + {numeralWrapper.format(division.getOfficeProductivity(props.office), "0.000")} + @@ -415,87 +411,24 @@ function AutoManagement(props: IProps): React.ReactElement { } export function IndustryOffice(props: IProps): React.ReactElement { - const player = use.Player(); const corp = useCorporation(); const division = useDivision(); + const [upgradeOfficeSizeOpen, setUpgradeOfficeSizeOpen] = useState(false); + const [throwPartyOpen, setThrowPartyOpen] = useState(false); const [employeeManualAssignMode, setEmployeeManualAssignMode] = useState(false); - const buttonStyle = { - fontSize: "13px", - }; - - // Hire Employee button - let hireEmployeeButtonClass = "tooltip"; - if (props.office.atCapacity()) { - hireEmployeeButtonClass += " a-link-button-inactive"; - } else { - hireEmployeeButtonClass += " std-button"; - if (props.office.employees.length === 0) { - hireEmployeeButtonClass += " flashing-button"; - } - } - - function openHireEmployeePopup(): void { - const popupId = "cmpy-mgmt-hire-employee-popup"; - createPopup(popupId, HireEmployeePopup, { - rerender: props.rerender, - office: props.office, - corp: corp, - popupId: popupId, - player: player, - }); - } - function autohireEmployeeButtonOnClick(): void { if (props.office.atCapacity()) return; props.office.hireRandomEmployee(); props.rerender(); } - function openUpgradeOfficeSizePopup(): void { - const popupId = "cmpy-mgmt-upgrade-office-size-popup"; - createPopup(popupId, UpgradeOfficeSizePopup, { - rerender: props.rerender, - office: props.office, - corp: corp, - popupId: popupId, - player: player, - }); - } - - function openThrowPartyPopup(): void { - const popupId = "cmpy-mgmt-throw-office-party-popup"; - createPopup(popupId, ThrowPartyPopup, { - office: props.office, - corp: corp, - popupId: popupId, - }); - } - return ( -
+ Office Space Size: {props.office.employees.length} / {props.office.size} employees - - You'll need to hire some employees to get your operations started! It's recommended to have at least one - employee in every position - - ) : ( - "" - ) - } - > - - - - Automatically hires an employee and gives him/her a random name}> + setUpgradeOfficeSizeOpen(false)} + /> {!division.hasResearch("AutoPartyManager") && ( - Throw an office party to increase your employee's morale and happiness} - > - - - - + <> + Throw an office party to increase your employee's morale and happiness} + > + + + + + setThrowPartyOpen(false)} + /> + )}
@@ -532,6 +479,6 @@ export function IndustryOffice(props: IProps): React.ReactElement { ) : ( )} -
+ ); } diff --git a/src/Corporation/ui/IndustryOverview.tsx b/src/Corporation/ui/IndustryOverview.tsx index 2b08c1d54..bd2526631 100644 --- a/src/Corporation/ui/IndustryOverview.tsx +++ b/src/Corporation/ui/IndustryOverview.tsx @@ -5,7 +5,6 @@ import React from "react"; import { OfficeSpace } from "../OfficeSpace"; import { Industries } from "../IndustryData"; import { IndustryUpgrades } from "../IndustryUpgrades"; -import { IIndustry } from "../IIndustry"; import { numeralWrapper } from "../../ui/numeralFormat"; import { dialogBoxCreate } from "../../ui/React/DialogBox"; import { createProgressBarText } from "../../utils/helpers/createProgressBarText"; @@ -13,24 +12,26 @@ import { MakeProductPopup } from "./MakeProductPopup"; import { ResearchPopup } from "./ResearchPopup"; import { createPopup } from "../../ui/React/createPopup"; import { Money } from "../../ui/React/Money"; -import { ICorporation } from "../ICorporation"; -import { IPlayer } from "../../PersonObjects/IPlayer"; import { MoneyCost } from "./MoneyCost"; +import { useCorporation, useDivision } from "./Context"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; +import Tooltip from "@mui/material/Tooltip"; +import Paper from "@mui/material/Paper"; interface IProps { - corp: ICorporation; currentCity: string; - division: IIndustry; office: OfficeSpace; - player: IPlayer; rerender: () => void; } export function IndustryOverview(props: IProps): React.ReactElement { + const corp = useCorporation(); + const division = useDivision(); function renderMakeProductButton(): React.ReactElement { let createProductButtonText = ""; let createProductPopupText = ""; - switch (props.division.type) { + switch (division.type) { case Industries.Food: createProductButtonText = "Build Restaurant"; createProductPopupText = "Build and manage a new restaurant!"; @@ -78,51 +79,47 @@ export function IndustryOverview(props: IProps): React.ReactElement { "the product. Investing money in its design will result in a superior product. " + "Investing money in marketing the product will help the product's sales."; - const hasMaxProducts = props.division.hasMaximumNumberProducts(); - - const className = hasMaxProducts ? "a-link-button-inactive tooltip" : "std-button"; - const buttonStyle = { - margin: "6px", - display: "inline-block", - }; + const hasMaxProducts = division.hasMaximumNumberProducts(); function openMakeProductPopup(): void { const popupId = "cmpy-mgmt-create-product-popup"; createPopup(popupId, MakeProductPopup, { popupText: createProductPopupText, - division: props.division, - corp: props.corp, + division: division, + corp: corp, popupId: popupId, }); } function shouldFlash(): boolean { - return Object.keys(props.division.products).length === 0; + return Object.keys(division.products).length === 0; } return ( - + + ); } function renderText(): React.ReactElement { - const vechain = props.corp.unlockUpgrades[4] === 1; - const profit = props.division.lastCycleRevenue.minus(props.division.lastCycleExpenses).toNumber(); + const vechain = corp.unlockUpgrades[4] === 1; + const profit = division.lastCycleRevenue.minus(division.lastCycleExpenses).toNumber(); let advertisingInfo = false; - const advertisingFactors = props.division.getAdvertisingFactors(); + const advertisingFactors = division.getAdvertisingFactors(); const awarenessFac = advertisingFactors[1]; const popularityFac = advertisingFactors[2]; const ratioFac = advertisingFactors[3]; @@ -155,42 +152,44 @@ export function IndustryOverview(props: IProps): React.ReactElement { "production multiplier of your entire Division.

" + "Below are approximations for how effective each material is at boosting " + "this industry's production multiplier (Bigger bars = more effective):

" + - `Hardware:    ${convertEffectFacToGraphic(props.division.hwFac)}
` + - `Robots:      ${convertEffectFacToGraphic(props.division.robFac)}
` + - `AI Cores:    ${convertEffectFacToGraphic(props.division.aiFac)}
` + - `Real Estate: ${convertEffectFacToGraphic(props.division.reFac)}`, + `Hardware:    ${convertEffectFacToGraphic(division.hwFac)}
` + + `Robots:      ${convertEffectFacToGraphic(division.robFac)}
` + + `AI Cores:    ${convertEffectFacToGraphic(division.aiFac)}
` + + `Real Estate: ${convertEffectFacToGraphic(division.reFac)}`, ); } function openResearchPopup(): void { const popupId = "corporation-research-popup-box"; createPopup(popupId, ResearchPopup, { - industry: props.division, + industry: division, popupId: popupId, }); } return (
- Industry: {props.division.type} (Corp Funds: ) -

- Awareness: {numeralWrapper.format(props.division.awareness, "0.000")}
- Popularity: {numeralWrapper.format(props.division.popularity, "0.000")}
- {advertisingInfo !== false && ( -

- Advertising Multiplier: x{numeralWrapper.format(totalAdvertisingFac, "0.000")} - - Total multiplier for this industrys sales due to its awareness and popularity -
- Awareness Bonus: x{numeralWrapper.format(Math.pow(awarenessFac, 0.85), "0.000")} -
- Popularity Bonus: x{numeralWrapper.format(Math.pow(popularityFac, 0.85), "0.000")} -
- Ratio Multiplier: x{numeralWrapper.format(Math.pow(ratioFac, 0.85), "0.000")} - -

- )} - {advertisingInfo} + + Industry: {division.type} (Corp Funds: ) +

+ Awareness: {numeralWrapper.format(division.awareness, "0.000")}
+ Popularity: {numeralWrapper.format(division.popularity, "0.000")}
+ {advertisingInfo !== false && ( +

+ Advertising Multiplier: x{numeralWrapper.format(totalAdvertisingFac, "0.000")} + + Total multiplier for this industrys sales due to its awareness and popularity +
+ Awareness Bonus: x{numeralWrapper.format(Math.pow(awarenessFac, 0.85), "0.000")} +
+ Popularity Bonus: x{numeralWrapper.format(Math.pow(popularityFac, 0.85), "0.000")} +
+ Ratio Multiplier: x{numeralWrapper.format(Math.pow(ratioFac, 0.85), "0.000")} + +

+ )} + {advertisingInfo} +

@@ -201,7 +200,7 @@ export function IndustryOverview(props: IProps): React.ReactElement { @@ -211,7 +210,7 @@ export function IndustryOverview(props: IProps): React.ReactElement { @@ -229,7 +228,7 @@ export function IndustryOverview(props: IProps): React.ReactElement {

- / s + / s

- / s + / s


- Production Multiplier: {numeralWrapper.format(props.division.prodMult, "0.00")} + Production Multiplier: {numeralWrapper.format(division.prodMult, "0.00")} Production gain from owning production-boosting materials such as hardware, Robots, AI Cores, and Real Estate @@ -240,7 +239,7 @@ export function IndustryOverview(props: IProps): React.ReactElement {



- Scientific Research: {numeralWrapper.format(props.division.sciResearch.qty, "0.000a")} + Scientific Research: {numeralWrapper.format(division.sciResearch.qty, "0.000a")} Scientific Research increases the quality of the materials and products that you produce. @@ -258,7 +257,7 @@ export function IndustryOverview(props: IProps): React.ReactElement { const upgrade = IndustryUpgrades[index]; // AutoBrew research disables the Coffee upgrade - if (props.division.hasResearch("AutoBrew") && upgrade[4] === "Coffee") { + if (division.hasResearch("AutoBrew") && upgrade[4] === "Coffee") { continue; } @@ -271,15 +270,15 @@ export function IndustryOverview(props: IProps): React.ReactElement { cost = props.office.employees.length * baseCost; break; default: - cost = baseCost * Math.pow(priceMult, props.division.upgrades[i]); + cost = baseCost * Math.pow(priceMult, division.upgrades[i]); break; } function onClick(): void { - if (props.corp.funds.lt(cost)) return; - props.corp.funds = props.corp.funds.minus(cost); - props.division.upgrade(upgrade, { - corporation: props.corp, + if (corp.funds.lt(cost)) return; + corp.funds = corp.funds.minus(cost); + division.upgrade(upgrade, { + corporation: corp, office: props.office, }); props.rerender(); @@ -291,7 +290,7 @@ export function IndustryOverview(props: IProps): React.ReactElement { onClick: onClick, text: ( <> - {upgrade[4]} - + {upgrade[4]} - ), tooltip: upgrade[5], @@ -321,13 +320,12 @@ export function IndustryOverview(props: IProps): React.ReactElement { const makeProductButton = renderMakeProductButton(); return ( -

+ {renderText()}
- Purchases & Upgrades -
+ Purchases & Upgrades {renderUpgrades()}
- {props.division.makesProducts && makeProductButton} -
+ {division.makesProducts && makeProductButton} + ); } diff --git a/src/Corporation/ui/LevelableUpgrade.tsx b/src/Corporation/ui/LevelableUpgrade.tsx index 5fe8781b7..89640bb57 100644 --- a/src/Corporation/ui/LevelableUpgrade.tsx +++ b/src/Corporation/ui/LevelableUpgrade.tsx @@ -5,8 +5,12 @@ import { dialogBoxCreate } from "../../ui/React/DialogBox"; import { CorporationUpgrade } from "../data/CorporationUpgrades"; import { LevelUpgrade } from "../Actions"; import { MoneyCost } from "./MoneyCost"; -import { use } from "../../ui/Context"; import { useCorporation } from "./Context"; +import Typography from "@mui/material/Typography"; +import Tooltip from "@mui/material/Tooltip"; +import Button from "@mui/material/Button"; +import Box from "@mui/material/Box"; +import Grid from "@mui/material/Grid"; interface IProps { upgrade: CorporationUpgrade; @@ -14,7 +18,6 @@ interface IProps { } export function LevelableUpgrade(props: IProps): React.ReactElement { - const player = use.Player(); const corp = useCorporation(); const data = props.upgrade; const level = corp.upgrades[data[0]]; @@ -23,11 +26,6 @@ export function LevelableUpgrade(props: IProps): React.ReactElement { const priceMult = data[2]; const cost = baseCost * Math.pow(priceMult, level); - const text = ( - <> - {data[4]} - - - ); const tooltip = data[5]; function onClick(): void { if (corp.funds.lt(cost)) return; @@ -40,9 +38,15 @@ export function LevelableUpgrade(props: IProps): React.ReactElement { } return ( - + + + + + {data[4]} + + + ); } diff --git a/src/Corporation/ui/Overview.tsx b/src/Corporation/ui/Overview.tsx index 4ddbcedab..8ce2d7db1 100644 --- a/src/Corporation/ui/Overview.tsx +++ b/src/Corporation/ui/Overview.tsx @@ -19,11 +19,16 @@ import { CONSTANTS } from "../../Constants"; import { numeralWrapper } from "../../ui/numeralFormat"; import { convertTimeMsToTimeElapsedString } from "../../utils/StringHelperFunctions"; import { Money } from "../../ui/React/Money"; +import { MoneyRate } from "../../ui/React/MoneyRate"; +import { StatsTable } from "../../ui/React/StatsTable"; import { use } from "../../ui/Context"; import { useCorporation } from "./Context"; import Typography from "@mui/material/Typography"; import Tooltip from "@mui/material/Tooltip"; import Button from "@mui/material/Button"; +import Box from "@mui/material/Box"; +import Paper from "@mui/material/Paper"; +import Grid from "@mui/material/Grid"; interface IProps { rerender: () => void; @@ -33,67 +38,73 @@ export function Overview({ rerender }: IProps): React.ReactElement { const corp = useCorporation(); const profit: number = corp.revenue.minus(corp.expenses).toNumber(); + const multRows: any[][] = []; + function appendMult(name: string, value: number): void { + if (value === 1) return; + multRows.push([name, numeralWrapper.format(value, "0.000")]); + } + appendMult("Production Multiplier: ", corp.getProductionMultiplier()); + appendMult("Storage Multiplier: ", corp.getStorageMultiplier()); + appendMult("Advertising Multiplier: ", corp.getAdvertisingMultiplier()); + appendMult("Empl. Creativity Multiplier: ", corp.getEmployeeCreMultiplier()); + appendMult("Empl. Charisma Multiplier: ", corp.getEmployeeChaMultiplier()); + appendMult("Empl. Intelligence Multiplier: ", corp.getEmployeeIntMultiplier()); + appendMult("Empl. Efficiency Multiplier: ", corp.getEmployeeEffMultiplier()); + appendMult("Sales Multiplier: ", corp.getSalesMultiplier()); + appendMult("Scientific Research Multiplier: ", corp.getScientificResearchMultiplier()); + return ( -
- - Total Funds: -
- Total Revenue: / s
- Total Expenses: / s -
- Total Profits: / s
- - Publicly Traded: {corp.public ? "Yes" : "No"} -
- Owned Stock Shares: {numeralWrapper.format(corp.numShares, "0.000a")} -
- Stock Price: {corp.public ? : "N/A"} -
- + <> + ], + ["Total Revenue:", ], + ["Total Expenses:", ], + ["Publicly Traded:", corp.public ? "Yes" : "No"], + ["Owned Stock Shares:", numeralWrapper.format(corp.numShares, "0.000a")], + ["Stock Price:", corp.public ? : "N/A"], + ]} + /> +
+ + + } + > + Total Stock Shares: {numeralWrapper.format(corp.totalShares, "0.000a")} + + +
+ +
+ +
+ - Outstanding Shares: {numeralWrapper.format(corp.issuedShares, "0.000a")} -
- Private Shares: {numeralWrapper.format(corp.totalShares - corp.issuedShares - corp.numShares, "0.000a")} + Get a copy of and read 'The Complete Handbook for Creating a Successful Corporation.' This is a .lit file + that guides you through the beginning of setting up a Corporation and provides some tips/pointers for + helping you get started with managing it. } > - - Total Stock Shares: {numeralWrapper.format(corp.totalShares, "0.000a")} - + -
-
- - - - - - - - - -
- -
- - Get a copy of and read 'The Complete Handbook for Creating a Successful Corporation.' This is a .lit file - that guides you through the beginning of setting up a Corporation and provides some tips/pointers for - helping you get started with managing it. - - } - > - - - {corp.public ? : } - -
+ {corp.public ? : } +
-
+ ); } @@ -102,7 +113,6 @@ interface IPrivateButtonsProps { } // Render the buttons for when your Corporation is still private function PrivateButtons({ rerender }: IPrivateButtonsProps): React.ReactElement { - const player = use.Player(); const corp = useCorporation(); const [findInvestorsopen, setFindInvestorsopen] = useState(false); const [goPublicopen, setGoPublicopen] = useState(false); @@ -115,9 +125,11 @@ function PrivateButtons({ rerender }: IPrivateButtonsProps): React.ReactElement return ( <> {findInvestorsTooltip}}> - + + + -

Unlocks

- {Object.values(CorporationUnlockUpgrades) - .filter((upgrade: CorporationUnlockUpgrade) => corp.unlockUpgrades[upgrade[0]] === 0) - .map((upgrade: CorporationUnlockUpgrade) => ( - - ))} - -

Upgrades

- {corp.upgrades - .map((level: number, i: number) => CorporationUpgrades[i]) - .map((upgrade: CorporationUpgrade) => ( - - ))} -
+ <> + + Unlocks + + {Object.values(CorporationUnlockUpgrades) + .filter((upgrade: CorporationUnlockUpgrade) => corp.unlockUpgrades[upgrade[0]] === 0) + .map((upgrade: CorporationUnlockUpgrade) => ( + + ))} + + + + Upgrades + + {corp.upgrades + .map((level: number, i: number) => CorporationUpgrades[i]) + .map((upgrade: CorporationUpgrade) => ( + + ))} + + + ); } @@ -193,9 +212,11 @@ function PublicButtons({ rerender }: IPublicButtonsProps): React.ReactElement { return ( <> {sellSharesTooltip}}> - + + + setSellSharesOpen(false)} rerender={rerender} /> Buy back shares you that previously issued or sold at market price.}> @@ -204,9 +225,11 @@ function PublicButtons({ rerender }: IPublicButtonsProps): React.ReactElement { setBuybackSharesOpen(false)} rerender={rerender} />
{issueNewSharesTooltip}}> - + + + setIssueNewSharesOpen(false)} /> - Retained Profits (after dividends): / s -
-
- Dividend Percentage: {numeralWrapper.format(corp.dividendPercentage / 100, "0%")} -
- Dividends per share: / s
- Your earnings as a shareholder (Pre-Tax): / s
- Dividend Tax Rate: {corp.dividendTaxPercentage}%
- Your earnings as a shareholder (Post-Tax):{" "} - / s
-
- - ); -} - -interface IMultProps { - name: string; - mult: number; -} -function Mult({ name, mult }: IMultProps): React.ReactElement { - if (mult <= 1) return <>; - return ( - - {name} - {numeralWrapper.format(mult, "0.000")} -
- + ], + ["Dividend Percentage:", numeralWrapper.format(corp.dividendPercentage / 100, "0%")], + ["Dividends per share:", ], + ["Your earnings as a shareholder (Pre-Tax):", ], + ["Dividend Tax Rate:", <>{corp.dividendTaxPercentage}%], + [ + "Your earnings as a shareholder (Post-Tax):", + , + ], + ]} + /> ); } diff --git a/src/Corporation/ui/ThrowPartyModal.tsx b/src/Corporation/ui/ThrowPartyModal.tsx new file mode 100644 index 000000000..a29c1e6a2 --- /dev/null +++ b/src/Corporation/ui/ThrowPartyModal.tsx @@ -0,0 +1,84 @@ +import React, { useState } from "react"; +import { numeralWrapper } from "../../ui/numeralFormat"; +import { dialogBoxCreate } from "../../ui/React/DialogBox"; +import { OfficeSpace } from "../OfficeSpace"; +import { ThrowParty } from "../Actions"; +import { Money } from "../../ui/React/Money"; +import { Modal } from "../../ui/React/Modal"; +import { useCorporation } from "./Context"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; +import TextField from "@mui/material/TextField"; +import Box from "@mui/material/Box"; + +interface IProps { + open: boolean; + onClose: () => void; + office: OfficeSpace; + rerender: () => void; +} + +export function ThrowPartyModal(props: IProps): React.ReactElement { + const corp = useCorporation(); + const [cost, setCost] = useState(0); + + const totalCost = cost * props.office.employees.length; + const canParty = corp.funds.gte(totalCost); + function changeCost(event: React.ChangeEvent): void { + let x = parseFloat(event.target.value); + if (isNaN(x)) x = 0; + setCost(x); + } + + function throwParty(): void { + if (cost === null || isNaN(cost) || cost < 0) { + dialogBoxCreate("Invalid value entered"); + } else { + if (!canParty) { + dialogBoxCreate("You don't have enough company funds to throw a party!"); + } else { + const mult = ThrowParty(corp, props.office, cost); + dialogBoxCreate( + "You threw a party for the office! The morale and happiness " + + "of each employee increased by " + + numeralWrapper.formatPercentage(mult - 1), + ); + props.rerender(); + props.onClose(); + } + } + } + + function EffectText(): React.ReactElement { + if (isNaN(cost) || cost < 0) return

Invalid value entered!

; + return ( + + Throwing this party will cost a total of + + ); + } + + function onKeyDown(event: React.KeyboardEvent): void { + if (event.keyCode === 13) throwParty(); + } + + return ( + + Enter the amount of money you would like to spend PER EMPLOYEE on this office party + + + + + + + ); +} diff --git a/src/Corporation/ui/ThrowPartyPopup.tsx b/src/Corporation/ui/ThrowPartyPopup.tsx deleted file mode 100644 index 126bcc0da..000000000 --- a/src/Corporation/ui/ThrowPartyPopup.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useState } from "react"; -import { removePopup } from "../../ui/React/createPopup"; -import { numeralWrapper } from "../../ui/numeralFormat"; -import { dialogBoxCreate } from "../../ui/React/DialogBox"; -import { OfficeSpace } from "../OfficeSpace"; -import { ICorporation } from "../ICorporation"; -import { ThrowParty } from "../Actions"; - -interface IProps { - office: OfficeSpace; - corp: ICorporation; - 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(): void { - 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 { - const mult = ThrowParty(props.corp, props.office, 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: OfficeSpace }): 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): void { - if (event.keyCode === 13) throwParty(); - } - - return ( - <> -

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

- - - - - ); -} diff --git a/src/Corporation/ui/UnlockUpgrade.tsx b/src/Corporation/ui/UnlockUpgrade.tsx index 5ea775fed..5027d0bca 100644 --- a/src/Corporation/ui/UnlockUpgrade.tsx +++ b/src/Corporation/ui/UnlockUpgrade.tsx @@ -6,6 +6,11 @@ import { CorporationUnlockUpgrade } from "../data/CorporationUnlockUpgrades"; import { useCorporation } from "./Context"; import { UnlockUpgrade as UU } from "../Actions"; import { MoneyCost } from "./MoneyCost"; +import Typography from "@mui/material/Typography"; +import Tooltip from "@mui/material/Tooltip"; +import Button from "@mui/material/Button"; +import Box from "@mui/material/Box"; +import Grid from "@mui/material/Grid"; interface IProps { upgradeData: CorporationUnlockUpgrade; @@ -15,11 +20,6 @@ interface IProps { export function UnlockUpgrade(props: IProps): React.ReactElement { const corp = useCorporation(); const data = props.upgradeData; - const text = ( - <> - {data[2]} - - - ); const tooltip = data[3]; function onClick(): void { if (corp.funds.lt(data[1])) return; @@ -32,9 +32,15 @@ export function UnlockUpgrade(props: IProps): React.ReactElement { } return ( - + + + + + {data[2]} + + + ); } diff --git a/src/Corporation/ui/UpgradeOfficeSizeModal.tsx b/src/Corporation/ui/UpgradeOfficeSizeModal.tsx new file mode 100644 index 000000000..ee05bdcdc --- /dev/null +++ b/src/Corporation/ui/UpgradeOfficeSizeModal.tsx @@ -0,0 +1,92 @@ +import React from "react"; +import { numeralWrapper } from "../../ui/numeralFormat"; +import { CorporationConstants } from "../data/Constants"; +import { OfficeSpace } from "../OfficeSpace"; +import { ICorporation } from "../ICorporation"; +import { UpgradeOfficeSize } from "../Actions"; +import { Modal } from "../../ui/React/Modal"; +import { useCorporation } from "./Context"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; +import Tooltip from "@mui/material/Tooltip"; +import Box from "@mui/material/Box"; + +interface IProps { + open: boolean; + onClose: () => void; + office: OfficeSpace; + rerender: () => void; +} + +export function UpgradeOfficeSizeModal(props: IProps): React.ReactElement { + const corp = useCorporation(); + 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 + const maxMult = 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; + const 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 (corp.funds.lt(cost)) { + return; + } + + UpgradeOfficeSize(corp, props.office, size); + props.rerender(); + + props.rerender(); + props.onClose(); + } + + interface IUpgradeButton { + cost: number; + size: number; + corp: ICorporation; + } + + function UpgradeSizeButton(props: IUpgradeButton): React.ReactElement { + return ( + + + + + + ); + } + + return ( + + Increase the size of your office space to fit additional employees! + + Upgrade size: + + + + + + ); +} diff --git a/src/Corporation/ui/UpgradeOfficeSizePopup.tsx b/src/Corporation/ui/UpgradeOfficeSizePopup.tsx deleted file mode 100644 index 3a48d922a..000000000 --- a/src/Corporation/ui/UpgradeOfficeSizePopup.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from "react"; -import { removePopup } from "../../ui/React/createPopup"; -import { numeralWrapper } from "../../ui/numeralFormat"; -import { dialogBoxCreate } from "../../ui/React/DialogBox"; -import { CorporationConstants } from "../data/Constants"; -import { OfficeSpace } from "../OfficeSpace"; -import { ICorporation } from "../ICorporation"; -import { IPlayer } from "../../PersonObjects/IPlayer"; -import { UpgradeOfficeSize } from "../Actions"; - -interface IProps { - office: OfficeSpace; - corp: ICorporation; - popupId: string; - player: IPlayer; - rerender: () => void; -} - -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 - const 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; - const 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 { - UpgradeOfficeSize(props.corp, props.office, size); - dialogBoxCreate("Office space increased! It can now hold " + props.office.size + " employees"); - props.rerender(); - } - removePopup(props.popupId); - } - - interface IUpgradeButton { - cost: number; - size: number; - corp: ICorporation; - } - - function UpgradeSizeButton(props: IUpgradeButton): React.ReactElement { - return ( - - ); - } - - return ( - <> -

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

-

Upgrade size:

- - - - - ); -}