Added support of duplicate fragment

Fragments sharing the same effect will now be merged in the summary.

src/CotMG/ui/ActiveFragmentSummary.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { ActiveFragment } from "../ActiveFragment";
 import { IStaneksGift } from "../IStaneksGift";
 import { FragmentType, Effect } from "../FragmentType";
@@ -6,45 +6,84 @@ import { numeralWrapper } from "../../ui/numeralFormat";
 
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
+import Table from "@mui/material/Table";
+import { TableBody, TableCell, TableRow } from "@mui/material";
 
 type IProps = {
   gift: IStaneksGift;
 };
 
-export function ActiveFragmentSummary(props: IProps): React.ReactElement {
-  const [, setC] = useState(new Date());
-
-  useEffect(() => {
-    const id = setInterval(() => setC(new Date()), 250);
-
-    return () => clearInterval(id);
-  }, []);
-
-  const effects = props.gift.fragments.map((fragment: ActiveFragment) => {
-    const f = fragment.fragment();
-
-    let effect = "N/A";
-    effect = "[" + fragment.x + "," + fragment.y + "] ";
-    // Boosters and cooling don't deal with heat.
-    if ([FragmentType.Booster, FragmentType.None, FragmentType.Delete].includes(f.type)) {
-      return "";
-    } else if (Effect(f.type).includes("+x%")) {
-      effect += Effect(f.type).replace(/-*x%/, numeralWrapper.formatPercentage(props.gift.effect(fragment) - 1));
-    } else if (Effect(f.type).includes("-x%")) {
-      const effectAmt = props.gift.effect(fragment);
-      const perc = numeralWrapper.formatPercentage(1 - 1 / effectAmt);
-      effect += Effect(f.type).replace(/-x%/, perc);
+function formatEffect(effect: number, type: FragmentType): string {
+  if (Effect(type).includes("+x%")) {
+    return Effect(type).replace(/-*x%/, numeralWrapper.formatPercentage(effect - 1));
+  } else if (Effect(type).includes("-x%")) {
+    const perc = numeralWrapper.formatPercentage(1 - 1 / effect);
+    return Effect(type).replace(/-x%/, perc);
+  } else {
+    return Effect(type);
   }
+}
 
-    return <Typography>{effect}</Typography>;
+export function ActiveFragmentSummary(props: IProps): React.ReactElement {
+  const summary: { coordinate: { x: number; y: number }[]; effect: number; type: FragmentType }[] = [];
+  // Iterate through Active Fragment
+  props.gift.fragments.forEach((fragment: ActiveFragment) => {
+    const f = fragment.fragment();
+    // Discard ToolBrush and Booster.
+    if (![FragmentType.Booster, FragmentType.None, FragmentType.Delete].includes(f.type)) {
+      // Check for an existing entry in summary for this fragment's type
+      const entry = summary.find((e) => {
+        return e.type === f.type;
+      });
+      if (entry) {
+        // If there's one, update the existing entry
+        entry.effect *= props.gift.effect(fragment);
+        entry.coordinate.push({ x: fragment.x, y: fragment.y });
+      } else {
+        // If there's none, create a new entry
+        summary.push({
+          coordinate: [{ x: fragment.x, y: fragment.y }],
+          effect: props.gift.effect(fragment),
+          type: f.type,
+        });
+      }
+    }
   });
 
   return (
     <Paper sx={{ mb: 1 }}>
-      <Typography variant="h5">Summary of current effects:</Typography>
-      {effects.length <= 0 && <Typography>None currently.</Typography>}
-      <Box sx={{ display: "list", width: "fit-content", gridTemplateColumns: "repeat(1, 1fr)" }}>{effects}</Box>
+      <Typography variant="h5">Summary of active fragments:</Typography>
+      {summary.length <= 0 && <Typography>None currently.</Typography>}
+      <Table sx={{ display: "table", width: "100%" }}>
+        <TableBody>
+          <TableRow>
+            <TableCell sx={{ borderBottom: "none", p: 0, m: 0 }}>
+              <Typography>Coordinate</Typography>
+            </TableCell>
+
+            <TableCell sx={{ borderBottom: "none", p: 0, m: 0 }}>
+              <Typography>Effect</Typography>
+            </TableCell>
+          </TableRow>
+          {summary.map((entry) => {
+            return (
+              <TableRow>
+                <TableCell sx={{ borderBottom: "none", p: 0, m: 0 }}>
+                  <Typography>
+                    {entry.coordinate.map((coord) => {
+                      return "[" + coord.x + "," + coord.y + "]";
+                    })}
+                  </Typography>
+                </TableCell>
+
+                <TableCell sx={{ borderBottom: "none", p: 0, m: 0 }}>
+                  <Typography>{formatEffect(entry.effect, entry.type)}</Typography>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
     </Paper>
   );
 }