Merge pull request #1979 from MartinFournier/feature/skill-progress-bars

Fix #1889: Add skill progress to overview

src/ui/React/CharacterOverview.tsx

@@ -1,7 +1,7 @@
 // Root React Component for the Corporation UI
 import React, { useState, useEffect } from "react";
 
-import { Theme } from "@mui/material/styles";
+import { Theme, useTheme } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
 import { numeralWrapper } from "../../ui/numeralFormat";
@@ -20,6 +20,8 @@ import ClearAllIcon from "@mui/icons-material/ClearAll";
 
 import { Settings } from "../../Settings/Settings";
 import { use } from "../Context";
+import { StatsProgressOverviewCell } from "./StatsProgressBar";
+import { BitNodeMultipliers } from "../../BitNode/BitNodeMultipliers";
 
 interface IProps {
   save: () => void;
@@ -139,6 +141,8 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
+export { useStyles as characterOverviewStyles };
+
 export function CharacterOverview({ save, killScripts }: IProps): React.ReactElement {
   const [killOpen, setKillOpen] = useState(false);
   const player = use.Player();
@@ -151,6 +155,21 @@ export function CharacterOverview({ save, killScripts }: IProps): React.ReactEle
   }, []);
 
   const classes = useStyles();
+  const theme = useTheme();
+
+  const hackingProgress = player.calculateSkillProgress(
+    player.hacking_exp, player.hacking_mult * BitNodeMultipliers.HackingLevelMultiplier);
+  const strengthProgress = player.calculateSkillProgress(
+    player.strength_exp, player.strength_mult * BitNodeMultipliers.StrengthLevelMultiplier);
+  const defenseProgress = player.calculateSkillProgress(
+    player.defense_exp, player.defense_mult * BitNodeMultipliers.DefenseLevelMultiplier);
+  const dexterityProgress = player.calculateSkillProgress(
+    player.dexterity_exp, player.dexterity_mult * BitNodeMultipliers.DexterityLevelMultiplier);
+  const agilityProgress = player.calculateSkillProgress(
+    player.agility_exp, player.agility_mult * BitNodeMultipliers.AgilityLevelMultiplier);
+  const charismaProgress = player.calculateSkillProgress(
+    player.charisma_exp, player.charisma_mult * BitNodeMultipliers.CharismaLevelMultiplier);
+
   return (
     <>
       <Table sx={{ display: "block", m: 1 }}>
@@ -186,12 +205,20 @@ export function CharacterOverview({ save, killScripts }: IProps): React.ReactEle
           </TableRow>
 
           <TableRow>
-            <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
+            <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
               <Typography classes={{ root: classes.hack }}>Hack&nbsp;</Typography>
             </TableCell>
-            <TableCell align="right" classes={{ root: classes.cell }}>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
               <Typography classes={{ root: classes.hack }}>{numeralWrapper.formatSkill(player.hacking)}</Typography>
             </TableCell>
+          </TableRow>
+          <TableRow>
+            <StatsProgressOverviewCell progress={hackingProgress} color={theme.colors.hack} />
+          </TableRow>
+          <TableRow>
+          <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
+              <Typography classes={{ root: classes.hack }}></Typography>
+            </TableCell>
             <TableCell align="right" classes={{ root: classes.cell }}>
               <Typography id="overview-hack-hook" classes={{ root: classes.hack }}>
                 {/*Hook for player scripts*/}
@@ -212,6 +239,9 @@ export function CharacterOverview({ save, killScripts }: IProps): React.ReactEle
               </Typography>
             </TableCell>
           </TableRow>
+          <TableRow>
+            <StatsProgressOverviewCell progress={strengthProgress} color={theme.colors.combat} />
+          </TableRow>
 
           <TableRow>
             <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
@@ -226,6 +256,9 @@ export function CharacterOverview({ save, killScripts }: IProps): React.ReactEle
               </Typography>
             </TableCell>
           </TableRow>
+          <TableRow>
+            <StatsProgressOverviewCell progress={defenseProgress} color={theme.colors.combat} />
+          </TableRow>
 
           <TableRow>
             <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
@@ -240,6 +273,10 @@ export function CharacterOverview({ save, killScripts }: IProps): React.ReactEle
               </Typography>
             </TableCell>
           </TableRow>
+          <TableRow>
+            <StatsProgressOverviewCell progress={dexterityProgress} color={theme.colors.combat} />
+          </TableRow>
+
           <TableRow>
             <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
               <Typography classes={{ root: classes.combat }}>Agi&nbsp;</Typography>
@@ -253,6 +290,9 @@ export function CharacterOverview({ save, killScripts }: IProps): React.ReactEle
               </Typography>
             </TableCell>
           </TableRow>
+          <TableRow>
+            <StatsProgressOverviewCell progress={agilityProgress} color={theme.colors.combat} />
+          </TableRow>
 
           <TableRow>
             <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
@@ -267,6 +307,10 @@ export function CharacterOverview({ save, killScripts }: IProps): React.ReactEle
               </Typography>
             </TableCell>
           </TableRow>
+          <TableRow>
+            <StatsProgressOverviewCell progress={charismaProgress} color={theme.colors.cha} />
+          </TableRow>
+
           <Intelligence />
 
           <TableRow>

src/ui/React/StatsProgressBar.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import LinearProgress from '@mui/material/LinearProgress';
+import { TableCell, Tooltip } from '@mui/material';
+import { characterOverviewStyles } from './CharacterOverview';
+import { ISkillProgress } from 'src/PersonObjects/formulas/skill';
+
+interface IProgressProps {
+  min: number;
+  max: number;
+  current: number;
+  color?: React.CSSProperties["color"];
+}
+
+interface IStatsOverviewCellProps {
+  progress: ISkillProgress;
+  color?: React.CSSProperties["color"];
+}
+
+export function StatsProgressBar({ min, max, current, color }: IProgressProps): React.ReactElement {
+  const normalise = (value: number): number => ((value - min) * 100) / (max - min);
+  const tooltipText = <>
+    Experience: {current.toFixed(2)}/{max.toFixed(2)}
+    <br />
+    {normalise(current).toFixed(2)}%
+  </>;
+
+  return (
+    <Tooltip title={tooltipText}>
+      <LinearProgress
+        variant="determinate"
+        value={normalise(current)}
+        sx={{
+          backgroundColor: '#111111',
+          '& .MuiLinearProgress-bar1Determinate': {
+            backgroundColor: color,
+          },
+        }}
+      />
+    </Tooltip>
+  );
+}
+
+export function StatsProgressOverviewCell({progress, color}: IStatsOverviewCellProps): React.ReactElement {
+  const classes = characterOverviewStyles();
+  return (
+    <TableCell component="th" scope="row" colSpan={2}
+      classes={{ root: classes.cellNone }}
+      style={{ paddingBottom: '2px', position: 'relative', top: '-3px' }}>
+      <StatsProgressBar
+        min={progress.baseExperience}
+        max={progress.nextExperience}
+        current={progress.experience}
+        color={color}
+      />
+    </TableCell>
+  )
+}