UI improvements for corps.

dist/engineStyle.bundle.js

@@ -1,2 +1,2 @@
-!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],p=0,s=[];p<f.length;p++)i=f[p],u[i]&&s.push(u[i][0]),u[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(a&&a(t);s.length;)s.shift()();return r.push.apply(r,l||[]),o()}function o(){for(var n,t=0;t<r.length;t++){for(var o=r[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==u[c]&&(e=!1)}e&&(r.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},u={1:0},r=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var a=c;r.push([768,0]),o()}({705:function(n,t,o){},707:function(n,t,o){},709:function(n,t,o){},711:function(n,t,o){},713:function(n,t,o){},715:function(n,t,o){},717:function(n,t,o){},719:function(n,t,o){},721:function(n,t,o){},723:function(n,t,o){},725:function(n,t,o){},727:function(n,t,o){},729:function(n,t,o){},731:function(n,t,o){},733:function(n,t,o){},735:function(n,t,o){},737:function(n,t,o){},739:function(n,t,o){},741:function(n,t,o){},743:function(n,t,o){},745:function(n,t,o){},747:function(n,t,o){},749:function(n,t,o){},751:function(n,t,o){},753:function(n,t,o){},755:function(n,t,o){},757:function(n,t,o){},759:function(n,t,o){},761:function(n,t,o){},763:function(n,t,o){},765:function(n,t,o){},768:function(n,t,o){"use strict";o.r(t);o(767),o(765),o(763),o(761),o(759),o(757),o(755),o(753),o(751),o(749),o(747),o(745),o(743),o(741),o(739),o(737),o(735),o(733),o(731),o(729),o(727),o(725),o(723),o(721),o(719),o(717),o(715),o(713),o(711),o(709),o(707),o(705)}});
+!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],p=0,s=[];p<f.length;p++)i=f[p],u[i]&&s.push(u[i][0]),u[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(a&&a(t);s.length;)s.shift()();return r.push.apply(r,l||[]),o()}function o(){for(var n,t=0;t<r.length;t++){for(var o=r[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==u[c]&&(e=!1)}e&&(r.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},u={1:0},r=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var a=c;r.push([769,0]),o()}({706:function(n,t,o){},708:function(n,t,o){},710:function(n,t,o){},712:function(n,t,o){},714:function(n,t,o){},716:function(n,t,o){},718:function(n,t,o){},720:function(n,t,o){},722:function(n,t,o){},724:function(n,t,o){},726:function(n,t,o){},728:function(n,t,o){},730:function(n,t,o){},732:function(n,t,o){},734:function(n,t,o){},736:function(n,t,o){},738:function(n,t,o){},740:function(n,t,o){},742:function(n,t,o){},744:function(n,t,o){},746:function(n,t,o){},748:function(n,t,o){},750:function(n,t,o){},752:function(n,t,o){},754:function(n,t,o){},756:function(n,t,o){},758:function(n,t,o){},760:function(n,t,o){},762:function(n,t,o){},764:function(n,t,o){},766:function(n,t,o){},769:function(n,t,o){"use strict";o.r(t);o(768),o(766),o(764),o(762),o(760),o(758),o(756),o(754),o(752),o(750),o(748),o(746),o(744),o(742),o(740),o(738),o(736),o(734),o(732),o(730),o(728),o(726),o(724),o(722),o(720),o(718),o(716),o(714),o(712),o(710),o(708),o(706)}});
 //# sourceMappingURL=engineStyle.bundle.js.map

src/Corporation/Industry.ts

@@ -582,11 +582,6 @@ export class Industry implements IIndustry {
 
         switch (this.state) {
           case "PURCHASE": {
-            let totalProdRatio = 0;
-            for (const reqMat of Object.values(this.reqMats)) {
-              if (reqMat === undefined) continue;
-              totalProdRatio += reqMat;
-            }
             /* Process purchase of materials */
             for (const matName in warehouse.materials) {
               if (!warehouse.materials.hasOwnProperty(matName)) continue;

src/Corporation/IndustryData.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { ResearchTree } from "./ResearchTree";
+import { ICorporation } from "./ICorporation";
 import {
   getBaseResearchTreeCopy,
   getProductIndustryResearchTreeCopy,
 } from "./data/BaseResearchTree";
-import { Money } from "../ui/React/Money";
+import { MoneyCost } from "./ui/MoneyCost";
 
 interface IIndustryMap<T> {
   [key: string]: T | undefined;
@@ -61,145 +62,161 @@ export const IndustryStartingCosts: IIndustryMap<number> = {
 };
 
 // Map of description for each industry
-export const IndustryDescriptions: IIndustryMap<JSX.Element> = {
+export const IndustryDescriptions: IIndustryMap<
-  Energy: (
+  (corp: ICorporation) => React.ReactElement
+> = {
+  Energy: (corp: ICorporation) => (
     <>
       Engage in the production and distribution of energy.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Energy} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Energy} corp={corp} />
       <br />
       Recommended starting Industry: NO
     </>
   ),
-  Utilities: (
+  Utilities: (corp: ICorporation) => (
     <>
       Distribute water and provide wastewater services.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Utilities} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Utilities} corp={corp} />
       <br />
       Recommended starting Industry: NO
     </>
   ),
-  Agriculture: (
+  Agriculture: (corp: ICorporation) => (
     <>
       Cultivate crops and breed livestock to produce food.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Agriculture} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Agriculture} corp={corp} />
       <br />
       Recommended starting Industry: YES
     </>
   ),
-  Fishing: (
+  Fishing: (corp: ICorporation) => (
     <>
       Produce food through the breeding and processing of fish and fish
       products.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Fishing} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Fishing} corp={corp} />
       <br />
       Recommended starting Industry: NO
     </>
   ),
-  Mining: (
+  Mining: (corp: ICorporation) => (
     <>
       Extract and process metals from the earth.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Mining} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Mining} corp={corp} />
       <br />
       Recommended starting Industry: NO
     </>
   ),
-  Food: (
+  Food: (corp: ICorporation) => (
     <>
       Create your own restaurants all around the world.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Food} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Food} corp={corp} />
       <br />
       Recommended starting Industry: YES
     </>
   ),
-  Tobacco: (
+  Tobacco: (corp: ICorporation) => (
     <>
       Create and distribute tobacco and tobacco-related products.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Tobacco} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Tobacco} corp={corp} />
       <br />
       Recommended starting Industry: YES
     </>
   ),
-  Chemical: (
+  Chemical: (corp: ICorporation) => (
     <>
       Produce industrial chemicals.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Chemical} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Chemical} corp={corp} />
       <br />
       Recommended starting Industry: NO
     </>
   ),
-  Pharmaceutical: (
+  Pharmaceutical: (corp: ICorporation) => (
     <>
       Discover, develop, and create new pharmaceutical drugs.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Pharmaceutical} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Pharmaceutical} corp={corp} />
       <br />
       Recommended starting Industry: NO
     </>
   ),
