pre-dialogbox-convert

src/PersonObjects/Resleeving/ui/ResleeveElem.tsx

@@ -8,6 +8,13 @@ import { Money } from "../../../ui/React/Money";
 import { numeralWrapper } from "../../../ui/numeralFormat";
 import { dialogBoxCreate } from "../../../ui/React/DialogBox";
 
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import Button from "@mui/material/Button";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import Grid from "@mui/material/Grid";
+
 interface IProps {
   resleeve: Resleeve;
   player: IPlayer;
@@ -19,81 +26,83 @@ export function ResleeveElem(props: IProps): React.ReactElement {
   function openStats(): void {
     dialogBoxCreate(
       <>
-        <h2>
-          <u>Total Multipliers:</u>
-        </h2>
-        Hacking Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_mult)}
-        <br />
-        Hacking Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_exp_mult)}
-        <br />
-        Strength Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.strength_mult)}
-        <br />
-        Strength Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.strength_exp_mult)}
-        <br />
-        Defense Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.defense_mult)}
-        <br />
-        Defense Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.defense_exp_mult)}
-        <br />
-        Dexterity Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.dexterity_mult)}
-        <br />
-        Dexterity Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.dexterity_exp_mult)}
-        <br />
-        Agility Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.agility_mult)}
-        <br />
-        Agility Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.agility_exp_mult)}
-        <br />
-        Charisma Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.charisma_mult)}
-        <br />
-        Charisma Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.charisma_exp_mult)}
-        <br />
-        Hacking Chance multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_chance_mult)}
-        <br />
-        Hacking Speed multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_speed_mult)}
-        <br />
-        Hacking Money multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_money_mult)}
-        <br />
-        Hacking Growth multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_grow_mult)}
-        <br />
-        Salary multiplier: {numeralWrapper.formatPercentage(props.resleeve.work_money_mult)}
-        <br />
-        Company Reputation Gain multiplier: {numeralWrapper.formatPercentage(props.resleeve.company_rep_mult)}
-        <br />
-        Faction Reputation Gain multiplier: {numeralWrapper.formatPercentage(props.resleeve.faction_rep_mult)}
-        <br />
-        Crime Money multiplier: {numeralWrapper.formatPercentage(props.resleeve.crime_money_mult)}
-        <br />
-        Crime Success multiplier: {numeralWrapper.formatPercentage(props.resleeve.crime_success_mult)}
-        <br />
-        Hacknet Income multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_money_mult)}
-        <br />
-        Hacknet Purchase Cost multiplier:
-        {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_purchase_cost_mult)}
-        <br />
-        Hacknet Level Upgrade Cost multiplier:
-        {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_level_cost_mult)}
-        <br />
-        Hacknet Ram Upgrade Cost multiplier:
-        {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_ram_cost_mult)}
-        <br />
-        Hacknet Core Upgrade Cost multiplier:
-        {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_core_cost_mult)}
-        <br />
-        Bladeburner Max Stamina multiplier:
-        {numeralWrapper.formatPercentage(props.resleeve.bladeburner_max_stamina_mult)}
-        <br />
-        Bladeburner Stamina Gain multiplier:
-        {numeralWrapper.formatPercentage(props.resleeve.bladeburner_stamina_gain_mult)}
-        <br />
-        Bladeburner Field Analysis multiplier:
-        {numeralWrapper.formatPercentage(props.resleeve.bladeburner_analysis_mult)}
-        <br />
-        Bladeburner Success Chance multiplier:
-        {numeralWrapper.formatPercentage(props.resleeve.bladeburner_success_chance_mult)}
+        <Typography variant="h5" color="primary">
+          Total Multipliers:
+        </Typography>
+        <Typography>
+          Hacking Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_mult)}
+          <br />
+          Hacking Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_exp_mult)}
+          <br />
+          Strength Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.strength_mult)}
+          <br />
+          Strength Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.strength_exp_mult)}
+          <br />
+          Defense Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.defense_mult)}
+          <br />
+          Defense Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.defense_exp_mult)}
+          <br />
+          Dexterity Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.dexterity_mult)}
+          <br />
+          Dexterity Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.dexterity_exp_mult)}
+          <br />
+          Agility Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.agility_mult)}
+          <br />
+          Agility Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.agility_exp_mult)}
+          <br />
+          Charisma Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.charisma_mult)}
+          <br />
+          Charisma Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.charisma_exp_mult)}
+          <br />
+          Hacking Chance multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_chance_mult)}
+          <br />
+          Hacking Speed multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_speed_mult)}
+          <br />
+          Hacking Money multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_money_mult)}
+          <br />
+          Hacking Growth multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_grow_mult)}
+          <br />
+          Salary multiplier: {numeralWrapper.formatPercentage(props.resleeve.work_money_mult)}
+          <br />
+          Company Reputation Gain multiplier: {numeralWrapper.formatPercentage(props.resleeve.company_rep_mult)}
+          <br />
+          Faction Reputation Gain multiplier: {numeralWrapper.formatPercentage(props.resleeve.faction_rep_mult)}
+          <br />
+          Crime Money multiplier: {numeralWrapper.formatPercentage(props.resleeve.crime_money_mult)}
+          <br />
+          Crime Success multiplier: {numeralWrapper.formatPercentage(props.resleeve.crime_success_mult)}
+          <br />
+          Hacknet Income multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_money_mult)}
+          <br />
+          Hacknet Purchase Cost multiplier:
+          {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_purchase_cost_mult)}
+          <br />
+          Hacknet Level Upgrade Cost multiplier:
+          {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_level_cost_mult)}
+          <br />
+          Hacknet Ram Upgrade Cost multiplier:
+          {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_ram_cost_mult)}
+          <br />
+          Hacknet Core Upgrade Cost multiplier:
+          {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_core_cost_mult)}
+          <br />
+          Bladeburner Max Stamina multiplier:
+          {numeralWrapper.formatPercentage(props.resleeve.bladeburner_max_stamina_mult)}
+          <br />
+          Bladeburner Stamina Gain multiplier:
+          {numeralWrapper.formatPercentage(props.resleeve.bladeburner_stamina_gain_mult)}
+          <br />
+          Bladeburner Field Analysis multiplier:
+          {numeralWrapper.formatPercentage(props.resleeve.bladeburner_analysis_mult)}
+          <br />
+          Bladeburner Success Chance multiplier:
+          {numeralWrapper.formatPercentage(props.resleeve.bladeburner_success_chance_mult)}
+        </Typography>
       </>,
     );
   }
 
