From cba40c71b2a005b448bf08bcfcde8eac6e34b11e Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Sat, 25 Sep 2021 03:09:27 -0400 Subject: [PATCH] mui stuff --- src/Faction/ui/FactionsRoot.tsx | 4 +- src/Locations/ui/TravelAgencyRoot.tsx | 131 ++++++++++--------- src/Locations/ui/TravelConfirmationModal.tsx | 37 ++++++ src/Locations/ui/TravelConfirmationPopup.tsx | 33 ----- src/Programs/ui/ProgramsRoot.tsx | 55 ++++---- src/Tutorial/ui/TutorialRoot.tsx | 2 +- src/ui/ActiveScripts/ActiveScriptsRoot.tsx | 1 + src/ui/CharacterStats.tsx | 18 +-- src/ui/React/WorldMap.tsx | 64 ++++----- 9 files changed, 167 insertions(+), 178 deletions(-) create mode 100644 src/Locations/ui/TravelConfirmationModal.tsx delete mode 100644 src/Locations/ui/TravelConfirmationPopup.tsx diff --git a/src/Faction/ui/FactionsRoot.tsx b/src/Faction/ui/FactionsRoot.tsx index ec3d66b10..f668b47d7 100644 --- a/src/Faction/ui/FactionsRoot.tsx +++ b/src/Faction/ui/FactionsRoot.tsx @@ -39,9 +39,7 @@ export function FactionsRoot(props: IProps): React.ReactElement { return ( <> - - Factions - + Factions Lists all factions you have joined
diff --git a/src/Locations/ui/TravelAgencyRoot.tsx b/src/Locations/ui/TravelAgencyRoot.tsx index 298d937c3..26cb05b5e 100644 --- a/src/Locations/ui/TravelAgencyRoot.tsx +++ b/src/Locations/ui/TravelAgencyRoot.tsx @@ -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); - return; - } - const popupId = `travel-confirmation`; - createPopup(popupId, TravelConfirmationPopup, { - player: p, - city: city, - travel: () => travel(p, router, city), - popupId: popupId, - }); -} - -function ASCIIWorldMap(props: IProps): React.ReactElement { - return ( -
-

- From here, you can travel to any other city! A ticket costs{" "} - . -

- createTravelPopup(props.p, props.router, city)} - /> -
- ); -} - -function ListWorldMap(props: IProps): React.ReactElement { - return ( -
-

- From here, you can travel to any other city! A ticket costs{" "} - . -

- {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 ( - createTravelPopup(props.p, props.router, city as CityName)} - style={{ display: "block" }} - text={`Travel to ${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; + } + if (Settings.SuppressTravelConfirmation) { + travel(player, router, city); + return; + } + setOpen(true); + setDestination(city); + } + return ( <> -

Travel Agency

- {Settings.DisableASCIIArt ? ( - - ) : ( - - )} + Travel Agency + + + From here, you can travel to any other city! A ticket costs{" "} + . + + {Settings.DisableASCIIArt ? ( +
+ {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 ( + + +
+ + ); + })} +
+ ) : ( + startTravel(city)} /> + )} + + travel(player, router, destination)} + open={open} + onClose={() => setOpen(false)} + /> ); } diff --git a/src/Locations/ui/TravelConfirmationModal.tsx b/src/Locations/ui/TravelConfirmationModal.tsx new file mode 100644 index 000000000..f43685232 --- /dev/null +++ b/src/Locations/ui/TravelConfirmationModal.tsx @@ -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 ( + + + Would you like to travel to {props.city}? The trip will cost . + +
+
+ + + ); +} diff --git a/src/Locations/ui/TravelConfirmationPopup.tsx b/src/Locations/ui/TravelConfirmationPopup.tsx deleted file mode 100644 index 75bd3da24..000000000 --- a/src/Locations/ui/TravelConfirmationPopup.tsx +++ /dev/null @@ -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 ( - <> - - Would you like to travel to {props.city}? The trip will cost . - -
-
- - - ); -} diff --git a/src/Programs/ui/ProgramsRoot.tsx b/src/Programs/ui/ProgramsRoot.tsx index 4538400f1..d2a2bfea3 100644 --- a/src/Programs/ui/ProgramsRoot.tsx +++ b/src/Programs/ui/ProgramsRoot.tsx @@ -20,37 +20,34 @@ export function ProgramsRoot(): React.ReactElement { return ( <> -
- - - 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. - - + Create program + + 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. + - {getAvailableCreatePrograms(player).map((program) => { - const create = program.create; - if (create === null) return <>; + {getAvailableCreatePrograms(player).map((program) => { + const create = program.create; + if (create === null) return <>; - return ( - - - - -
- - ); - })} -
+ return ( + + + + +
+ + ); + })} ); } diff --git a/src/Tutorial/ui/TutorialRoot.tsx b/src/Tutorial/ui/TutorialRoot.tsx index dd01f3c17..5fd05f771 100644 --- a/src/Tutorial/ui/TutorialRoot.tsx +++ b/src/Tutorial/ui/TutorialRoot.tsx @@ -6,7 +6,7 @@ import Box from "@mui/material/Box"; export function TutorialRoot(): React.ReactElement { return ( <> - Tutorial (AKA Links to Documentation) + Tutorial / Documentation + Active Scripts 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 diff --git a/src/ui/CharacterStats.tsx b/src/ui/CharacterStats.tsx index 92d3cfaa2..cc1c3c9c6 100644 --- a/src/ui/CharacterStats.tsx +++ b/src/ui/CharacterStats.tsx @@ -145,7 +145,7 @@ function CurrentBitNode(): React.ReactElement { const index = "BitNode" + player.bitNodeN; return ( <> - + BitNode {player.bitNodeN}: {BitNodes[index].name} @@ -270,9 +270,7 @@ export function CharacterStats(): React.ReactElement { return ( <> - - General - + General Current City: {player.city} @@ -287,9 +285,7 @@ export function CharacterStats(): React.ReactElement {
- - Stats - + Stats @@ -365,9 +361,7 @@ export function CharacterStats(): React.ReactElement {

- - Multipliers - + Multipliers
- - Misc - + Misc {`Servers owned: ${player.purchasedServers.length} / ${getPurchaseServerLimit()}`} diff --git a/src/ui/React/WorldMap.tsx b/src/ui/React/WorldMap.tsx index 03e072e8f..9204bcd04 100644 --- a/src/ui/React/WorldMap.tsx +++ b/src/ui/React/WorldMap.tsx @@ -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 ( - props.onTravel(props.city)} - > - {props.city} - {props.city[0]} - + + props.onTravel(props.city)} style={{ color: "white", whiteSpace: "pre" }}> + {props.city[0]} + + ); } return {props.city[0]}; @@ -37,28 +31,28 @@ export function WorldMap(props: IProps): React.ReactElement { // prettier-ignore return (
- 
               ,_   .  ._. _.  .
- 
           , _-\','|~\~      ~/      ;-'_   _-'     ,;_;_,    ~~-
- 
  /~~-\_/-'~'--' \~~| ',    ,'      /  / ~|-_\_/~/~      ~~--~~~~'--_
- 
  /              ,/'-/~ '\ ,' _  , ','|~                   ._/-, /~
- 
  ~/-'~\_,       '-,| '|. '   ~  ,\ /'~                /    /_  /~
- 
.-~      '|        '',\~|\       _\~     ,_  ,              /,
- 
          '\       /'~          |_/~\\,-,~  \ "         ,_,/ |
- 
           |       /            ._-~'\_ _~|              \ )
- 
            \   __-\           '/      ~ |\  \_          /  ~
- 
  .,         '\ |,  ~-_      - |          \\_' ~|  /\  \~ ,
- 
               ~-_'  _;       '\           '-,   \,' /\/  |
- 
                 '\_,~'\_       \_ _,       /'    '  |, /|'
- 
                   /     \_       ~ |      /         \  ~'; -,_.
- 
                   |       ~\        |    |  ,        '-_, ,; ~ ~\
- 
                    \,     /        \    / /|            ,-, ,   -,
- 
                     |    ,/          |  |' |/          ,-   ~ \   '.
- 
                    ,|   ,/           \ ,/              \      |
- 
                    /    |             ~                 -~~-, /   _
- 
                    | ,-'                                    ~    /
- 
                    / ,'                                      ~
- 
                    ',|  ~
- 
                      ~'
+ ,_ . ._. _. . + , _-\','|~\~ ~/ ;-'_ _-' ,;_;_, ~~- + /~~-\_/-'~'--' \~~| ', ,' / / ~|-_\_/~/~ ~~--~~~~'--_ + / ,/'-/~ '\ ,' _ , ','|~ ._/-, /~ + ~/-'~\_, '-,| '|. ' ~ ,\ /'~ / /_ /~ + .-~ '| '',\~|\ _\~ ,_ , /, + '\ /'~ |_/~\\,-,~ \ " ,_,/ | + | / ._-~'\_ _~| \ ) + \ __-\ '/ ~ |\ \_ / ~ + ., '\ |, ~-_ - | \\_' ~| /\ \~ , + ~-_' _; '\ '-, \,' /\/ | + '\_,~'\_ \_ _, /' ' |, /|' + / \_ ~ | / \ ~'; -,_. + | ~\ | | , '-_, ,; ~ ~\ + \, / \ / /| ,-, , -, + | ,/ | |' |/ ,- ~ \ '. + ,| ,/ \ ,/ \ | + / | ~ -~~-, / _ + | ,-' ~ / + / ,' ~ + ',| ~ + ~'
); }