From 705a56f3bdcb859179144cdafab7eeb8832f7eb9 Mon Sep 17 00:00:00 2001
From: borisflagell <clement.delrue@gmail.com>
Date: Sat, 7 May 2022 12:55:56 +0200
Subject: [PATCH] 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 | 50 ++++++++++++++++++++++++++
 src/CotMG/ui/FragmentInspector.tsx     | 21 ++++++-----
 src/CotMG/ui/MainBoard.tsx             | 25 ++++++++++---
 src/CotMG/ui/StaneksGiftRoot.tsx       |  9 ++---
 4 files changed, 86 insertions(+), 19 deletions(-)
 create mode 100644 src/CotMG/ui/ActiveFragmentSummary.tsx

diff --git a/src/CotMG/ui/ActiveFragmentSummary.tsx b/src/CotMG/ui/ActiveFragmentSummary.tsx
new file mode 100644
index 000000000..a2ea7297d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/CotMG/ui/FragmentInspector.tsx b/src/CotMG/ui/FragmentInspector.tsx
index 7365ad4a9..3582c3b55 100644
--- a/src/CotMG/ui/FragmentInspector.tsx
+++ b/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>
   );
diff --git a/src/CotMG/ui/MainBoard.tsx b/src/CotMG/ui/MainBoard.tsx
index 873592b76..86361e876 100644
--- a/src/CotMG/ui/MainBoard.tsx
+++ b/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>
-      <FragmentSelector gift={props.gift} selectFragment={updateSelectedFragment} />
+      <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>
     </>
   );
 }
diff --git a/src/CotMG/ui/StaneksGiftRoot.tsx b/src/CotMG/ui/StaneksGiftRoot.tsx
index 88b226605..eaacc58ad 100644
--- a/src/CotMG/ui/StaneksGiftRoot.tsx
+++ b/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>
   );
 }