Make the NetworkStatus indicator discreet unless we're on the game page.

src/components/NetworkStatus/NetworkStatus.styl

@@ -25,6 +25,19 @@
     padding-right: 1rem;
     border-radius: 0.3rem;
 
+    // if we're not on the game page, we make this more discreet...
+    &.non-game {
+        transform: scale(0.5);
+        top: -0.75rem; // its peculiar why 0 doesn't work - something about scaling after positioning?
+        themed color reject
+        background-color: transparent !important; // important needed to override "theme" specifier
+        min-width: 0;
+        padding-right: 0;
+        .icon {
+            margin-right: 0;
+        }
+    }
+
     .icon {
         position: relative;
         display: inline-flex;

src/components/NetworkStatus/NetworkStatus.tsx

@@ -16,6 +16,7 @@
  */
 
 import * as React from "react";
+import { useLocation } from "react-router-dom";
 import { _ } from "translate";
 import { socket } from "sockets";
 
@@ -31,6 +32,9 @@ export function NetworkStatus(): JSX.Element {
 
     const stateRef = React.useRef(state);
 
+    const location = useLocation();
+    const on_game_page = location.pathname.includes("/game/");
+
     React.useEffect(() => {
         stateRef.current = state; // needed so we can refer to the current value in the async timer below
     }, [state]);
@@ -74,22 +78,20 @@ export function NetworkStatus(): JSX.Element {
     }
 
     return (
-        // This funky little thing builds an icon that is intended to say
-        // "no wifi!", by superimposing a large "ban" icon over a normal sized
-        // "wifi" icon.
-
         // We don't show this if they're 'connected' (see above, return null)
-
-        <div className={"NetworkStatus " + state}>
+        <div className={"NetworkStatus" + (on_game_page ? "" : " non-game")}>
+            {/* This funky little thing builds an icon that is intended to say "no wifi!",
+                by superimposing a large "ban" icon over a normal sized "wifi" icon. */}
             <span className="icon">
                 <i className="fa fa-2x fa-ban" />
                 <i className="fa fa-wifi" />
             </span>
-
-            <span>
-                {(state === "timeout" || null) && _("Slow internet")}
-                {(state === "disconnected" || null) && _("Disconnected")}
-            </span>
+            {on_game_page && (
+                <span>
+                    {(state === "timeout" || null) && _("Slow internet")}
+                    {(state === "disconnected" || null) && _("Disconnected")}
+                </span>
+            )}
         </div>
     );
 }

src/lib/sockets.ts

@@ -93,12 +93,12 @@ socket.on("latency", (latency, drift) => {
     last_latency = latency;
     last_clock_drift = drift;
     // Ping more quickly for people with fast connections (to detect outages fast)
-    if (latency * 3 < Math.max(socket.options.ping_interval, MIN_PING_INTERVAL)) {
+    if (latency < Math.max(3 * socket.options.ping_interval, MIN_PING_INTERVAL)) {
         socket.options.ping_interval = Math.max(latency * 3, MIN_PING_INTERVAL);
     }
 
     // Wait less time for timeout for people with fast connections (to detect outages fast)
-    if (!last_latency || latency * 2 < Math.max(socket.options.timeout_delay, MIN_TIMEOUT_DELAY)) {
+    if (!last_latency || latency < Math.max(2 * socket.options.timeout_delay, MIN_TIMEOUT_DELAY)) {
         socket.options.timeout_delay = Math.max(latency * 2, MIN_TIMEOUT_DELAY);
     }
     /*