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

the world map is used every place a travel is done

Browse Source
This commit is contained in:
Olivier Gagnon 2021-09-09 22:06:59 -04:00
parent d5c9306395
commit 7f1d39a298
5 changed files with 78 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Bladeburner/ui/TravelPopup.tsx
View File

@ -2,6 +2,8 @@ import React from "react";
import { removePopup } from "../../ui/React/createPopup"; import { removePopup } from "../../ui/React/createPopup";
import { BladeburnerConstants } from "../data/Constants"; import { BladeburnerConstants } from "../data/Constants";
import { IBladeburner } from "../IBladeburner"; import { IBladeburner } from "../IBladeburner";
import { WorldMap } from "../../ui/React/WorldMap";
import { CityName } from "../../Locations/data/CityNames";
interface IProps { interface IProps {
bladeburner: IBladeburner; bladeburner: IBladeburner;
@ -20,15 +22,7 @@ export function TravelPopup(props: IProps): React.ReactElement {
Travel to a different city for your Bladeburner activities. This does not cost any money. The city you are in Travel to a different city for your Bladeburner activities. This does not cost any money. The city you are in
for your Bladeburner duties does not affect your location in the game otherwise. for your Bladeburner duties does not affect your location in the game otherwise.
</p> </p>
{BladeburnerConstants.CityNames.map((city) => { <WorldMap currentCity={props.bladeburner.city as CityName} onTravel={(city: CityName) => travel(city)} />
// Reusing this css class...it adds a border and makes it
// so that background color changes when you hover
return (
<div key={city} className="cmpy-mgmt-find-employee-option" onClick={() => travel(city)}>
{city}
</div>
);
})}
</> </>
); );
} }

45
src/Locations/ui/TravelAgencyLocation.tsx
View File