-  function onAugChange(event: React.ChangeEvent<HTMLSelectElement>): void {
+  function onAugChange(event: SelectChangeEvent<string>): void {
     setAug(event.target.value);
   }
 
@@ -110,50 +119,48 @@ export function ResleeveElem(props: IProps): React.ReactElement {
   }
 
   return (
-    <div className="resleeve-elem" style={{ display: "block" }}>
-      <div className="resleeve-panel" style={{ width: "30%" }}>
-        <p>
-          Hacking: {numeralWrapper.formatSkill(props.resleeve.hacking_skill)} (
-          {numeralWrapper.formatExp(props.resleeve.hacking_exp)} exp)
-          <br />
-          Strength: {numeralWrapper.formatSkill(props.resleeve.strength)} (
-          {numeralWrapper.formatExp(props.resleeve.strength_exp)} exp)
-          <br />
-          Defense: {numeralWrapper.formatSkill(props.resleeve.defense)} (
-          {numeralWrapper.formatExp(props.resleeve.defense_exp)} exp)
-          <br />
-          Dexterity: {numeralWrapper.formatSkill(props.resleeve.dexterity)} (
-          {numeralWrapper.formatExp(props.resleeve.dexterity_exp)} exp)
-          <br />
-          Agility: {numeralWrapper.formatSkill(props.resleeve.agility)} (
-          {numeralWrapper.formatExp(props.resleeve.agility_exp)} exp)
-          <br />
-          Charisma: {numeralWrapper.formatSkill(props.resleeve.charisma)} (
-          {numeralWrapper.formatExp(props.resleeve.charisma_exp)} exp)
-          <br /># Augmentations: {props.resleeve.augmentations.length}
-        </p>
-        <button className="std-button" onClick={openStats}>
-          Multipliers
-        </button>
-      </div>
-      <div className="resleeve-panel" style={{ width: "50%" }}>
-        <select className="resleeve-aug-selector dropdown" onChange={onAugChange}>
-          {props.resleeve.augmentations.map((aug) => (
-            <option key={aug.name} value={aug.name}>
-              {aug.name}
-            </option>
-          ))}
-        </select>
-        <p>{currentAug !== undefined && currentAug.info}</p>
-      </div>
-      <div className="resleeve-panel" style={{ width: "20%" }}>
-        <p>
-          It costs <Money money={cost} player={props.player} /> to purchase this Sleeve.
-        </p>
-        <button className="std-button" onClick={purchase}>
-          Purchase
-        </button>
-      </div>
-    </div>
+    <Paper sx={{ my: 1 }}>
+      <Grid container>
+        <Grid item xs={3}>
+          <Typography>
+            Hacking: {numeralWrapper.formatSkill(props.resleeve.hacking_skill)} (
+            {numeralWrapper.formatExp(props.resleeve.hacking_exp)} exp)
+            <br />
+            Strength: {numeralWrapper.formatSkill(props.resleeve.strength)} (
+            {numeralWrapper.formatExp(props.resleeve.strength_exp)} exp)
+            <br />
+            Defense: {numeralWrapper.formatSkill(props.resleeve.defense)} (
+            {numeralWrapper.formatExp(props.resleeve.defense_exp)} exp)
+            <br />
+            Dexterity: {numeralWrapper.formatSkill(props.resleeve.dexterity)} (
+            {numeralWrapper.formatExp(props.resleeve.dexterity_exp)} exp)
+            <br />
+            Agility: {numeralWrapper.formatSkill(props.resleeve.agility)} (
+            {numeralWrapper.formatExp(props.resleeve.agility_exp)} exp)
+            <br />
+            Charisma: {numeralWrapper.formatSkill(props.resleeve.charisma)} (
+            {numeralWrapper.formatExp(props.resleeve.charisma_exp)} exp)
+            <br /># Augmentations: {props.resleeve.augmentations.length}
+          </Typography>
+          <Button onClick={openStats}>Multipliers</Button>
+        </Grid>
+        <Grid item xs={6}>
+          <Select value={aug} onChange={onAugChange}>
+            {props.resleeve.augmentations.map((aug) => (
+              <MenuItem key={aug.name} value={aug.name}>
+                {aug.name}
+              </MenuItem>
+            ))}
+          </Select>
+          <Typography>{currentAug !== undefined && currentAug.info}</Typography>
+        </Grid>
+        <Grid item xs={3}>
+          <Typography>
+            It costs <Money money={cost} player={props.player} /> to purchase this Sleeve.
+          </Typography>
+          <Button onClick={purchase}>Purchase</Button>
+        </Grid>
+      </Grid>
+    </Paper>
   );
 }

