Relay Ping Browser

code/modules/tgui_panel/ping_relay.dm

@@ -0,0 +1,27 @@
+GLOBAL_DATUM_INIT(relays_panel, /datum/ping_relay_tgui, new)
+
+/datum/tgui_panel/proc/ping_relays()
+	GLOB.relays_panel.tgui_interact(client.mob)
+
+/datum/ping_relay_tgui/tgui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "PingRelaysPanel", "Relay Pings")
+		ui.open()
+		ui.set_autoupdate(FALSE)
+
+/datum/ping_relay_tgui/ui_state(mob/user)
+	return GLOB.always_state
+
+/datum/ping_relay_tgui/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
+	. = ..()
+	if(.)
+		return
+
+	var/mob/user = ui.user
+
+	switch(action)
+		if("connect")
+			user << link(params["url"])
+			ui.close()
+			return

code/modules/tgui_panel/tgui_panel.dm

@@ -92,6 +92,9 @@
 	if(type == "telemetry")
 		analyze_telemetry(payload)
 		return TRUE
+	if(type == "act/ping_relays")
+		ping_relays()
+		return TRUE
 
 /**
  * public

colonialmarines.dme

@@ -2356,6 +2356,7 @@
 #include "code\modules\tgui_input\text.dm"
 #include "code\modules\tgui_panel\audio.dm"
 #include "code\modules\tgui_panel\external.dm"
+#include "code\modules\tgui_panel\ping_relay.dm"
 #include "code\modules\tgui_panel\telemetry.dm"
 #include "code\modules\tgui_panel\tgui_panel.dm"
 #include "code\modules\tooltip\tooltip.dm"

tgui/packages/common/ping.js

@@ -0,0 +1,88 @@
+/**
+ * Adapted pinging library based on:
+ * @file https://www.jsdelivr.com/package/npm/ping.js
+ * @copyright 2021 Alfred Gutierrez
+ * @license MIT
+ */
+
+/**
+ * Creates a Ping instance.
+ * @returns {Ping}
+ * @constructor
+ */
+export class Ping {
+  constructor(opt) {
+    this.opt = opt || {};
+    this.favicon = this.opt.favicon || '/favicon.ico';
+    this.timeout = this.opt.timeout || 10000;
+    this.logError = this.opt.logError || false;
+  }
+
+  /**
+   * Pings source after a delay and triggers a callback when completed.
+   * @param source Source of the website or server, including protocol and port.
+   * @param callback Callback function to trigger when completed. Returns error and ping value.
+   * @param delay Optional number of milliseconds to wait before starting.
+   */
+  ping(source, callback, delay = 1000) {
+    let timer;
+    timer = setTimeout(() => {
+      this.pingNow(source, callback);
+    }, delay);
+  }
+
+  /**
+   * Pings source immediately and triggers a callback when completed.
+   * @param source Source of the website or server, including protocol and port.
+   * @param callback Callback function to trigger when completed. Returns error and ping value.
+   */
+  pingNow(source, callback) {
+    let self = this;
+    self.wasSuccess = false;
+    self.img = new Image();
+    self.img.onload = (e) => {
+      self.wasSuccess = true;
+      pingCheck.call(self, e);
+    };
+    self.img.onerror = (e) => {
+      self.wasSuccess = false;
+      pingCheck.call(self, e);
+    };
+
+    let timer;
+    let start = new Date();
+
+    if (self.timeout) {
+      timer = setTimeout(() => {
+        self.wasSuccess = false;
+        pingCheck.call(self, undefined);
+      }, self.timeout);
+    }
+
+    /**
+     * Times ping and triggers callback.
+     */
+    const pingCheck = function (e) {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      let pong = new Date() - start;
+
+      if (typeof callback === 'function') {
+        // When operating in timeout mode, the timeout callback doesn't pass [event] as e.
+        // Notice [this] instead of [self], since .call() was used with context
+        if (!this.wasSuccess) {
+          if (self.logError) {
+            console.error('error loading resource: ' + e.error);
+          }
+          return callback(e ? 'Error' : 'Timed Out', pong);
+        }
+        return callback(null, pong);
+      } else {
+        throw new Error('Callback is not a function.');
+      }
+    };
+
+    self.img.src = source + self.favicon + '?' + +new Date(); // Trigger image load with cache buster
+  }
+}

tgui/packages/tgui-panel/ping/PingIndicator.js

@@ -6,11 +6,12 @@
 
 import { Color } from 'common/color';
 import { toFixed } from 'common/math';
