Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-22 22:22:26 +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 { BladeburnerConstants } from "../data/Constants";
import { IBladeburner } from "../IBladeburner";
import { WorldMap } from "../../ui/React/WorldMap";
import { CityName } from "../../Locations/data/CityNames";
interface IProps {
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
for your Bladeburner duties does not affect your location in the game otherwise.
</p>
{BladeburnerConstants.CityNames.map((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>
);
})}
<WorldMap currentCity={props.bladeburner.city as CityName} onTravel={(city: CityName) => travel(city)} />
</>
);
}

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

@ -14,6 +14,7 @@ import { Settings } from "../../Settings/Settings";
import { StdButton } from "../../ui/React/StdButton";
import { Money } from "../../ui/React/Money";
import { WorldMap } from "../../ui/React/WorldMap";
type IProps = {
p: IPlayer;
@ -33,27 +34,6 @@ export class TravelAgencyLocation extends React.Component<IProps, any> {
}
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!
// prettier-ignore
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{" "}
<Money money={CONSTANTS.TravelCost} player={this.props.p} />.
</p>
<pre> ,_ . ._. _. .</pre>
<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>
<WorldMap currentCity={this.props.p.city} onTravel={(city: CityName) => createTravelPopup(city, this.props.travel)} />
</div>
);
}

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

@ -5,6 +5,7 @@ import { SleeveTaskType } from "../SleeveTaskTypesEnum";
import { SleeveFaq } from "../data/SleeveFaq";
import { IPlayer } from "../../IPlayer";
import { CONSTANTS } from "../../../Constants";
import { Faction } from "../../../Faction/Faction";
import { Factions } from "../../../Faction/Factions";
@ -201,8 +202,13 @@ export function SleeveElem(props: IProps): React.ReactElement {
<button className="std-button" onClick={openMoreStats}>
More Stats
</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
{props.player.money.lt(CONSTANTS.TravelCost) && <span className="tooltiptext">Not enough money</span>}
</button>
<button
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 { removePopup } from "../../../ui/React/createPopup";
import { Money } from "../../../ui/React/Money";
import { WorldMap } from "../../../ui/React/WorldMap";
import { CityName } from "../../../Locations/data/CityNames";
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
also set your current sleeve task to idle.
</p>
{Object.keys(Cities)
.filter((city: string) => props.sleeve.city !== city)
.map((city: string) => (
<div key={city} className="cmpy-mgmt-find-employee-option" onClick={() => travel(city)}>
{city}
</div>
))}
<WorldMap currentCity={props.sleeve.city} onTravel={(city: CityName) => travel(city)} />
</>
);
}

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>
);
}