merge latest dev

src/Corporation/Corporation.tsx

@@ -307,7 +307,7 @@ export class Corporation {
     if (upgN === 1) {
       for (let i = 0; i < this.divisions.length; ++i) {
         const industry = this.divisions[i];
-        for (const city in industry.warehouses) {
+        for (const city of Object.keys(industry.warehouses)) {
           const warehouse = industry.warehouses[city];
           if (warehouse === 0) continue;
           if (industry.warehouses.hasOwnProperty(city) && warehouse instanceof Warehouse) {

src/Corporation/Industry.ts

@@ -378,7 +378,7 @@ export class Industry implements IIndustry {
   updateWarehouseSizeUsed(warehouse: Warehouse): void {
     warehouse.updateMaterialSizeUsed();
 
-    for (const prodName in this.products) {
+    for (const prodName of Object.keys(this.products)) {
       if (this.products.hasOwnProperty(prodName)) {
         const prod = this.products[prodName];
         if (prod === undefined) continue;
@@ -414,7 +414,7 @@ export class Industry implements IIndustry {
 
       // Process offices (and the employees in them)
       let employeeSalary = 0;
-      for (const officeLoc in this.offices) {
+      for (const officeLoc of Object.keys(this.offices)) {
         const office = this.offices[officeLoc];
         if (office === 0) continue;
         if (office instanceof OfficeSpace) {
@@ -473,7 +473,7 @@ export class Industry implements IIndustry {
       if (this.warehouses[CorporationConstants.Cities[i]] instanceof Warehouse) {
         const wh = this.warehouses[CorporationConstants.Cities[i]];
         if (wh === 0) continue;
-        for (const name in reqMats) {
+        for (const name of Object.keys(reqMats)) {
           if (reqMats.hasOwnProperty(name)) {
             wh.materials[name].processMarket();
           }
@@ -496,7 +496,7 @@ export class Industry implements IIndustry {
   // Process change in demand and competition for this industry's products
   processProductMarket(marketCycles = 1): void {
     // Demand gradually decreases, and competition gradually increases
-    for (const name in this.products) {
+    for (const name of Object.keys(this.products)) {
       if (this.products.hasOwnProperty(name)) {
         const product = this.products[name];
         if (product === undefined) continue;
@@ -534,7 +534,7 @@ export class Industry implements IIndustry {
         }
         const warehouse = this.warehouses[city];
         if (warehouse === 0) continue;
-        for (const matName in warehouse.materials) {
+        for (const matName of Object.keys(warehouse.materials)) {
           if (warehouse.materials.hasOwnProperty(matName)) {
             const mat = warehouse.materials[matName];
             mat.imp = 0;
@@ -555,7 +555,7 @@ export class Industry implements IIndustry {
         switch (this.state) {
           case "PURCHASE": {
             /* Process purchase of materials */
-            for (const matName in warehouse.materials) {
+            for (const matName of Object.keys(warehouse.materials)) {
               if (!warehouse.materials.hasOwnProperty(matName)) continue;
               const mat = warehouse.materials[matName];
               let buyAmt = 0;
@@ -577,7 +577,7 @@ export class Industry implements IIndustry {
 
             // smart supply
             const smartBuy: { [key: string]: number | undefined } = {};
-            for (const matName in warehouse.materials) {
+            for (const matName of Object.keys(warehouse.materials)) {
               if (!warehouse.materials.hasOwnProperty(matName)) continue;
               if (!warehouse.smartSupplyEnabled || !Object.keys(this.reqMats).includes(matName)) continue;
               const mat = warehouse.materials[matName];
@@ -594,7 +594,7 @@ export class Industry implements IIndustry {
 
             // Find which material were trying to create the least amount of product with.
             let worseAmt = 1e99;
-            for (const matName in smartBuy) {
+            for (const matName of Object.keys(smartBuy)) {
               const buyAmt = smartBuy[matName];
               if (buyAmt === undefined) throw new Error(`Somehow smartbuy matname is undefined`);
               const reqMat = this.reqMats[matName];
@@ -604,7 +604,7 @@ export class Industry implements IIndustry {
             }
 
             // Align all the materials to the smallest amount.
-            for (const matName in smartBuy) {
+            for (const matName of Object.keys(smartBuy)) {
               const reqMat = this.reqMats[matName];
               if (reqMat === undefined) throw new Error(`reqMat "${matName}" is undefined`);
               smartBuy[matName] = worseAmt * reqMat;
@@ -612,7 +612,7 @@ export class Industry implements IIndustry {
 
             // Calculate the total size of all things were trying to buy
             let totalSize = 0;
-            for (const matName in smartBuy) {
+            for (const matName of Object.keys(smartBuy)) {
               const buyAmt = smartBuy[matName];
               if (buyAmt === undefined) throw new Error(`Somehow smartbuy matname is undefined`);
               totalSize += buyAmt * MaterialSizes[matName];
@@ -621,7 +621,7 @@ export class Industry implements IIndustry {
             // Shrink to the size of available space.
             const freeSpace = warehouse.size - warehouse.sizeUsed;
             if (totalSize > freeSpace) {
-              for (const matName in smartBuy) {
+              for (const matName of Object.keys(smartBuy)) {
                 const buyAmt = smartBuy[matName];
                 if (buyAmt === undefined) throw new Error(`Somehow smartbuy matname is undefined`);
                 smartBuy[matName] = Math.floor((buyAmt * freeSpace) / totalSize);
@@ -629,7 +629,7 @@ export class Industry implements IIndustry {
             }
 
             // Use the materials already in the warehouse if the option is on.
-            for (const matName in smartBuy) {
+            for (const matName of Object.keys(smartBuy)) {
               if (!warehouse.smartSupplyUseLeftovers[matName]) continue;
               const mat = warehouse.materials[matName];
               const buyAmt = smartBuy[matName];
@@ -638,7 +638,7 @@ export class Industry implements IIndustry {
             }
 
             // buy them
-            for (const matName in smartBuy) {
+            for (const matName of Object.keys(smartBuy)) {
               const mat = warehouse.materials[matName];
               const buyAmt = smartBuy[matName];
               if (buyAmt === undefined) throw new Error(`Somehow smartbuy matname is undefined`);
@@ -675,7 +675,7 @@ export class Industry implements IIndustry {
               for (let tmp = 0; tmp < this.prodMats.length; ++tmp) {
                 totalMatSize += MaterialSizes[this.prodMats[tmp]];
               }
-              for (const reqMatName in this.reqMats) {
+              for (const reqMatName of Object.keys(this.reqMats)) {
                 const normQty = this.reqMats[reqMatName];
                 if (normQty === undefined) continue;
                 totalMatSize -= MaterialSizes[reqMatName] * normQty;
@@ -695,7 +695,7 @@ export class Industry implements IIndustry {
 
               // Make sure we have enough resource to make our materials
               let producableFrac = 1;
-              for (const reqMatName in this.reqMats) {
+              for (const reqMatName of Object.keys(this.reqMats)) {
                 if (this.reqMats.hasOwnProperty(reqMatName)) {
                   const reqMat = this.reqMats[reqMatName];
                   if (reqMat === undefined) continue;
@@ -712,7 +712,7 @@ export class Industry implements IIndustry {
 
               // Make our materials if they are producable
               if (producableFrac > 0 && prod > 0) {
-                for (const reqMatName in this.reqMats) {
+                for (const reqMatName of Object.keys(this.reqMats)) {
                   const reqMat = this.reqMats[reqMatName];
                   if (reqMat === undefined) continue;
                   const reqMatQtyNeeded = reqMat * prod * producableFrac;
@@ -729,7 +729,7 @@ export class Industry implements IIndustry {
                     Math.pow(warehouse.materials["AICores"].qty, this.aiFac) / 10e3;
                 }
               } else {
-                for (const reqMatName in this.reqMats) {
+                for (const reqMatName of Object.keys(this.reqMats)) {
                   if (this.reqMats.hasOwnProperty(reqMatName)) {
                     warehouse.materials[reqMatName].prd = 0;
                   }
@@ -745,7 +745,7 @@ export class Industry implements IIndustry {
               //If this doesn't produce any materials, then it only creates
               //Products. Creating products will consume materials. The
               //Production of all consumed materials must be set to 0
-              for (const reqMatName in this.reqMats) {
+              for (const reqMatName of Object.keys(this.reqMats)) {
                 warehouse.materials[reqMatName].prd = 0;
               }
             }
@@ -753,7 +753,7 @@ export class Industry implements IIndustry {
 
           case "SALE":
             /* Process sale of materials */
-            for (const matName in warehouse.materials) {
+            for (const matName of Object.keys(warehouse.materials)) {
               if (warehouse.materials.hasOwnProperty(matName)) {
                 const mat = warehouse.materials[matName];
                 if (mat.sCost < 0 || mat.sllman[0] === false) {
@@ -884,7 +884,7 @@ export class Industry implements IIndustry {
             break;
 
           case "EXPORT":
-            for (const matName in warehouse.materials) {
+            for (const matName of Object.keys(warehouse.materials)) {
               if (warehouse.materials.hasOwnProperty(matName)) {
                 const mat = warehouse.materials[matName];
                 mat.totalExp = 0; //Reset export
@@ -996,7 +996,7 @@ export class Industry implements IIndustry {
 
     //Create products
     if (this.state === "PRODUCTION") {
-      for (const prodName in this.products) {
+      for (const prodName of Object.keys(this.products)) {
         const prod = this.products[prodName];
         if (prod === undefined) continue;
         if (!prod.fin) {
@@ -1028,7 +1028,7 @@ export class Industry implements IIndustry {
     }
 
     //Produce Products
-    for (const prodName in this.products) {
+    for (const prodName of Object.keys(this.products)) {
       if (this.products.hasOwnProperty(prodName)) {
         const prod = this.products[prodName];
         if (prod instanceof Product && prod.fin) {
@@ -1070,7 +1070,7 @@ export class Industry implements IIndustry {
 
             //Calculate net change in warehouse storage making the Products will cost
             let netStorageSize = product.siz;
-            for (const reqMatName in product.reqMats) {
+            for (const reqMatName of Object.keys(product.reqMats)) {
               if (product.reqMats.hasOwnProperty(reqMatName)) {
                 const normQty = product.reqMats[reqMatName];
                 netStorageSize -= MaterialSizes[reqMatName] * normQty;
@@ -1087,7 +1087,7 @@ export class Industry implements IIndustry {
 
             //Make sure we have enough resources to make our Products
             let producableFrac = 1;
-            for (const reqMatName in product.reqMats) {
+            for (const reqMatName of Object.keys(product.reqMats)) {
               if (product.reqMats.hasOwnProperty(reqMatName)) {
                 const req = product.reqMats[reqMatName] * prod;
                 if (warehouse.materials[reqMatName].qty < req) {
@@ -1098,7 +1098,7 @@ export class Industry implements IIndustry {
 
             //Make our Products if they are producable
             if (producableFrac > 0 && prod > 0) {
-              for (const reqMatName in product.reqMats) {
+              for (const reqMatName of Object.keys(product.reqMats)) {
                 if (product.reqMats.hasOwnProperty(reqMatName)) {
                   const reqMatQtyNeeded = product.reqMats[reqMatName] * prod * producableFrac;
                   warehouse.materials[reqMatName].qty -= reqMatQtyNeeded;
@@ -1117,7 +1117,7 @@ export class Industry implements IIndustry {
           case "SALE": {
             //Process sale of Products
             product.pCost = 0; //Estimated production cost
-            for (const reqMatName in product.reqMats) {
+            for (const reqMatName of Object.keys(product.reqMats)) {
               if (product.reqMats.hasOwnProperty(reqMatName)) {
                 product.pCost += product.reqMats[reqMatName] * warehouse.materials[reqMatName].bCost;
               }
@@ -1253,7 +1253,7 @@ export class Industry implements IIndustry {
   }
 
   discontinueProduct(product: Product): void {
-    for (const productName in this.products) {
+    for (const productName of Object.keys(this.products)) {
       if (this.products.hasOwnProperty(productName)) {
         if (product === this.products[productName]) {
           delete this.products[productName];
@@ -1358,7 +1358,7 @@ export class Industry implements IIndustry {
     // Since ResearchTree data isnt saved, we'll update the Research Tree data
     // based on the stored 'researched' property in the Industry object
     if (Object.keys(researchTree.researched).length !== Object.keys(this.researched).length) {
-      for (const research in this.researched) {
+      for (const research of Object.keys(this.researched)) {
         researchTree.research(research);
       }
     }

src/Corporation/OfficeSpace.ts

@@ -103,7 +103,7 @@ export class OfficeSpace {
 
   calculateEmployeeProductivity(corporation: ICorporation, industry: IIndustry): void {
     //Reset
-    for (const name in this.employeeProd) {
+    for (const name of Object.keys(this.employeeProd)) {
       this.employeeProd[name] = 0;
     }
 

src/Corporation/Product.ts

@@ -198,7 +198,7 @@ export class Product {
 
     //Calculate the product's required materials
     //For now, just set it to be the same as the requirements to make materials
-    for (const matName in industry.reqMats) {
+    for (const matName of Object.keys(industry.reqMats)) {
       if (industry.reqMats.hasOwnProperty(matName)) {
         const reqMat = industry.reqMats[matName];
         if (reqMat === undefined) continue;
@@ -209,7 +209,7 @@ export class Product {
     //Calculate the product's size
     //For now, just set it to be the same size as the requirements to make materials
     this.siz = 0;
-    for (const matName in industry.reqMats) {
+    for (const matName of Object.keys(industry.reqMats)) {
       const reqMat = industry.reqMats[matName];
       if (reqMat === undefined) continue;
       this.siz += MaterialSizes[matName] * reqMat;

src/Corporation/Warehouse.ts

@@ -85,7 +85,7 @@ export class Warehouse {
   // Re-calculate how much space is being used by this Warehouse
   updateMaterialSizeUsed(): void {
     this.sizeUsed = 0;
-    for (const matName in this.materials) {
+    for (const matName of Object.keys(this.materials)) {
       const mat = this.materials[matName];
       if (MaterialSizes.hasOwnProperty(matName)) {
         this.sizeUsed += mat.qty * MaterialSizes[matName];

src/Corporation/ui/IndustryOffice.tsx

@@ -26,6 +26,7 @@ import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableRow from "@mui/material/TableRow";
 import { TableCell } from "../../ui/React/Table";
+import { Box } from "@mui/material";
 
 interface IProps {
   office: OfficeSpace;
@@ -430,51 +431,46 @@ export function IndustryOffice(props: IProps): React.ReactElement {
       <Typography>
         Size: {props.office.employees.length} / {props.office.size} employees
       </Typography>
-      <Tooltip title={<Typography>Automatically hires an employee and gives him/her a random name</Typography>}>
-        <span>
-          <Button disabled={props.office.atCapacity()} onClick={autohireEmployeeButtonOnClick}>
-            Hire Employee
-          </Button>
-        </span>
-      </Tooltip>
-      <br />
-      <Tooltip title={<Typography>Upgrade the office's size so that it can hold more employees!</Typography>}>
-        <span>
-          <Button disabled={corp.funds < 0} onClick={() => setUpgradeOfficeSizeOpen(true)}>
-            Upgrade size
-          </Button>
-        </span>
-      </Tooltip>
-      <UpgradeOfficeSizeModal
-        rerender={props.rerender}
-        office={props.office}
-        open={upgradeOfficeSizeOpen}
-        onClose={() => setUpgradeOfficeSizeOpen(false)}
-      />
-
-      {!division.hasResearch("AutoPartyManager") && (
-        <>
-          <Tooltip
-            title={<Typography>Throw an office party to increase your employee's morale and happiness</Typography>}
-          >
-            <span>
-              <Button disabled={corp.funds < 0} onClick={() => setThrowPartyOpen(true)}>
-                Throw Party
-              </Button>
-            </span>
+      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr', width: 'fit-content' }}>
+        <Box sx={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
+          <Tooltip title={<Typography>Automatically hires an employee and gives him/her a random name</Typography>}>
+            <Button disabled={props.office.atCapacity()} onClick={autohireEmployeeButtonOnClick}>
+              Hire Employee
+            </Button>
           </Tooltip>
-          <ThrowPartyModal
+          <Tooltip title={<Typography>Upgrade the office's size so that it can hold more employees!</Typography>}>
+            <Button disabled={corp.funds < 0} onClick={() => setUpgradeOfficeSizeOpen(true)}>
+              Upgrade size
+            </Button>
+          </Tooltip>
+          <UpgradeOfficeSizeModal
             rerender={props.rerender}
             office={props.office}
-            open={throwPartyOpen}
-            onClose={() => setThrowPartyOpen(false)}
+            open={upgradeOfficeSizeOpen}
+            onClose={() => setUpgradeOfficeSizeOpen(false)}
           />
-        </>
-      )}
 
-      <br />
+          {!division.hasResearch("AutoPartyManager") && (
+            <>
+              <Tooltip
+                title={<Typography>Throw an office party to increase your employee's morale and happiness</Typography>}
+              >
+                <Button disabled={corp.funds < 0} onClick={() => setThrowPartyOpen(true)}>
+                  Throw Party
+                </Button>
+              </Tooltip>
+              <ThrowPartyModal
+                rerender={props.rerender}
+                office={props.office}
+                open={throwPartyOpen}
+                onClose={() => setThrowPartyOpen(false)}
+              />
+            </>
+          )}
 
-      <SwitchButton manualMode={employeeManualAssignMode} switchMode={setEmployeeManualAssignMode} />
+        </Box>
+        <SwitchButton manualMode={employeeManualAssignMode} switchMode={setEmployeeManualAssignMode} />
+      </Box>
       {employeeManualAssignMode ? (
         <ManualManagement rerender={props.rerender} office={props.office} />
       ) : (

src/Corporation/ui/IndustryOverview.tsx

@@ -215,7 +215,7 @@ function Upgrades(props: { office: OfficeSpace; rerender: () => void }): React.R
   const corp = useCorporation();
   const division = useDivision();
   const upgrades = [];
-  for (const index in IndustryUpgrades) {
+  for (const index of Object.keys(IndustryUpgrades)) {
     const upgrade = IndustryUpgrades[index];
 
     // AutoBrew research disables the Coffee upgrade

src/Corporation/ui/IndustryWarehouse.tsx

@@ -81,7 +81,7 @@ function WarehouseRoot(props: IProps): React.ReactElement {
 
   // Create React components for materials
   const mats = [];
-  for (const matName in props.warehouse.materials) {
+  for (const matName of Object.keys(props.warehouse.materials)) {
     if (!(props.warehouse.materials[matName] instanceof Material)) continue;
     // Only create UI for materials that are relevant for the industry
     if (!isRelevantMaterial(matName, division)) continue;
@@ -99,7 +99,7 @@ function WarehouseRoot(props: IProps): React.ReactElement {
   // Create React components for products
   const products = [];
   if (division.makesProducts && Object.keys(division.products).length > 0) {
-    for (const productName in division.products) {
+    for (const productName of Object.keys(division.products)) {
       const product = division.products[productName];
       if (!(product instanceof Product)) continue;
       products.push(
@@ -109,14 +109,14 @@ function WarehouseRoot(props: IProps): React.ReactElement {
   }
 
   const breakdownItems: JSX.Element[] = [];
-  for (const matName in props.warehouse.materials) {
+  for (const matName of Object.keys(props.warehouse.materials)) {
     const mat = props.warehouse.materials[matName];
     if (!MaterialSizes.hasOwnProperty(matName)) continue;
     if (mat.qty === 0) continue;
     breakdownItems.push(<>{matName}: {numeralWrapper.format(mat.qty * MaterialSizes[matName], "0,0.0")}</>);
   }
 
-  for (const prodName in division.products) {
+  for (const prodName of Object.keys(division.products)) {
     const prod = division.products[prodName];
     if (prod === undefined) continue;
     breakdownItems.push(<>{prodName}: {numeralWrapper.format(prod.data[props.warehouse.loc][0] * prod.siz, "0,0.0")}</>);
@@ -139,13 +139,13 @@ function WarehouseRoot(props: IProps): React.ReactElement {
             {numeralWrapper.formatBigNumber(props.warehouse.size)}
           </Typography>
         </Tooltip>
-
-        <Button disabled={!canAffordUpgrade} onClick={upgradeWarehouseOnClick}>
-          Upgrade Warehouse Size -&nbsp;
-          <MoneyCost money={sizeUpgradeCost} corp={corp} />
-        </Button>
       </Box>
 
+      <Button disabled={!canAffordUpgrade} onClick={upgradeWarehouseOnClick}>
+        Upgrade Warehouse Size -&nbsp;
+        <MoneyCost money={sizeUpgradeCost} corp={corp} />
+      </Button>
+
       <Typography>This industry uses the following equation for its production: </Typography>
       <br />
       <Typography>

src/Corporation/ui/MaterialElem.tsx

@@ -112,7 +112,7 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
 
   return (
     <Paper>
-      <Box display="flex">
+      <Box sx={{ display: 'grid', gridTemplateColumns: '2fr 1fr', m: '5px' }}>
         <Box>
           <Tooltip
             title={
@@ -149,11 +149,10 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
           </Tooltip>
         </Box>
 
-        <Box>
+        <Box sx={{ "& button": { width: '100%' } }}>
           <Tooltip
             title={tutorial ? <Typography>Purchase your required materials to get production started!</Typography> : ""}
           >
-            <span>
               <Button
                 color={tutorial ? "error" : "primary"}
                 onClick={() => setPurchaseMaterialOpen(true)}
@@ -161,7 +160,6 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
               >
                 {purchaseButtonText}
               </Button>
-            </span>
           </Tooltip>
           <PurchaseMaterialModal
             mat={mat}
@@ -177,7 +175,6 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
               <ExportModal mat={mat} open={exportOpen} onClose={() => setExportOpen(false)} />
             </>
           )}
-          <br />
 
           <Button
             color={division.prodMats.includes(props.mat.name) && !mat.sllman[0] ? "error" : "primary"}

src/Corporation/ui/Overview.tsx

@@ -89,19 +89,21 @@ export function Overview({ rerender }: IProps): React.ReactElement {
       <StatsTable rows={multRows} />
       <br />
       <BonusTime />
-      <Tooltip
-        title={
-          <Typography>
-            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.
-          </Typography>
-        }
-      >
-        <Button onClick={() => corp.getStarterGuide(player)}>Getting Started Guide</Button>
-      </Tooltip>
-      {corp.public ? <PublicButtons rerender={rerender} /> : <PrivateButtons rerender={rerender} />}
-      <BribeButton />
+      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', width: 'fit-content' }}>
+        <Tooltip
+          title={
+            <Typography>
+              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.
+            </Typography>
+          }
+        >
+          <Button onClick={() => corp.getStarterGuide(player)}>Getting Started Guide</Button>
+        </Tooltip>
+        {corp.public ? <PublicButtons rerender={rerender} /> : <PrivateButtons rerender={rerender} />}
+        <BribeButton />
+      </Box>
       <br />
       <Upgrades rerender={rerender} />
     </>
@@ -125,11 +127,9 @@ function PrivateButtons({ rerender }: IPrivateButtonsProps): React.ReactElement
   return (
     <>
       <Tooltip title={<Typography>{findInvestorsTooltip}</Typography>}>
-        <span>
-          <Button disabled={!fundingAvailable} onClick={() => setFindInvestorsopen(true)}>
-            Find Investors
-          </Button>
-        </span>
+        <Button disabled={!fundingAvailable} onClick={() => setFindInvestorsopen(true)}>
+          Find Investors
+        </Button>
       </Tooltip>
       <Tooltip
         title={
@@ -143,7 +143,6 @@ function PrivateButtons({ rerender }: IPrivateButtonsProps): React.ReactElement
       </Tooltip>
       <FindInvestorsModal open={findInvestorsopen} onClose={() => setFindInvestorsopen(false)} rerender={rerender} />
       <GoPublicModal open={goPublicopen} onClose={() => setGoPublicopen(false)} rerender={rerender} />
-      <br />
     </>
   );
 }
@@ -201,8 +200,8 @@ function PublicButtons({ rerender }: IPublicButtonsProps): React.ReactElement {
   const sellSharesTooltip = sellSharesOnCd
     ? "Cannot sell shares for " + corp.convertCooldownToString(corp.shareSaleCooldown)
     : "Sell your shares in the company. The money earned from selling your " +
-      "shares goes into your personal account, not the Corporation's. " +
-      "This is one of the only ways to profit from your business venture.";
+    "shares goes into your personal account, not the Corporation's. " +
+    "This is one of the only ways to profit from your business venture.";
 
   const issueNewSharesOnCd = corp.issueNewSharesCooldown > 0;
   const issueNewSharesTooltip = issueNewSharesOnCd
@@ -212,28 +211,21 @@ function PublicButtons({ rerender }: IPublicButtonsProps): React.ReactElement {
   return (
     <>
       <Tooltip title={<Typography>{sellSharesTooltip}</Typography>}>
-        <span>
-          <Button disabled={sellSharesOnCd} onClick={() => setSellSharesOpen(true)}>
-            Sell Shares
-          </Button>
-        </span>
+        <Button disabled={sellSharesOnCd} onClick={() => setSellSharesOpen(true)}>
+          Sell Shares
+        </Button>
       </Tooltip>
       <SellSharesModal open={sellSharesOpen} onClose={() => setSellSharesOpen(false)} rerender={rerender} />
       <Tooltip title={<Typography>Buy back shares you that previously issued or sold at market price.</Typography>}>
-        <span>
-          <Button disabled={corp.issuedShares < 1} onClick={() => setBuybackSharesOpen(true)}>
-            Buyback shares
-          </Button>
-        </span>
+        <Button disabled={corp.issuedShares < 1} onClick={() => setBuybackSharesOpen(true)}>
+          Buyback shares
+        </Button>
       </Tooltip>
       <BuybackSharesModal open={buybackSharesOpen} onClose={() => setBuybackSharesOpen(false)} rerender={rerender} />
-      <br />
       <Tooltip title={<Typography>{issueNewSharesTooltip}</Typography>}>
-        <span>
-          <Button disabled={issueNewSharesOnCd} onClick={() => setIssueNewSharesOpen(true)}>
-            Issue New Shares
-          </Button>
-        </span>
+        <Button disabled={issueNewSharesOnCd} onClick={() => setIssueNewSharesOpen(true)}>
+          Issue New Shares
+        </Button>
       </Tooltip>
       <IssueNewSharesModal open={issueNewSharesOpen} onClose={() => setIssueNewSharesOpen(false)} />
       <Tooltip
@@ -242,7 +234,6 @@ function PublicButtons({ rerender }: IPublicButtonsProps): React.ReactElement {
         <Button onClick={() => setIssueDividendsOpen(true)}>Issue Dividends</Button>
       </Tooltip>
       <IssueDividendsModal open={issueDividendsOpen} onClose={() => setIssueDividendsOpen(false)} />
-      <br />
     </>
   );
 }
@@ -269,11 +260,9 @@ function BribeButton(): React.ReactElement {
             : "Your Corporation is not powerful enough to bribe Faction leaders"
         }
       >
-        <span>
-          <Button disabled={!canBribe} onClick={openBribe}>
-            Bribe Factions
-          </Button>
-        </span>
+        <Button disabled={!canBribe} onClick={openBribe}>
+          Bribe Factions
+        </Button>
       </Tooltip>
       <BribeFactionModal open={open} onClose={() => setOpen(false)} />
     </>

src/Corporation/ui/ProductElem.tsx

@@ -81,7 +81,7 @@ export function ProductElem(props: IProductProps): React.ReactElement {
     );
   } else if (product.sCost) {
     if (isString(product.sCost)) {
-      const sCost = (product.sCost as string).replace(/MP/g, product.pCost + "");
+      const sCost = (product.sCost as string).replace(/MP/g, product.pCost + product.rat / product.mku + "");
       sellButtonText = (
         <>
           {sellButtonText} @ <Money money={eval(sCost)} />

src/Corporation/ui/ResearchModal.tsx

@@ -6,17 +6,18 @@ import { IIndustry } from "../IIndustry";
 import { Research } from "../Actions";
 import { Node } from "../ResearchTree";
 import { ResearchMap } from "../ResearchMap";
+import { Settings } from "../../Settings/Settings";
 import { dialogBoxCreate } from "../../ui/React/DialogBox";
 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 ListItemButton from "@mui/material/ListItemButton";
-import ListItemText from "@mui/material/ListItemText";
 import Collapse from "@mui/material/Collapse";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import ExpandLess from "@mui/icons-material/ExpandLess";
+import CheckIcon from '@mui/icons-material/Check';
+
 interface INodeProps {
   n: Node | null;
   division: IIndustry;
@@ -42,8 +43,8 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
 
     dialogBoxCreate(
       `Researched ${n.text}. It may take a market cycle ` +
-        `(~${CorporationConstants.SecsPerMarketCycle} seconds) before the effects of ` +
-        `the Research apply.`,
+      `(~${CorporationConstants.SecsPerMarketCycle} seconds) before the effects of ` +
+      `the Research apply.`,
     );
   }
 
@@ -52,8 +53,8 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
     color = "info";
   }
 
-  const but = (
-    <Box>
+  const wrapInTooltip = (ele: React.ReactElement): React.ReactElement => {
+    return (
       <Tooltip
         title={
           <Typography>
@@ -63,12 +64,22 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
           </Typography>
         }
       >
+        {ele}
+      </Tooltip>
+    )
+  }
+
+  const but = (
+    <Box>
+      {wrapInTooltip(
         <span>
-          <Button color={color} disabled={disabled && !n.researched} onClick={research}>
-            {n.text}
+          <Button color={color} disabled={disabled && !n.researched} onClick={research}
+            style={{ width: '100%', textAlign: 'left', justifyContent: 'unset' }}
+          >
+            {n.researched && (<CheckIcon sx={{ mr: 1 }} />)}{n.text}
           </Button>
         </span>
-      </Tooltip>
+      )}
     </Box>
   );
 
@@ -76,15 +87,25 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
 
   return (
     <Box>
-      <Box display="flex">
-        {but}
-        <ListItemButton onClick={() => setOpen((old) => !old)}>
-          <ListItemText />
+      <Box display="flex" sx={{ border: '1px solid ' + Settings.theme.well }}>
+        {wrapInTooltip(
+          <span style={{ width: '100%' }}>
+            <Button color={color} disabled={disabled && !n.researched} onClick={research} sx={{
+              width: '100%',
+              textAlign: 'left',
+              justifyContent: 'unset',
+              borderColor: Settings.theme.button
+            }}>
+              {n.researched && (<CheckIcon sx={{ mr: 1 }} />)}{n.text}
+            </Button>
+          </span>
+        )}
+        <Button onClick={() => setOpen((old) => !old)} sx={{ borderColor: Settings.theme.button, minWidth: 'fit-content' }}>
           {open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />}
-        </ListItemButton>
+        </Button>
       </Box>
       <Collapse in={open} unmountOnExit>
-        <Box m={4}>
+        <Box m={1}>
           {n.children.map((m) => (
             <Upgrade key={m.text} division={division} n={m} />
           ))}
@@ -108,7 +129,7 @@ export function ResearchModal(props: IProps): React.ReactElement {
   return (
     <Modal open={props.open} onClose={props.onClose}>
       <Upgrade division={props.industry} n={researchTree.root} />
-      <Typography>
+      <Typography sx={{ mt: 1 }}>
         Research points: {props.industry.sciResearch.qty.toFixed(3)}
         <br />
         Multipliers from research:

src/Corporation/ui/SmartSupplyModal.tsx

@@ -61,7 +61,7 @@ export function SmartSupplyModal(props: IProps): React.ReactElement {
 
   // Create React components for materials
   const mats = [];
-  for (const matName in props.warehouse.materials) {
+  for (const matName of Object.keys(props.warehouse.materials)) {
     if (!(props.warehouse.materials[matName] instanceof Material)) continue;
     if (!Object.keys(division.reqMats).includes(matName)) continue;
     mats.push(<Leftover key={matName} warehouse={props.warehouse} matName={matName} />);