Add a summary to the stanek page

Tweak UI

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

revert shit
This commit is contained in:
borisflagell 2022-05-07 12:55:56 +02:00
parent 9c805dabb8
commit 705a56f3bd
4 changed files with 86 additions and 19 deletions

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

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

@ -9,6 +9,9 @@ import Button from "@mui/material/Button";
import { Table } from "../../ui/React/Table"; import { Table } from "../../ui/React/Table";
import { Grid } from "./Grid"; import { Grid } from "./Grid";
import { zeros, calculateGrid } from "../Helper"; 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 { interface IProps {
gift: IStaneksGift; gift: IStaneksGift;
@ -84,9 +87,8 @@ export function MainBoard(props: IProps): React.ReactElement {
return ( return (
<> <>
<Button onClick={clear}>Clear</Button> <Box display="flex" sx={{ mb: 1 }}>
<Box display="flex"> <Table sx={{ mr: 1 }}>
<Table>
<Grid <Grid
width={props.gift.width()} width={props.gift.width()}
height={props.gift.height()} height={props.gift.height()}
@ -99,7 +101,22 @@ export function MainBoard(props: IProps): React.ReactElement {
</Table> </Table>
<FragmentInspector gift={props.gift} 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])} />
</Box> </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>
</> </>
); );
} }

@ -10,6 +10,7 @@ import Typography from "@mui/material/Typography";
import { ActiveFragment } from "../ActiveFragment"; import { ActiveFragment } from "../ActiveFragment";
import { Fragments } from "../Fragment"; import { Fragments } from "../Fragment";
import { DummyGrid } from "./DummyGrid"; import { DummyGrid } from "./DummyGrid";
import Container from "@mui/material/Container";
type IProps = { type IProps = {
staneksGift: IStaneksGift; staneksGift: IStaneksGift;
@ -22,7 +23,7 @@ export function StaneksGiftRoot({ staneksGift }: IProps): React.ReactElement {
} }
useEffect(() => StaneksGiftEvents.subscribe(rerender), []); useEffect(() => StaneksGiftEvents.subscribe(rerender), []);
return ( return (
<> <Container maxWidth="lg" disableGutters sx={{ mx: 0 }}>
<Typography variant="h4"> <Typography variant="h4">
Stanek's Gift Stanek's Gift
<Info <Info
@ -184,18 +185,18 @@ export function StaneksGiftRoot({ staneksGift }: IProps): React.ReactElement {
/> />
</Typography> </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, 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 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 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. efficiency of the neighboring fragments (not diagonally). Use Q/E to rotate fragments.
</Typography> </Typography>
{staneksGift.storedCycles > 5 && ( {staneksGift.storedCycles > 5 && (
<Typography> <Typography sx={{ mb: 1 }}>
Bonus time: {convertTimeMsToTimeElapsedString(CONSTANTS._idleSpeed * staneksGift.storedCycles)} Bonus time: {convertTimeMsToTimeElapsedString(CONSTANTS._idleSpeed * staneksGift.storedCycles)}
</Typography> </Typography>
)} )}
<MainBoard gift={staneksGift} /> <MainBoard gift={staneksGift} />
</> </Container>
); );
} }