sg

src/CotMG/ui/FragmentInspector.tsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect } from "react";
 import { ActiveFragment } from "../ActiveFragment";
-import { FragmentType } from "../FragmentType";
+import { IStaneksGift } from "../IStaneksGift";
+import { FragmentType, Effect } from "../FragmentType";
 import { numeralWrapper } from "../../ui/numeralFormat";
-import { CalculateEffect } from "../formulas/effect";
 
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 
 type IProps = {
+  gift: IStaneksGift;
   fragment: ActiveFragment | null;
   x: number;
   y: number;
@@ -28,7 +29,7 @@ export function FragmentInspector(props: IProps): React.ReactElement {
         <Typography>
           ID: N/A
           <br />
-          Type: N/A
+          Effect: N/A
           <br />
           Magnitude: N/A
           <br />
@@ -48,24 +49,26 @@ export function FragmentInspector(props: IProps): React.ReactElement {
   const f = props.fragment.fragment();
 
   let charge = numeralWrapper.formatStaneksGiftCharge(props.fragment.charge);
+  let effect = "N/A";
   // Boosters and cooling don't deal with heat.
-  if (f.type === FragmentType.Booster) {
+  if ([FragmentType.Booster, FragmentType.None, FragmentType.Delete].includes(f.type)) {
     charge = "N/A";
+    effect = `${f.power}x adjacent fragment power`;
+  } else {
+    effect = Effect(f.type).replace("+x%", numeralWrapper.formatPercentage(props.gift.effect(props.fragment) - 1));
   }
-  const effect = numeralWrapper.format(CalculateEffect(props.fragment.charge, f.power) - 1, "+0.00%");
 
   return (
     <Paper>
       <Typography>
         ID: {props.fragment.id}
         <br />
-        Type: {FragmentType[f.type]}
+        Effect: {effect}
         <br />
         Power: {numeralWrapper.formatStaneksGiftPower(f.power)}
         <br />
         Charge: {charge}
         <br />
-        Effect: {effect}
         <br />
         root [X, Y] {props.fragment.x}, {props.fragment.y}
         <br />

src/CotMG/ui/FragmentSelector.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Fragments, Fragment, NoneFragment, DeleteFragment } from "../Fragment";
-import { FragmentType } from "../FragmentType";
+import { FragmentType, Effect } from "../FragmentType";
 import { IStaneksGift } from "../IStaneksGift";
 import { FragmentPreview } from "./FragmentPreview";
 import { numeralWrapper } from "../../ui/numeralFormat";
@@ -8,6 +8,7 @@ import { numeralWrapper } from "../../ui/numeralFormat";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
 import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 
 type IOptionProps = {
   gift: IStaneksGift;
@@ -23,21 +24,26 @@ function FragmentOption(props: IOptionProps): React.ReactElement {
       <></>
     );
   return (
-    <>
+    <Box display="flex">
+      <Box sx={{ mx: 2 }}>
+        <FragmentPreview
+          width={props.fragment.width()}
+          height={props.fragment.height()}
+          colorAt={(x, y) => {
+            return !props.fragment.fullAt(x, y) ? "" : props.fragment.type === FragmentType.Booster ? "blue" : "green";
+          }}
+        />
+      </Box>
       <Typography>
-        {FragmentType[props.fragment.type]}
+        {props.fragment.type === FragmentType.Booster
+          ? `${props.fragment.power}x adjacent fragment power`
+          : Effect(props.fragment.type)}
         <br />
         power: {numeralWrapper.formatStaneksGiftPower(props.fragment.power)}
         <br />
         {remaining}
       </Typography>
-      <br />
-      <FragmentPreview
-        width={props.fragment.width()}
-        height={props.fragment.height()}
-        colorAt={(x, y) => (props.fragment.fullAt(x, y) ? "green" : "")}
-      />
-    </>
+    </Box>
   );
 }
 
@@ -51,8 +57,13 @@ export function FragmentSelector(props: IProps): React.ReactElement {
   function onChange(event: SelectChangeEvent<string | number>): void {
     const v = event.target.value;
     setValue(v);
-    if (v === "None") props.selectFragment(NoneFragment);
-    else if (v === "Delete") props.selectFragment(DeleteFragment);
+    if (v === "None") {
+      props.selectFragment(NoneFragment);
+      return;
+    } else if (v === "Delete") {
+      props.selectFragment(DeleteFragment);
+      return;
+    }
     const fragment = Fragments.find((f) => f.id === v);
     if (fragment === undefined) throw new Error("Fragment selector selected an undefined fragment with id " + v);
     if (typeof v === "number") props.selectFragment(fragment);

src/CotMG/ui/Grid.tsx

@@ -136,7 +136,7 @@ export function Grid(props: GridProps): React.ReactElement {
       </Table>
       <FragmentSelector gift={props.gift} selectFragment={updateSelectedFragment} />
       <Button onClick={clear}>Clear</Button>
-      <FragmentInspector x={pos[0]} y={pos[1]} fragment={props.gift.fragmentAt(pos[0], pos[1])} />
+      <FragmentInspector gift={props.gift} x={pos[0]} y={pos[1]} fragment={props.gift.fragmentAt(pos[0], pos[1])} />
     </>
   );
 }