Merge pull request #591 from danielyxie/location-code-refactor

Location code refactor

src/ui/React/AutoupdatingStdButton.tsx

@@ -0,0 +1,80 @@
+/**
+ * Basic stateless button that automatically re-renders itself every X seconds
+ * Uses the 'std-button' css class
+ *
+ * NOT recommended for usage - only if you really have to
+ */
+import * as React from "react";
+
+interface IProps {
+    disabled?: boolean;
+    intervalTime?: number;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => any;
+    style?: object;
+    text: string;
+    tooltip?: string;
+}
+
+interface IState {
+    i: number;
+}
+
+type IInnerHTMLMarkup = {
+    __html: string;
+}
+
+export class AutoupdatingStdButton extends React.Component<IProps, IState> {
+    /**
+     *  Timer ID for auto-updating implementation (returned value from setInterval())
+     */
+    interval: number = 0;
+
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            i: 0,
+        }
+    }
+
+    componentDidMount() {
+        const time = this.props.intervalTime ? this.props.intervalTime : 1000;
+        this.interval = setInterval(() => this.tick(), time);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.interval);
+    }
+
+    tick() {
+        this.setState(prevState => ({
+            i: prevState.i + 1
+        }));
+    }
+
+    render() {
+        const hasTooltip = this.props.tooltip != null && this.props.tooltip !== "";
+
+        let className = this.props.disabled ? "std-button-disabled" : "std-button";
+        if (hasTooltip) {
+            className += " tooltip"
+        }
+
+        // Tooltip will eb set using inner HTML
+        let tooltipMarkup: IInnerHTMLMarkup | null;
+        if (hasTooltip) {
+            tooltipMarkup = {
+                __html: this.props.tooltip!
+            }
+        }
+
+        return (
+            <button className={className} onClick={this.props.onClick} style={this.props.style}>
+                {this.props.text}
+                {
+                    hasTooltip &&
+                    <span className={"tooltiptext"} dangerouslySetInnerHTML={tooltipMarkup!}></span>
+                }
+            </button>
+        )
+    }
+}

src/ui/React/StdButton.tsx

@@ -2,22 +2,44 @@
  * Basic stateless button
  * Uses the 'std-button' css class
  */
-import * as React       from "react";
+import * as React from "react";
 
-export interface IStdButtonProps {
+interface IStdButtonProps {
     disabled?: boolean;
+    id?: string;
     onClick?: (e: React.MouseEvent<HTMLElement>) => any;
     style?: object;
     text: string;
+    tooltip?: string;
+}
+
+type IInnerHTMLMarkup = {
+    __html: string;
 }
 
 export class StdButton extends React.Component<IStdButtonProps, any> {
     render() {
-        const className = this.props.disabled ? "std-button-disabled" : "std-button";
+        const hasTooltip = this.props.tooltip != null && this.props.tooltip !== "";
+        let className = this.props.disabled ? "std-button-disabled" : "std-button";
+        if (hasTooltip) {
+            className += " tooltip";
+        }
+
+        // Tooltip will be set using inner HTML
+        let tooltipMarkup: IInnerHTMLMarkup | null;
+        if (hasTooltip) {
+            tooltipMarkup = {
+                __html: this.props.tooltip!
+            }
+        }
 
         return (
-            <button className={className} onClick={this.props.onClick} style={this.props.style}>
+            <button className={className} id={this.props.id} onClick={this.props.onClick} style={this.props.style}>
                 {this.props.text}
+                {
+                    hasTooltip &&
+                    <span className={"tooltiptext"} dangerouslySetInnerHTML={tooltipMarkup!}></span>
+                }
             </button>
         )
     }

src/ui/React/StdButtonPurchased.tsx

@@ -0,0 +1,20 @@
+/**
+ * Stateless button that represents something that has been purchased.
+ */
+import * as React from "react";
+
+interface IStdButtonPurchasedProps {
+    onClick?: (e: React.MouseEvent<HTMLElement>) => any;
+    style?: object;
+    text: string;
+}
+
+export class StdButtonPurchased extends React.Component<IStdButtonPurchasedProps, any> {
+    render() {
+        return (
+            <button className={"std-button-bought"} onClick={this.props.onClick} style={this.props.style}>
+                {this.props.text}
+            </button>
+        )
+    }
+}

src/ui/navigationTracking.ts

@@ -28,11 +28,6 @@ export enum Page {
      */
     HacknetNodes = "HacknetNodes",
 
-    /**
-     * View the city the player is currently in.
-     */
-    World = "World",
-
     /**
      * The list of programs the player could potentially build.
      */
@@ -64,7 +59,7 @@ export enum Page {
     DevMenu = "Dev Menu",
 
     /**
-     * Information about the specific location the player at (job, company, etc.);
+     * Visiting a location in the world
      */
     Location = "Location",