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

UI: FIX #1754  Stanek effect summary & slight tweak.
This commit is contained in:
hydroflame 2022-05-19 02:12:50 -04:00 committed by GitHub
commit e6ce9a9c03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 124 additions and 19 deletions

@ -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>
);
}

@ -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>
);

@ -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>
</>
);
}

@ -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>
);
}