Finished location code refactor. Has not yet been tested

src/ui/React/AutoupdatingStdButton.tsx

@@ -0,0 +1,70 @@
+/**
+ * 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;
+}
+
+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 !== "";
+
+        let className = this.props.disabled ? "std-button-disabled" : "std-button";
+        if (hasTooltip) {
+            className += " tooltip"
+        }
+
+        return (
+            <button className={className} onClick={this.props.onClick} style={this.props.style}>
+                {this.props.text}
+                {
+                    hasTooltip &&
+                    <span className={"tooltiptext"}>
+                        {this.props.tooltip}
+                    </span>
+                }
+            </button>
+        )
+    }
+}

src/ui/React/StdButton.tsx

@@ -4,20 +4,31 @@
  */
 import * as React from "react";
 
-export interface IStdButtonProps {
+interface IStdButtonProps {
     disabled?: boolean;
     onClick?: (e: React.MouseEvent<HTMLElement>) => any;
     style?: object;
     text: string;
+    tooltip?: 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 !== "";
+        let className = this.props.disabled ? "std-button-disabled" : "std-button";
+        if (hasTooltip) {
+            className += " tooltip";
+        }
 
         return (
             <button className={className} onClick={this.props.onClick} style={this.props.style}>
                 {this.props.text}
+                {
+                    hasTooltip &&
+                    <span className={"tooltiptext"}>
+                        {this.props.tooltip}
+                    </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/React/StdButtonWithTooltip.tsx

@@ -1,28 +0,0 @@
-/**
- * Basic stateless button with a tooltip
- * Uses the 'std-button' css class
- */
-import * as React from "react";
-
-export interface IStdButtonWithTooltipProps {
-    disabled?: boolean;
-    onClick?: (e: React.MouseEvent<HTMLElement>) => any;
-    style?: object;
-    text: string;
-    tooltip: string;
-}
-
-export class StdButtonWithTooltip extends React.Component<IStdButtonWithTooltipProps, any> {
-    render() {
-        const className = this.props.disabled ? "std-button-disabled tooltip" : "std-button tooltip";
-
-        return (
-            <button className={className} onClick={this.props.onClick} style={this.props.style}>
-                {this.props.text}
-                <span className={"tooltiptext"}>
-                    {this.props.tooltip}
-                </span>
-            </button>
-        )
-    }
-}