Stats tweaks

This commit is contained in:
nickofolas 2022-04-07 18:32:11 -05:00
parent c94b4f4fd3
commit d728648bfa

@ -1,8 +1,5 @@
import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; import { Paper, Table, TableBody, Box, IconButton, Typography, Container, Tooltip } from "@mui/material";
import { Paper, Table, TableBody } from "@mui/material"; import { MoreHoriz, Info } from "@mui/icons-material";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { BitNodes } from "../BitNode/BitNode"; import { BitNodes } from "../BitNode/BitNode";
import { BitNodeMultipliers } from "../BitNode/BitNodeMultipliers"; import { BitNodeMultipliers } from "../BitNode/BitNodeMultipliers";
@ -29,7 +26,7 @@ const EmployersModal = ({ open, onClose }: EmployersModalProps): React.ReactElem
return ( return (
<Modal open={open} onClose={onClose}> <Modal open={open} onClose={onClose}>
<> <>
<Typography variant="h6">All Employers</Typography> <Typography variant="h5">All Employers</Typography>
<ul> <ul>
{Object.keys(player.jobs).map((j) => ( {Object.keys(player.jobs).map((j) => (
<Typography key={j}>* {j}</Typography> <Typography key={j}>* {j}</Typography>
@ -103,9 +100,9 @@ function CurrentBitNode(): React.ReactElement {
const currentSourceFile = player.sourceFiles.find((sourceFile) => sourceFile.n == player.bitNodeN); const currentSourceFile = player.sourceFiles.find((sourceFile) => sourceFile.n == player.bitNodeN);
const lvl = currentSourceFile ? currentSourceFile.lvl : 0; const lvl = currentSourceFile ? currentSourceFile.lvl : 0;
return ( return (
<Box sx={{ width: "75%" }}> <Box>
<Paper sx={{ p: 1 }}> <Paper sx={{ p: 1 }}>
<Typography variant="h6"> <Typography variant="h5">
BitNode {player.bitNodeN}: {BitNodes[index].name} (Level {lvl}) BitNode {player.bitNodeN}: {BitNodes[index].name} (Level {lvl})
</Typography> </Typography>
<Typography sx={{ whiteSpace: "pre-wrap", overflowWrap: "break-word" }}>{BitNodes[index].info}</Typography> <Typography sx={{ whiteSpace: "pre-wrap", overflowWrap: "break-word" }}>{BitNodes[index].info}</Typography>
@ -238,12 +235,11 @@ export function CharacterStats(): React.ReactElement {
timeRows.push(["Total", convertTimeMsToTimeElapsedString(player.totalPlaytime)]); timeRows.push(["Total", convertTimeMsToTimeElapsedString(player.totalPlaytime)]);
return ( return (
<> <Container maxWidth="lg" disableGutters sx={{ mx: 0 }}>
<Box <Typography variant="h4">Stats</Typography>
sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", width: "75%", minWidth: "fit-content", mb: 1, gap: 1 }} <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", minWidth: "fit-content", mb: 1, gap: 1 }}>
>
<Paper sx={{ p: 1 }}> <Paper sx={{ p: 1 }}>
<Typography variant="h6">General</Typography> <Typography variant="h5">General</Typography>
<Table> <Table>
<TableBody> <TableBody>
<StatsRow name="Current City" color={Settings.theme.primary} data={{ content: player.city }} /> <StatsRow name="Current City" color={Settings.theme.primary} data={{ content: player.city }} />
@ -251,7 +247,7 @@ export function CharacterStats(): React.ReactElement {
<> <>
<Money money={player.money} /> <Money money={player.money} />
<IconButton onClick={() => setMoneyOpen(true)} sx={{ p: 0 }}> <IconButton onClick={() => setMoneyOpen(true)} sx={{ p: 0 }}>
<MoreHorizIcon color="info" /> <MoreHoriz color="info" />
</IconButton> </IconButton>
</> </>
</StatsRow> </StatsRow>
@ -274,7 +270,7 @@ export function CharacterStats(): React.ReactElement {
<> <>
<span style={{ color: Settings.theme.primary }}>{Object.keys(player.jobs).length} total</span> <span style={{ color: Settings.theme.primary }}>{Object.keys(player.jobs).length} total</span>
<IconButton onClick={() => setEmployersOpen(true)} sx={{ p: 0 }}> <IconButton onClick={() => setEmployersOpen(true)} sx={{ p: 0 }}>
<MoreHorizIcon color="info" /> <MoreHoriz color="info" />
</IconButton> </IconButton>
</> </>
</StatsRow> </StatsRow>
@ -302,7 +298,7 @@ export function CharacterStats(): React.ReactElement {
</Table> </Table>
</Paper> </Paper>
<Paper sx={{ p: 1 }}> <Paper sx={{ p: 1 }}>
<Typography variant="h6">Skills</Typography> <Typography variant="h5">Skills</Typography>
<Table> <Table>
<TableBody> <TableBody>
<StatsRow <StatsRow
@ -346,9 +342,24 @@ export function CharacterStats(): React.ReactElement {
</Table> </Table>
</Paper> </Paper>
</Box> </Box>
<Box sx={{ width: "75%", minWidth: "fit-content", mb: 1 }}> <Box sx={{ mb: 1 }}>
<Paper sx={{ p: 1 }}> <Paper sx={{ p: 1 }}>
<Typography variant="h6">Multipliers</Typography> <Typography variant="h5" color="primary" sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
Multipliers
<Tooltip
title={
<Typography>
Displays your current multipliers.
<br />
<br />
When there is a dim number next to a multiplier, that means that the multiplier in question is being
affected by BitNode multipliers.
</Typography>
}
>
<Info sx={{ ml: 1, mb: 1 }} color="info" />
</Tooltip>
</Typography>
<Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }}> <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }}>
<Box> <Box>
<MultiplierTable <MultiplierTable
@ -497,9 +508,9 @@ export function CharacterStats(): React.ReactElement {
</Paper> </Paper>
</Box> </Box>
<Box sx={{ width: "75%", minWidth: "fit-content", mb: 1 }}> <Box sx={{ mb: 1 }}>
<Paper sx={{ p: 1 }}> <Paper sx={{ p: 1 }}>
<Typography variant="h6">Time Played</Typography> <Typography variant="h5">Time Played</Typography>
<Table> <Table>
<TableBody> <TableBody>
{timeRows.map(([name, content]) => ( {timeRows.map(([name, content]) => (
@ -512,6 +523,6 @@ export function CharacterStats(): React.ReactElement {
<CurrentBitNode /> <CurrentBitNode />
<MoneyModal open={moneyOpen} onClose={() => setMoneyOpen(false)} /> <MoneyModal open={moneyOpen} onClose={() => setMoneyOpen(false)} />
<EmployersModal open={employersOpen} onClose={() => setEmployersOpen(false)} /> <EmployersModal open={employersOpen} onClose={() => setEmployersOpen(false)} />
</> </Container>
); );
} }