prettier

Add a summary to the stanek page

Tweak UI

Ran Prettier & lint, added a margin to a stanek page element

revert shit

src/CotMG/ui/ActiveFragmentSummary.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } 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 Box from "@mui/material/Box";
+
+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);
+    }
+
+    return <Typography>{effect}</Typography>;
+  });
+
+  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>
+    </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/Tooltip";
+import Typography from "@mui/material/Typography/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>
   );
 }