the world map is used every place a travel is done

src/Bladeburner/ui/TravelPopup.tsx

@@ -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) => {
+      <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>
-        );
-      })}
     </>
   );
 }

src/Locations/ui/TravelAgencyLocation.tsx

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

src/PersonObjects/Sleeve/ui/SleeveElem.tsx

@@ -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" : ""}`}

src/PersonObjects/Sleeve/ui/TravelPopup.tsx

@@ -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)
+      <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>
-        ))}
     </>
   );
 }

src/ui/React/WorldMap.tsx

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