Began creating 'parent' components for the City and Location-specific parts of the UI

src/Locations/ui/Root.tsx

@@ -0,0 +1,91 @@
+/**
+ * Root React Component for displaying overall Location UI
+ */
+import * as React from "react";
+
+import { LocationCity }     from "./City";
+
+import { CityName }         from "../data/CityNames";
+import { LocationName }     from "../data/LocationNames";
+
+import { IPlayer }          from "../../PersonObjects/IPlayer";
+
+type IProps = {
+    p: IPlayer;
+}
+
+type IState = {
+    city: CityName;
+    inCity: boolean;
+    location: LocationName;
+}
+
+export class LocationRoot extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            city: props.p.city,
+            inCity: true,
+            location: props.p.location,
+        }
+
+        this.changeCity = this.changeCity.bind(this);
+        this.returnToCity = this.returnToCity.bind(this);
+    }
+
+    changeCity(to: CityName): void {
+        if (this.props.p.travel(to)) {
+            this.setState({
+                city: to
+            });
+        }
+    }
+
+    enterLocation(to: LocationName): void {
+        this.props.p.location = to;
+        this.setState({
+            inCity: false,
+            location: to,
+        });
+    }
+
+    /**
+     * Click listener for a button that lets the player go from a specific location
+     * back to the city
+     */
+    returnToCity(): void {
+        this.setState({
+            inCity: true,
+        });
+    }
+
+    /**
+     * Render UI for a city
+     */
+    renderCity(): React.ReactNode {
+        return (
+            <div>
+                <h2>{this.state.city}</h2>
+                <LocationCity city={this.state.city} enterLocation={this.enterLocation} />
+            </div>
+        )
+    }
+
+    /**
+     * Render UI for a specific location
+     */
+    renderLocation(): React.ReactNode {
+        return (
+            <GenericLocation />
+        )
+    }
+
+    render() {
+        if (this.state.inCity) {
+            return this.renderCity();
+        } else {
+            return this.renderLocation();
+        }
+    }
+}