build dev

src/Locations/ui/GenericLocation.tsx

@@ -76,9 +76,7 @@ export class GenericLocation extends React.Component<IProps, any> {
     }
 
     if (this.props.loc.types.includes(LocationType.Special)) {
-      content.push(
-        <SpecialLocation engine={this.props.engine} key={"speciallocation"} loc={this.props.loc} p={this.props.p} />,
-      );
+      content.push(<SpecialLocation key={"speciallocation"} loc={this.props.loc} />);
     }
 
     if (this.props.loc.types.includes(LocationType.TechVendor)) {

src/Locations/ui/Root.tsx

@@ -98,7 +98,8 @@ export class LocationRoot extends React.Component<IProps, IState> {
     }
 
     if (loc.types.includes(LocationType.StockMarket)) {
-      this.props.engine.loadStockMarketContent();
+      setTimeout(() => this.props.router.toStockMarket(), 50);
+      return <></>;
     }
 
     return (

src/Locations/ui/SpecialLocation.tsx

@@ -10,7 +10,7 @@
  * This subcomponent creates all of the buttons for interacting with those special
  * properties
  */
-import * as React from "react";
+import React, { useState } from "react";
 
 import { Location } from "../Location";
 import { CreateCorporationPopup } from "../../Corporation/ui/CreateCorporationPopup";
@@ -19,6 +19,7 @@ import { LocationName } from "../data/LocationNames";
 
 import { IEngine } from "../../IEngine";
 import { IPlayer } from "../../PersonObjects/IPlayer";
+import { use } from "../../ui/Context";
 
 import { AutoupdatingStdButton } from "../../ui/React/AutoupdatingStdButton";
 import { StdButton } from "../../ui/React/StdButton";
@@ -26,43 +27,25 @@ import { StdButton } from "../../ui/React/StdButton";
 import { dialogBoxCreate } from "../../../utils/DialogBox";
 
 type IProps = {
-  engine: IEngine;
   loc: Location;
-  p: IPlayer;
 };
 
 type IState = {
   inBladeburner: boolean;
 };
 
-export class SpecialLocation extends React.Component<IProps, IState> {
-  /**
-   * Stores button styling that sets them all to block display
-   */
-  btnStyle: any;
-
-  constructor(props: IProps) {
-    super(props);
-
-    this.btnStyle = { display: "block" };
-
-    this.renderNoodleBar = this.renderNoodleBar.bind(this);
-    this.createCorporationPopup = this.createCorporationPopup.bind(this);
-    this.handleBladeburner = this.handleBladeburner.bind(this);
-    this.handleResleeving = this.handleResleeving.bind(this);
-
-    this.state = {
-      inBladeburner: this.props.p.inBladeburner(),
-    };
-  }
-
+export function SpecialLocation(props: IProps): React.ReactElement {
+  const player = use.Player();
+  const router = use.Router();
+  const [rerender, setRerender] = useState(false);
+  const inBladeburner = player.inBladeburner();
   /**
    * Click handler for "Create Corporation" button at Sector-12 City Hall
    */
-  createCorporationPopup(): void {
+  function createCorporationPopup(): void {
     const popupId = `create-start-corporation-popup`;
     createPopup(popupId, CreateCorporationPopup, {
-      player: this.props.p,
+      player: player,
       popupId: popupId,
     });
   }
@@ -70,19 +53,17 @@ export class SpecialLocation extends React.Component<IProps, IState> {
   /**
    * Click handler for Bladeburner button at Sector-12 NSA
    */
-  handleBladeburner(): void {
-    const p = this.props.p;
+  function handleBladeburner(): void {
+    const p = player;
     if (p.inBladeburner()) {
       // Enter Bladeburner division
-      this.props.engine.loadBladeburnerContent();
+      router.toBladeburner();
     } else {
       // Apply for Bladeburner division
       if (p.strength >= 100 && p.defense >= 100 && p.dexterity >= 100 && p.agility >= 100) {
         p.startBladeburner({ new: true });
         dialogBoxCreate("You have been accepted into the Bladeburner division!");
-        this.setState({
-          inBladeburner: true,
-        });
+        setRerender((old) => !old);
 
         const worldHeader = document.getElementById("world-menu-header");
         if (worldHeader instanceof HTMLElement) {
@@ -98,28 +79,28 @@ export class SpecialLocation extends React.Component<IProps, IState> {
   /**
    * Click handler for Resleeving button at New Tokyo VitaLife
    */
-  handleResleeving(): void {
-    this.props.engine.loadResleevingContent();
+  function handleResleeving(): void {
+    router.toResleeves();
   }
 
-  renderBladeburner(): React.ReactNode {
-    if (!this.props.p.canAccessBladeburner()) {
-      return null;
+  function renderBladeburner(): React.ReactElement {
+    if (!player.canAccessBladeburner()) {
+      return <></>;
     }
-    const text = this.state.inBladeburner ? "Enter Bladeburner Headquarters" : "Apply to Bladeburner Division";
-    return <StdButton onClick={this.handleBladeburner} style={this.btnStyle} text={text} />;
+    const text = inBladeburner ? "Enter Bladeburner Headquarters" : "Apply to Bladeburner Division";
+    return <StdButton onClick={handleBladeburner} style={{ display: "block" }} text={text} />;
   }
 
-  renderNoodleBar(): React.ReactNode {
+  function renderNoodleBar(): React.ReactElement {
     function EatNoodles(): void {
       dialogBoxCreate(<>You ate some delicious noodles and feel refreshed.</>);
     }
 
-    return <StdButton onClick={EatNoodles} style={this.btnStyle} text={"Eat noodles"} />;
+    return <StdButton onClick={EatNoodles} style={{ display: "block" }} text={"Eat noodles"} />;
   }
 
-  renderCreateCorporation(): React.ReactNode {
-    if (!this.props.p.canAccessCorporation()) {
+  function renderCreateCorporation(): React.ReactElement {
+    if (!player.canAccessCorporation()) {
       return (
         <>
           <p>
@@ -130,38 +111,36 @@ export class SpecialLocation extends React.Component<IProps, IState> {
     }
     return (
       <AutoupdatingStdButton
-        disabled={!this.props.p.canAccessCorporation() || this.props.p.hasCorporation()}
-        onClick={this.createCorporationPopup}
-        style={this.btnStyle}
+        disabled={!player.canAccessCorporation() || player.hasCorporation()}
+        onClick={createCorporationPopup}
+        style={{ display: "block" }}
         text={"Create a Corporation"}
       />
     );
   }
 
-  renderResleeving(): React.ReactNode {
-    if (!this.props.p.canAccessResleeving()) {
-      return null;
+  function renderResleeving(): React.ReactElement {
+    if (!player.canAccessResleeving()) {
+      return <></>;
     }
-    return <StdButton onClick={this.handleResleeving} style={this.btnStyle} text={"Re-Sleeve"} />;
+    return <StdButton onClick={handleResleeving} style={{ display: "block" }} text={"Re-Sleeve"} />;
   }
 
-  render(): React.ReactNode {
-    switch (this.props.loc.name) {
-      case LocationName.NewTokyoVitaLife: {
-        return this.renderResleeving();
-      }
-      case LocationName.Sector12CityHall: {
-        return this.renderCreateCorporation();
-      }
-      case LocationName.Sector12NSA: {
-        return this.renderBladeburner();
-      }
-      case LocationName.NewTokyoNoodleBar: {
-        return this.renderNoodleBar();
-      }
-      default:
-        console.error(`Location ${this.props.loc.name} doesn't have any special properties`);
-        break;
+  switch (props.loc.name) {
+    case LocationName.NewTokyoVitaLife: {
+      return renderResleeving();
     }
+    case LocationName.Sector12CityHall: {
+      return renderCreateCorporation();
+    }
+    case LocationName.Sector12NSA: {
+      return renderBladeburner();
+    }
+    case LocationName.NewTokyoNoodleBar: {
+      return renderNoodleBar();
+    }
+    default:
+      console.error(`Location ${props.loc.name} doesn't have any special properties`);
+      return <></>;
   }
 }