src/PersonObjects/Resleeving/ui/ResleeveRoot.tsx

@@ -1,9 +1,13 @@
 import React, { useState } from "react";
 
-import { IPlayer } from "../../IPlayer";
 import { generateResleeves } from "../Resleeving";
 import { Resleeve } from "../Resleeve";
 import { ResleeveElem } from "./ResleeveElem";
+import { use } from "../../../ui/Context";
+import Typography from "@mui/material/Typography";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import Box from "@mui/material/Box";
 
 const SortOption: {
   [key: string]: string | undefined;
@@ -69,28 +73,25 @@ const SortFunctions: {
   TotalNumAugmentations: (a: Resleeve, b: Resleeve): number => a.augmentations.length - b.augmentations.length,
 };
 
-interface IProps {
-  player: IPlayer;
-}
-
-export function ResleeveRoot(props: IProps): React.ReactElement {
+export function ResleeveRoot(): React.ReactElement {
+  const player = use.Player();
   const [sort, setSort] = useState(SortOption.Cost);
   // Randomly create all Resleeves if they dont already exist
-  if (props.player.resleeves.length === 0) {
-    props.player.resleeves = generateResleeves();
+  if (player.resleeves.length === 0) {
+    player.resleeves = generateResleeves();
   }
 
-  function onSortChange(event: React.ChangeEvent<HTMLSelectElement>): void {
+  function onSortChange(event: SelectChangeEvent<string>): void {
     setSort(event.target.value);
   }
 
   const sortFunction = SortFunctions[sort];
   if (sortFunction === undefined) throw new Error(`sort function '${sort}' is undefined`);
-  props.player.resleeves.sort(sortFunction);
+  player.resleeves.sort(sortFunction);
 
   return (
     <>
-      <p style={{ display: "block", width: "75%" }}>
+      <Typography>
         Re-sleeving is the process of digitizing and transferring your consciousness into a new human body, or 'sleeve'.
         Here at VitaLife, you can purchase new specially-engineered bodies for the re-sleeve process. Many of these
         bodies even come with genetic and cybernetic Augmentations!
@@ -104,17 +105,19 @@ export function ResleeveRoot(props: IProps): React.ReactElement {
         <br />
         <br />
         NOTE: The stats and multipliers displayed on this page do NOT include your bonuses from Source-File.
-      </p>
-      <p style={{ display: "inline-block" }}>Sort By: </p>
-      <select className="dropdown" defaultValue={sort} onChange={onSortChange}>
-        {Object.keys(SortOption).map((opt) => (
-          <option key={opt} value={opt}>
-            {SortOption[opt]}
-          </option>
-        ))}
-      </select>
-      {props.player.resleeves.map((resleeve, i) => (
-        <ResleeveElem key={i} player={props.player} resleeve={resleeve} />
+      </Typography>
+      <Box display="flex" alignItems="center">
+        <Typography>Sort By: </Typography>
+        <Select value={sort} onChange={onSortChange}>
+          {Object.keys(SortOption).map((opt) => (
+            <MenuItem key={opt} value={opt}>
+              {SortOption[opt]}
+            </MenuItem>
+          ))}
+        </Select>
+      </Box>
+      {player.resleeves.map((resleeve, i) => (
+        <ResleeveElem key={i} player={player} resleeve={resleeve} />
       ))}
     </>
   );