Only open news modal if the user has seen an existing version. This prevents brand new players from seeing the news popup.

Move NewsButton into NewsModal.ts
Refactor & simplify NewsButton

src/client/Main.ts

@@ -23,7 +23,7 @@ import { LangSelector } from "./LangSelector";
 import { LanguageModal } from "./LanguageModal";
 import "./Matchmaking";
 import { MatchmakingModal } from "./Matchmaking";
-import { NewsModal } from "./NewsModal";
+import "./NewsModal";
 import "./PublicLobby";
 import { PublicLobby } from "./PublicLobby";
 import { SinglePlayerModal } from "./SinglePlayerModal";
@@ -39,8 +39,6 @@ import {
   incrementGamesPlayed,
   isInIframe,
 } from "./Utils";
-import "./components/NewsButton";
-import { NewsButton } from "./components/NewsButton";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
 import { getUserMe, isLoggedIn } from "./jwt";
@@ -118,20 +116,6 @@ class Client {
     }
     gameVersion.innerText = version;
 
-    const newsModal = document.querySelector("news-modal") as NewsModal;
-    if (!newsModal || !(newsModal instanceof NewsModal)) {
-      console.warn("News modal element not found");
-    }
-    const newsButton = document.querySelector("news-button") as NewsButton;
-    if (!newsButton) {
-      console.warn("News button element not found");
-    } else {
-      console.log("News button element found");
-    }
-
-    // Comment out to show news button.
-    // newsButton.hidden = true;
-
     const langSelector = document.querySelector(
       "lang-selector",
     ) as LangSelector;

src/client/NewsModal.ts

@@ -2,6 +2,8 @@ import { LitElement, css, html } from "lit";
 import { resolveMarkdown } from "lit-markdown";
 import { customElement, property, query } from "lit/decorators.js";
 import changelog from "../../resources/changelog.md";
+import megaphone from "../../resources/images/Megaphone.svg";
+import version from "../../resources/version.txt";
 import { translateText } from "../client/Utils";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
@@ -128,3 +130,49 @@ export class NewsModal extends LitElement {
     this.modalEl?.close();
   }
 }
+
+@customElement("news-button")
+export class NewsButton extends LitElement {
+  @query("news-modal") private newsModal!: NewsModal;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.checkForNewVersion();
+  }
+
+  private checkForNewVersion() {
+    const lastSeenVersion = localStorage.getItem("last-seen-version");
+    if (lastSeenVersion !== null && lastSeenVersion !== version) {
+      setTimeout(() => {
+        this.openNewsModel();
+      }, 500);
+    }
+  }
+
+  private openNewsModel() {
+    localStorage.setItem("last-seen-version", version);
+    this.newsModal.open();
+  }
+
+  render() {
+    return html`
+      <div class="flex relative">
+        <button
+          class="border p-[4px] rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)]"
+          @click=${this.openNewsModel}
+        >
+          <img
+            class="size-[48px] dark:invert"
+            src="${megaphone}"
+            alt=${translateText("news.title")}
+          />
+        </button>
+      </div>
+      <news-modal></news-modal>
+    `;
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+}

src/client/components/NewsButton.ts

@@ -1,74 +0,0 @@
-import { LitElement, html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import megaphone from "../../../resources/images/Megaphone.svg";
-import version from "../../../resources/version.txt";
-import { NewsModal } from "../NewsModal";
-import { translateText } from "../Utils";
-
-@customElement("news-button")
-export class NewsButton extends LitElement {
-  @property({ type: Boolean }) hidden = false;
-  @state() private isActive = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.checkForNewVersion();
-  }
-
-  private checkForNewVersion() {
-    try {
-      const lastSeenVersion = localStorage.getItem("version");
-      this.isActive = lastSeenVersion !== version;
-      if (this.isActive) {
-        setTimeout(() => {
-          this.openNewsModel();
-        }, 500);
-      }
-    } catch (error) {
-      // Fallback to NOT showing notification if localStorage fails
-      this.isActive = false;
-    }
-    localStorage.setItem("version", version);
-  }
-
-  private handleClick() {
-    localStorage.setItem("version", version);
-    this.isActive = false;
-    this.openNewsModel();
-  }
-
-  private openNewsModel() {
-    const newsModal = document.querySelector("news-modal") as NewsModal;
-    if (newsModal) {
-      newsModal.open();
-    } else {
-      console.log("no newsModal");
-    }
-  }
-
-  render() {
-    return html`
-      <div
-        class="flex relative ${this.hidden ? "parent-hidden" : ""} ${this
-          .isActive
-          ? "active"
-          : ""}"
-      >
-        <button
-          class="border p-[4px] rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)]"
-          @click=${this.handleClick}
-        >
-          <img
-            class="size-[48px] dark:invert"
-            src="${megaphone}"
-            alt=${translateText("news.title")}
-          />
-        </button>
-      </div>
-    `;
-  }
-
-  createRenderRoot() {
-    return this;
-  }
-}

src/client/index.html

@@ -410,7 +410,6 @@
     <chat-modal></chat-modal>
     <user-setting></user-setting>
     <multi-tab-modal></multi-tab-modal>
-    <news-modal></news-modal>
     <game-left-sidebar></game-left-sidebar>
     <flag-input-modal></flag-input-modal>
     <performance-overlay></performance-overlay>