Merge branch 'danielyxie:dev' into dev

src/PersonObjects/Sleeve/SleeveHelpers.ts

@@ -5,7 +5,6 @@ import { IPlayer } from "../IPlayer";
 
 import { Augmentation } from "../../Augmentation/Augmentation";
 import { Augmentations } from "../../Augmentation/Augmentations";
-import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
 import { Faction } from "../../Faction/Faction";
 import { Factions } from "../../Faction/Factions";
 
@@ -22,9 +21,6 @@ export function findSleevePurchasableAugs(sleeve: Sleeve, p: IPlayer): Augmentat
   // Helper function that helps filter out augs that are already owned
   // and augs that aren't allowed for sleeves
   function isAvailableForSleeve(aug: Augmentation): boolean {
-    if (aug.name === AugmentationNames.NeuroFluxGovernor) {
-      return false;
-    }
     if (ownedAugNames.includes(aug.name)) {
       return false;
     }

src/PersonObjects/Sleeve/ui/SleeveAugmentationsModal.tsx

@@ -1,20 +1,10 @@
-import React, { useState, useEffect } from "react";
+import { Container, Typography, Paper } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { PurchasableAugmentations } from "../../../Augmentation/ui/PurchasableAugmentations";
+import { use } from "../../../ui/Context";
+import { Modal } from "../../../ui/React/Modal";
 import { Sleeve } from "../Sleeve";
 import { findSleevePurchasableAugs } from "../SleeveHelpers";
-import { Augmentations } from "../../../Augmentation/Augmentations";
-import { Augmentation } from "../../../Augmentation/Augmentation";
-import { Money } from "../../../ui/React/Money";
-import { Modal } from "../../../ui/React/Modal";
-import { use } from "../../../ui/Context";
-import Typography from "@mui/material/Typography";
-import Tooltip from "@mui/material/Tooltip";
-import Paper from "@mui/material/Paper";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import TableBody from "@mui/material/TableBody";
-import Table from "@mui/material/Table";
-import { TableCell } from "../../../ui/React/Table";
-import TableRow from "@mui/material/TableRow";
 
 interface IProps {
   open: boolean;
@@ -42,80 +32,34 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
   // and you must also have enough rep in that faction in order to purchase it.
   const availableAugs = findSleevePurchasableAugs(props.sleeve, player);
 
-  function purchaseAugmentation(aug: Augmentation): void {
-    props.sleeve.tryBuyAugmentation(player, aug);
-    rerender();
-  }
-
   return (
     <Modal open={props.open} onClose={props.onClose}>
-      <>
-        <Box sx={{ mx: 1 }}>
-          <Typography>
-            You can purchase Augmentations for your Duplicate Sleeves. These Augmentations have the same effect as they
-            would for you. You can only purchase Augmentations that you have unlocked through Factions.
-            <br />
-            <br />
-            When purchasing an Augmentation for a Duplicate Sleeve, they are immediately installed. This means that the
-            Duplicate Sleeve will immediately lose all of its stat experience.
-          </Typography>
-          <Box component={Paper} sx={{ my: 1, p: 1 }}>
-            <Table size="small" padding="none">
-              <TableBody>
-                {availableAugs.map((aug) => {
-                  return (
-                    <TableRow key={aug.name}>
-                      <TableCell>
-                        <Button onClick={() => purchaseAugmentation(aug)} disabled={player.money < aug.startingCost}>
-                          Buy
-                        </Button>
-                      </TableCell>
-                      <TableCell>
-                        <Box display="flex">
-                          <Tooltip title={aug.stats || ""}>
-                            <Typography>{aug.name}</Typography>
-                          </Tooltip>
-                        </Box>
-                      </TableCell>
-                      <TableCell>
-                        <Money money={aug.startingCost} player={player} />
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </Box>
-        </Box>
-
-        {ownedAugNames.length > 0 && (
-          <>
-            <Typography sx={{ mx: 1 }}>Owned Augmentations:</Typography>
-            <Box display="grid" sx={{ gridTemplateColumns: "repeat(5, 1fr)", m: 1 }}>
-              {ownedAugNames.map((augName) => {
-                const aug = Augmentations[augName];
-                const info = typeof aug.info === "string" ? <span>{aug.info}</span> : aug.info;
-                const tooltip = (
-                  <>
-                    {info}
-                    <br />
-                    <br />
-                    {aug.stats}
-                  </>
-                );
-
-                return (
-                  <Tooltip key={augName} title={<Typography>{tooltip}</Typography>}>
-                    <Paper sx={{ p: 1 }}>
-                      <Typography>{augName}</Typography>
-                    </Paper>
-                  </Tooltip>
-                );
-              })}
-            </Box>
-          </>
-        )}
-      </>
+      <Container component={Paper} disableGutters maxWidth="lg" sx={{ mx: 0, mb: 1, p: 1 }}>
+        <Typography>
+          You can purchase Augmentations for your Duplicate Sleeves. These Augmentations have the same effect as they
+          would for you. You can only purchase Augmentations that you have unlocked through Factions.
+          <br />
+          <br />
+          When purchasing an Augmentation for a Duplicate Sleeve, they are immediately installed. This means that the
+          Duplicate Sleeve will immediately lose all of its stat experience.
+          <br />
+          <br />
+          Augmentations will appear below as they become available.
+        </Typography>
+      </Container>
+      <PurchasableAugmentations
+        augNames={availableAugs.map((aug) => aug.name)}
+        ownedAugNames={ownedAugNames}
+        player={player}
+        canPurchase={(player, aug) => {
+          return player.money > aug.startingCost;
+        }}
+        purchaseAugmentation={(player, aug, _showModal) => {
+          props.sleeve.tryBuyAugmentation(player, aug);
+          rerender();
+        }}
+        sleeveAugs
+      />
     </Modal>
   );
 }