DARKNET: Darkweb Expansion Project & Bitnode (#2139)

This is BN15. It is a really big change; see the PR for all the details.

src/DarkNet/ui/ServerStatusBox.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { Typography, SvgIcon, Tooltip } from "@mui/material";
+import { ServerDetailsModal } from "./ServerDetailsModal";
+import { getIcon } from "./ServerIcon";
+import { DarknetState } from "../models/DarknetState";
+import { getPixelPosition } from "./networkCanvas";
+import { ServerSummary } from "./ServerSummary";
+
+import type { DarknetServer } from "../../Server/DarknetServer";
+import { DWServerStyles, ServerName } from "./dnetStyles";
+
+export type DWServerProps = {
+  server: DarknetServer;
+  enableAuth: boolean;
+  classes: {
+    [key: string]: string;
+  };
+};
+
+export function ServerStatusBox({ server, enableAuth, classes }: DWServerProps): React.ReactElement {
+  const [open, setOpen] = useState(false);
+  const icon = getIcon(server.modelId);
+
+  const authButtonHandler = () => {
+    DarknetState.openServer = server;
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    DarknetState.openServer = null;
+    setOpen(false);
+  };
+
+  const getServerStyles = (server: DarknetServer) => {
+    const position = getPixelPosition(server);
+    return {
+      ...DWServerStyles,
+      top: `${position.top}px`,
+      left: `${position.left}px`,
+      borderColor: server.hasStasisLink ? "gold" : server.hasAdminRights ? "green" : "grey",
+    };
+  };
+
+  return (
+    <>
+      {open ? <ServerDetailsModal open={open} onClose={handleClose} server={server} classes={classes} /> : ""}
+      <button
+        style={{ ...getServerStyles(server), position: "absolute", userSelect: "none" }}
+        className={classes.DWServer}
+        onClick={authButtonHandler}
+        disabled={!enableAuth}
+      >
+        <div style={{ padding: 0, margin: 0, width: "100%" }}>
+          <div style={{ display: "inline-flex", flexDirection: "row", width: "100%", justifyContent: "space-between" }}>
+            <Tooltip title={`Server Model: ${server.modelId}`}>
+              <SvgIcon component={icon} color="secondary" />
+            </Tooltip>
+            <Typography color={server.hasAdminRights ? "primary" : "secondary"} sx={ServerName}>
+              {server.hostname}
+            </Typography>
+          </div>
+          <Typography color="secondary" style={{ fontSize: "0.9em" }}>
+            {server.ip} cha:{server.requiredCharismaSkill}
+          </Typography>
+          <br />
+          <ServerSummary server={server} enableAuth={enableAuth} classes={classes} />
+        </div>
+      </button>
+    </>
+  );
+}