added code to detect when the user is online or offline

frontend/src/styles/footer.scss

@@ -89,9 +89,6 @@
 
   #versionGroup {
     display: flex;
-    .version {
-      opacity: 0;
-    }
     #newVersionIndicator {
       background-color: var(--main-color);
       border-radius: calc(var(--roundness) / 2);

frontend/src/ts/controllers/account-controller.ts

@@ -49,6 +49,8 @@ import {
 } from "../test/test-config";
 import { navigate } from "../observables/navigate-event";
 import { update as updateTagsCommands } from "../commandline/lists/tags";
+import * as ConnectionEvent from "../observables/connection-event";
+import * as ConnectionState from "../states/connection";
 
 export const gmailProvider = new GoogleAuthProvider();
 let canCall = true;
@@ -282,7 +284,7 @@ export async function loadUser(user: UserType): Promise<void> {
 let authListener: Unsubscribe;
 
 // eslint-disable-next-line no-constant-condition
-if (Auth) {
+if (Auth && ConnectionState.get()) {
   authListener = Auth?.onAuthStateChanged(async function (user) {
     // await UpdateConfig.loadPromise;
     const search = window.location.search;
@@ -323,7 +325,7 @@ if (Auth) {
     }
   });
 } else {
-  $("#menu .signInOut").remove();
+  $("#menu .signInOut").addClass("hidden");
 
   $("document").ready(async () => {
     // await UpdateConfig.loadPromise;
@@ -760,3 +762,12 @@ $(".pageSettings #addGoogleAuth").on("click", async () => {
 $(document).on("click", ".pageAccount .sendVerificationEmail", () => {
   sendVerificationEmail();
 });
+
+ConnectionEvent.subscribe((state) => {
+  if (state) {
+    $("#menu .signInOut").removeClass("hidden");
+  } else {
+    $("#menu .signInOut").addClass("hidden");
+    signOut();
+  }
+});

frontend/src/ts/controllers/route-controller.ts

@@ -12,6 +12,7 @@ import * as TestUI from "../test/test-ui";
 import * as PageTransition from "../states/page-transition";
 import * as NavigateEvent from "../observables/navigate-event";
 import { Auth } from "../firebase";
+import * as ConnectionState from "../states/connection";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
@@ -84,7 +85,7 @@ const routes: Route[] = [
   {
     path: "/login",
     load: (): void => {
-      if (!Auth) {
+      if (!Auth || !ConnectionState.get()) {
         nav("/");
         return;
       }
@@ -94,7 +95,7 @@ const routes: Route[] = [
   {
     path: "/account",
     load: (_params, options): void => {
-      if (!Auth) {
+      if (!Auth || !ConnectionState.get()) {
         nav("/");
         return;
       }

frontend/src/ts/elements/leaderboards.ts

@@ -7,6 +7,7 @@ import format from "date-fns/format";
 import { Auth } from "../firebase";
 import differenceInSeconds from "date-fns/differenceInSeconds";
 import { getHTMLById as getBadgeHTMLbyId } from "../controllers/badge-controller";
+import * as ConnectionState from "../states/connection";
 
 let currentTimeRange: "allTime" | "daily" = "allTime";
 let currentLanguage = "english";
@@ -572,6 +573,10 @@ async function requestNew(lb: LbKey, skip: number): Promise<void> {
 }
 
 export function show(): void {
+  if (!ConnectionState.get()) {
+    Notifications.add("You can't view leaderboards while offline", 0);
+    return;
+  }
   if ($("#leaderboardsWrapper").hasClass("hidden")) {
     if (Auth?.currentUser) {
       $("#leaderboardsWrapper #leaderboards .rightTableJumpToMe").removeClass(

frontend/src/ts/index.ts

@@ -34,6 +34,7 @@ import "./elements/leaderboards";
 import "./commandline/index";
 import "./elements/no-css";
 import { egVideoListener } from "./popups/video-ad-popup";
+import "./states/connection";
 
 type ExtendedGlobal = typeof globalThis & MonkeyTypes.Global;
 

frontend/src/ts/observables/connection-event.ts

@@ -0,0 +1,27 @@
+type SubscribeFunction = (state: boolean) => void;
+
+const subscribers: SubscribeFunction[] = [];
+
+export function subscribe(fn: SubscribeFunction): void {
+  subscribers.push(fn);
+}
+
+window.addEventListener("load", () => {
+  window.addEventListener("online", () => {
+    dispatch(true);
+  });
+  window.addEventListener("offline", () => {
+    dispatch(false);
+  });
+});
+
+function dispatch(state: boolean): void {
+  subscribers.forEach((fn) => {
+    try {
+      fn(state);
+    } catch (e) {
+      console.error("Connection event subscriber threw an error");
+      console.error(e);
+    }
+  });
+}

frontend/src/ts/ready.ts

@@ -7,20 +7,22 @@ import * as Notifications from "./elements/notifications";
 import * as Focus from "./test/focus";
 import * as CookiePopup from "./popups/cookie-popup";
 import * as PSA from "./elements/psa";
+import * as ConnectionState from "./states/connection";
+import { Workbox } from "workbox-window";
 
 ManualRestart.set();
 UpdateConfig.loadFromLocalStorage();
 
 if (window.location.hostname === "localhost") {
   $("#bottom .version .text").text("localhost");
-  $("#bottom .version").css("opacity", 1);
+  $("#bottom #versionGroup").removeClass("hidden");
   $("body").prepend(
     `<a class='button configureAPI' href='http://localhost:5005/configure/' target='_blank' aria-label="Configure API" data-balloon-pos="right"><i class="fas fa-fw fa-server"></i></a>`
   );
 } else {
   Misc.getLatestReleaseFromGitHub().then((v) => {
     $("#bottom .version .text").text(v);
-    $("#bottom .version").css("opacity", 1);
+    $("#bottom #versionGroup").removeClass("hidden");
     NewVersionNotification.show(v);
   });
 }

frontend/src/ts/states/connection.ts

@@ -0,0 +1,43 @@
+import * as Notifications from "../elements/notifications";
+import * as ConnectionEvent from "../observables/connection-event";
+
+let state = navigator.onLine;
+
+export function get(): boolean {
+  return state;
+}
+
+let noInternetBannerId: number | undefined = undefined;
+
+function showBanner(): void {
+  if (noInternetBannerId == undefined) {
+    noInternetBannerId = Notifications.addBanner(
+      "No internet connection",
+      0,
+      "exclamation-triangle",
+      false
+    );
+  }
+}
+
+ConnectionEvent.subscribe((newState) => {
+  state = newState;
+  if (state) {
+    Notifications.add("You're back online", 1, 3, "Connection");
+    if (noInternetBannerId != undefined) {
+      $(
+        `#bannerCenter .banner[id="${noInternetBannerId}"] .closeButton`
+      ).trigger("click");
+      noInternetBannerId = undefined;
+    }
+  } else {
+    showBanner();
+  }
+});
+
+window.addEventListener("load", () => {
+  state = navigator.onLine;
+  if (!state) {
+    showBanner();
+  }
+});

frontend/static/html/bottom.html

@@ -77,7 +77,7 @@
         <i class="fas fa-fw fa-palette"></i>
         <div class="text">serika dark</div>
       </div>
-      <div id="versionGroup">
+      <div id="versionGroup" class="hidden">
         <div class="version textButton">
           <i class="fas fa-fw fa-code-branch"></i>
           <div class="text">version</div>