From 4e8bb96f3fdb830673b1c9cf74e082bda0c06c56 Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Fri, 1 Oct 2021 13:08:37 -0400 Subject: [PATCH] removing some of the classes --- src/BitNode/ui/BitFlumeModal.tsx | 33 ++++++++++ src/BitNode/ui/BitFlumePopup.tsx | 30 --------- src/BitNode/ui/BitverseRoot.tsx | 4 +- src/Casino/Blackjack.tsx | 46 +++++-------- src/Casino/CardDeck/ReactCard.tsx | 12 ++-- src/CodingContracts.ts | 37 ++++------- src/Corporation/ui/IndustryOverview.tsx | 4 +- src/Corporation/ui/IndustryWarehouse.tsx | 12 ---- src/Corporation/ui/ThrowPartyModal.tsx | 2 +- src/DevMenu/ui/General.tsx | 66 +++++++++---------- src/Faction/FactionHelpers.tsx | 10 +-- src/Faction/ui/DonateOption.tsx | 6 +- src/Faction/ui/Info.tsx | 11 +++- src/Faction/ui/InvitationModal.tsx | 40 +++++++++++ src/Faction/ui/InvitationPopup.tsx | 40 ----------- src/Faction/ui/PurchaseableAugmentation.tsx | 2 +- src/Gang/ui/GangStats.tsx | 2 +- src/Hacknet/ui/HacknetServerElem.tsx | 6 +- src/Hacknet/ui/HacknetUpgradeElem.tsx | 2 +- src/Hacknet/ui/HashUpgradeModal.tsx | 6 +- src/Hacknet/ui/MultiplierButtons.tsx | 14 ++-- src/Hacknet/ui/PlayerInfo.tsx | 5 +- src/Hacknet/ui/PurchaseButton.tsx | 10 +-- src/Infiltration/ui/BackwardGame.tsx | 9 +-- src/Infiltration/ui/BracketGame.tsx | 7 +- src/Infiltration/ui/BribeGame.tsx | 15 +++-- src/Infiltration/ui/CheatCodeGame.tsx | 5 +- src/Infiltration/ui/Countdown.tsx | 5 +- src/Infiltration/ui/Cyberpunk2077Game.tsx | 7 +- src/Infiltration/ui/Game.tsx | 5 +- src/Infiltration/ui/Intro.tsx | 39 ++++++----- src/Infiltration/ui/MinesweeperGame.tsx | 3 +- src/Infiltration/ui/SlashGame.tsx | 5 +- src/Infiltration/ui/Victory.tsx | 53 +++++++-------- src/Locations/ui/CompanyLocation.tsx | 22 ++++--- src/Locations/ui/SlumsLocation.tsx | 4 +- src/Locations/ui/TechVendorLocation.tsx | 4 +- src/Locations/ui/TravelAgencyRoot.tsx | 4 +- .../Player/PlayerObjectGeneralMethods.tsx | 6 +- src/PersonObjects/Sleeve/ui/SleeveElem.tsx | 2 +- src/Programs/data/ProgramsMetadata.ts | 11 +--- src/ScriptEditor/ui/Root.tsx | 2 +- src/StockMarket/ui/StockTickersConfig.tsx | 4 +- src/Terminal/ui/TerminalRoot.tsx | 5 ++ src/engine.tsx | 6 +- src/ui/GameRoot.tsx | 2 + src/ui/React/Augmentation.tsx | 18 +++-- src/ui/React/CharacterOverview.tsx | 4 +- src/ui/React/CinematicText.tsx | 4 +- ...tractPopup.tsx => CodingContractModal.tsx} | 66 +++++++++++++------ src/ui/React/Favor.tsx | 20 ++++-- src/ui/React/HashRate.tsx | 5 +- src/ui/React/Hashes.tsx | 18 +++-- src/ui/React/Modal.tsx | 2 + src/ui/React/Money.tsx | 21 +++++- src/ui/React/Reputation.tsx | 18 ++++- src/ui/React/ReputationRate.tsx | 5 +- src/ui/WorkInProgressRoot.tsx | 25 +++---- 58 files changed, 457 insertions(+), 374 deletions(-) create mode 100644 src/BitNode/ui/BitFlumeModal.tsx delete mode 100644 src/BitNode/ui/BitFlumePopup.tsx create mode 100644 src/Faction/ui/InvitationModal.tsx delete mode 100644 src/Faction/ui/InvitationPopup.tsx rename src/ui/React/{CodingContractPopup.tsx => CodingContractModal.tsx} (53%) diff --git a/src/BitNode/ui/BitFlumeModal.tsx b/src/BitNode/ui/BitFlumeModal.tsx new file mode 100644 index 000000000..8fdd3e1fe --- /dev/null +++ b/src/BitNode/ui/BitFlumeModal.tsx @@ -0,0 +1,33 @@ +import React, { useState, useEffect } from "react"; +import { Modal } from "../../ui/React/Modal"; +import { use } from "../../ui/Context"; +import { EventEmitter } from "../../utils/EventEmitter"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; + +export const BitFlumeEvent = new EventEmitter<[]>(); + +export function BitFlumeModal(): React.ReactElement { + const router = use.Router(); + const [open, setOpen] = useState(false); + function flume(): void { + router.toBitVerse(true, false); + setOpen(false); + } + + useEffect(() => BitFlumeEvent.subscribe(() => setOpen(true)), []); + + return ( + setOpen(false)}> + + WARNING: USING THIS PROGRAM WILL CAUSE YOU TO LOSE ALL OF YOUR PROGRESS ON THE CURRENT BITNODE. +
+
+ Do you want to travel to the BitNode Nexus? This allows you to reset the current BitNode and select a new one. + +
+
+ + + ); +} diff --git a/src/BitNode/ui/BitFlumePopup.tsx b/src/BitNode/ui/BitFlumePopup.tsx deleted file mode 100644 index a915f356b..000000000 --- a/src/BitNode/ui/BitFlumePopup.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import { IPlayer } from "../../PersonObjects/IPlayer"; -import { IRouter } from "../../ui/Router"; -import { removePopup } from "../../ui/React/createPopup"; - -interface IProps { - player: IPlayer; - router: IRouter; - popupId: string; -} - -export function BitFlumePopup(props: IProps): React.ReactElement { - function flume(): void { - props.router.toBitVerse(true, false); - removePopup(props.popupId); - } - return ( - <> - WARNING: USING THIS PROGRAM WILL CAUSE YOU TO LOSE ALL OF YOUR PROGRESS ON THE CURRENT BITNODE. -
-
- Do you want to travel to the BitNode Nexus? This allows you to reset the current BitNode and select a new one. -
-
- - - ); -} diff --git a/src/BitNode/ui/BitverseRoot.tsx b/src/BitNode/ui/BitverseRoot.tsx index b3abfe90c..bd7e7818a 100644 --- a/src/BitNode/ui/BitverseRoot.tsx +++ b/src/BitNode/ui/BitverseRoot.tsx @@ -150,7 +150,7 @@ export function BitverseRoot(props: IProps): React.ReactElement { return ( // prettier-ignore -
+ <> O | O O | O O | O | | / __| \ | | O @@ -203,7 +203,7 @@ export function BitverseRoot(props: IProps): React.ReactElement { "> ", "> (Enter a new BitNode using the image above)", ]} /> -
+ ); return <>; diff --git a/src/Casino/Blackjack.tsx b/src/Casino/Blackjack.tsx index fb55a8320..9f5faa14f 100644 --- a/src/Casino/Blackjack.tsx +++ b/src/Casino/Blackjack.tsx @@ -307,9 +307,9 @@ export class Blackjack extends Game { const dealerHandValues = this.getHandDisplayValues(dealerHand); return ( -
+ <> {/* Wager input */} -
+ { }} /> -

+ {"Total earnings this session: "} -

-
+ + {/* Buttons */} {!gameInProgress ? ( -
- -
+ ) : ( -
+ <> -
+ )} {/* Main game part. Displays both if the game is in progress OR if there's a result so you can see * the cards that led to that result. */} {(gameInProgress || result !== Result.Pending) && ( -
+ <> 
Player
@@ -396,28 +394,18 @@ export class Blackjack extends Game { )} -
+ )} {/* Results from previous round */} {result !== Result.Pending && ( -

+ {result} - {this.isPlayerWinResult(result) && ( - <> - {" You gained "} - - - )} - {result === Result.DealerWon && ( - <> - {" You lost "} - - - )} -

+ {this.isPlayerWinResult(result) && } + {result === Result.DealerWon && } + )} -
+ ); } } diff --git a/src/Casino/CardDeck/ReactCard.tsx b/src/Casino/CardDeck/ReactCard.tsx index de40783d9..4fc148203 100644 --- a/src/Casino/CardDeck/ReactCard.tsx +++ b/src/Casino/CardDeck/ReactCard.tsx @@ -1,8 +1,10 @@ import React, { FC } from "react"; import { Card, Suit } from "./Card"; -import { Theme } from "@mui/material"; + import makeStyles from "@mui/styles/makeStyles"; import createStyles from "@mui/styles/createStyles"; +import Typography from "@mui/material/Typography"; +import Paper from "@mui/material/Paper"; type Props = { card: Card; @@ -56,11 +58,11 @@ export const ReactCard: FC = ({ card, hidden }) => { throw new Error(`MissingCaseException: ${card.suit}`); } return ( -
+ <> -
{hidden ? " - " : card.formatValue()}
-
{hidden ? " - " : suit}
+ {hidden ? " - " : card.formatValue()} + {hidden ? " - " : suit} -
+ ); }; diff --git a/src/CodingContracts.ts b/src/CodingContracts.ts index a0f658801..7f842c287 100644 --- a/src/CodingContracts.ts +++ b/src/CodingContracts.ts @@ -3,8 +3,7 @@ import { codingContractTypesMetadata, DescriptionFunc, GeneratorFunc, SolverFunc import { IMap } from "./types"; import { Generic_fromJSON, Generic_toJSON, Reviver } from "./utils/JSONReviver"; -import { createPopup, removePopup } from "./ui/React/createPopup"; -import { CodingContractPopup } from "./ui/React/CodingContractPopup"; +import { CodingContractEvent } from "./ui/React/CodingContractModal"; /* tslint:disable:no-magic-numbers completed-docs max-classes-per-file no-console */ @@ -166,29 +165,21 @@ export class CodingContract { * Creates a popup to prompt the player to solve the problem */ async prompt(): Promise { - const popupId = `coding-contract-prompt-popup-${this.fn}`; return new Promise((resolve) => { - createPopup( - popupId, - CodingContractPopup, - { - c: this, - popupId: popupId, - onClose: () => { - resolve(CodingContractResult.Cancelled); - removePopup(popupId); - }, - onAttempt: (val: string) => { - if (this.isSolution(val)) { - resolve(CodingContractResult.Success); - } else { - resolve(CodingContractResult.Failure); - } - removePopup(popupId); - }, + const props = { + c: this, + onClose: () => { + resolve(CodingContractResult.Cancelled); }, - () => resolve(CodingContractResult.Cancelled), - ); + onAttempt: (val: string) => { + if (this.isSolution(val)) { + resolve(CodingContractResult.Success); + } else { + resolve(CodingContractResult.Failure); + } + }, + }; + CodingContractEvent.emit(props); }); } diff --git a/src/Corporation/ui/IndustryOverview.tsx b/src/Corporation/ui/IndustryOverview.tsx index c04a1677d..123b43e52 100644 --- a/src/Corporation/ui/IndustryOverview.tsx +++ b/src/Corporation/ui/IndustryOverview.tsx @@ -125,7 +125,7 @@ function Text(): React.ReactElement { } return ( -
+ <> Industry: {division.type} (Corp Funds: ) @@ -218,7 +218,7 @@ function Text(): React.ReactElement { Research -
+ ); } diff --git a/src/Corporation/ui/IndustryWarehouse.tsx b/src/Corporation/ui/IndustryWarehouse.tsx index 01e87e433..119ef73de 100644 --- a/src/Corporation/ui/IndustryWarehouse.tsx +++ b/src/Corporation/ui/IndustryWarehouse.tsx @@ -56,18 +56,6 @@ function WarehouseRoot(props: IProps): React.ReactElement { props.rerender(); } - const ratioLines = []; - for (const matName in division.reqMats) { - if (division.reqMats.hasOwnProperty(matName)) { - const text = [" *", division.reqMats[matName], matName].join(" "); - ratioLines.push( -
-

{text}

-
, - ); - } - } - // Current State: let stateText; switch (division.state) { diff --git a/src/Corporation/ui/ThrowPartyModal.tsx b/src/Corporation/ui/ThrowPartyModal.tsx index a29c1e6a2..32c93ac53 100644 --- a/src/Corporation/ui/ThrowPartyModal.tsx +++ b/src/Corporation/ui/ThrowPartyModal.tsx @@ -50,7 +50,7 @@ export function ThrowPartyModal(props: IProps): React.ReactElement { } function EffectText(): React.ReactElement { - if (isNaN(cost) || cost < 0) return

Invalid value entered!

; + if (isNaN(cost) || cost < 0) return Invalid value entered!; return ( Throwing this party will cost a total of diff --git a/src/DevMenu/ui/General.tsx b/src/DevMenu/ui/General.tsx index fd2a4d041..a7a21fd9d 100644 --- a/src/DevMenu/ui/General.tsx +++ b/src/DevMenu/ui/General.tsx @@ -48,40 +48,38 @@ export function General(props: IProps): React.ReactElement {

General

-
- - - - - - -
-
- - - - -
+ + + + + + +
+ + + + + ); diff --git a/src/Faction/FactionHelpers.tsx b/src/Faction/FactionHelpers.tsx index 4038df855..7d4440a7a 100644 --- a/src/Faction/FactionHelpers.tsx +++ b/src/Faction/FactionHelpers.tsx @@ -18,19 +18,13 @@ import { import { SourceFileFlags } from "../SourceFile/SourceFileFlags"; import { dialogBoxCreate } from "../ui/React/DialogBox"; -import { createPopup } from "../ui/React/createPopup"; -import { InvitationPopup } from "./ui/InvitationPopup"; +import { InvitationEvent } from "./ui/InvitationModal"; export function inviteToFaction(faction: Faction): void { Player.factionInvitations.push(faction.name); faction.alreadyInvited = true; if (!Settings.SuppressFactionInvites) { - const popupId = "faction-invitation"; - createPopup(popupId, InvitationPopup, { - player: Player, - faction: faction, - popupId: popupId, - }); + InvitationEvent.emit(faction); } } diff --git a/src/Faction/ui/DonateOption.tsx b/src/Faction/ui/DonateOption.tsx index db91f3463..092659845 100644 --- a/src/Faction/ui/DonateOption.tsx +++ b/src/Faction/ui/DonateOption.tsx @@ -57,7 +57,7 @@ export function DonateOption(props: IProps): React.ReactElement { props.faction.playerReputation += repGain; dialogBoxCreate( <> - You just donated to {fac.name} to gain {Reputation(repGain)} reputation. + You just donated to {fac.name} to gain reputation. , ); props.rerender(); @@ -71,7 +71,7 @@ export function DonateOption(props: IProps): React.ReactElement { } return ( - This donation will result in {Reputation(repFromDonation(donateAmt, props.p))} reputation gain + This donation will result in reputation gain ); } @@ -81,7 +81,7 @@ export function DonateOption(props: IProps): React.ReactElement { {props.disabled ? ( - Unlock donations at {Favor(props.favorToDonate)} favor with {props.faction.name} + Unlock donations at favor with {props.faction.name} ) : ( <> diff --git a/src/Faction/ui/Info.tsx b/src/Faction/ui/Info.tsx index 74016ec0d..71494d66e 100644 --- a/src/Faction/ui/Info.tsx +++ b/src/Faction/ui/Info.tsx @@ -54,7 +54,8 @@ export function Info(props: IProps): React.ReactElement { title={ <> - You will have {Favor(props.faction.favor + favorGain)} faction favor after installing an Augmentation. + You will have faction favor after installing an + Augmentation. } > - Reputation: {Reputation(props.faction.playerReputation)} + + Reputation: + @@ -83,7 +86,9 @@ export function Info(props: IProps): React.ReactElement { } > - Faction Favor: {Favor(props.faction.favor)} + + Faction Favor: + diff --git a/src/Faction/ui/InvitationModal.tsx b/src/Faction/ui/InvitationModal.tsx new file mode 100644 index 000000000..8f784f02d --- /dev/null +++ b/src/Faction/ui/InvitationModal.tsx @@ -0,0 +1,40 @@ +import React, { useState, useEffect } from "react"; +import { joinFaction } from "../FactionHelpers"; +import { Faction } from "../Faction"; +import { Modal } from "../../ui/React/Modal"; +import { use } from "../../ui/Context"; +import { EventEmitter } from "../../utils/EventEmitter"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; + +export const InvitationEvent = new EventEmitter<[Faction]>(); + +export function InvitationModal(): React.ReactElement { + const [faction, setFaction] = useState(null); + const player = use.Player(); + function join(): void { + if (faction === null) return; + //Remove from invited factions + const i = player.factionInvitations.findIndex((facName) => facName === faction.name); + if (i === -1) { + console.error("Could not find faction in Player.factionInvitations"); + } + joinFaction(faction); + setFaction(null); + } + + useEffect(() => InvitationEvent.subscribe((faction) => setFaction(faction)), []); + + return ( + setFaction(null)}> + You have received a faction invitation. + + Would you like to join {(faction || { name: "" }).name}?
+
+ Warning: Joining this faction may prevent you from joining other factions during this run! + + + + + ); +} diff --git a/src/Faction/ui/InvitationPopup.tsx b/src/Faction/ui/InvitationPopup.tsx deleted file mode 100644 index 518b26f20..000000000 --- a/src/Faction/ui/InvitationPopup.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; -import { joinFaction } from "../../Faction/FactionHelpers"; -import { Faction } from "../../Faction/Faction"; -import { IPlayer } from "../../PersonObjects/IPlayer"; -import { removePopup } from "../../ui/React/createPopup"; - -interface IProps { - player: IPlayer; - faction: Faction; - popupId: string; -} - -export function InvitationPopup(props: IProps): React.ReactElement { - function join(): void { - //Remove from invited factions - const i = props.player.factionInvitations.findIndex((facName) => facName === props.faction.name); - if (i === -1) { - console.error("Could not find faction in Player.factionInvitations"); - } - joinFaction(props.faction); - removePopup(props.popupId); - } - - return ( - <> -

You have received a faction invitation.

-

- Would you like to join {props.faction.name}?
-
- Warning: Joining this faction may prevent you from joining other factions during this run! -

- - - - ); -} diff --git a/src/Faction/ui/PurchaseableAugmentation.tsx b/src/Faction/ui/PurchaseableAugmentation.tsx index b453b9d64..7e3aaeb6a 100644 --- a/src/Faction/ui/PurchaseableAugmentation.tsx +++ b/src/Faction/ui/PurchaseableAugmentation.tsx @@ -57,7 +57,7 @@ function Requirements(props: IReqProps): React.ReactElement { - Requires {Reputation(props.rep)} faction reputation + Requires faction reputation diff --git a/src/Gang/ui/GangStats.tsx b/src/Gang/ui/GangStats.tsx index 0f53fea22..f8f91e9d1 100644 --- a/src/Gang/ui/GangStats.tsx +++ b/src/Gang/ui/GangStats.tsx @@ -66,7 +66,7 @@ export function GangStats(props: IProps): React.ReactElement {


- Faction reputation: {Reputation(Factions[props.gang.facName].playerReputation)} + Faction reputation:


diff --git a/src/Hacknet/ui/HacknetServerElem.tsx b/src/Hacknet/ui/HacknetServerElem.tsx index 09e612bba..7aa7453b2 100644 --- a/src/Hacknet/ui/HacknetServerElem.tsx +++ b/src/Hacknet/ui/HacknetServerElem.tsx @@ -183,7 +183,7 @@ export function HacknetServerElem(props: IProps): React.ReactElement { - {Hashes(node.totalHashesGenerated)} ({HashRate(node.hashRate)}) + () @@ -192,7 +192,9 @@ export function HacknetServerElem(props: IProps): React.ReactElement { Hash Capacity: - {Hashes(node.hashCapacity)} + + + diff --git a/src/Hacknet/ui/HacknetUpgradeElem.tsx b/src/Hacknet/ui/HacknetUpgradeElem.tsx index f822b822e..10d96fab7 100644 --- a/src/Hacknet/ui/HacknetUpgradeElem.tsx +++ b/src/Hacknet/ui/HacknetUpgradeElem.tsx @@ -60,7 +60,7 @@ export function HacknetUpgradeElem(props: IProps): React.ReactElement { - Cost: {Hashes(cost)}, Bought: {level} times + Cost: , Bought: {level} times {upg.desc} diff --git a/src/Hacknet/ui/HashUpgradeModal.tsx b/src/Hacknet/ui/HashUpgradeModal.tsx index c836579e5..28ededb74 100644 --- a/src/Hacknet/ui/HashUpgradeModal.tsx +++ b/src/Hacknet/ui/HashUpgradeModal.tsx @@ -6,8 +6,6 @@ import React, { useState, useEffect } from "react"; import { HashManager } from "../HashManager"; import { HashUpgrades } from "../HashUpgrades"; -import { IPlayer } from "../../PersonObjects/IPlayer"; - import { Hashes } from "../../ui/React/Hashes"; import { HacknetUpgradeElem } from "./HacknetUpgradeElem"; import { Modal } from "../../ui/React/Modal"; @@ -40,7 +38,9 @@ export function HashUpgradeModal(props: IProps): React.ReactElement { <> Spend your hashes on a variety of different upgrades - Hashes: {Hashes(player.hashManager.hashes)} + + Hashes: + {Object.keys(HashUpgrades).map((upgName) => { const upg = HashUpgrades[upgName]; return ( diff --git a/src/Hacknet/ui/MultiplierButtons.tsx b/src/Hacknet/ui/MultiplierButtons.tsx index ad74f33e7..e9211e18c 100644 --- a/src/Hacknet/ui/MultiplierButtons.tsx +++ b/src/Hacknet/ui/MultiplierButtons.tsx @@ -9,14 +9,17 @@ import { PurchaseMultipliers } from "../data/Constants"; import Button from "@mui/material/Button"; interface IMultiplierProps { - className: string; - key: string; + disabled: boolean; onClick: () => void; text: string; } function MultiplierButton(props: IMultiplierProps): React.ReactElement { - return ; + return ( + + ); } interface IProps { @@ -35,13 +38,12 @@ export function MultiplierButtons(props: IProps): React.ReactElement { for (let i = 0; i < mults.length; ++i) { const mult = mults[i]; const btnProps = { - className: props.purchaseMultiplier === PurchaseMultipliers[mult] ? "std-button-disabled" : "std-button", - key: mult, + disabled: props.purchaseMultiplier === PurchaseMultipliers[mult], onClick: onClicks[i], text: mult, }; - buttons.push(); + buttons.push(); } return <>{buttons}; diff --git a/src/Hacknet/ui/PlayerInfo.tsx b/src/Hacknet/ui/PlayerInfo.tsx index c02c9c1d6..501040c31 100644 --- a/src/Hacknet/ui/PlayerInfo.tsx +++ b/src/Hacknet/ui/PlayerInfo.tsx @@ -24,7 +24,7 @@ export function PlayerInfo(props: IProps): React.ReactElement { let prod; if (hasServers) { - prod = HashRate(props.totalProduction); + prod = ; } else { prod = ; } @@ -39,7 +39,8 @@ export function PlayerInfo(props: IProps): React.ReactElement { {hasServers && ( <> - Hashes: {Hashes(props.player.hashManager.hashes)} / {Hashes(props.player.hashManager.capacity)} + Hashes: /{" "} + )} diff --git a/src/Hacknet/ui/PurchaseButton.tsx b/src/Hacknet/ui/PurchaseButton.tsx index 9f8634361..f388d3f60 100644 --- a/src/Hacknet/ui/PurchaseButton.tsx +++ b/src/Hacknet/ui/PurchaseButton.tsx @@ -18,14 +18,10 @@ interface IProps { export function PurchaseButton(props: IProps): React.ReactElement { const cost = props.cost; - let className = Player.canAfford(cost) ? "std-button" : "std-button-disabled"; let text; - let style = {}; if (hasHacknetServers(Player)) { if (hasMaxNumberHacknetServers(Player)) { - className = "std-button-disabled"; text = <>Hacknet Server limit reached; - style = { color: "red" }; } else { text = ( <> @@ -43,5 +39,9 @@ export function PurchaseButton(props: IProps): React.ReactElement { ); } - return ; + return ( + + ); } diff --git a/src/Infiltration/ui/BackwardGame.tsx b/src/Infiltration/ui/BackwardGame.tsx index 0bea8d51f..0cc9800b9 100644 --- a/src/Infiltration/ui/BackwardGame.tsx +++ b/src/Infiltration/ui/BackwardGame.tsx @@ -6,6 +6,7 @@ import { GameTimer } from "./GameTimer"; import { random } from "../utils"; import { interpolate } from "./Difficulty"; import { BlinkingCursor } from "./BlinkingCursor"; +import Typography from "@mui/material/Typography"; interface Difficulty { [key: string]: number; @@ -46,17 +47,17 @@ export function BackwardGame(props: IMinigameProps): React.ReactElement { -

Type it backward

+ Type it backward -

{answer}

+ {answer} -

+ {guess} -

+ ); diff --git a/src/Infiltration/ui/BracketGame.tsx b/src/Infiltration/ui/BracketGame.tsx index a78cd58b1..0de1fa131 100644 --- a/src/Infiltration/ui/BracketGame.tsx +++ b/src/Infiltration/ui/BracketGame.tsx @@ -6,6 +6,7 @@ import { GameTimer } from "./GameTimer"; import { random } from "../utils"; import { interpolate } from "./Difficulty"; import { BlinkingCursor } from "./BlinkingCursor"; +import Typography from "@mui/material/Typography"; interface Difficulty { [key: string]: number; @@ -79,11 +80,11 @@ export function BracketGame(props: IMinigameProps): React.ReactElement { -

Close the brackets

-

+ Close the brackets + {`${left}${right}`} -

+ diff --git a/src/Infiltration/ui/BribeGame.tsx b/src/Infiltration/ui/BribeGame.tsx index 17841959b..6f45debaf 100644 --- a/src/Infiltration/ui/BribeGame.tsx +++ b/src/Infiltration/ui/BribeGame.tsx @@ -4,6 +4,7 @@ import { IMinigameProps } from "./IMinigameProps"; import { KeyHandler } from "./KeyHandler"; import { GameTimer } from "./GameTimer"; import { interpolate } from "./Difficulty"; +import Typography from "@mui/material/Typography"; interface Difficulty { [key: string]: number; @@ -51,13 +52,19 @@ export function BribeGame(props: IMinigameProps): React.ReactElement { -

Say something nice about the guard.

+ Say something nice about the guard. -

↑

-

{choices[index]}

-

↓

+ + ↑ + + + {choices[index]} + + + ↓ + ); diff --git a/src/Infiltration/ui/CheatCodeGame.tsx b/src/Infiltration/ui/CheatCodeGame.tsx index eb6dcccc6..68fd61329 100644 --- a/src/Infiltration/ui/CheatCodeGame.tsx +++ b/src/Infiltration/ui/CheatCodeGame.tsx @@ -5,6 +5,7 @@ import { KeyHandler } from "./KeyHandler"; import { GameTimer } from "./GameTimer"; import { random, getArrow } from "../utils"; import { interpolate } from "./Difficulty"; +import Typography from "@mui/material/Typography"; interface Difficulty { [key: string]: number; @@ -46,8 +47,8 @@ export function CheatCodeGame(props: IMinigameProps): React.ReactElement { -

Enter the Code!

-

{code[index]}

+ Enter the Code! + {code[index]} diff --git a/src/Infiltration/ui/Countdown.tsx b/src/Infiltration/ui/Countdown.tsx index 3f9fcfd2f..91878cd20 100644 --- a/src/Infiltration/ui/Countdown.tsx +++ b/src/Infiltration/ui/Countdown.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from "react"; import Grid from "@mui/material/Grid"; +import Typography from "@mui/material/Typography"; interface IProps { onFinish: () => void; } @@ -19,8 +20,8 @@ export function Countdown(props: IProps): React.ReactElement { <> -

Get Ready!

-

{x}

+ Get Ready! + {x} diff --git a/src/Infiltration/ui/Cyberpunk2077Game.tsx b/src/Infiltration/ui/Cyberpunk2077Game.tsx index b4cdaee7d..4784bbe5b 100644 --- a/src/Infiltration/ui/Cyberpunk2077Game.tsx +++ b/src/Infiltration/ui/Cyberpunk2077Game.tsx @@ -5,6 +5,7 @@ import { KeyHandler } from "./KeyHandler"; import { GameTimer } from "./GameTimer"; import { interpolate } from "./Difficulty"; import { getArrow } from "../utils"; +import Typography from "@mui/material/Typography"; interface Difficulty { [key: string]: number; @@ -75,8 +76,8 @@ export function Cyberpunk2077Game(props: IMinigameProps): React.ReactElement { -

Match the symbols!

-

+ Match the symbols! + Targets:{" "} {answer.map((a, i) => { if (i == index) @@ -91,7 +92,7 @@ export function Cyberpunk2077Game(props: IMinigameProps): React.ReactElement { ); })} -

+
{grid.map((line, y) => (
diff --git a/src/Infiltration/ui/Game.tsx b/src/Infiltration/ui/Game.tsx index 378d3f9e4..3a7080e74 100644 --- a/src/Infiltration/ui/Game.tsx +++ b/src/Infiltration/ui/Game.tsx @@ -11,6 +11,7 @@ import { Cyberpunk2077Game } from "./Cyberpunk2077Game"; import { MinesweeperGame } from "./MinesweeperGame"; import { WireCuttingGame } from "./WireCuttingGame"; import { Victory } from "./Victory"; +import Typography from "@mui/material/Typography"; interface IProps { StartingDifficulty: number; @@ -130,9 +131,9 @@ export function Game(props: IProps): React.ReactElement { <> -

+ Level: {level} / {props.MaxLevel} -

+ diff --git a/src/Infiltration/ui/Intro.tsx b/src/Infiltration/ui/Intro.tsx index 73ff8d6a0..cf004f65d 100644 --- a/src/Infiltration/ui/Intro.tsx +++ b/src/Infiltration/ui/Intro.tsx @@ -1,7 +1,8 @@ import React from "react"; -import { StdButton } from "../../ui/React/StdButton"; import { Location } from "../../Locations/Location"; import Grid from "@mui/material/Grid"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; interface IProps { Location: Location; @@ -52,37 +53,45 @@ export function Intro(props: IProps): React.ReactElement { <> -

Infiltrating {props.Location.name}

+ Infiltrating {props.Location.name} -

Maximum level: {props.MaxLevel}

+ + Maximum level: {props.MaxLevel} + - 
[{coloredArrow(props.Difficulty)}]
- 
{` ^            ^            ^           ^`}
- 
{` Trivial    Normal        Hard    Impossible`}
+ [{coloredArrow(props.Difficulty)}] + {` ^ ^ ^ ^`} + {` Trivial Normal Hard Impossible`} -

+ Infiltration is a series of short minigames that get progressively harder. You take damage for failing them. Reaching the maximum level rewards you with intel you can trade for money or reputation. -

+
-

The minigames you play are randomly selected. It might take you few tries to get used to them.

+ + The minigames you play are randomly selected. It might take you few tries to get used to them. +
-

No game require use of the mouse.

+ No game require use of the mouse.
-

Spacebar is the default action/confirm button.

+ Spacebar is the default action/confirm button.
-

Everything that uses arrow can also use WASD

+ Everything that uses arrow can also use WASD
-

Sometimes the rest of the keyboard is used.

+ Sometimes the rest of the keyboard is used. - + - + diff --git a/src/Infiltration/ui/MinesweeperGame.tsx b/src/Infiltration/ui/MinesweeperGame.tsx index 58cf19b67..d6a8cafa9 100644 --- a/src/Infiltration/ui/MinesweeperGame.tsx +++ b/src/Infiltration/ui/MinesweeperGame.tsx @@ -5,6 +5,7 @@ import { KeyHandler } from "./KeyHandler"; import { GameTimer } from "./GameTimer"; import { interpolate } from "./Difficulty"; import { getArrow } from "../utils"; +import Typography from "@mui/material/Typography"; interface Difficulty { [key: string]: number; @@ -81,7 +82,7 @@ export function MinesweeperGame(props: IMinigameProps): React.ReactElement { -

{memoryPhase ? "Remember all the mines!" : "Mark all the mines!"}

+ {memoryPhase ? "Remember all the mines!" : "Mark all the mines!"} {minefield.map((line, y) => ( 
diff --git a/src/Infiltration/ui/SlashGame.tsx b/src/Infiltration/ui/SlashGame.tsx
index 0db257ab0..75fa02565 100644
--- a/src/Infiltration/ui/SlashGame.tsx
+++ b/src/Infiltration/ui/SlashGame.tsx
@@ -4,6 +4,7 @@ import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";
 import { interpolate } from "./Difficulty";
+import Typography from "@mui/material/Typography";
 
 interface Difficulty {
   [key: string]: number;
@@ -53,8 +54,8 @@ export function SlashGame(props: IMinigameProps): React.ReactElement {
     
       
       
-        
Slash when his guard is down!

-        
{guarding ? "!Guarding!" : "!ATTACKING!"}

+        Slash when his guard is down!
+        {guarding ? "!Guarding!" : "!ATTACKING!"}
         
       
     
diff --git a/src/Infiltration/ui/Victory.tsx b/src/Infiltration/ui/Victory.tsx
index 6ee057a57..342a82f38 100644
--- a/src/Infiltration/ui/Victory.tsx
+++ b/src/Infiltration/ui/Victory.tsx
@@ -1,11 +1,14 @@
 import { Factions } from "../../Faction/Factions";
 import React, { useState } from "react";
-import { StdButton } from "../../ui/React/StdButton";
 import Grid from "@mui/material/Grid";
 import { Money } from "../../ui/React/Money";
 import { Reputation } from "../../ui/React/Reputation";
 import { BitNodeMultipliers } from "../../BitNode/BitNodeMultipliers";
 import { use } from "../../ui/Context";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import MenuItem from "@mui/material/MenuItem";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
 
 interface IProps {
   StartingDifficulty: number;
@@ -50,7 +53,7 @@ export function Victory(props: IProps): React.ReactElement {
     quitInfiltration();
   }
 
-  function changeDropdown(event: React.ChangeEvent): void {
+  function changeDropdown(event: SelectChangeEvent): void {
     setFaction(event.target.value);
   }
 
@@ -58,46 +61,36 @@ export function Victory(props: IProps): React.ReactElement {
     <>
       
         
-          
Infiltration successful!

+          Infiltration successful!
         
         
-          
You can trade the confidential information you found for money or reputation.

-          
+            
               {"none"}
-            
+            
             {player.factions
               .filter((f) => Factions[f].getInfo().offersWork())
               .map((f) => (
-                
+                
               ))}
-          
-          
-                {"Trade for "}
-                {Reputation(repGain)}
-                {" reputation"}
-              
-            }
-          />
+          
+          
         
         
-          
-                {"Sell for "}
-                
-              
-            }
-          />
+          
         
         
-          
+          
         
       
     
diff --git a/src/Locations/ui/CompanyLocation.tsx b/src/Locations/ui/CompanyLocation.tsx
index 85db125c3..95bc5d8c8 100644
--- a/src/Locations/ui/CompanyLocation.tsx
+++ b/src/Locations/ui/CompanyLocation.tsx
@@ -21,7 +21,6 @@ import * as posNames from "../../Company/data/companypositionnames";
 
 import { Reputation } from "../../ui/React/Reputation";
 import { Favor } from "../../ui/React/Favor";
-import { createPopup } from "../../ui/React/createPopup";
 import { use } from "../../ui/Context";
 import { QuitJobModal } from "../../Company/ui/QuitJobModal";
 
@@ -184,21 +183,23 @@ export function CompanyLocation(props: IProps): React.ReactElement {
   const favorGain = company.getFavorGain();
 
   return (
-    

+    <>
       {isEmployedHere && (
-        

+        <>
           Job Title: {jobTitle}
           -------------------------
           
             
-                  You will have {Favor(company.favor + favorGain[0])} company favor upon resetting after installing
-                  Augmentations
+                  You will have  company favor upon resetting after
+                  installing Augmentations
                 
               }
             >
-              Company reputation: {Reputation(company.playerReputation)}
+              
+                Company reputation: 
+              
             
           
           -------------------------
@@ -212,7 +213,9 @@ export function CompanyLocation(props: IProps): React.ReactElement {
                 
               }
             >
-              Company Favor: {Favor(company.favor)}
+              
+                Company Favor: 
+              
             
           
           -------------------------
@@ -227,8 +230,9 @@ export function CompanyLocation(props: IProps): React.ReactElement {
             open={quitOpen}
             onClose={() => setQuitOpen(false)}
           />
-        

+        
       )}
+      

       {company.hasAgentPositions() && (
         
       )}
       {location.infiltrationData != null && }
-    

+    
   );
 }
diff --git a/src/Locations/ui/SlumsLocation.tsx b/src/Locations/ui/SlumsLocation.tsx
index 4b3dc09bb..79f5e274d 100644
--- a/src/Locations/ui/SlumsLocation.tsx
+++ b/src/Locations/ui/SlumsLocation.tsx
@@ -113,7 +113,7 @@ export function SlumsLocation(): React.ReactElement {
   const heistChance = Crimes.Heist.successRate(player);
 
   return (
-    

+    <>
       Attempt to shoplift from a low-end retailer}>
         
       
       

-    

+    
   );
 }
diff --git a/src/Locations/ui/TechVendorLocation.tsx b/src/Locations/ui/TechVendorLocation.tsx
index 6aada005b..458c66065 100644
--- a/src/Locations/ui/TechVendorLocation.tsx
+++ b/src/Locations/ui/TechVendorLocation.tsx
@@ -67,7 +67,7 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
   }
 
   return (
-    

+    <>
       {purchaseServerButtons}
       

       
@@ -79,6 +79,6 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
       
       

       
-    

+    
   );
 }
diff --git a/src/Locations/ui/TravelAgencyRoot.tsx b/src/Locations/ui/TravelAgencyRoot.tsx
index e7c949cc1..1afb8fc5f 100644
--- a/src/Locations/ui/TravelAgencyRoot.tsx
+++ b/src/Locations/ui/TravelAgencyRoot.tsx
@@ -76,7 +76,7 @@ export function TravelAgencyRoot(props: IProps): React.ReactElement {
           .
         
         {Settings.DisableASCIIArt ? (
-          

+          <>
             {Object.values(CityName)
               .filter((city: string) => city != props.p.city)
               .map((city: string) => {
@@ -91,7 +91,7 @@ export function TravelAgencyRoot(props: IProps): React.ReactElement {
                   
                 );
               })}
-          

+          
         ) : (
            startTravel(city)} />
         )}
diff --git a/src/PersonObjects/Player/PlayerObjectGeneralMethods.tsx b/src/PersonObjects/Player/PlayerObjectGeneralMethods.tsx
index cf1a28f7c..885f01be4 100644
--- a/src/PersonObjects/Player/PlayerObjectGeneralMethods.tsx
+++ b/src/PersonObjects/Player/PlayerObjectGeneralMethods.tsx
@@ -626,7 +626,7 @@ export function finishWork(this: IPlayer, cancelled: boolean, sing = false): str
       You earned a total of: 

       
       

-      {Reputation(this.workRepGained)} reputation for the company 

+       reputation for the company 

       {numeralWrapper.formatExp(this.workHackExpGained)} hacking exp 

       {numeralWrapper.formatExp(this.workStrExpGained)} strength exp 

       {numeralWrapper.formatExp(this.workDefExpGained)} defense exp 

@@ -747,7 +747,7 @@ export function finishWorkPartTime(this: IPlayer, sing = false): string {
       You earned a total of: 

       
       

-      {Reputation(this.workRepGained)} reputation for the company 

+       reputation for the company 

       {numeralWrapper.formatExp(this.workHackExpGained)} hacking exp 

       {numeralWrapper.formatExp(this.workStrExpGained)} strength exp 

       {numeralWrapper.formatExp(this.workDefExpGained)} defense exp 

@@ -919,7 +919,7 @@ export function finishFactionWork(this: IPlayer, cancelled: boolean, sing = fals
         You earned a total of: 

         
         

-        {Reputation(this.workRepGained)} reputation for the faction 

+         reputation for the faction 

         {numeralWrapper.formatExp(this.workHackExpGained)} hacking exp 

         {numeralWrapper.formatExp(this.workStrExpGained)} strength exp 

         {numeralWrapper.formatExp(this.workDefExpGained)} defense exp 

diff --git a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
index e6021b186..2d1fa6b54 100644
--- a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
+++ b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
@@ -161,7 +161,7 @@ export function SleeveElem(props: IProps): React.ReactElement {
     ];
     if (props.sleeve.currentTask === SleeveTaskType.Company || props.sleeve.currentTask === SleeveTaskType.Faction) {
       const repGain: number = props.sleeve.getRepGain(player);
-      data.push([`Reputation:`, ReputationRate(5 * repGain)]);
+      data.push([`Reputation:`, ]);
     }
   }
 
diff --git a/src/Programs/data/ProgramsMetadata.ts b/src/Programs/data/ProgramsMetadata.ts
index f62dad63f..3b9ea34e3 100644
--- a/src/Programs/data/ProgramsMetadata.ts
+++ b/src/Programs/data/ProgramsMetadata.ts
@@ -10,9 +10,7 @@ import { convertTimeMsToTimeElapsedString } from "../../utils/StringHelperFuncti
 import { getServer } from "../../Server/ServerHelpers";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { BitNodeMultipliers } from "../../BitNode/BitNodeMultipliers";
-import { createPopup } from "../../ui/React/createPopup";
-import { BitFlumePopup } from "../../BitNode/ui/BitFlumePopup";
-
+import { BitFlumeEvent } from "../../BitNode/ui/BitFlumeModal";
 import { calculateHackingTime, calculateGrowTime, calculateWeakenTime } from "../../Hacking";
 
 function requireHackingLevel(lvl: number) {
@@ -286,12 +284,7 @@ export const programsMetadata: IProgramCreationParams[] = [
       time: CONSTANTS.MillisecondsPerFiveMinutes / 20,
     },
     run: (router: IRouter, terminal: ITerminal, player: IPlayer): void => {
-      const popupId = "bitflume-popup";
-      createPopup(popupId, BitFlumePopup, {
-        player: player,
-        router: router,
-        popupId: popupId,
-      });
+      BitFlumeEvent.emit();
     },
   },
   {
diff --git a/src/ScriptEditor/ui/Root.tsx b/src/ScriptEditor/ui/Root.tsx
index d14f689f2..d3244fb32 100644
--- a/src/ScriptEditor/ui/Root.tsx
+++ b/src/ScriptEditor/ui/Root.tsx
@@ -307,7 +307,7 @@ export function Root(props: IProps): React.ReactElement {
       Loading script editor!
}
+        loading={Loading script editor!}
         height="90%"
         defaultLanguage="javascript"
         defaultValue={code}
diff --git a/src/StockMarket/ui/StockTickersConfig.tsx b/src/StockMarket/ui/StockTickersConfig.tsx
index 75bb18bbd..bb57a802b 100644
--- a/src/StockMarket/ui/StockTickersConfig.tsx
+++ b/src/StockMarket/ui/StockTickersConfig.tsx
@@ -40,7 +40,7 @@ function DisplayModeButton(props: IProps): React.ReactElement {
 
 export function StockTickersConfig(props: IProps): React.ReactElement {
   return (
-    

+    <>
       
       

       
-    

+    
   );
 }
diff --git a/src/Terminal/ui/TerminalRoot.tsx b/src/Terminal/ui/TerminalRoot.tsx
index 34e7272ff..34c42a40c 100644
--- a/src/Terminal/ui/TerminalRoot.tsx
+++ b/src/Terminal/ui/TerminalRoot.tsx
@@ -12,6 +12,9 @@ import { IRouter } from "../../ui/Router";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { TerminalInput } from "./TerminalInput";
 import { TerminalEvents, TerminalClearEvents } from "../TerminalEvents";
+import { BitFlumeModal } from "../../BitNode/ui/BitFlumeModal";
+import { CodingContractModal } from "../../ui/React/CodingContractModal";
+
 import _ from "lodash";
 
 interface IActionTimerProps {
@@ -118,6 +121,8 @@ export function TerminalRoot({ terminal, router, player }: IProps): React.ReactE
       
         
       
+      
+      
     
   );
 }
diff --git a/src/engine.tsx b/src/engine.tsx
index 8d5cb65cf..361c71685 100644
--- a/src/engine.tsx
+++ b/src/engine.tsx
@@ -334,7 +334,9 @@ const Engine: {
       // Hacknet Nodes offline progress
       const offlineProductionFromHacknetNodes = processHacknetEarnings(Player, numCyclesOffline);
       const hacknetProdInfo = hasHacknetServers(Player) ? (
-        <>{Hashes(offlineProductionFromHacknetNodes)} hashes
+        <>
+           hashes
+        
       ) : (
         
       );
@@ -405,7 +407,7 @@ const Engine: {
             <>
               Offline for {timeOfflineString}. While you were offline, your scripts generated{" "}
               , your Hacknet Nodes generated {hacknetProdInfo} and you gained{" "}
-              {Reputation(offlineReputation)} divided amongst your factions.
+               reputation divided amongst your factions.
             ,
           ),
         250,
diff --git a/src/ui/GameRoot.tsx b/src/ui/GameRoot.tsx
index 07c0b1636..1816067d6 100644
--- a/src/ui/GameRoot.tsx
+++ b/src/ui/GameRoot.tsx
@@ -69,6 +69,7 @@ import { Unclickable } from "../Exploits/Unclickable";
 import { Snackbar } from "./React/Snackbar";
 import { LogBoxManager } from "./React/LogBoxManager";
 import { AlertManager } from "./React/AlertManager";
+import { InvitationModal } from "../Faction/ui/InvitationModal";
 
 import { enterBitNode } from "../RedPill";
 import { Context } from "./Context";
@@ -398,6 +399,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
         
         
         
+        
       
     
   );
diff --git a/src/ui/React/Augmentation.tsx b/src/ui/React/Augmentation.tsx
index 6f4135b5e..e92707ddf 100644
--- a/src/ui/React/Augmentation.tsx
+++ b/src/ui/React/Augmentation.tsx
@@ -1,9 +1,17 @@
 import * as React from "react";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    aug: {
+      color: theme.colors.combat,
+    },
+  }),
+);
 
 export function Augmentation({ name }: { name: string }): JSX.Element {
-  return (
-    
-      {name}
-    
-  );
+  const classes = useStyles();
+  return {name};
 }
diff --git a/src/ui/React/CharacterOverview.tsx b/src/ui/React/CharacterOverview.tsx
index c96bebeb8..496acf9ff 100644
--- a/src/ui/React/CharacterOverview.tsx
+++ b/src/ui/React/CharacterOverview.tsx
@@ -60,7 +60,9 @@ function Work(): React.ReactElement {
       
       
         
-          +{Reputation(player.workRepGained)} rep
+          
+            + rep
+          
         
       
       
diff --git a/src/ui/React/CinematicText.tsx b/src/ui/React/CinematicText.tsx
index 547cefb74..a31fc07fd 100644
--- a/src/ui/React/CinematicText.tsx
+++ b/src/ui/React/CinematicText.tsx
@@ -24,12 +24,12 @@ export function CinematicText(props: IProps): React.ReactElement {
   }
 
   return (
-    

+    <>
       {props.lines.slice(0, i).map((line, i) => (
         {line}
       ))}
       {props.lines.length > i && }
       {!props.auto && props.onDone && done && }
-    

+    
   );
 }
diff --git a/src/ui/React/CodingContractPopup.tsx b/src/ui/React/CodingContractModal.tsx
similarity index 53%
rename from src/ui/React/CodingContractPopup.tsx
rename to src/ui/React/CodingContractModal.tsx
index 5930d2314..6d7e3e8aa 100644
--- a/src/ui/React/CodingContractPopup.tsx
+++ b/src/ui/React/CodingContractModal.tsx
@@ -1,24 +1,37 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { KEY } from "../../utils/helpers/keyCodes";
 
 import { CodingContract, CodingContractType, CodingContractTypes } from "../../CodingContracts";
 import { ClickableTag, CopyableText } from "./CopyableText";
+import { Modal } from "./Modal";
+import { EventEmitter } from "../../utils/EventEmitter";
+import Typography from "@mui/material/Typography";
+import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
 
-type IProps = {
+interface IProps {
   c: CodingContract;
-  popupId: string;
   onClose: () => void;
   onAttempt: (answer: string) => void;
-};
+}
 
-export function CodingContractPopup(props: IProps): React.ReactElement {
+export const CodingContractEvent = new EventEmitter<[IProps]>();
+
+export function CodingContractModal(): React.ReactElement {
+  const [props, setProps] = useState(null);
   const [answer, setAnswer] = useState("");
 
+  useEffect(() => {
+    CodingContractEvent.subscribe((props) => setProps(props));
+  });
+  if (props === null) return <>;
+
   function onChange(event: React.ChangeEvent): void {
     setAnswer(event.target.value);
   }
 
   function onKeyDown(event: React.KeyboardEvent): void {
+    if (props === null) return;
     // React just won't cooperate on this one.
     // "React.KeyboardEvent" seems like the right type but
     // whatever ...
@@ -30,34 +43,47 @@ export function CodingContractPopup(props: IProps): React.ReactElement {
     }
   }
 
+  function close(): void {
+    if (props === null) return;
+    props.onClose();
+    setProps(null);
+  }
+
   const contractType: CodingContractType = CodingContractTypes[props.c.type];
   const description = [];
   for (const [i, value] of contractType.desc(props.c.data).split("\n").entries())
     description.push(" }}>);
   return (
-    

-      
-      

-      

-      

+    
+      
+        
+      
+      
         You are attempting to solve a Coding Contract. You have {props.c.getMaxNumTries() - props.c.tries} tries
         remaining, after which the contract will self-destruct.
-      

+      
       

-      
{description}

+      {description}
       

-       {
+                props.onAttempt(answer);
+                close();
+              }}
+            >
+              Solve
+            
+          ),
+        }}
       />
-      
-    

+    
   );
 }
diff --git a/src/ui/React/Favor.tsx b/src/ui/React/Favor.tsx
index cee804849..29961cb8e 100644
--- a/src/ui/React/Favor.tsx
+++ b/src/ui/React/Favor.tsx
@@ -1,10 +1,18 @@
 import * as React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
 
-export function Favor(favor: number | string): JSX.Element {
-  return (
-    
-      {typeof favor === "number" ? numeralWrapper.formatFavor(favor) : favor}
-    
-  );
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    favor: {
+      color: theme.colors.rep,
+    },
+  }),
+);
+
+export function Favor({ favor }: { favor: number | string }): React.ReactElement {
+  const classes = useStyles();
+  return {typeof favor === "number" ? numeralWrapper.formatFavor(favor) : favor};
 }
diff --git a/src/ui/React/HashRate.tsx b/src/ui/React/HashRate.tsx
index f368ce66c..bd355f54f 100644
--- a/src/ui/React/HashRate.tsx
+++ b/src/ui/React/HashRate.tsx
@@ -1,6 +1,7 @@
+import React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { Hashes } from "../../ui/React/Hashes";
 
-export function HashRate(hashes: number): JSX.Element {
-  return Hashes(`${numeralWrapper.formatHashes(hashes)} / sec`);
+export function HashRate({ hashes }: { hashes: number }): React.ReactElement {
+  return ;
 }
diff --git a/src/ui/React/Hashes.tsx b/src/ui/React/Hashes.tsx
index 87cb72bed..2a151defa 100644
--- a/src/ui/React/Hashes.tsx
+++ b/src/ui/React/Hashes.tsx
@@ -1,10 +1,20 @@
 import * as React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
 
-export function Hashes(hashes: number | string): JSX.Element {
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    money: {
+      color: theme.colors.money,
+    },
+  }),
+);
+
+export function Hashes({ hashes }: { hashes: number | string }): React.ReactElement {
+  const classes = useStyles();
   return (
-    
-      {typeof hashes === "number" ? numeralWrapper.formatHashes(hashes) : hashes}
-    
+    {typeof hashes === "number" ? numeralWrapper.formatHashes(hashes) : hashes}
   );
 }
diff --git a/src/ui/React/Modal.tsx b/src/ui/React/Modal.tsx
index 3933e005f..ce6c634c6 100644
--- a/src/ui/React/Modal.tsx
+++ b/src/ui/React/Modal.tsx
@@ -42,6 +42,8 @@ export const Modal = (props: IProps): React.ReactElement => {
     
+  createStyles({
+    unbuyable: {
+      color: theme.palette.action.disabled,
+    },
+    money: {
+      color: theme.colors.money,
+    },
+  }),
+);
 
 interface IProps {
   money: number | string;
   player?: IPlayer;
 }
-export function Money(props: IProps): JSX.Element {
+export function Money(props: IProps): React.ReactElement {
+  const classes = useStyles();
   if (props.player !== undefined) {
     if (typeof props.money !== "number") throw new Error("if player if provided, money should be number, contact dev");
     if (!props.player.canAfford(props.money))
-      return {numeralWrapper.formatMoney(props.money)};
+      return {numeralWrapper.formatMoney(props.money)};
   }
   return (
-    
+    
       {typeof props.money === "number" ? numeralWrapper.formatMoney(props.money) : props.money}
     
   );
diff --git a/src/ui/React/Reputation.tsx b/src/ui/React/Reputation.tsx
index 4afa888a9..d028572d2 100644
--- a/src/ui/React/Reputation.tsx
+++ b/src/ui/React/Reputation.tsx
@@ -1,10 +1,22 @@
 import * as React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
 
-export function Reputation(reputation: number | string): JSX.Element {
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    reputation: {
+      color: theme.colors.rep,
+    },
+  }),
+);
+
+export function Reputation({ reputation }: { reputation: number | string }): React.ReactElement {
+  const classes = useStyles();
   return (
-    
-      {typeof reputation === "number" ? numeralWrapper.formatReputation(reputation) : reputation}
+    
+      {typeof reputation === "number" ? numeralWrapper.formatFavor(reputation) : reputation}
     
   );
 }
diff --git a/src/ui/React/ReputationRate.tsx b/src/ui/React/ReputationRate.tsx
index c3a283398..58ff16097 100644
--- a/src/ui/React/ReputationRate.tsx
+++ b/src/ui/React/ReputationRate.tsx
@@ -1,6 +1,7 @@
+import React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { Reputation } from "../../ui/React/Reputation";
 
-export function ReputationRate(reputation: number): JSX.Element {
-  return Reputation(`${numeralWrapper.formatReputation(reputation)} / sec`);
+export function ReputationRate({ reputation }: { reputation: number }): React.ReactElement {
+  return ;
 }
diff --git a/src/ui/WorkInProgressRoot.tsx b/src/ui/WorkInProgressRoot.tsx
index e40787e3c..cd9b4a30a 100644
--- a/src/ui/WorkInProgressRoot.tsx
+++ b/src/ui/WorkInProgressRoot.tsx
@@ -49,7 +49,8 @@ export function WorkInProgressRoot(): React.ReactElement {
           
             You are currently {player.currentWorkFactionDescription} for your faction {faction.name}
             

-            (Current Faction Reputation: {Reputation(faction.playerReputation)}). 

+            (Current Faction Reputation: 
+            ). 

             You have been doing this for {convertTimeMsToTimeElapsedString(player.timeWorked)}
             

             

@@ -58,8 +59,8 @@ export function WorkInProgressRoot(): React.ReactElement {
              (){" "}
             

             

-            {Reputation(player.workRepGained)} ({ReputationRate(player.workRepGainRate * CYCLES_PER_SEC)}) reputation
-            for this faction 

+             (
+            ) reputation for this faction 

             

             {numeralWrapper.formatExp(player.workHackExpGained)} (
             {numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp 

@@ -171,7 +172,7 @@ export function WorkInProgressRoot(): React.ReactElement {
         
           
             You are currently working as a {position} at {player.companyName} (Current Company Reputation:{" "}
-            {Reputation(companyRep)})

+            )

             

             You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
             

@@ -181,8 +182,8 @@ export function WorkInProgressRoot(): React.ReactElement {
              (){" "}
             

             

-            {Reputation(player.workRepGained)} ({ReputationRate(player.workRepGainRate * CYCLES_PER_SEC)}) reputation
-            for this company 

+             (
+            ) reputation for this company 

             

             {numeralWrapper.formatExp(player.workHackExpGained)} (
             {`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`}
@@ -241,7 +242,7 @@ export function WorkInProgressRoot(): React.ReactElement {
         
           
             You are currently working as a {position} at {player.companyName} (Current Company Reputation:{" "}
-            {Reputation(companyRep)})

+            )

             

             You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
             

@@ -251,8 +252,8 @@ export function WorkInProgressRoot(): React.ReactElement {
              (){" "}
             

             

-            {Reputation(player.workRepGained)} (
-            {Reputation(`${numeralWrapper.formatExp(player.workRepGainRate * CYCLES_PER_SEC)} / sec`)}
+             (
+            
             ) reputation for this company 

             

             {numeralWrapper.formatExp(player.workHackExpGained)} (
@@ -306,12 +307,12 @@ export function WorkInProgressRoot(): React.ReactElement {
       
         
           
-            
You are attempting to {player.crimeType}.

+            You are attempting to {player.crimeType}.
             

 
-            

+            
               Time remaining: {convertTimeMsToTimeElapsedString(player.timeNeededToCompleteWork - player.timeWorked)}
-            

+            
 
             

             
{progressBar}