Merge pull request #3622 from borisflagell/#1754---stanek

UI: FIX #1754  Stanek effect summary & slight tweak.

src/CotMG/ui/ActiveFragmentSummary.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { ActiveFragment } from "../ActiveFragment";
+import { IStaneksGift } from "../IStaneksGift";
+import { FragmentType, Effect } from "../FragmentType";
+import { numeralWrapper } from "../../ui/numeralFormat";
+
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+import Table from "@mui/material/Table";
+import { TableBody, TableCell, TableRow } from "@mui/material";
+
+type IProps = {
+  gift: IStaneksGift;
+};
+
+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);
+  }
+}
+
+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 active fragments:</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>
+  );
+}

src/CotMG/ui/FragmentInspector.tsx

@@ -25,23 +25,21 @@ export function FragmentInspector(props: IProps): React.ReactElement {
 
   if (props.fragment === undefined) {
     return (
-      <Paper>
+      <Paper sx={{ flexGrow: 1 }}>
         <Typography>
+          [X, Y] {props.x}, {props.y}
+          <br />
+          <br />
           ID: N/A
           <br />
           Effect: N/A
           <br />
-          Magnitude: N/A
+          Base Power: N/A
           <br />
           Charge: N/A
           <br />
-          Heat: N/A
+          root [X, Y] N/A
           <br />
-          Effect: N/A
-          <br />
-          [X, Y] N/A
-          <br />
-          [X, Y] {props.x}, {props.y}
         </Typography>
       </Paper>
     );
@@ -63,8 +61,11 @@ export function FragmentInspector(props: IProps): React.ReactElement {
   }
 
   return (
-    <Paper>
+    <Paper sx={{ flexGrow: 1 }}>
       <Typography>
+        [X, Y] {props.x}, {props.y}
+        <br />
+        <br />
         ID: {props.fragment.id}
         <br />
         Effect: {effect}
@@ -73,10 +74,8 @@ export function FragmentInspector(props: IProps): React.ReactElement {
         <br />
         Charge: {charge}
         <br />
-        <br />
         root [X, Y] {props.fragment.x}, {props.fragment.y}
         <br />
-        [X, Y] {props.x}, {props.y}
       </Typography>
     </Paper>
   );

src/CotMG/ui/MainBoard.tsx

@@ -9,6 +9,9 @@ import Button from "@mui/material/Button";
 import { Table } from "../../ui/React/Table";
 import { Grid } from "./Grid";
 import { zeros, calculateGrid } from "../Helper";
+import { ActiveFragmentSummary } from "./ActiveFragmentSummary";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
 
 interface IProps {
   gift: IStaneksGift;
@@ -84,9 +87,8 @@ export function MainBoard(props: IProps): React.ReactElement {
 
   return (
     <>
-      <Button onClick={clear}>Clear</Button>
-      <Box display="flex">
-        <Table>
+      <Box display="flex" sx={{ mb: 1 }}>
+        <Table sx={{ mr: 1 }}>
           <Grid
             width={props.gift.width()}
             height={props.gift.height()}
@@ -99,7 +101,22 @@ export function MainBoard(props: IProps): React.ReactElement {
         </Table>
         <FragmentInspector gift={props.gift} x={pos[0]} y={pos[1]} fragment={props.gift.fragmentAt(pos[0], pos[1])} />
       </Box>
+      <Box display="flex" sx={{ mb: 1 }}>
         <FragmentSelector gift={props.gift} selectFragment={updateSelectedFragment} />
+      </Box>
+
+      <ActiveFragmentSummary gift={props.gift} />
+
+      <Tooltip
+        title={
+          <Typography>
+            WARNING : This will remove all active fragment from the grid. <br />
+            All cumulated charges will be lost.
+          </Typography>
+        }
+      >
+        <Button onClick={clear}>Clear grid</Button>
+      </Tooltip>
     </>
   );
 }

src/CotMG/ui/StaneksGiftRoot.tsx

@@ -10,6 +10,7 @@ import Typography from "@mui/material/Typography";
 import { ActiveFragment } from "../ActiveFragment";
 import { Fragments } from "../Fragment";
 import { DummyGrid } from "./DummyGrid";
+import Container from "@mui/material/Container";
 
 type IProps = {
   staneksGift: IStaneksGift;
@@ -22,7 +23,7 @@ export function StaneksGiftRoot({ staneksGift }: IProps): React.ReactElement {
   }
   useEffect(() => StaneksGiftEvents.subscribe(rerender), []);
   return (
-    <>
+    <Container maxWidth="lg" disableGutters sx={{ mx: 0 }}>
       <Typography variant="h4">
         Stanek's Gift
         <Info
@@ -184,18 +185,18 @@ export function StaneksGiftRoot({ staneksGift }: IProps): React.ReactElement {
         />
       </Typography>
 
-      <Typography>
+      <Typography sx={{ mb: 1 }}>
         The gift is a grid on which you can place upgrades called fragments. The main type of fragment increases a stat,
         like your hacking skill or agility exp. Once a stat fragment is placed it then needs to be charged via scripts
         in order to become useful. The other kind of fragments are called booster fragments. They increase the
         efficiency of the neighboring fragments (not diagonally). Use Q/E to rotate fragments.
       </Typography>
       {staneksGift.storedCycles > 5 && (
-        <Typography>
+        <Typography sx={{ mb: 1 }}>
           Bonus time: {convertTimeMsToTimeElapsedString(CONSTANTS._idleSpeed * staneksGift.storedCycles)}
         </Typography>
       )}
       <MainBoard gift={staneksGift} />
-    </>
+    </Container>
   );
 }