more conversion

src/Corporation/ui/CorporationUIEventHandler.js

@@ -695,56 +695,6 @@ export class CorporationEventHandler {
         }
     }
 
-    // Create a popup that lets the player expand into a new city (for the current industry)
-    // The 'cityStateSetter' arg is a function that sets the UI's 'city' state property
-    createNewCityPopup(division, cityStateSetter) {
-        const popupId = "cmpy-mgmt-expand-city-popup";
-        const text = createElement("p", {
-            innerText: "Would you like to expand into a new city by opening an office? " +
-                       "This would cost " + numeralWrapper.format(OfficeInitialCost, '$0.000a'),
-        });
-        const citySelector = createElement("select", { class: "dropdown", margin:"5px" });
-        for (const cityName in division.offices) {
-            if (!(division.offices[cityName] instanceof OfficeSpace)) {
-                citySelector.add(createElement("option", {
-                    text: cityName,
-                    value: cityName,
-                }));
-            }
-        }
-
-        const confirmBtn = createElement("button", {
-            class:"std-button",
-            display:"inline-block",
-            innerText: "Confirm",
-            clickListener: () => {
-                if (citySelector.length <= 0) { return false; }
-                let city = citySelector.options[citySelector.selectedIndex].value;
-                if (this.corp.funds.lt(OfficeInitialCost)) {
-                    dialogBoxCreate("You don't have enough company funds to open a new office!");
-                } else {
-                    this.corp.funds = this.corp.funds.minus(OfficeInitialCost);
-                    dialogBoxCreate("Opened a new office in " + city + "!");
-                    division.offices[city] = new OfficeSpace({
-                        loc: city,
-                        size: OfficeInitialSize,
-                    });
-                }
-
-                cityStateSetter(city);
-                removeElementById(popupId);
-                this.rerender();
-                return false;
-            },
-        });
-        const cancelBtn = createPopupCloseButton(popupId, {
-            class: "std-button",
-            innerText: "Cancel",
-        });
-
-        createPopup(popupId, [text, citySelector, confirmBtn, cancelBtn]);
-    }
-
     // Create a popup that lets the player create a new industry.
     // This is created when the player clicks the "Expand into new Industry" header tab
     createNewIndustryPopup() {
@@ -1390,90 +1340,6 @@ export class CorporationEventHandler {
         inputQty.focus();
     }
 
-    // Create a popup that lets the player sell Corporation shares
-    // This is created when the player clicks the "Sell Shares" button in the overview panel
-    createSellSharesPopup() {
-        const popupId = "cmpy-mgmt-sell-shares-popup";
-        const currentStockPrice = this.corp.sharePrice;
-        const txt = createElement("p", {
-            innerHTML: "Enter the number of shares you would like to sell. The money from " +
-                       "selling your shares will go directly to you (NOT your Corporation).<br><br>" +
-                       "Selling your shares will cause your corporation's stock price to fall due to " +
-                       "dilution. Furthermore, selling a large number of shares all at once will have an immediate effect " +
-                       "in reducing your stock price.<br><br>" +
-                       "The current price of your " +
-                       "company's stock is " + numeralWrapper.format(currentStockPrice, "$0.000a"),
-        });
-        const profitIndicator = createElement("p");
-        const input = createElement("input", {
-            class: "text-input",
-            type:"number", placeholder:"Shares to sell", margin:"5px",
-            inputListener: ()=> {
-                var numShares = Math.round(input.value);
-                if (isNaN(numShares) || numShares <= 0) {
-                    profitIndicator.innerText = "ERROR: Invalid value entered for number of shares to sell"
-                } else if (numShares > this.corp.numShares) {
-                    profitIndicator.innerText = "You don't have this many shares to sell!";
-                } else {
-                    const stockSaleResults = this.corp.calculateShareSale(numShares);
-                    const profit = stockSaleResults[0];
-                    profitIndicator.innerText = "Sell " + numShares + " shares for a total of " +
-                                                numeralWrapper.format(profit, '$0.000a');
-                }
-            },
-        });
-        const confirmBtn = createElement("button", {
-            class:"a-link-button", innerText:"Sell shares", display:"inline-block",
-            clickListener:()=>{
-                var shares = Math.round(input.value);
-                if (isNaN(shares) || shares <= 0) {
-                    dialogBoxCreate("ERROR: Invalid value for number of shares");
-                } else if (shares > this.corp.numShares) {
-                    dialogBoxCreate("ERROR: You don't have this many shares to sell");
-                } else {
-                    const stockSaleResults = this.corp.calculateShareSale(shares);
-                    const profit = stockSaleResults[0];
-                    const newSharePrice = stockSaleResults[1];
-                    const newSharesUntilUpdate = stockSaleResults[2];
-
-                    this.corp.numShares -= shares;
-                    if (isNaN(this.corp.issuedShares)) {
-                        console.error(`Corporation issuedShares is NaN: ${this.corp.issuedShares}`);
-                        var res = parseInt(this.corp.issuedShares);
-                        if (isNaN(res)) {
-                            this.corp.issuedShares = 0;
-                        } else {
-                            this.corp.issuedShares = res;
-                        }
-                    }
-                    this.corp.issuedShares += shares;
-                    this.corp.sharePrice = newSharePrice;
-                    this.corp.shareSalesUntilPriceUpdate = newSharesUntilUpdate;
-                    this.corp.shareSaleCooldown = SellSharesCooldown;
-                    Player.gainMoney(profit);
-                    Player.recordMoneySource(profit, "corporation");
-                    removeElementById(popupId);
-                    dialogBoxCreate(`Sold ${numeralWrapper.formatMoney(shares, "0.000a")} shares for ` +
-                                    `${numeralWrapper.formatMoney(profit, "$0.000a")}. ` +
-                                    `The corporation's stock price fell to ${numeralWrapper.formatMoney(this.corp.sharePrice)} ` +
-                                    `as a result of dilution.`);
-
-                    this.rerender();
-                    return false;
-                }
-
-            },
-        });
-        const cancelBtn = createPopupCloseButton(popupId, {
-            class: "std-button",
-            display: "inline-block",
-            innerText: "Cancel",
-        });
-
-        createPopup(popupId, [txt, profitIndicator, input, confirmBtn, cancelBtn]);
-        input.focus();
-    }
-
     rerender() {
         this.corp.rerender();
     }

src/Corporation/ui/Overview.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { LevelableUpgrade }             from "./LevelableUpgrade";
 import { UnlockUpgrade }                from "./UnlockUpgrade";
 import { BribeFactionPopup }            from "./BribeFactionPopup";
+import { SellSharesPopup }              from "./SellSharesPopup";
 
 import { CorporationConstants }         from "../data/Constants";
 import { CorporationUnlockUpgrades }    from "../data/CorporationUnlockUpgrades";
@@ -215,7 +216,12 @@ export function Overview(props: IProps): React.ReactElement {
             display: "inline-block",
             onClick: function(event: MouseEvent) {
                 if(!event.isTrusted) return;
-                props.eventHandler.createSellSharesPopup(event);
+                const popupId = "cmpy-mgmt-sell-shares-popup";
+                createPopup(popupId, SellSharesPopup, {
+                    corp: props.corp,
+                    player: props.player,
+                    popupId: popupId,
+                });
             },
             text: "Sell Shares",
             tooltip: sellSharesTooltip,

src/Corporation/ui/SellSharesPopup.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { dialogBoxCreate } from "../../../utils/DialogBox";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { removePopup } from "../../ui/React/createPopup";
+import { CorporationConstants } from "../data/Constants";
+import { createElement } from "../../../utils/uiHelpers/createElement";
+
+interface IProps {
+    corp: any;
+    player: IPlayer;
+    popupId: string;
+}
+
+// Create a popup that lets the player sell Corporation shares
+// This is created when the player clicks the "Sell Shares" button in the overview panel
+export function SellSharesPopup(props: IProps): React.ReactElement {
+    const [shares, setShares] = useState<number | null>(null);
+
+    function changeShares(event: React.ChangeEvent<HTMLInputElement>): void {
+        if(event.target.value === "") setShares(null);
+        else setShares(Math.round(parseFloat(event.target.value)));
+    }
+
+    function ProfitIndicator(props: {shares: number | null, corp: any}): React.ReactElement {
+        if(props.shares === null) return (<></>);
+        if (isNaN(props.shares) || props.shares <= 0) {
+            return (<>ERROR: Invalid value entered for number of shares to sell</>);
+        } else if (props.shares > props.corp.numShares) {
+            return (<>You don't have this many shares to sell!</>);
+        } else {
+            const stockSaleResults = props.corp.calculateShareSale(props.shares);
+            const profit = stockSaleResults[0];
+            return (<>Sell {props.shares} shares for a total of {numeralWrapper.formatMoney(profit)}</>);
+        }
+    }
+
+    function sell() {
+        if(shares === null) return;
+        if (isNaN(shares) || shares <= 0) {
+            dialogBoxCreate("ERROR: Invalid value for number of shares");
+        } else if (shares > props.corp.numShares) {
+            dialogBoxCreate("ERROR: You don't have this many shares to sell");
+        } else {
+            const stockSaleResults = props.corp.calculateShareSale(shares);
+            const profit = stockSaleResults[0];
+            const newSharePrice = stockSaleResults[1];
+            const newSharesUntilUpdate = stockSaleResults[2];
+
+            props.corp.numShares -= shares;
+            if (isNaN(props.corp.issuedShares)) {
+                console.error(`Corporation issuedShares is NaN: ${props.corp.issuedShares}`);
+                var res = parseInt(props.corp.issuedShares);
+                if (isNaN(res)) {
+                    props.corp.issuedShares = 0;
+                } else {
+                    props.corp.issuedShares = res;
+                }
+            }
+            props.corp.issuedShares += shares;
+            props.corp.sharePrice = newSharePrice;
+            props.corp.shareSalesUntilPriceUpdate = newSharesUntilUpdate;
+            props.corp.shareSaleCooldown = CorporationConstants.SellSharesCooldown;
+            props.player.gainMoney(profit);
+            props.player.recordMoneySource(profit, "corporation");
+            removePopup(props.popupId);
+            dialogBoxCreate(`Sold ${numeralWrapper.formatMoney(shares)} shares for ` +
+                            `${numeralWrapper.formatMoney(profit)}. ` +
+                            `The corporation's stock price fell to ${numeralWrapper.formatMoney(props.corp.sharePrice)} ` +
+                            `as a result of dilution.`);
+
+            props.corp.rerender();
+        }
+    }
+
+
+    function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+        if (event.keyCode === 13) sell();
+    }
+
+    return (<>
+        <p>
+Enter the number of shares you would like to sell. The money from 
+selling your shares will go directly to you (NOT your Corporation).<br /><br />
+Selling your shares will cause your corporation's stock price to fall due to 
+dilution. Furthermore, selling a large number of shares all at once will have an immediate effect 
+in reducing your stock price.<br /><br />
+The current price of your 
+company's stock is {numeralWrapper.formatMoney(props.corp.sharePrice)}
+        </p>
+        <ProfitIndicator shares={shares} corp={props.corp} />
+        <br />
+        <input autoFocus={true} className="text-input" type="number" placeholder="Shares to sell" style={{margin: "5px"}} onChange={changeShares} onKeyDown={onKeyDown} />
+        <button onClick={sell} className="a-link-button" style={{display:"inline-block"}}>Sell shares</button>
+    </>);
+
+}