pre-dialogbox-convert

src/Locations/ui/CasinoLocation.tsx

@@ -3,14 +3,13 @@
  *
  * This subcomponent renders all of the buttons for training at the gym
  */
-import * as React from "react";
+import React, { useState } from "react";
 import Button from "@mui/material/Button";
 import { Blackjack } from "../../Casino/Blackjack";
 import { CoinFlip } from "../../Casino/CoinFlip";
 import { Roulette } from "../../Casino/Roulette";
 import { SlotMachine } from "../../Casino/SlotMachine";
 import { IPlayer } from "../../PersonObjects/IPlayer";
-import { StdButton } from "../../ui/React/StdButton";
 
 enum GameType {
   None = "none",
@@ -28,71 +27,35 @@ type IState = {
   game: GameType;
 };
 
-export class CasinoLocation extends React.Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props);
+export function CasinoLocation(props: IProps): React.ReactElement {
+  const [game, setGame] = useState(GameType.None);
 
-    this.state = {
-      game: GameType.None,
-    };
-
-    this.updateGame = this.updateGame.bind(this);
+  function updateGame(game: GameType): void {
+    setGame(game);
   }
 
-  updateGame(game: GameType): void {
-    this.setState({
-      game,
-    });
-  }
-
-  renderGames(): React.ReactNode {
-    return (
-      <>
-        <Button onClick={() => this.updateGame(GameType.Coin)}>Play coin flip</Button>
-        <br />
-        <Button onClick={() => this.updateGame(GameType.Slots)}>Play slots</Button>
-        <br />
-        <Button onClick={() => this.updateGame(GameType.Roulette)}>Play roulette</Button>
-        <br />
-        <Button onClick={() => this.updateGame(GameType.Blackjack)}>Play blackjack</Button>
-      </>
-    );
-  }
-
-  renderGame(): React.ReactNode {
-    let elem = null;
-    switch (this.state.game) {
-      case GameType.Coin:
-        elem = <CoinFlip p={this.props.p} />;
-        break;
-      case GameType.Slots:
-        elem = <SlotMachine p={this.props.p} />;
-        break;
-      case GameType.Roulette:
-        elem = <Roulette p={this.props.p} />;
-        break;
-      case GameType.Blackjack:
-        elem = <Blackjack p={this.props.p} />;
-        break;
-      case GameType.None:
-        break;
-      default:
-        throw new Error(`MissingCaseException: ${this.state.game}`);
-    }
-
-    return (
-      <>
-        <StdButton onClick={() => this.updateGame(GameType.None)} text={"Stop playing"} />
-        {elem}
-      </>
-    );
-  }
-
-  render(): React.ReactNode {
-    if (this.state.game === GameType.None) {
-      return this.renderGames();
-    } else {
-      return this.renderGame();
-    }
-  }
+  return (
+    <>
+      {game === GameType.None && (
+        <>
+          <Button onClick={() => updateGame(GameType.Coin)}>Play coin flip</Button>
+          <br />
+          <Button onClick={() => updateGame(GameType.Slots)}>Play slots</Button>
+          <br />
+          <Button onClick={() => updateGame(GameType.Roulette)}>Play roulette</Button>
+          <br />
+          <Button onClick={() => updateGame(GameType.Blackjack)}>Play blackjack</Button>
+        </>
+      )}
+      {game !== GameType.None && (
+        <>
+          <Button onClick={() => updateGame(GameType.None)}>Stop playing</Button>
+          {game === GameType.Coin && <CoinFlip p={props.p} />}
+          {game === GameType.Slots && <SlotMachine p={props.p} />}
+          {game === GameType.Roulette && <Roulette p={props.p} />}
+          {game === GameType.Blackjack && <Blackjack p={props.p} />}
+        </>
+      )}
+    </>
+  );
 }

src/Locations/ui/City.tsx

@@ -12,9 +12,10 @@ import { Locations } from "../Locations";
 import { Location } from "../Location";
 import { Settings } from "../../Settings/Settings";
 
-import { StdButton } from "../../ui/React/StdButton";
 import { use } from "../../ui/Context";
 import { IRouter } from "../../ui/Router";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
 
 type IProps = {
   city: City;
@@ -111,29 +112,30 @@ function ASCIICity(props: IProps): React.ReactElement {
     elems.push(<pre key={i}>{lineElems(lines[i])}</pre>);
   }
 
-  return <div className="noselect">{elems}</div>;
+  return <>{elems}</>;
 }
 
 function ListCity(props: IProps): React.ReactElement {
   const router = use.Router();
   const locationButtons = props.city.locations.map((locName) => {
     return (
-      <li key={locName}>
-        <StdButton onClick={() => toLocation(router, Locations[locName])} text={locName} />
-      </li>
+      <React.Fragment key={locName}>
+        <Button onClick={() => toLocation(router, Locations[locName])}>{locName}</Button>
+        <br />
+      </React.Fragment>
     );
   });
 
-  return <ul>{locationButtons}</ul>;
+  return <>{locationButtons}</>;
 }
 
 export function LocationCity(): React.ReactElement {
   const player = use.Player();
   const city = Cities[player.city];
   return (
-    <div className="noselect">
-      <h2>{city.name}</h2>
+    <>
+      <Typography>{city.name}</Typography>
       {Settings.DisableASCIIArt ? <ListCity city={city} /> : <ASCIICity city={city} />}
-    </div>
+    </>
   );
 }

src/Locations/ui/CompanyLocation.tsx

@@ -212,7 +212,7 @@ export function CompanyLocation(props: IProps): React.ReactElement {
                 </>
               }
             >
-              <Typography className={"tooltip"}>Company Favor: {Favor(company.favor)}</Typography>
+              <Typography>Company Favor: {Favor(company.favor)}</Typography>
             </Tooltip>
           </Box>
           <Typography>-------------------------</Typography>

src/Locations/ui/GenericLocation.tsx

@@ -90,7 +90,7 @@ export function GenericLocation({ loc }: IProps): React.ReactElement {
   return (
     <>
       <Button onClick={() => router.toCity()}>Return to World</Button>
-      <Typography variant="h4" className="noselect">
+      <Typography variant="h4">
         {backdoorInstalled && !Settings.DisableTextEffects ? <CorruptableText content={loc.name} /> : loc.name}
       </Typography>
       {locContent}

src/Locations/ui/TechVendorLocation.tsx

@@ -70,7 +70,7 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
     <div>
       {purchaseServerButtons}
       <br />
-      <Typography className="noselect">
+      <Typography>
         <i>"You can order bigger servers via scripts. We don't take custom order in person."</i>
       </Typography>
       <br />

src/Locations/ui/TravelAgencyRoot.tsx

@@ -13,7 +13,6 @@ import { IPlayer } from "../../PersonObjects/IPlayer";
 import { IRouter } from "../../ui/Router";
 import { Settings } from "../../Settings/Settings";
 
-import { StdButton } from "../../ui/React/StdButton";
 import { use } from "../../ui/Context";
 import { Money } from "../../ui/React/Money";
 import { WorldMap } from "../../ui/React/WorldMap";
@@ -36,7 +35,7 @@ function travel(p: IPlayer, router: IRouter, to: CityName): void {
 
   p.loseMoney(cost);
   p.travel(to);
-  dialogBoxCreate(<span className="noselect">You are now in {to}!</span>);
+  dialogBoxCreate(<>You are now in {to}!</>);
   router.toCity();
 }