diff --git a/src/components/NetworkStatus/NetworkStatus.styl b/src/components/NetworkStatus/NetworkStatus.styl index 4059afd2e2..0fd9fca5ce 100644 --- a/src/components/NetworkStatus/NetworkStatus.styl +++ b/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; diff --git a/src/components/NetworkStatus/NetworkStatus.tsx b/src/components/NetworkStatus/NetworkStatus.tsx index 1c31c6fdcb..0dfb7b29a0 100644 --- a/src/components/NetworkStatus/NetworkStatus.tsx +++ b/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) - -
+
+ {/* 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. */} - - - {(state === "timeout" || null) && _("Slow internet")} - {(state === "disconnected" || null) && _("Disconnected")} - + {on_game_page && ( + + {(state === "timeout" || null) && _("Slow internet")} + {(state === "disconnected" || null) && _("Disconnected")} + + )}
); } diff --git a/src/lib/sockets.ts b/src/lib/sockets.ts index 825c367d7d..1123c8e011 100644 --- a/src/lib/sockets.ts +++ b/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); } /*