diff --git a/src/Casino/CoinFlip.tsx b/src/Casino/CoinFlip.tsx index 3676d971b..17b09488c 100644 --- a/src/Casino/CoinFlip.tsx +++ b/src/Casino/CoinFlip.tsx @@ -53,7 +53,13 @@ export function CoinFlip(props: IProps): React.ReactElement { } const correct: boolean = guess === letter; - setResult({letter}); + setResult( + + + {letter} + + , + ); setStatus(correct ? " win!" : "lose!"); setPlayLock(true); @@ -68,15 +74,7 @@ export function CoinFlip(props: IProps): React.ReactElement { return ( <> - {`+———————+`} - {`| | | |`} - - {`| | `} - {result} - {` | |`} - - {`| | | |`} - {`+———————+`} + Result: {result} - {status} ); diff --git a/src/Corporation/ui/HeaderTab.tsx b/src/Corporation/ui/HeaderTab.tsx deleted file mode 100644 index ec7e1e40c..000000000 --- a/src/Corporation/ui/HeaderTab.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; - -interface IProps { - current: boolean; - text: string; - onClick: () => void; -} - -export function HeaderTab(props: IProps): React.ReactElement { - let className = "cmpy-mgmt-header-tab"; - if (props.current) { - className += " current"; - } - - return ( - - ); -} diff --git a/src/Corporation/ui/MoneyCost.tsx b/src/Corporation/ui/MoneyCost.tsx index c14a3659d..2017aa99d 100644 --- a/src/Corporation/ui/MoneyCost.tsx +++ b/src/Corporation/ui/MoneyCost.tsx @@ -1,14 +1,30 @@ import * as React from "react"; import { numeralWrapper } from "../../ui/numeralFormat"; import { ICorporation } from "../ICorporation"; +import { Theme } from "@mui/material/styles"; +import makeStyles from "@mui/styles/makeStyles"; +import createStyles from "@mui/styles/createStyles"; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + unbuyable: { + color: theme.palette.action.disabled, + }, + money: { + color: theme.colors.money, + }, + }), +); interface IProps { money: number; corp: ICorporation; } -export function MoneyCost(props: IProps): JSX.Element { - if (!props.corp.funds.gt(props.money)) - return {numeralWrapper.formatMoney(props.money)}; - return {numeralWrapper.formatMoney(props.money)}; +export function MoneyCost(props: IProps): React.ReactElement { + const classes = useStyles(); + if (!props.corp.funds.gt(props.money)) + return {numeralWrapper.formatMoney(props.money)}; + + return {numeralWrapper.formatMoney(props.money)}; } diff --git a/src/Faction/ui/CreateGangModal.tsx b/src/Faction/ui/CreateGangModal.tsx new file mode 100644 index 000000000..c2592286f --- /dev/null +++ b/src/Faction/ui/CreateGangModal.tsx @@ -0,0 +1,64 @@ +/** + * React Component for the popup used to create a new gang. + */ +import React from "react"; +import { Modal } from "../../ui/React/Modal"; +import { use } from "../../ui/Context"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; + +interface IProps { + open: boolean; + onClose: () => void; + facName: string; +} + +export function CreateGangModal(props: IProps): React.ReactElement { + const player = use.Player(); + const router = use.Router(); + const combatGangText = + "This is a COMBAT gang. Members in this gang will have different tasks than HACKING gangs. " + + "Compared to hacking gangs, progression with combat gangs can be more difficult as territory management " + + "is more important. However, well-managed combat gangs can progress faster than hacking ones."; + + const hackingGangText = + "This is a HACKING gang. Members in this gang will have different tasks than COMBAT gangs. " + + "Compared to combat gangs, progression with hacking gangs is more straightforward as territory warfare " + + "is not as important."; + + function isHacking(): boolean { + return ["NiteSec", "The Black Hand"].includes(props.facName); + } + + function createGang(): void { + player.startGang(props.facName, isHacking()); + props.onClose(); + router.toGang(); + } + + function onKeyUp(event: React.KeyboardEvent): void { + if (event.keyCode === 13) createGang(); + } + + return ( + + + Would you like to create a new Gang with {props.facName}? +
+
+ Note that this will prevent you from creating a Gang with any other Faction until this BitNode is destroyed. It + also resets your reputation with this faction. +
+
+ {isHacking() ? hackingGangText : combatGangText} +
+
+ Other than hacking vs combat, there are NO differences between the Factions you can create a Gang with, and each + of these Factions have all Augmentations available. + + + + ); +} diff --git a/src/Faction/ui/CreateGangPopup.tsx b/src/Faction/ui/CreateGangPopup.tsx deleted file mode 100644 index e47579d92..000000000 --- a/src/Faction/ui/CreateGangPopup.tsx +++ /dev/null @@ -1,69 +0,0 @@ -/** - * React Component for the popup used to create a new gang. - */ -import React from "react"; -import { removePopup } from "../../ui/React/createPopup"; -import { StdButton } from "../../ui/React/StdButton"; -import { IRouter } from "../../ui/Router"; -import { IPlayer } from "../../PersonObjects/IPlayer"; - -interface ICreateGangPopupProps { - popupId: string; - facName: string; - player: IPlayer; - router: IRouter; -} - -export function CreateGangPopup(props: ICreateGangPopupProps): React.ReactElement { - const player = props.player; - const router = props.router; - const combatGangText = - "This is a COMBAT gang. Members in this gang will have different tasks than HACKING gangs. " + - "Compared to hacking gangs, progression with combat gangs can be more difficult as territory management " + - "is more important. However, well-managed combat gangs can progress faster than hacking ones."; - - const hackingGangText = - "This is a HACKING gang. Members in this gang will have different tasks than COMBAT gangs. " + - "Compared to combat gangs, progression with hacking gangs is more straightforward as territory warfare " + - "is not as important."; - - function isHacking(): boolean { - return ["NiteSec", "The Black Hand"].includes(props.facName); - } - - function createGang(): void { - player.startGang(props.facName, isHacking()); - removePopup(props.popupId); - router.toGang(); - } - - function onKeyUp(event: React.KeyboardEvent): void { - if (event.keyCode === 13) createGang(); - } - - return ( - <> - Would you like to create a new Gang with {props.facName}? -
-
- Note that this will prevent you from creating a Gang with any other Faction until this BitNode is destroyed. It - also resets your reputation with this faction. -
-
- {isHacking() ? hackingGangText : combatGangText} -
-
- Other than hacking vs combat, there are NO differences between the Factions you can create a Gang with, and each - of these Factions have all Augmentations available. -
- -
- - ); -} diff --git a/src/Faction/ui/FactionRoot.tsx b/src/Faction/ui/FactionRoot.tsx index 283ab7ddc..cc6d656f2 100644 --- a/src/Faction/ui/FactionRoot.tsx +++ b/src/Faction/ui/FactionRoot.tsx @@ -18,7 +18,7 @@ import { SourceFileFlags } from "../../SourceFile/SourceFileFlags"; import { createPopup } from "../../ui/React/createPopup"; import { use } from "../../ui/Context"; -import { CreateGangPopup } from "./CreateGangPopup"; +import { CreateGangModal } from "./CreateGangModal"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; @@ -75,22 +75,17 @@ function MainPage({ faction, rerender, onAugmentations }: IMainProps): React.Rea const player = use.Player(); const router = use.Router(); const [sleevesOpen, setSleevesOpen] = useState(false); + const [gangOpen, setGangOpen] = useState(false); const p = player; const factionInfo = faction.getInfo(); - function manageGang(faction: Faction): void { + function manageGang(): void { // If player already has a gang, just go to the gang UI if (player.inGang()) { return router.toGang(); } - const popupId = "create-gang-popup"; - createPopup(popupId, CreateGangPopup, { - popupId: popupId, - facName: faction.name, - player: player, - router: router, - }); + setGangOpen(true); } function startFieldWork(faction: Faction): void { @@ -137,7 +132,12 @@ function MainPage({ faction, rerender, onAugmentations }: IMainProps): React.Rea {faction.name} - {canAccessGang &&