From e5abf014b21dbd2f92a8e67af147866b18c52548 Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Sat, 18 Sep 2021 13:29:01 -0400 Subject: [PATCH] build dev --- src/Bladeburner/ui/Stats.tsx | 14 +- src/Gang/ui/TaskSelector.tsx | 4 +- .../Sleeve/ui/MoreEarningsContent.tsx | 30 +- .../Sleeve/ui/MoreStatsContent.tsx | 20 +- src/ui/CharacterStats.tsx | 379 ++++++++++-------- src/ui/React/Modal.tsx | 17 +- src/ui/React/StatsTable.tsx | 62 ++- src/ui/React/Table.tsx | 37 ++ 8 files changed, 310 insertions(+), 253 deletions(-) create mode 100644 src/ui/React/Table.tsx diff --git a/src/Bladeburner/ui/Stats.tsx b/src/Bladeburner/ui/Stats.tsx index 202857b88..09a0e5637 100644 --- a/src/Bladeburner/ui/Stats.tsx +++ b/src/Bladeburner/ui/Stats.tsx @@ -147,12 +147,14 @@ export function Stats(props: IProps): React.ReactElement {

Skill Points: {formatNumber(props.bladeburner.skillPoints, 0)}


- {StatsTable([ - ["Aug. Success Chance mult: ", formatNumber(props.player.bladeburner_success_chance_mult * 100, 1) + "%"], - ["Aug. Max Stamina mult: ", formatNumber(props.player.bladeburner_max_stamina_mult * 100, 1) + "%"], - ["Aug. Stamina Gain mult: ", formatNumber(props.player.bladeburner_stamina_gain_mult * 100, 1) + "%"], - ["Aug. Field Analysis mult: ", formatNumber(props.player.bladeburner_analysis_mult * 100, 1) + "%"], - ])} +
Travel diff --git a/src/Gang/ui/TaskSelector.tsx b/src/Gang/ui/TaskSelector.tsx index eeab69358..49d263c56 100644 --- a/src/Gang/ui/TaskSelector.tsx +++ b/src/Gang/ui/TaskSelector.tsx @@ -46,7 +46,9 @@ export function TaskSelector(props: IProps): React.ReactElement { ))} -
{StatsTable(data)}
+
+ +
); } diff --git a/src/PersonObjects/Sleeve/ui/MoreEarningsContent.tsx b/src/PersonObjects/Sleeve/ui/MoreEarningsContent.tsx index 87f8a73b5..f96a0348f 100644 --- a/src/PersonObjects/Sleeve/ui/MoreEarningsContent.tsx +++ b/src/PersonObjects/Sleeve/ui/MoreEarningsContent.tsx @@ -11,8 +11,8 @@ interface IProps { export function MoreEarningsContent(props: IProps): React.ReactElement { return ( <> - {StatsTable( - [ + ], ["Hacking Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.hack)], ["Strength Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.str)], @@ -20,12 +20,12 @@ export function MoreEarningsContent(props: IProps): React.ReactElement { ["Dexterity Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.dex)], ["Agility Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.agi)], ["Charisma Exp ", numeralWrapper.formatExp(props.sleeve.earningsForTask.cha)], - ], - "Earnings for Current Task:", - )} + ]} + title="Earnings for Current Task:" + />
- {StatsTable( - [ + ], ["Hacking Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.hack)], ["Strength Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.str)], @@ -33,12 +33,12 @@ export function MoreEarningsContent(props: IProps): React.ReactElement { ["Dexterity Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.dex)], ["Agility Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.agi)], ["Charisma Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForPlayer.cha)], - ], - "Total Earnings for Host Consciousness:", - )} + ]} + title="Total Earnings for Host Consciousness:" + />
- {StatsTable( - [ + ], ["Hacking Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.hack)], ["Strength Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.str)], @@ -46,9 +46,9 @@ export function MoreEarningsContent(props: IProps): React.ReactElement { ["Dexterity Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.dex)], ["Agility Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.agi)], ["Charisma Exp: ", numeralWrapper.formatExp(props.sleeve.earningsForSleeves.cha)], - ], - "Total Earnings for Other Sleeves:", - )} + ]} + title="Total Earnings for Other Sleeves:" + />
); diff --git a/src/PersonObjects/Sleeve/ui/MoreStatsContent.tsx b/src/PersonObjects/Sleeve/ui/MoreStatsContent.tsx index 0ed3f8248..dbadd3df1 100644 --- a/src/PersonObjects/Sleeve/ui/MoreStatsContent.tsx +++ b/src/PersonObjects/Sleeve/ui/MoreStatsContent.tsx @@ -10,20 +10,20 @@ interface IProps { export function MoreStatsContent(props: IProps): React.ReactElement { return ( <> - {StatsTable( - [ +
- {StatsTable( - [ + ); } diff --git a/src/ui/CharacterStats.tsx b/src/ui/CharacterStats.tsx index b2b29e632..1375f3505 100644 --- a/src/ui/CharacterStats.tsx +++ b/src/ui/CharacterStats.tsx @@ -15,16 +15,19 @@ import { Money } from "./React/Money"; import { use } from "./Context"; import Typography from "@mui/material/Typography"; +import Box from "@mui/material/Box"; +import IconButton from "@mui/material/IconButton"; +import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; +import { Modal } from "./React/Modal"; + +import TableBody from "@mui/material/TableBody"; +import { Table, TableCell } from "./React/Table"; +import TableRow from "@mui/material/TableRow"; function LastEmployer(): React.ReactElement { const player = use.Player(); if (player.companyName) { - return ( - <> - Employer at which you last worked: {player.companyName} -
- - ); + return Employer at which you last worked: {player.companyName}; } return <>; } @@ -32,12 +35,7 @@ function LastEmployer(): React.ReactElement { function LastJob(): React.ReactElement { const player = use.Player(); if (player.companyName !== "") { - return ( - <> - Job you last worked: {player.jobs[player.companyName]} -
- - ); + return Job you last worked: {player.jobs[player.companyName]}; } return <>; } @@ -47,15 +45,13 @@ function Employers(): React.ReactElement { if (player.jobs && Object.keys(player.jobs).length !== 0) return ( <> - All Employers: -
+ All Employers: +
    {Object.keys(player.jobs).map((j) => ( -
  • * {j}
    • + * {j} ))}
-
-
); return <>; @@ -67,14 +63,14 @@ function Hacknet(): React.ReactElement { if (!(player.bitNodeN === 9 || SourceFileFlags[9] > 0)) { return ( <> - {`Hacknet Nodes owned: ${player.hacknetNodes.length}`} + {`Hacknet Nodes owned: ${player.hacknetNodes.length}`}
); } else { return ( <> - {`Hacknet Servers owned: ${player.hacknetNodes.length} / ${HacknetServerConstants.MaxServers}`} + {`Hacknet Servers owned: ${player.hacknetNodes.length} / ${HacknetServerConstants.MaxServers}`}
); @@ -85,10 +81,14 @@ function Intelligence(): React.ReactElement { const player = use.Player(); if (player.intelligence > 0 && (player.bitNodeN === 5 || SourceFileFlags[5] > 0)) { return ( - - Intelligence: - {numeralWrapper.formatSkill(player.intelligence)} - + + + Intelligence:  + + + {numeralWrapper.formatSkill(player.intelligence)}  + + ); } return <>; @@ -98,29 +98,30 @@ function MultiplierTable(props: any): React.ReactElement { function bn5Stat(r: any): JSX.Element { if (SourceFileFlags[5] > 0 && r.length > 2 && r[1] != r[2]) { return ( - - {" "} - ({numeralWrapper.formatPercentage(r[2])}) - + + ({numeralWrapper.formatPercentage(r[2])}) + ); } return <>; } return ( <> - - +
+ {props.rows.map((r: any) => ( - - - + + + {`${r[0]} multiplier:`}  + + + {numeralWrapper.formatPercentage(r[1])} + {bn5Stat(r)} - + ))} - -
{`${r[0]} multiplier:`} - {numeralWrapper.formatPercentage(r[1])} -
+ + ); } @@ -129,17 +130,14 @@ function BladeburnerMults(): React.ReactElement { const player = use.Player(); if (!player.canAccessBladeburner()) return <>; return ( - <> - -
- + ); } @@ -149,14 +147,12 @@ function CurrentBitNode(): React.ReactElement { const index = "BitNode" + player.bitNodeN; return ( <> - - Current BitNode: {player.bitNodeN} ({BitNodes[index].name}) - -
-
-
- {BitNodes[index].info} -
+ + BitNode-{player.bitNodeN}: {BitNodes[index].name} + + + {BitNodes[index].info} + ); } @@ -164,18 +160,13 @@ function CurrentBitNode(): React.ReactElement { return <>; } -export function CharacterStats(): React.ReactElement { +interface IMoneyModalProps { + open: boolean; + onClose: () => void; +} + +function MoneyModal({ open, onClose }: IMoneyModalProps): React.ReactElement { const player = use.Player(); - const setRerender = useState(false)[1]; - function rerender(): void { - setRerender((old) => !old); - } - - useEffect(() => { - const id = setInterval(rerender, 20); - return () => clearInterval(id); - }, []); - function convertMoneySourceTrackerToString(src: MoneySourceTracker): React.ReactElement { const parts: any[][] = [[`Total:`, ]]; if (src.bladeburner) { @@ -221,33 +212,53 @@ export function CharacterStats(): React.ReactElement { parts.push([`Sleeves:`, ]); } - return StatsTable(parts); + return ; } - function openMoneyModal(): void { - let content = ( + let content = ( + <> + + Money earned since you last installed Augmentations + +
+ {convertMoneySourceTrackerToString(player.moneySourceA)} + + ); + if (player.sourceFiles.length !== 0) { + content = ( <> - Money earned since you last installed Augmentations: + {content}
- {convertMoneySourceTrackerToString(player.moneySourceA)} +
+ + Money earned in this BitNode + +
+ {convertMoneySourceTrackerToString(player.moneySourceB)} ); - if (player.sourceFiles.length !== 0) { - content = ( - <> - {content} -
-
- Money earned in this BitNode: -
- {convertMoneySourceTrackerToString(player.moneySourceB)} - - ); - } - - dialogBoxCreate(content, false); } + return ( + + {content} + + ); +} + +export function CharacterStats(): React.ReactElement { + const player = use.Player(); + const [moneyOpen, setMoneyOpen] = useState(false); + const setRerender = useState(false)[1]; + function rerender(): void { + setRerender((old) => !old); + } + + useEffect(() => { + const id = setInterval(rerender, 20); + return () => clearInterval(id); + }, []); + const timeRows = [ ["Time played since last Augmentation:", convertTimeMsToTimeElapsedString(player.playtimeSinceLastAug)], ]; @@ -261,88 +272,105 @@ export function CharacterStats(): React.ReactElement { return ( <> - 
-        General
-        

-        

-        Current City: {player.city}
-        

+      
+        General
+      
+      
+        Current City: {player.city}
         
         
         
-        
+
+        
           Money: 
-        
-        
-        

-        

-        Stats
-        
-          
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
+           setMoneyOpen(true)}>
+            
+          
+        
+      
+      

+      
+        Stats
+      
+      
+        
Hacking:
-                {numeralWrapper.formatSkill(player.hacking_skill)}
-              
-                ({numeralWrapper.formatExp(player.hacking_exp)} exp)
-              
Strength:
-                {numeralWrapper.formatSkill(player.strength)}
-              
-                ({numeralWrapper.formatExp(player.strength_exp)} exp)
-              
Defense:
-                {numeralWrapper.formatSkill(player.defense)}
-              
-                ({numeralWrapper.formatExp(player.defense_exp)} exp)
-              
Dexterity:
-                {numeralWrapper.formatSkill(player.dexterity)}
-              
-                ({numeralWrapper.formatExp(player.dexterity_exp)} exp)
-              
Agility:
-                {numeralWrapper.formatSkill(player.agility)}
-              
-                ({numeralWrapper.formatExp(player.agility_exp)} exp)
-              
Charisma:
-                {numeralWrapper.formatSkill(player.charisma)}
-              
-                ({numeralWrapper.formatExp(player.charisma_exp)} exp)
-              

+          
+            
+              
+                Hacking: 
+              
+              
+                {numeralWrapper.formatSkill(player.hacking_skill)} 
+              
+              
+                ({numeralWrapper.formatExp(player.hacking_exp)} exp)
+              
+            
+            
+              
+                Strength: 
+              
+              
+                {numeralWrapper.formatSkill(player.strength)} 
+              
+              
+                ({numeralWrapper.formatExp(player.strength_exp)} exp)
+              
+            
+            
+              
+                Defense: 
+              
+              
+                {numeralWrapper.formatSkill(player.defense)} 
+              
+              
+                ({numeralWrapper.formatExp(player.defense_exp)} exp)
+              
+            
+            
+              
+                Dexterity: 
+              
+              
+                {numeralWrapper.formatSkill(player.dexterity)} 
+              
+              
+                ({numeralWrapper.formatExp(player.dexterity_exp)} exp)
+              
+            
+            
+              
+                Agility: 
+              
+              
+                {numeralWrapper.formatSkill(player.agility)} 
+              
+              
+                ({numeralWrapper.formatExp(player.agility_exp)} exp)
+              
+            
+            
+              
+                Charisma: 
+              
+              
+                {numeralWrapper.formatSkill(player.charisma)} 
+              
+              
+                ({numeralWrapper.formatExp(player.charisma_exp)} exp)
+              
+            
             
-          
-        

+          
+        
         

+      
+      

+      
+        Multipliers
+      
+      
         
         

-
         
-        

+      
+      

 
-        Misc.
-        

-        

-        {`Servers owned: ${player.purchasedServers.length} / ${getPurchaseServerLimit()}`}
-        

+      
+        Misc
+      
+      
+        {`Servers owned: ${player.purchasedServers.length} / ${getPurchaseServerLimit()}`}
         
-        {`Augmentations installed: ${player.augmentations.length}`}
-        

-        

-        {StatsTable(timeRows)}
-        

-        
-
+ {`Augmentations installed: ${player.augmentations.length}`} + + +
+ + setMoneyOpen(false)} /> ); } diff --git a/src/ui/React/Modal.tsx b/src/ui/React/Modal.tsx index 495cd6ba9..14073344d 100644 --- a/src/ui/React/Modal.tsx +++ b/src/ui/React/Modal.tsx @@ -3,8 +3,8 @@ import { Theme } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; import createStyles from "@mui/styles/createStyles"; import M from "@mui/material/Modal"; -import Backdrop from "@mui/material/Backdrop"; import Fade from "@mui/material/Fade"; +import Box from "@mui/material/Box"; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -39,18 +39,11 @@ interface IProps { export const Modal = (props: IProps): React.ReactElement => { const classes = useStyles(); return ( - + -
{props.children}
+
+ {props.children} +
); diff --git a/src/ui/React/StatsTable.tsx b/src/ui/React/StatsTable.tsx index 94f5d8ec5..273b1efa0 100644 --- a/src/ui/React/StatsTable.tsx +++ b/src/ui/React/StatsTable.tsx @@ -1,39 +1,35 @@ -import * as React from "react"; +import React from "react"; -export function StatsTable(rows: any[][], title?: string): React.ReactElement { - let titleElem = <>; - if (title) { - titleElem = ( - <> -

- {title} -

-
- - ); - } +import { Table, TableCell } from "./Table"; +import TableBody from "@mui/material/TableBody"; +import { Table as MuiTable } from "@mui/material"; +import TableRow from "@mui/material/TableRow"; +import Typography from "@mui/material/Typography"; + +interface IProps { + rows: any[][]; + title?: string; + wide?: boolean; +} + +export function StatsTable({ rows, title, wide }: IProps): React.ReactElement { + const T = wide ? MuiTable : Table; return ( <> - {titleElem} - - - {rows.map((row: any[]) => { - return ( - - {row.map((elem: any, i: number) => { - let style = {}; - if (i !== 0) style = { textAlign: "right", paddingLeft: ".25em" }; - return ( - - ); - })} - - ); - })} - -
- {elem} -
+ {title && {title}} + + + {rows.map((row: any[]) => ( + + {row.map((elem: any, i: number) => ( + + {elem} + + ))} + + ))} + + ); } diff --git a/src/ui/React/Table.tsx b/src/ui/React/Table.tsx new file mode 100644 index 000000000..0b742840c --- /dev/null +++ b/src/ui/React/Table.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import { TableCell as MuiTableCell, TableCellProps, Table as MuiTable, TableProps } from "@mui/material"; + +import makeStyles from "@mui/styles/makeStyles"; + +const useStyles = makeStyles({ + root: { + borderBottom: "none", + }, + small: { + width: "1px", + }, +}); + +export const TableCell: React.FC = (props: TableCellProps) => { + return ( + + ); +}; + +export const Table: React.FC = (props: TableProps) => { + return ( + + ); +};