-import { useSelector } from 'tgui/backend';
-import { Box } from 'tgui/components';
+import { useSelector, useBackend } from 'tgui/backend';
+import { Button, Box } from 'tgui/components';
 import { selectPing } from './selectors';
 
 export const PingIndicator = (props) => {
+  const { act } = useBackend();
   const ping = useSelector(selectPing);
   const color = Color.lookup(ping.networkQuality, [
     new Color(220, 40, 40),
@@ -19,9 +20,16 @@ export const PingIndicator = (props) => {
   ]);
   const roundtrip = ping.roundtrip ? toFixed(ping.roundtrip) : '--';
   return (
-    <div className="Ping">
+    <Button
+      lineHeight="15px"
+      width="50px"
+      className="Ping"
+      color="transparent"
+      tooltip="Ping relays"
+      tooltipPosition="bottom-start"
+      onClick={() => act('ping_relays')}>
       <Box className="Ping__indicator" backgroundColor={color} />
       {roundtrip}
-    </div>
+    </Button>
   );
 };

tgui/packages/tgui/interfaces/PingRelaysPanel.jsx

@@ -0,0 +1,158 @@
+import { useBackend } from '../backend';
+import { Box, Stack, Button, Icon, RoundGauge } from '../components';
+import { Window } from '../layouts';
+import { Color } from 'common/color';
+import { Ping } from 'common/ping';
+import { Component } from 'react';
+
+const RELAY_COUNT = 8;
+const RED = new Color(220, 40, 40);
+
+export class PingResult {
+  constructor(desc = 'Loading...', url = '', ping = -1) {
+    this.desc = desc;
+    this.url = url;
+    this.ping = ping;
+    this.error = null;
+  }
+
+  update = function (desc, url, ping, error) {
+    this.desc = desc;
+    this.url = url;
+    this.ping = ping;
+    this.error = error;
+  };
+}
+
+class PingApp extends Component {
+  constructor() {
+    super();
+
+    this.pinger = new Ping();
+    this.state = { currentIndex: 0 };
+
+    this.results = new Array(RELAY_COUNT);
+    for (let i = 0; i < RELAY_COUNT; i++) {
+      this.results[i] = new PingResult();
+    }
+  }
+
+  startTest(desc, pingURL, connectURL) {
+    this.pinger.ping('http://' + pingURL, (error, pong) => {
+      this.results[this.state.currentIndex]?.update(
+        desc,
+        'byond://' + connectURL,
+        pong,
+        error
+      );
+      this.setState((prevState) => ({
+        currentIndex: prevState.currentIndex + 1,
+      }));
+    });
+  }
+
+  componentDidMount() {
+    this.startTest('Direct', 'play.cm-ss13.com:8998', 'play.cm-ss13.com:1400');
+    this.startTest(
+      'United Kingdom, London',
+      'uk.cm-ss13.com:8998',
+      'uk.cm-ss13.com:1400'
+    );
+    this.startTest(
+      'France, Gravelines',
+      'eu-w.cm-ss13.com:8998',
+      'eu-w.cm-ss13.com:1400'
+    );
+    this.startTest(
+      'Poland, Warsaw',
+      'eu-e.cm-ss13.com:8998',
+      'eu-e.cm-ss13.com:1400'
+    );
+    this.startTest(
+      'Oregon, Hillsboro',
+      'us-w.cm-ss13.com:8998',
+      'us-w.cm-ss13.com:1400'
+    );
+    this.startTest(
+      'Virginia, Vint Hill',
+      'us-e.cm-ss13.com:8998',
+      'us-e.cm-ss13.com:1400'
+    );
+    this.startTest(
+      'Singapore',
+      'asia-se.cm-ss13.com:8998',
+      'asia-se.cm-ss13.com:1400'
+    );
+    this.startTest(
+      'Australia, Sydney',
+      'aus.cm-ss13.com:8998',
+      'aus.cm-ss13.com:1400'
+    );
+  }
+
+  render() {
+    const { act } = useBackend();
+
+    return (
+      <Stack direction="column" fill vertical>
+        {this.results.map((result, i) => (
+          <Stack.Item key={i} height={2}>
+            <Button.Confirm
+              fluid
+              height={2}
+              confirmContent={'Connect? '}
+              confirmColor="caution"
+              disabled={result.ping === -1 || result.error}
+              onClick={() => act('connect', { url: result.url })}>
+              {result.ping <= -1 && result.error === null && (
+                <>
+                  <Icon name="spinner" spin inline />
+                  <Box inline>{result.desc}</Box>
+                </>
+              )}
+              {result.ping > -1 && result.error === null && (
+                <>
+                  <Icon name="plug" inline />
+                  <Box preserveWhitespace inline>
+                    {result.desc + '  '}
+                  </Box>
+                  <RoundGauge
+                    value={result.ping}
+                    maxValue={1000}
+                    minValue={50}
+                    ranges={{
+                      'good': [0, 200],
+                      'average': [200, 500],
+                      'bad': [500, 1000],
+                    }}
+                    format={(x) => ' ' + x + 'ms'}
+                    inline
+                  />
+                </>
+              )}
+              {result.error !== null && (
+                <>
+                  <Icon name="x" inline color={RED} />
+                  <Box inline>{result.desc}</Box>
+                  <Box inline preserveWhitespace color={RED} bold>
+                    {' (' + result.error + ')'}
+                  </Box>
+                </>
+              )}
+            </Button.Confirm>
+          </Stack.Item>
+        ))}
+      </Stack>
+    );
+  }
+}
+
+export const PingRelaysPanel = () => {
+  return (
+    <Window width={400} height={300} theme={'weyland'}>
+      <Window.Content>
+        <PingApp />
+      </Window.Content>
+    </Window>
+  );
+};