mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-10 09:43:54 +01:00
the world map is used every place a travel is done
This commit is contained in:
parent
d5c9306395
commit
7f1d39a298
@ -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)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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" : ""}`}
|
||||
|
@ -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
64
src/ui/React/WorldMap.tsx
Normal 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>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user