BitNode-9 initial implementation

src/ui/React/ServerDropdown.jsx

@@ -0,0 +1,65 @@
+/**
+ * Creates a dropdown (select HTML element) with server hostnames as options
+ *
+ * Configurable to only contain certain types of servers
+ */
+import React from "react";
+import { AllServers } from "../../Server/AllServers";
+
+import { HacknetServer } from "../../Hacknet/HacknetServer";
+
+// TODO make this an enum when this gets converted to TypeScript
+export const ServerType = {
+    All:        0,
+    Foreign:    1, // Hackable, non-owned servers
+    Owned:      2, // Home Computer, Purchased Servers, and Hacknet Servers
+    Purchased:  3, // Everything from Owned except home computer
+}
+
+export class ServerDropdown extends React.Component {
+    /**
+     * Checks if the server should be shown in the dropdown menu, based on the
+     * 'serverType' property
+     */
+    isValidServer(s) {
+        const type = this.props.serverType;
+        switch (type) {
+            case ServerType.All:
+                return true;
+            case ServerType.Foreign:
+                return (s.hostname !== "home" && !s.purchasedByPlayer);
+            case ServerType.Owned:
+                return s.purchasedByPlayer || (s instanceof HacknetServer) || s.hostname === "home";
+            case ServerType.Purchased:
+                return s.purchasedByPlayer || (s instanceof HacknetServer);
+            default:
+                console.warn(`Invalid ServerType specified for ServerDropdown component: ${type}`);
+                return false;
+        }
+    }
+
+    /**
+     * Given a Server object, creates a Option element
+     */
+    renderOption(s) {
+        return (
+            <option key={s.hostname} value={s.hostname}>{s.hostname}</option>
+        )
+    }
+
+    render() {
+        const servers = [];
+        for (const serverName in AllServers) {
+            const server = AllServers[serverName];
+            if (this.isValidServer(server)) {
+                servers.push(this.renderOption(server));
+            }
+        }
+
+        return (
+            <select className={"dropdown"} onChange={this.props.onChange} style={this.props.style}>
+                {servers}
+            </select>
+        )
+    }
+}

src/ui/React/createPopup.ts

@@ -0,0 +1,56 @@
+/**
+ * Create a pop-up dialog box using React.
+ *
+ * Calling this function with the same ID and React Root Component will trigger a re-render
+ *
+ * @param id The (hopefully) unique identifier for the popup container
+ * @param rootComponent Root React Component
+ */
+import * as React       from "react";
+import * as ReactDOM    from "react-dom";
+
+import { createElement } from "../../../utils/uiHelpers/createElement";
+import { removeElementById } from "../../../utils/uiHelpers/removeElementById";
+
+type ReactComponent = new(...args: any[]) => React.Component<any, any>;
+
+export function createPopup(id: string, rootComponent: ReactComponent, props: object): HTMLElement {
+    let container = document.getElementById(id);
+    let content = document.getElementById(`${id}-content`);
+    if (container == null || content == null) {
+        container = createElement("div", {
+            class: "popup-box-container",
+            display: "flex",
+            id: id,
+        });
+
+        content = createElement("div", {
+            class: "popup-box-content",
+            id: `${id}-content`,
+        });
+
+        container.appendChild(content);
+
+        try {
+            document.getElementById("entire-game-container")!.appendChild(container);
+        } catch(e) {
+            console.error(`Exception caught when creating popup: ${e}`);
+        }
+    }
+
+    ReactDOM.render(React.createElement(rootComponent, props), content);
+
+    return container;
+}
+
+/**
+ * Closes a popup created with the createPopup() function above
+ */
+export function removePopup(id: string): void {
+    let content = document.getElementById(`${id}-content`);
+    if (content == null) { return; }
+
+    ReactDOM.unmountComponentAtNode(content);
+
+    removeElementById(id);
+}