Merge pull request #2710 from LForchini/close-bad-internet-notif

Add close button to network status pop-up
online-go · Jun 10, 2024 · d3e1dbd · d3e1dbd
2 parents f3d990c + 4870129
commit d3e1dbd
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/components/NetworkStatus/NetworkStatus.styl b/src/components/NetworkStatus/NetworkStatus.styl
@@ -12,7 +12,7 @@
     display: inline-flex;
     position: absolute;
     z-index: z.network-warning;
-    top: navbar-height;
+    top: 0.5em;
     right: 0;
     min-width: 10rem;
     height: 2.5rem;
@@ -24,6 +24,7 @@
     font-weight: bold;
     padding-right: 1rem;
     border-radius: 0.3rem;
+    cursor: pointer;
 
     // if we're not on the game page, we make this more discreet...
     &.non-game {
@@ -45,6 +46,9 @@
         height: 2rem;
         align-items: center;
         justify-content: center;
+    }
+
+    .icon.no-wifi {
         margin-right: 1rem;
     }
 

diff --git a/src/components/NetworkStatus/NetworkStatus.tsx b/src/components/NetworkStatus/NetworkStatus.tsx
@@ -30,6 +30,7 @@ type NetworkStatusState = "connected" | "went-away" | "disconnected" | "timeout"
 
 export function NetworkStatus(): JSX.Element | null {
     const [state, setState] = React.useState<NetworkStatusState>("connected");
+    const [manually_closed, setManuallyClosed] = React.useState<boolean>(false);
     const [show_slow_internet_warning] = preferences.usePreference("show-slow-internet-warning");
 
     const stateRef = React.useRef(state);
@@ -39,6 +40,7 @@ export function NetworkStatus(): JSX.Element | null {
     // (note: we don't check if it's their turn because it might become their turn at any time, they
     //  could do with knowing their internet is bad anyhow.)
     const in_live_game = lookingAtOurLiveGame();
+    const show_banner = in_live_game && !manually_closed;
 
     React.useEffect(() => {
         stateRef.current = state; // needed so we can refer to the current value in the async timer below
@@ -83,6 +85,7 @@ export function NetworkStatus(): JSX.Element | null {
         state,
         show_slow_internet_warning ? ": warning toggle on," : ": warning toggle off,",
         in_live_game ? "in live game," : "not in live game,",
+        manually_closed ? "manually closed notification," : "didn't close notification",
         "time control:",
         (window as any)["global_goban"]?.engine?.time_control,
     );
@@ -97,14 +100,22 @@ export function NetworkStatus(): JSX.Element | null {
 
     return (
         // We don't show this if they're 'connected' (see above, return null)
-        <div className={"NetworkStatus" + (in_live_game ? "" : " non-game")}>
+        <div
+            className={"NetworkStatus" + (show_banner ? "" : " non-game")}
+            onClick={() => setManuallyClosed(true)}
+        >
+            {show_banner && (
+                <span className="icon close">
+                    <i className="fa fa-times-circle" />
+                </span>
+            )}
             {/* 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">
+            <span className="icon no-wifi">
                 <i className="fa fa-2x fa-ban" />
                 <i className="fa fa-wifi" />
             </span>
-            {in_live_game && (
+            {show_banner && (
                 <span>
                     {(state === "timeout" || null) && _("Slow internet")}
                     {(state === "disconnected" || null) && _("Disconnected")}