@ -14,6 +14,7 @@ import { Settings } from "../../Settings/Settings";
import { StdButton } from "../../ui/React/StdButton"; import { StdButton } from "../../ui/React/StdButton";
import { Money } from "../../ui/React/Money"; import { Money } from "../../ui/React/Money";
import { WorldMap } from "../../ui/React/WorldMap";
type IProps = { type IProps = {
p: IPlayer; p: IPlayer;
@ -33,27 +34,6 @@ export class TravelAgencyLocation extends React.Component<IProps, any> {
} }
asciiWorldMap(): React.ReactNode { asciiWorldMap(): React.ReactNode {
const LocationLetter = (props: any): JSX.Element => {
if (props.city !== this.props.p.city) {
return (
<span
className="tooltip"
style={{
color: "white",
whiteSpace: "nowrap",
margin: "0px",
padding: "0px",
}}
onClick={createTravelPopup.bind(null, props.city, this.props.travel)}
>
<span className="tooltiptext">{props.city}</span>
<b>{props.city[0]}</b>
</span>
);
}
return <span>{props.city[0]}</span>;
};
// map needs all this whitespace! // map needs all this whitespace!
// prettier-ignore // prettier-ignore
return ( return (
@ -62,28 +42,7 @@ export class TravelAgencyLocation extends React.Component<IProps, any> {
From here, you can travel to any other city! A ticket costs{" "} From here, you can travel to any other city! A ticket costs{" "}
<Money money={CONSTANTS.TravelCost} player={this.props.p} />. <Money money={CONSTANTS.TravelCost} player={this.props.p} />.
</p> </p>
<pre> ,_ . ._. _. .</pre> <WorldMap currentCity={this.props.p.city} onTravel={(city: CityName) => createTravelPopup(city, this.props.travel)} />
<pre> , _-\','|~\~ ~/ ;-'_ _-' ,;_;_, ~~-</pre>
<pre> /~~-\_/-'~'--' \~~| ', ,' / / ~|-_\_/~/~ ~~--~~~~'--_</pre>
<pre> / ,/'-/~ '\ ,' _ , '<LocationLetter city="Volhaven" />,'|~ ._/-, /~</pre>
<pre> ~/-'~\_, '-,| '|. ' ~ ,\ /'~ / /_ /~</pre>
<pre>.-~ '| '',\~|\ _\~ ,_ , <LocationLetter city="Chongqing" /> /,</pre>
<pre> '\ <LocationLetter city="Sector-12" /> /'~ |_/~\\,-,~ \ " ,_,/ |</pre>
<pre> | / ._-~'\_ _~| \ ) <LocationLetter city="New Tokyo" /></pre>
<pre> \ __-\ '/ ~ |\ \_ / ~</pre>
<pre> ., '\ |, ~-_ - | \\_' ~| /\ \~ ,</pre>
<pre> ~-_' _; '\ '-, \,' /\/ |</pre>
<pre> '\_,~'\_ \_ _, /' ' |, /|'</pre>
<pre> / \_ ~ | / \ ~'; -,_.</pre>
<pre> | ~\ | | , '-_, ,; ~ ~\</pre>
<pre> \, <LocationLetter city="Aevum" /> / \ / /| ,-, , -,</pre>
<pre> | ,/ | |' |/ ,- ~ \ '.</pre>
<pre> ,| ,/ \ ,/ \ <LocationLetter city="Ishima" /> |</pre>
<pre> / | ~ -~~-, / _</pre>
<pre> | ,-' ~ /</pre>
<pre> / ,' ~</pre>
<pre> ',| ~</pre>
<pre> ~'</pre>
</div> </div>
); );
} }

8
src/PersonObjects/Sleeve/ui/SleeveElem.tsx
View File

@ -5,6 +5,7 @@ import { SleeveTaskType } from "../SleeveTaskTypesEnum";
import { SleeveFaq } from "../data/SleeveFaq"; import { SleeveFaq } from "../data/SleeveFaq";
import { IPlayer } from "../../IPlayer"; import { IPlayer } from "../../IPlayer";
import { CONSTANTS } from "../../../Constants";
import { Faction } from "../../../Faction/Faction"; import { Faction } from "../../../Faction/Faction";
import { Factions } from "../../../Faction/Factions"; import { Factions } from "../../../Faction/Factions";
@ -201,8 +202,13 @@ export function SleeveElem(props: IProps): React.ReactElement {
<button className="std-button" onClick={openMoreStats}> <button className="std-button" onClick={openMoreStats}>
More Stats More Stats
</button> </button>
<button className="std-button" onClick={openTravel}> <button
className={`std-button${props.player.money.lt(CONSTANTS.TravelCost) ? " tooltip" : ""}`}
onClick={openTravel}
disabled={props.player.money.lt(CONSTANTS.TravelCost)}
>
Travel Travel
{props.player.money.lt(CONSTANTS.TravelCost) && <span className="tooltiptext">Not enough money</span>}
</button> </button>
<button <button
className={`std-button${props.sleeve.shock < 100 ? " tooltip" : ""}`} className={`std-button${props.sleeve.shock < 100 ? " tooltip" : ""}`}

9
src/PersonObjects/Sleeve/ui/TravelPopup.tsx
View File

@ -5,6 +5,7 @@ import { CONSTANTS } from "../../../Constants";
import { Cities } from "../../../Locations/Cities"; import { Cities } from "../../../Locations/Cities";
import { removePopup } from "../../../ui/React/createPopup"; import { removePopup } from "../../../ui/React/createPopup";
import { Money } from "../../../ui/React/Money"; import { Money } from "../../../ui/React/Money";
import { WorldMap } from "../../../ui/React/WorldMap";
import { CityName } from "../../../Locations/data/CityNames"; import { CityName } from "../../../Locations/data/CityNames";
import { dialogBoxCreate } from "../../../../utils/DialogBox"; import { dialogBoxCreate } from "../../../../utils/DialogBox";
@ -34,13 +35,7 @@ export function TravelPopup(props: IProps): React.ReactElement {
study. Traveling to a different city costs <Money money={CONSTANTS.TravelCost} player={props.player} />. It will study. Traveling to a different city costs <Money money={CONSTANTS.TravelCost} player={props.player} />. It will
also set your current sleeve task to idle. also set your current sleeve task to idle.
</p> </p>
{Object.keys(Cities) <WorldMap currentCity={props.sleeve.city} onTravel={(city: CityName) => travel(city)} />
.filter((city: string) => props.sleeve.city !== city)
.map((city: string) => (
<div key={city} className="cmpy-mgmt-find-employee-option" onClick={() => travel(city)}>
{city}
</div>
))}
</> </>
); );
} }

64
src/ui/React/WorldMap.tsx Normal file
View File

@ -0,0 +1,64 @@
import React from "react";
import { CityName } from "../../Locations/data/CityNames";
interface ICityProps {
currentCity: CityName;
city: CityName;
onTravel: (city: CityName) => void;
}
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>
</span>
);
}
return <span>{props.city[0]}</span>;
}
interface IProps {
currentCity: CityName;
onTravel: (city: CityName) => void;
}
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>
</div>
);
}