-  Computer: (
+  Computer: (corp: ICorporation) => (
     <>
       Develop and manufacture new computer hardware and networking
       infrastructures.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Computer} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Computer} corp={corp} />
       <br />
       Recommended starting Industry: NO
     </>
   ),
-  Robotics: (
+  Robotics: (corp: ICorporation) => (
     <>
       Develop and create robots.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Robotics} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Robotics} corp={corp} />
       <br />
       Recommended starting Industry: NO
     </>
   ),
-  Software: (
+  Software: (corp: ICorporation) => (
     <>
       Develop computer software and create AI Cores.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Software} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Software} corp={corp} />
       <br />
       Recommended starting Industry: YES
     </>
   ),
-  Healthcare: (
+  Healthcare: (corp: ICorporation) => (
     <>
       Create and manage hospitals.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.Healthcare} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.Healthcare} corp={corp} />
       <br />
       Recommended starting Industry: NO
     </>
   ),
-  RealEstate: (
+  RealEstate: (corp: ICorporation) => (
     <>
       Develop and manage real estate properties.
       <br />
       <br />
-      Starting cost: <Money money={IndustryStartingCosts.RealEstate} />
+      Starting cost:{" "}
+      <MoneyCost money={IndustryStartingCosts.RealEstate} corp={corp} />
       <br />
       Recommended starting Industry: NO
     </>

src/Corporation/ui/ExpandNewCityPopup.tsx

@@ -6,6 +6,7 @@ import { removePopup } from "../../ui/React/createPopup";
 import { dialogBoxCreate } from "../../../utils/DialogBox";
 import { ICorporation } from "../ICorporation";
 import { NewCity } from "../Actions";
+import { MoneyCost } from "./MoneyCost";
 
 interface IProps {
   popupId: string;
@@ -36,10 +37,10 @@ export function ExpandNewCityPopup(props: IProps): React.ReactElement {
       <p>
         Would you like to expand into a new city by opening an office? This
         would cost{" "}
-        {numeralWrapper.format(
+        <MoneyCost
-          CorporationConstants.OfficeInitialCost,
+          money={CorporationConstants.OfficeInitialCost}
-          "$0.000a",
+          corp={props.corp}
-        )}
+        />
       </p>
       <select ref={dropdown} className="dropdown" style={{ margin: "5px" }}>
         {Object.keys(props.division.offices)
@@ -54,6 +55,7 @@ export function ExpandNewCityPopup(props: IProps): React.ReactElement {
         className="std-button"
         style={{ display: "inline-block" }}
         onClick={expand}
+        disabled={props.corp.funds.lt(0)}
       >
         Confirm
       </button>

src/Corporation/ui/IndustryOffice.tsx

@@ -287,61 +287,113 @@ function AutoManagement(props: IProps): React.ReactElement {
         <strong>Unassigned Employees: {numUnassigned}</strong>
       </p>
       <br />
-
+      <table>
-      <p>Avg Employee Morale: {numeralWrapper.format(avgMorale, "0.000")}</p>
+        <tbody>
+          <tr>
+            <td>
+              <p>Avg Employee Morale:</p>
+            </td>
+            <td>
+              <p>{numeralWrapper.format(avgMorale, "0.000")}</p>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <p>Avg Employee Happiness:</p>
+            </td>
+            <td>
+              <p>{numeralWrapper.format(avgHappiness, "0.000")}</p>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <p>Avg Employee Energy:</p>
+            </td>
+            <td>
+              <p>{numeralWrapper.format(avgEnergy, "0.000")}</p>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <p>Total Employee Salary:</p>
+            </td>
+            <td>
               <p>
-        Avg Employee Happiness: {numeralWrapper.format(avgHappiness, "0.000")}
+                <Money money={totalSalary} />
-      </p>
-      <p>Avg Employee Energy: {numeralWrapper.format(avgEnergy, "0.000")}</p>
-      <p>
-        Total Employee Salary: <Money money={totalSalary} />
               </p>
+            </td>
+          </tr>
           {vechain && (
             <>
+              <tr>
+                <td>
                   <p className={"tooltip"} style={{ display: "inline-block" }}>
-            Material Production:{" "}
+                    Material Production:
+                    <span className={"tooltiptext"}>
+                      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
+                    </span>
+                  </p>
+                </td>
+                <td>
+                  <p>
                     {numeralWrapper.format(
                       props.division.getOfficeProductivity(props.office),
                       "0.000",
                     )}
+                  </p>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p className={"tooltip"} style={{ display: "inline-block" }}>
+                    Product Production:
                     <span className={"tooltiptext"}>
-              The base amount of material this office can produce. Does not
+                      The base amount of any given Product this office can
-              include production multipliers from upgrades and materials. This
+                      produce. Does not include production multipliers from
-              value is based off the productivity of your Operations,
+                      upgrades and materials. This value is based off the
-              Engineering, and Management employees
+                      productivity of your Operations, Engineering, and
+                      Management employees
                     </span>
                   </p>
-          <br />
+                </td>
-          <p className={"tooltip"} style={{ display: "inline-block" }}>
+                <td>
-            Product Production:{" "}
+                  <p>
                     {numeralWrapper.format(
                       props.division.getOfficeProductivity(props.office, {
                         forProduct: true,
                       }),
                       "0.000",
                     )}
+                  </p>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p className={"tooltip"} style={{ display: "inline-block" }}>
+                    Business Multiplier:
                     <span className={"tooltiptext"}>
-              The base amount of any given Product this office can produce. Does
+                      The effect this office's 'Business' employees has on
-              not include production multipliers from upgrades and materials.
+                      boosting sales
-              This value is based off the productivity of your Operations,
-              Engineering, and Management employees
                     </span>
                   </p>
-          <br />
+                </td>
-          <p className={"tooltip"} style={{ display: "inline-block" }}>
+                <td>
-            Business Multiplier: x
+                  <p>
+                    x
                     {numeralWrapper.format(
                       props.division.getBusinessFactor(props.office),
                       "0.000",
                     )}
-            <span className={"tooltiptext"}>
-              The effect this office's 'Business' employees has on boosting
-              sales
-            </span>
                   </p>
-          <br />
+                </td>
+              </tr>
             </>
           )}
+        </tbody>
+      </table>
       <AutoAssignJob
         office={props.office}
         corp={props.corp}
@@ -506,6 +558,7 @@ export function IndustryOffice(props: IProps): React.ReactElement {
         className={"std-button tooltip"}
         onClick={openUpgradeOfficeSizePopup}
         style={buttonStyle}
+        disabled={props.corp.funds.lt(0)}
       >
         Upgrade size
         <span className={"tooltiptext"}>
@@ -517,6 +570,7 @@ export function IndustryOffice(props: IProps): React.ReactElement {
           className={"std-button tooltip"}
           onClick={openThrowPartyPopup}
           style={buttonStyle}
+          disabled={props.corp.funds.lt(0)}
         >
           Throw Party
           <span className={"tooltiptext"}>

src/Corporation/ui/IndustryOverview.tsx

@@ -15,6 +15,7 @@ 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";
 
 interface IProps {
   corp: ICorporation;
@@ -104,6 +105,7 @@ export function IndustryOverview(props: IProps): React.ReactElement {
         className={className}
         onClick={openMakeProductPopup}
         style={buttonStyle}
+        disabled={props.corp.funds.lt(0)}
       >
         {createProductButtonText}
         {hasMaxProducts && (
@@ -214,14 +216,43 @@ export function IndustryOverview(props: IProps): React.ReactElement {
         {advertisingInfo}
         <br />
         <br />
-        Revenue: <Money money={props.division.lastCycleRevenue.toNumber()} /> /
+        <table>
-        s <br />
+          <tbody>
-        Expenses: <Money
+            <tr>
-          money={props.division.lastCycleExpenses.toNumber()}
+              <td>
-        />{" "}
+                <p>Revenue: </p>
-        /s <br />
+              </td>
-        Profit: <Money money={profit} /> / s
+              <td>
-        <br /> <br />
+                <p>
+                  <Money money={props.division.lastCycleRevenue.toNumber()} /> /
+                  s
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <p>Expenses: </p>
+              </td>
+              <td>
+                <p>
+                  <Money money={props.division.lastCycleExpenses.toNumber()} />{" "}
+                  / s
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <p>Profit: </p>
+              </td>
+              <td>
+                <p>
+                  <Money money={profit} /> / s
+                </p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <br />
         <p className={"tooltip"}>
           Production Multiplier:{" "}
           {numeralWrapper.format(props.division.prodMult, "0.00")}
@@ -273,9 +304,7 @@ export function IndustryOverview(props: IProps): React.ReactElement {
       }
 
       function onClick(): void {
-        if (props.corp.funds.lt(cost)) {
+        if (props.corp.funds.lt(cost)) return;
-          dialogBoxCreate("Insufficient funds");
-        } else {
         props.corp.funds = props.corp.funds.minus(cost);
         props.division.upgrade(upgrade, {
           corporation: props.corp,
@@ -284,7 +313,6 @@ export function IndustryOverview(props: IProps): React.ReactElement {
         // corp.displayDivisionContent(division, city);
         props.corp.rerender(props.player);
       }
-      }
 
       upgrades.push(
         renderUpgrade({
@@ -292,7 +320,7 @@ export function IndustryOverview(props: IProps): React.ReactElement {
           onClick: onClick,
           text: (
             <>
-              {upgrade[4]} - <Money money={cost} />
+              {upgrade[4]} - <MoneyCost money={cost} corp={props.corp} />
             </>
           ),
           tooltip: upgrade[5],

src/Corporation/ui/IndustryWarehouse.tsx

@@ -25,6 +25,8 @@ import { ICorporation } from "../ICorporation";
 import { IIndustry } from "../IIndustry";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { SetSmartSupply } from "../Actions";
+import { Money } from "../../ui/React/Money";
+import { MoneyCost } from "./MoneyCost";
 
 interface IProductProps {
   corp: ICorporation;
@@ -51,37 +53,46 @@ function ProductComponent(props: IProductProps): React.ReactElement {
   const totalGain = product.data[city][1] - product.data[city][2];
 
   // Sell button
-  let sellButtonText;
+  let sellButtonText: JSX.Element;
   if (product.sllman[city][0]) {
     if (isString(product.sllman[city][1])) {
-      sellButtonText = `Sell (${numeralWrapper.format(
+      sellButtonText = (
-        product.data[city][2],
+        <>
-        nfB,
+          Sell ({numeralWrapper.format(product.data[city][2], nfB)}/
-      )}/${product.sllman[city][1]})`;
+          {product.sllman[city][1]})
+        </>
+      );
     } else {
-      sellButtonText = `Sell (${numeralWrapper.format(
+      sellButtonText = (
-        product.data[city][2],
+        <>
-        nfB,
+          Sell ({numeralWrapper.format(product.data[city][2], nfB)}/
-      )}/${numeralWrapper.format(product.sllman[city][1], nfB)})`;
+          {numeralWrapper.format(product.sllman[city][1], nfB)})
+        </>
+      );
     }
   } else {
-    sellButtonText = "Sell (0.000/0.000)";
+    sellButtonText = <>Sell (0.000/0.000)</>;
   }
 
   if (product.marketTa2) {
-    sellButtonText +=
+    sellButtonText = (
-      " @ " + numeralWrapper.formatMoney(product.marketTa2Price[city]);
+      <>
+        {sellButtonText} @ <Money money={product.marketTa2Price[city]} />
+      </>
+    );
   } else if (product.marketTa1) {
     const markupLimit = product.rat / product.mku;
-    sellButtonText +=
+    sellButtonText = (
-      " @ " + numeralWrapper.formatMoney(product.pCost + markupLimit);
+      <>
+        {sellButtonText} @ <Money money={product.pCost + markupLimit} />
+      </>
+    );
   } else if (product.sCost) {
-    if (isString(product.sCost)) {
+    sellButtonText = (
-      sellButtonText += " @ " + product.sCost;
+      <>
-    } else {
+        {sellButtonText} @ <Money money={product.sCost} />
-      sellButtonText +=
+      </>
-        " @ " + numeralWrapper.formatMoney(product.sCost as number);
+    );
-    }
   }
 
   function openSellProductPopup(): void {
@@ -314,35 +325,53 @@ function MaterialComponent(props: IMaterialProps): React.ReactElement {
   }
 
   // Sell material button
-  let sellButtonText;
+  let sellButtonText: JSX.Element;
   if (mat.sllman[0]) {
     if (isString(mat.sllman[1])) {
-      sellButtonText = `Sell (${numeralWrapper.format(mat.sll, nfB)}/${
+      sellButtonText = (
-        mat.sllman[1]
+        <>
-      })`;
+          Sell ({numeralWrapper.format(mat.sll, nfB)}/{mat.sllman[1]})
+        </>
+      );
     } else {
-      sellButtonText = `Sell (${numeralWrapper.format(
+      sellButtonText = (
-        mat.sll,
+        <>
-        nfB,
+          Sell ({numeralWrapper.format(mat.sll, nfB)}/
-      )}/${numeralWrapper.format(mat.sllman[1] as number, nfB)})`;
+          {numeralWrapper.format(mat.sllman[1] as number, nfB)})
+        </>
+      );
     }
 
     if (mat.marketTa2) {
-      sellButtonText += " @ " + numeralWrapper.formatMoney(mat.marketTa2Price);
+      sellButtonText = (
+        <>
+          {sellButtonText} @ <Money money={mat.marketTa2Price} />
+        </>
+      );
     } else if (mat.marketTa1) {
-      sellButtonText +=
+      sellButtonText = (
-        " @ " + numeralWrapper.formatMoney(mat.bCost + markupLimit);
+        <>
+          {sellButtonText} @ <Money money={mat.bCost + markupLimit} />
+        </>
+      );
     } else if (mat.sCost) {
       if (isString(mat.sCost)) {
         const sCost = (mat.sCost as string).replace(/MP/g, mat.bCost + "");
-        sellButtonText += " @ " + numeralWrapper.formatMoney(eval(sCost));
+        sellButtonText = (
+          <>
+            {sellButtonText} @ <Money money={eval(sCost)} />
+          </>
+        );
       } else {
-        sellButtonText +=
+        sellButtonText = (
-          " @ " + numeralWrapper.formatMoney(mat.sCost as number);
+          <>
+            {sellButtonText} @ <Money money={mat.sCost} />
+          </>
+        );
       }
     }
   } else {
-    sellButtonText = "Sell (0.000/0.000)";
+    sellButtonText = <>Sell (0.000/0.000)</>;
   }
 
   function openSellMaterialPopup(): void {
@@ -617,7 +646,8 @@ export function IndustryWarehouse(props: IProps): React.ReactElement {
           className={upgradeWarehouseClass}
           onClick={upgradeWarehouseOnClick}
         >
-          Upgrade Warehouse Size - {numeralWrapper.formatMoney(sizeUpgradeCost)}
+          Upgrade Warehouse Size -{" "}
+          <MoneyCost money={sizeUpgradeCost} corp={props.corp} />
         </button>
 
         <p>{generalReqsText}. The exact requirements for production are:</p>
@@ -682,9 +712,10 @@ export function IndustryWarehouse(props: IProps): React.ReactElement {
           onClick={() => purchaseWarehouse(props.division, props.currentCity)}
         >
           Purchase Warehouse (
-          {numeralWrapper.formatMoney(
+          <MoneyCost
-            CorporationConstants.WarehouseInitialCost,
+            money={CorporationConstants.WarehouseInitialCost}
-          )}
+            corp={props.corp}
+          />
           )
         </button>
       </div>

src/Corporation/ui/LevelableUpgrade.tsx

@@ -6,7 +6,7 @@ import { ICorporation } from "../ICorporation";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { CorporationUpgrade } from "../data/CorporationUpgrades";
 import { LevelUpgrade } from "../Actions";
-import { Money } from "../../ui/React/Money";
+import { MoneyCost } from "./MoneyCost";
 
 interface IProps {
   upgrade: CorporationUpgrade;
@@ -24,11 +24,12 @@ export function LevelableUpgrade(props: IProps): React.ReactElement {
 
   const text = (
     <>
-      {data[4]} - <Money money={cost} />
+      {data[4]} - <MoneyCost money={cost} corp={props.corp} />
     </>
   );
   const tooltip = data[5];
   function onClick(): void {
+    if (props.corp.funds.lt(cost)) return;
     try {
       LevelUpgrade(props.corp, props.upgrade);
     } catch (err) {

src/Corporation/ui/MoneyCost.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { ICorporation } from "../ICorporation";
+
+interface IProps {
+  money: number;
+  corp: ICorporation;
+}
+export function MoneyCost(props: IProps): JSX.Element {
+  if (!props.corp.funds.gt(props.money))
+    return (
+      <span className={"unbuyable samefont"}>
+        {numeralWrapper.formatMoney(props.money)}
+      </span>
+    );
+
+  return (
+    <span className={"money-gold samefont"}>
+      {numeralWrapper.formatMoney(props.money)}
+    </span>
+  );
+}

src/Corporation/ui/NewIndustryPopup.tsx

@@ -17,7 +17,8 @@ export function NewIndustryPopup(props: IProps): React.ReactElement {
   const allIndustries = Object.keys(Industries).sort();
   const possibleIndustries = allIndustries
     .filter(
-      (industryType: string) => props.corp.divisions.find(
+      (industryType: string) =>
+        props.corp.divisions.find(
           (division: IIndustry) => division.type === industryType,
         ) === undefined,
     )
@@ -53,6 +54,12 @@ export function NewIndustryPopup(props: IProps): React.ReactElement {
     setIndustry(event.target.value);
   }
 
+  const desc = IndustryDescriptions[industry];
+  if (desc === undefined)
+    throw new Error(
+      `Trying to create an industry that doesn't exists: '${industry}'`,
+    );
+
   return (
     <>
       <p>Create a new division to expand into a new industry:</p>
@@ -67,7 +74,7 @@ export function NewIndustryPopup(props: IProps): React.ReactElement {
           </option>
         ))}
       </select>
-      <p>{IndustryDescriptions[industry]}</p>
+      <p>{desc(props.corp)}</p>
       <br />
       <br />
 

src/Corporation/ui/UnlockUpgrade.tsx

@@ -6,7 +6,7 @@ import { CorporationUnlockUpgrade } from "../data/CorporationUnlockUpgrades";
 import { ICorporation } from "../ICorporation";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { UnlockUpgrade as UU } from "../Actions";
-import { Money } from "../../ui/React/Money";
+import { MoneyCost } from "./MoneyCost";
 
 interface IProps {
   upgradeData: CorporationUnlockUpgrade;
@@ -18,11 +18,12 @@ export function UnlockUpgrade(props: IProps): React.ReactElement {
   const data = props.upgradeData;
   const text = (
     <>
-      {data[2]} - <Money money={data[1]} />
+      {data[2]} - <MoneyCost money={data[1]} corp={props.corp} />
     </>
   );
   const tooltip = data[3];
   function onClick(): void {
+    if (props.corp.funds.lt(data[1])) return;
     try {
       UU(props.corp, props.upgradeData);
     } catch (err) {

src/DevMenu.jsx

@@ -580,6 +580,14 @@ class DevMenuComponent extends Component {
     }
   }
 
+  resetCorporationFunds() {
+    if (Player.corporation) {
+      Player.corporation.funds = Player.corporation.funds.minus(
+        Player.corporation.funds,
+      );
+    }
+  }
+
   addTonsCorporationCycles() {
     if (Player.corporation) {
       Player.corporation.storedCycles = tonsP;
@@ -1527,6 +1535,12 @@ class DevMenuComponent extends Component {
                       >
                         Tons of funds
                       </button>
+                      <button
+                        className="std-button"
+                        onClick={this.resetCorporationFunds}
+                      >
+                        Reset funds
+                      </button>
                     </td>
                   </tr>
                   <tr>