From 34ca4d236b61cc2bb87f7ce1a95de6bb1b6e0fe6 Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Fri, 8 Apr 2022 16:28:43 -0500
Subject: [PATCH] Add ability to clear queued augs from dev menu

---
 src/DevMenu/ui/Augmentations.tsx | 101 +++++++++++++++----------------
 1 file changed, 48 insertions(+), 53 deletions(-)

diff --git a/src/DevMenu/ui/Augmentations.tsx b/src/DevMenu/ui/Augmentations.tsx
index 3927ac5fd..1a2295b14 100644
--- a/src/DevMenu/ui/Augmentations.tsx
+++ b/src/DevMenu/ui/Augmentations.tsx
@@ -1,19 +1,18 @@
+import { Clear, ExpandMore, Reply, ReplyAll } from "@mui/icons-material";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Button,
+  IconButton,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Typography
+} from "@mui/material";
 import React, { useState } from "react";
-
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-
-import Select, { SelectChangeEvent } from "@mui/material/Select";
-import { IPlayer } from "../../PersonObjects/IPlayer";
 import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
-import Typography from "@mui/material/Typography";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import ReplyAllIcon from "@mui/icons-material/ReplyAll";
-import ReplyIcon from "@mui/icons-material/Reply";
-import ClearIcon from "@mui/icons-material/Clear";
+import { IPlayer } from "../../PersonObjects/IPlayer";
 
 interface IProps {
   player: IPlayer;
@@ -39,50 +38,46 @@ export function Augmentations(props: IProps): React.ReactElement {
     props.player.augmentations = [];
   }
 
+  function clearQueuedAugs(): void {
+    props.player.queuedAugmentations = [];
+  }
+
   return (
     <Accordion TransitionProps={{ unmountOnExit: true }}>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+      <AccordionSummary expandIcon={<ExpandMore />}>
         <Typography>Augmentations</Typography>
       </AccordionSummary>
       <AccordionDetails>
-        <table>
-          <tbody>
-            <tr>
-              <td>
-                <Typography>Aug:</Typography>
-              </td>
-              <td>
-                <Select
-                  onChange={setAugmentationDropdown}
-                  value={augmentation}
-                  startAdornment={
-                    <>
-                      <IconButton onClick={queueAllAugs} size="large">
-                        <ReplyAllIcon />
-                      </IconButton>
-                      <IconButton onClick={queueAug} size="large">
-                        <ReplyIcon />
-                      </IconButton>
-                    </>
-                  }
-                  endAdornment={
-                    <>
-                      <IconButton onClick={clearAugs} size="large">
-                        <ClearIcon />
-                      </IconButton>
-                    </>
-                  }
-                >
-                  {Object.values(AugmentationNames).map((aug) => (
-                    <MenuItem key={aug} value={aug}>
-                      {aug}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <Select
+          onChange={setAugmentationDropdown}
+          value={augmentation}
+          startAdornment={
+            <>
+              <IconButton onClick={queueAllAugs} size="large">
+                <ReplyAll />
+              </IconButton>
+              <IconButton onClick={queueAug} size="large">
+                <Reply />
+              </IconButton>
+            </>
+          }
+          endAdornment={
+            <>
+              <IconButton onClick={clearAugs} size="large">
+                <Clear />
+              </IconButton>
+            </>
+          }
+        >
+          {Object.values(AugmentationNames).map((aug) => (
+            <MenuItem key={aug} value={aug}>
+              {aug}
+            </MenuItem>
+          ))}
+        </Select>
+        <Button sx={{ display: "block" }} onClick={clearQueuedAugs}>
+          Clear Queued Augmentations
+        </Button>
       </AccordionDetails>
     </Accordion>
   );