From 125e9484f7399482056814f8499891a13f1397f4 Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Sat, 25 Sep 2021 13:52:26 -0400 Subject: [PATCH] Work on hacknet to mui --- css/popupboxes.scss | 7 ++-- src/Hacknet/ui/HacknetRoot.tsx | 15 ++----- src/Hacknet/ui/HacknetUpgradeElem.tsx | 30 ++++++++------ src/Hacknet/ui/HashUpgradeModal.tsx | 59 +++++++++++++++++++++++++++ src/Hacknet/ui/HashUpgradePopup.tsx | 54 ------------------------ src/ui/React/ServerDropdown.tsx | 14 ++++--- 6 files changed, 93 insertions(+), 86 deletions(-) create mode 100644 src/Hacknet/ui/HashUpgradeModal.tsx delete mode 100644 src/Hacknet/ui/HashUpgradePopup.tsx diff --git a/css/popupboxes.scss b/css/popupboxes.scss index 334d53a5b..057e31715 100644 --- a/css/popupboxes.scss +++ b/css/popupboxes.scss @@ -19,12 +19,13 @@ .popup-box-content { background-color: var(--my-background-color); padding: 12px; - border: 5px solid var(--my-highlight-color); + border: 2px solid $hacker-green; width: 70%; max-height: 80%; overflow-y: auto; z-index: 11; /* Sit on top of the container */ color: var(--my-font-color); + box-shadow: 0px 3px 5px -1px #090, 0px 5px 8px 0px #090, 0px 1px 14px 0px #090; } .popup-box-input-div { @@ -89,13 +90,13 @@ max-height: 50%; z-index: 10; background-color: var(--my-background-color); - border: 2px solid var(--my-highlight-color); + border: 2px solid $hacker-green; } .log-box-header { z-index: 1300; background-color: #333; - border: 1px solid var(--my-highlight-color); + border: 2px solid $hacker-green; display: flex; flex: row nowrap; align-items: center; diff --git a/src/Hacknet/ui/HacknetRoot.tsx b/src/Hacknet/ui/HacknetRoot.tsx index e2ef7ec90..8ac3d65ab 100644 --- a/src/Hacknet/ui/HacknetRoot.tsx +++ b/src/Hacknet/ui/HacknetRoot.tsx @@ -7,7 +7,7 @@ import { GeneralInfo } from "./GeneralInfo"; import { HacknetNodeElem } from "./HacknetNodeElem"; import { HacknetServerElem } from "./HacknetServerElem"; import { HacknetNode } from "../HacknetNode"; -import { HashUpgradePopup } from "./HashUpgradePopup"; +import { HashUpgradeModal } from "./HashUpgradeModal"; import { MultiplierButtons } from "./MultiplierButtons"; import { PlayerInfo } from "./PlayerInfo"; import { PurchaseButton } from "./PurchaseButton"; @@ -24,8 +24,6 @@ import { IPlayer } from "../../PersonObjects/IPlayer"; import { AllServers } from "../../Server/AllServers"; import { Server } from "../../Server/Server"; -import { createPopup } from "../../ui/React/createPopup"; - import Typography from "@mui/material/Typography"; import Grid from "@mui/material/Grid"; import Button from "@mui/material/Button"; @@ -35,6 +33,7 @@ interface IProps { } export function HacknetRoot(props: IProps): React.ReactElement { + const [open, setOpen] = useState(false); const setRerender = useState(false)[1]; function rerender(): void { setRerender((old) => !old); @@ -46,13 +45,6 @@ export function HacknetRoot(props: IProps): React.ReactElement { return () => clearInterval(id); }, []); - function createHashUpgradesPopup(): void { - const id = "hacknet-server-hash-upgrades-popup"; - createPopup(id, HashUpgradePopup, { - player: props.player, - }); - } - let totalProduction = 0; for (let i = 0; i < props.player.hacknetNodes.length; ++i) { const node = props.player.hacknetNodes[i]; @@ -142,9 +134,10 @@ export function HacknetRoot(props: IProps): React.ReactElement { - {hasHacknetServers(props.player) && } + {hasHacknetServers(props.player) && } {nodes} + setOpen(false)} /> ); } diff --git a/src/Hacknet/ui/HacknetUpgradeElem.tsx b/src/Hacknet/ui/HacknetUpgradeElem.tsx index f43a64b1b..fa42979df 100644 --- a/src/Hacknet/ui/HacknetUpgradeElem.tsx +++ b/src/Hacknet/ui/HacknetUpgradeElem.tsx @@ -12,6 +12,11 @@ import { dialogBoxCreate } from "../../../utils/DialogBox"; import { CopyableText } from "../../ui/React/CopyableText"; import { Hashes } from "../../ui/React/Hashes"; +import Typography from "@mui/material/Typography"; +import Paper from "@mui/material/Paper"; +import Button from "@mui/material/Button"; +import { SelectChangeEvent } from "@mui/material/Select"; + interface IProps { player: IPlayer; hashManager: HashManager; @@ -21,7 +26,7 @@ interface IProps { export function HacknetUpgradeElem(props: IProps): React.ReactElement { const [selectedServer, setSelectedServer] = useState("ecorp"); - function changeTargetServer(event: React.ChangeEvent): void { + function changeTargetServer(event: SelectChangeEvent): void { setSelectedServer(event.target.value); } @@ -47,24 +52,25 @@ export function HacknetUpgradeElem(props: IProps): React.ReactElement { // Purchase button const canPurchase = hashManager.hashes >= cost; - const btnClass = canPurchase ? "std-button" : "std-button-disabled"; // We'll reuse a Bladeburner css class return ( -
- -

+ + + + + Cost: {Hashes(cost)}, Bought: {level} times -

+ -

{upg.desc}

- - {level > 0 && effect &&

{effect}

} + + {level > 0 && effect && {effect}} {upg.hasTargetServer && ( - + )} -
+ ); } diff --git a/src/Hacknet/ui/HashUpgradeModal.tsx b/src/Hacknet/ui/HashUpgradeModal.tsx new file mode 100644 index 000000000..c836579e5 --- /dev/null +++ b/src/Hacknet/ui/HashUpgradeModal.tsx @@ -0,0 +1,59 @@ +/** + * Create the pop-up for purchasing upgrades with hashes + */ +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"; +import { use } from "../../ui/Context"; +import Typography from "@mui/material/Typography"; + +interface IProps { + open: boolean; + onClose: () => void; +} + +export function HashUpgradeModal(props: IProps): React.ReactElement { + const player = use.Player(); + const setRerender = useState(false)[1]; + function rerender(): void { + setRerender((old) => !old); + } + + useEffect(() => { + const id = setInterval(() => setRerender((old) => !old), 200); + return () => clearInterval(id); + }, []); + + const hashManager = player.hashManager; + if (!(hashManager instanceof HashManager)) { + throw new Error(`Player does not have a HashManager)`); + } + + return ( + + <> + Spend your hashes on a variety of different upgrades + Hashes: {Hashes(player.hashManager.hashes)} + {Object.keys(HashUpgrades).map((upgName) => { + const upg = HashUpgrades[upgName]; + return ( + + ); + })} + + + ); +} diff --git a/src/Hacknet/ui/HashUpgradePopup.tsx b/src/Hacknet/ui/HashUpgradePopup.tsx deleted file mode 100644 index a24194ce9..000000000 --- a/src/Hacknet/ui/HashUpgradePopup.tsx +++ /dev/null @@ -1,54 +0,0 @@ -/** - * Create the pop-up for purchasing upgrades with hashes - */ -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"; - -interface IProps { - player: IPlayer; -} - -export function HashUpgradePopup(props: IProps): React.ReactElement { - const setRerender = useState(false)[1]; - function rerender(): void { - setRerender((old) => !old); - } - - useEffect(() => { - const id = setInterval(() => setRerender((old) => !old), 1000); - return () => clearInterval(id); - }, []); - - const hashManager = props.player.hashManager; - if (!(hashManager instanceof HashManager)) { - throw new Error(`Player does not have a HashManager)`); - } - - const upgradeElems = Object.keys(HashUpgrades).map((upgName) => { - const upg = HashUpgrades[upgName]; - return ( - - ); - }); - - return ( -
-

Spend your hashes on a variety of different upgrades

-

Hashes: {Hashes(props.player.hashManager.hashes)}

- {upgradeElems} -
- ); -} diff --git a/src/ui/React/ServerDropdown.tsx b/src/ui/React/ServerDropdown.tsx index d9523d5ac..ca4b7db58 100644 --- a/src/ui/React/ServerDropdown.tsx +++ b/src/ui/React/ServerDropdown.tsx @@ -8,6 +8,8 @@ import { AllServers } from "../../Server/AllServers"; import { Server } from "../../Server/Server"; import { HacknetServer } from "../../Hacknet/HacknetServer"; +import Select, { SelectChangeEvent } from "@mui/material/Select"; +import MenuItem from "@mui/material/MenuItem"; // TODO make this an enum when this gets converted to TypeScript export const ServerType = { @@ -19,8 +21,8 @@ export const ServerType = { interface IProps { serverType: number; - onChange: (event: React.ChangeEvent) => void; - style: any; + onChange: (event: SelectChangeEvent) => void; + value: string; } export function ServerDropdown(props: IProps): React.ReactElement { @@ -51,16 +53,16 @@ export function ServerDropdown(props: IProps): React.ReactElement { const server = AllServers[serverName]; if (isValidServer(server)) { servers.push( - , + , ); } } return ( - {servers} - + ); }