Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-26 01:23:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

mui stuff

Browse Source
This commit is contained in:
Olivier Gagnon 2021-09-25 03:09:27 -04:00
parent 4254cc2807
commit cba40c71b2
9 changed files with 167 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Faction/ui/FactionsRoot.tsx
View File

@ -39,9 +39,7 @@ export function FactionsRoot(props: IProps): React.ReactElement {
return (
<>
<Typography variant="h5" color="primary">
Factions
</Typography>
<Typography variant="h4">Factions</Typography>
<Typography>Lists all factions you have joined</Typography>
<br />
<Box display="flex" flexDirection="column">

99
src/Locations/ui/TravelAgencyRoot.tsx
View File

@ -3,10 +3,10 @@
*
* TThis subcomponent renders all of the buttons for traveling to different cities
*/
import * as React from "react";
import React, { useState, useEffect } from "react";
import { CityName } from "../data/CityNames";
import { TravelConfirmationPopup } from "./TravelConfirmationPopup";
import { TravelConfirmationModal } from "./TravelConfirmationModal";
import { CONSTANTS } from "../../Constants";
import { IPlayer } from "../../PersonObjects/IPlayer";
@ -14,11 +14,15 @@ import { IRouter } from "../../ui/Router";
import { Settings } from "../../Settings/Settings";
import { StdButton } from "../../ui/React/StdButton";
import { createPopup } from "../../ui/React/createPopup";
import { use } from "../../ui/Context";
import { Money } from "../../ui/React/Money";
import { WorldMap } from "../../ui/React/WorldMap";
import { dialogBoxCreate } from "../../../utils/DialogBox";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
type IProps = {
p: IPlayer;
router: IRouter;
@ -27,7 +31,6 @@ type IProps = {
function travel(p: IPlayer, router: IRouter, to: CityName): void {
const cost = CONSTANTS.TravelCost;
if (!p.canAfford(cost)) {
dialogBoxCreate(`You cannot afford to travel to ${to}`);
return;
}
@ -37,69 +40,69 @@ function travel(p: IPlayer, router: IRouter, to: CityName): void {
router.toCity();
}
function createTravelPopup(p: IPlayer, router: IRouter, city: CityName): void {
if (Settings.SuppressTravelConfirmation) {
travel(p, router, city);
export function TravelAgencyRoot(props: IProps): React.ReactElement {
const player = use.Player();
const router = use.Router();
const setRerender = useState(false)[1];
const [open, setOpen] = useState(false);
const [destination, setDestination] = useState(CityName.Sector12);
function rerender(): void {
setRerender((o) => !o);
}
useEffect(() => {
const id = setInterval(rerender, 1000);
return () => clearInterval(id);
}, []);
function startTravel(city: CityName): void {
const cost = CONSTANTS.TravelCost;
if (!player.canAfford(cost)) {
return;
}
const popupId = `travel-confirmation`;
createPopup(popupId, TravelConfirmationPopup, {
player: p,
city: city,
travel: () => travel(p, router, city),
popupId: popupId,
});
if (Settings.SuppressTravelConfirmation) {
travel(player, router, city);
return;
}
setOpen(true);
setDestination(city);
}
function ASCIIWorldMap(props: IProps): React.ReactElement {
return (
<div className="noselect">
<p>
<>
<Typography variant="h4">Travel Agency</Typography>
<Box mx={2}>
<Typography>
From here, you can travel to any other city! A ticket costs{" "}
<Money money={CONSTANTS.TravelCost} player={props.p} />.
</p>
<WorldMap
currentCity={props.p.city}
onTravel={(city: CityName) => createTravelPopup(props.p, props.router, city)}
/>
</div>
);
}
function ListWorldMap(props: IProps): React.ReactElement {
return (
</Typography>
{Settings.DisableASCIIArt ? (
<div>
<p>
From here, you can travel to any other city! A ticket costs{" "}
<Money money={CONSTANTS.TravelCost} player={props.p} />.
</p>
{Object.values(CityName)
.filter((city: string) => city != props.p.city)
.map((city: string) => {
const match = Object.entries(CityName).find((entry) => entry[1] === city);
if (match === undefined) throw new Error(`could not find key for city '${city}'`);
return (
<StdButton
key={city}
onClick={() => createTravelPopup(props.p, props.router, city as CityName)}
style={{ display: "block" }}
text={`Travel to ${city}`}
/>
<React.Fragment key={city}>
<Button onClick={() => startTravel(city as CityName)} sx={{ m: 2 }}>
<Typography>Travel to {city}</Typography>
</Button>
<br />
</React.Fragment>
);
})}
</div>
);
}
export function TravelAgencyRoot(props: IProps): React.ReactElement {
return (
<>
<h1>Travel Agency</h1>
{Settings.DisableASCIIArt ? (
<ListWorldMap p={props.p} router={props.router} />
) : (
<ASCIIWorldMap p={props.p} router={props.router} />
<WorldMap currentCity={props.p.city} onTravel={(city: CityName) => startTravel(city)} />
)}
</Box>
<TravelConfirmationModal
city={destination}
travel={() => travel(player, router, destination)}
open={open}
onClose={() => setOpen(false)}
/>
</>
);
}

37
src/Locations/ui/TravelConfirmationModal.tsx Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { CONSTANTS } from "../../Constants";
import { Money } from "../../ui/React/Money";
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 {
city: string;
travel: () => void;
open: boolean;
onClose: () => void;
}
export function TravelConfirmationModal(props: IProps): React.ReactElement {
const player = use.Player();
const cost = CONSTANTS.TravelCost;
function travel(): void {
props.travel();
}
return (
<Modal open={props.open} onClose={props.onClose}>
<Typography>
Would you like to travel to {props.city}? The trip will cost <Money money={cost} player={player} />.
</Typography>
<br />
<br />
<Button onClick={travel}>
<Typography>Travel</Typography>
</Button>
</Modal>
);
}

33
src/Locations/ui/TravelConfirmationPopup.tsx
View File

@ -1,33 +0,0 @@
import React from "react";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { CONSTANTS } from "../../Constants";
import { Money } from "../../ui/React/Money";
import { removePopup } from "../../ui/React/createPopup";
interface IProps {
player: IPlayer;
city: string;
travel: () => void;
popupId: string;
}
export function TravelConfirmationPopup(props: IProps): React.ReactElement {
const cost = CONSTANTS.TravelCost;
function travel(): void {
props.travel();
removePopup(props.popupId);
}
return (
<>
<span>
Would you like to travel to {props.city}? The trip will cost <Money money={cost} player={props.player} />.
</span>
<br />
<br />
<button className="std-button" onClick={travel}>
Travel
</button>
</>
);
}

11
src/Programs/ui/ProgramsRoot.tsx
View File

@ -20,14 +20,12 @@ export function ProgramsRoot(): React.ReactElement {
return (
<>
<div>
<Box>
<Typography variant="h4">Create program</Typography>
<Typography>
This page displays any programs that you are able to create. Writing the code for a program takes time,
which can vary based on how complex the program is. If you are working on creating a program you can cancel
at any time. Your progress will be saved and you can continue later.
This page displays any programs that you are able to create. Writing the code for a program takes time, which
can vary based on how complex the program is. If you are working on creating a program you can cancel at any
time. Your progress will be saved and you can continue later.
</Typography>
</Box>
{getAvailableCreatePrograms(player).map((program) => {
const create = program.create;
@ -50,7 +48,6 @@ export function ProgramsRoot(): React.ReactElement {
</React.Fragment>
);
})}
</div>
</>
);
}

2
src/Tutorial/ui/TutorialRoot.tsx
View File

@ -6,7 +6,7 @@ import Box from "@mui/material/Box";
export function TutorialRoot(): React.ReactElement {
return (
<>
<Typography variant="h4">Tutorial (AKA Links to Documentation)</Typography>
<Typography variant="h4">Tutorial / Documentation</Typography>
<Box m={2}>
<Link
color="primary"

1
src/ui/ActiveScripts/ActiveScriptsRoot.tsx
View File

@ -28,6 +28,7 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
return (
<>
<Typography variant="h4">Active Scripts</Typography>
<Typography>
This page displays a list of all of your scripts that are currently running across every machine. It also
provides information about each script's production. The scripts are categorized by the hostname of the servers

18
src/ui/CharacterStats.tsx
View File

@ -145,7 +145,7 @@ function CurrentBitNode(): React.ReactElement {
const index = "BitNode" + player.bitNodeN;
return (
<>
<Typography variant="h5" color="primary">
<Typography variant="h4">
BitNode {player.bitNodeN}: {BitNodes[index].name}
</Typography>
<Typography sx={{ mx: 2 }} style={{ whiteSpace: "pre-wrap", overflowWrap: "break-word" }}>
@ -270,9 +270,7 @@ export function CharacterStats(): React.ReactElement {
return (
<>
<Typography variant="h5" color="primary">
General
</Typography>
<Typography variant="h4">General</Typography>
<Box sx={{ mx: 2 }}>
<Typography>Current City: {player.city}</Typography>
<LastEmployer />
@ -287,9 +285,7 @@ export function CharacterStats(): React.ReactElement {
</Typography>
</Box>
<br />
<Typography variant="h5" color="primary">
Stats
</Typography>
<Typography variant="h4">Stats</Typography>
<Box sx={{ mx: 2 }}>
<Table size="small" padding="none">
<TableBody>
@ -365,9 +361,7 @@ export function CharacterStats(): React.ReactElement {
<br />
</Box>
<br />
<Typography variant="h5" color="primary">
Multipliers
</Typography>
<Typography variant="h4">Multipliers</Typography>
<Box sx={{ mx: 2 }}>
<MultiplierTable
rows={[
@ -477,9 +471,7 @@ export function CharacterStats(): React.ReactElement {
</Box>
<br />
<Typography variant="h5" color="primary">
Misc
</Typography>
<Typography variant="h4">Misc</Typography>
<Box sx={{ mx: 2 }}>
<Typography>{`Servers owned: ${player.purchasedServers.length} / ${getPurchaseServerLimit()}`}</Typography>
<Hacknet />

62
src/ui/React/WorldMap.tsx
View File

@ -1,5 +1,7 @@
import React from "react";
import { CityName } from "../../Locations/data/CityNames";
import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip";
interface ICityProps {
currentCity: CityName;
@ -10,19 +12,11 @@ interface ICityProps {
function City(props: ICityProps): React.ReactElement {
if (props.city !== props.currentCity) {
return (
<span
className="tooltip"
style={{
color: "white",
whiteSpace: "nowrap",
margin: "0px",
padding: "0px",
}}
onClick={() => props.onTravel(props.city)}
>
<span className="tooltiptext">{props.city}</span>
<b>{props.city[0]}</b>
<Tooltip title={props.city}>
<span onClick={() => props.onTravel(props.city)} style={{ color: "white", whiteSpace: "pre" }}>
{props.city[0]}
</span>
</Tooltip>
);
}
return <span>{props.city[0]}</span>;
@ -37,28 +31,28 @@ export function WorldMap(props: IProps): React.ReactElement {
// prettier-ignore
return (
<div className="noselect">
<pre> ,_ . ._. _. .</pre>
<pre> , _-\','|~\~ ~/ ;-'_ _-' ,;_;_, ~~-</pre>
<pre> /~~-\_/-'~'--' \~~| ', ,' / / ~|-_\_/~/~ ~~--~~~~'--_</pre>
<pre> / ,/'-/~ '\ ,' _ , '<City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Volhaven} />,'|~ ._/-, /~</pre>
<pre> ~/-'~\_, '-,| '|. ' ~ ,\ /'~ / /_ /~</pre>
<pre>.-~ '| '',\~|\ _\~ ,_ , <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Chongqing} /> /,</pre>
<pre> '\ <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Sector12} /> /'~ |_/~\\,-,~ \ " ,_,/ |</pre>
<pre> | / ._-~'\_ _~| \ ) <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.NewTokyo} /></pre>
<pre> \ __-\ '/ ~ |\ \_ / ~</pre>
<pre> ., '\ |, ~-_ - | \\_' ~| /\ \~ ,</pre>
<pre> ~-_' _; '\ '-, \,' /\/ |</pre>
<pre> '\_,~'\_ \_ _, /' ' |, /|'</pre>
<pre> / \_ ~ | / \ ~'; -,_.</pre>
<pre> | ~\ | | , '-_, ,; ~ ~\</pre>
<pre> \, <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Aevum} /> / \ / /| ,-, , -,</pre>
<pre> | ,/ | |' |/ ,- ~ \ '.</pre>
<pre> ,| ,/ \ ,/ \ <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Ishima} /> |</pre>
<pre> / | ~ -~~-, / _</pre>
<pre> | ,-' ~ /</pre>
<pre> / ,' ~</pre>
<pre> ',| ~</pre>
<pre> ~'</pre>
<Typography sx={{whiteSpace: 'pre'}}> ,_ . ._. _. .</Typography>
<Typography sx={{whiteSpace: 'pre'}}> , _-\','|~\~ ~/ ;-'_ _-' ,;_;_, ~~-</Typography>
<Typography sx={{whiteSpace: 'pre'}}> /~~-\_/-'~'--' \~~| ', ,' / / ~|-_\_/~/~ ~~--~~~~'--_</Typography>
<Typography sx={{whiteSpace: 'pre'}}> / ,/'-/~ '\ ,' _ , '<City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Volhaven} />,'|~ ._/-, /~</Typography>
<Typography sx={{whiteSpace: 'pre'}}> ~/-'~\_, '-,| '|. ' ~ ,\ /'~ / /_ /~</Typography>
<Typography sx={{whiteSpace: 'pre'}}>.-~ '| '',\~|\ _\~ ,_ , <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Chongqing} /> /,</Typography>
<Typography sx={{whiteSpace: 'pre'}}> '\ <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Sector12} /> /'~ |_/~\\,-,~ \ " ,_,/ |</Typography>
<Typography sx={{whiteSpace: 'pre'}}> | / ._-~'\_ _~| \ ) <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.NewTokyo} /></Typography>
<Typography sx={{whiteSpace: 'pre'}}> \ __-\ '/ ~ |\ \_ / ~</Typography>
<Typography sx={{whiteSpace: 'pre'}}> ., '\ |, ~-_ - | \\_' ~| /\ \~ ,</Typography>
<Typography sx={{whiteSpace: 'pre'}}> ~-_' _; '\ '-, \,' /\/ |</Typography>
<Typography sx={{whiteSpace: 'pre'}}> '\_,~'\_ \_ _, /' ' |, /|'</Typography>
<Typography sx={{whiteSpace: 'pre'}}> / \_ ~ | / \ ~'; -,_.</Typography>
<Typography sx={{whiteSpace: 'pre'}}> | ~\ | | , '-_, ,; ~ ~\</Typography>
<Typography sx={{whiteSpace: 'pre'}}> \, <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Aevum} /> / \ / /| ,-, , -,</Typography>
<Typography sx={{whiteSpace: 'pre'}}> | ,/ | |' |/ ,- ~ \ '.</Typography>
<Typography sx={{whiteSpace: 'pre'}}> ,| ,/ \ ,/ \ <City onTravel={props.onTravel} currentCity={props.currentCity} city={CityName.Ishima} /> |</Typography>
<Typography sx={{whiteSpace: 'pre'}}> / | ~ -~~-, / _</Typography>
<Typography sx={{whiteSpace: 'pre'}}> | ,-' ~ /</Typography>
<Typography sx={{whiteSpace: 'pre'}}> / ,' ~</Typography>
<Typography sx={{whiteSpace: 'pre'}}> ',| ~</Typography>
<Typography sx={{whiteSpace: 'pre'}}> ~'</Typography>
</div>
);
}