add news button for update release notes

src/client/Main.ts

@@ -19,6 +19,7 @@ import { JoinPrivateLobbyModal } from "./JoinPrivateLobbyModal";
 import "./LangSelector";
 import { LangSelector } from "./LangSelector";
 import { LanguageModal } from "./LanguageModal";
+import { NewsModal } from "./NewsModal";
 import "./PublicLobby";
 import { PublicLobby } from "./PublicLobby";
 import "./RandomNameButton";
@@ -28,6 +29,8 @@ import { UserSettingModal } from "./UserSettingModal";
 import "./UsernameInput";
 import { UsernameInput } from "./UsernameInput";
 import { generateCryptoRandomUUID } from "./Utils";
+import "./components/NewsButton";
+import { NewsButton } from "./components/NewsButton";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
 import "./styles.css";
@@ -58,6 +61,23 @@ class Client {
   constructor() {}
 
   initialize(): void {
+    const newsModal = document.querySelector("news-modal") as NewsModal;
+    if (!newsModal) {
+      consolex.warn("News modal element not found");
+    } else {
+      consolex.log("News modal element found");
+    }
+    newsModal instanceof NewsModal;
+    const newsButton = document.querySelector("news-button") as NewsButton;
+    if (!newsButton) {
+      consolex.warn("News button element not found");
+    } else {
+      consolex.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

@@ -0,0 +1,65 @@
+import { LitElement, css, html } from "lit";
+import { customElement, query } from "lit/decorators.js";
+import { translateText } from "../client/Utils";
+import "./components/baseComponents/Button";
+import "./components/baseComponents/Modal";
+
+@customElement("news-modal")
+export class NewsModal extends LitElement {
+  @query("o-modal") private modalEl!: HTMLElement & {
+    open: () => void;
+    close: () => void;
+  };
+
+  static styles = css`
+    .news-container {
+      max-height: 60vh;
+      overflow-y: auto;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+
+    .news-content {
+      color: #ddd;
+      line-height: 1.5;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 8px;
+      padding: 1rem;
+    }
+  `;
+
+  render() {
+    return html`
+      <o-modal title=${translateText("news.title")}>
+        <div class="options-layout">
+          <div class="options-section">
+            <div class="news-container">
+              <div class="news-content">INSERT NEWS HERE</div>
+            </div>
+          </div>
+        </div>
+
+        <o-button
+          title=${translateText("common.close")}
+          @click=${this.close}
+          blockDesktop
+        ></o-button>
+      </o-modal>
+    `;
+  }
+
+  public open() {
+    this.requestUpdate();
+    this.modalEl?.open();
+  }
+
+  private close() {
+    this.modalEl?.close();
+  }
+
+  createRenderRoot() {
+    return this; // light DOM
+  }
+}

src/client/components/NewsButton.ts

@@ -0,0 +1,64 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import megaphone from "../../../resources/images/Megaphone.svg";
+import { NewsModal } from "../NewsModal";
+import { translateText } from "../Utils";
+
+@customElement("news-button")
+export class NewsButton extends LitElement {
+  @property({ type: Boolean })
+  hidden = false;
+
+  static styles = css`
+    .news-button {
+      opacity: 0.75;
+      transition: opacity 0.2s ease;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+      border: none;
+      background: none;
+      cursor: pointer;
+    }
+
+    .news-button:hover {
+      opacity: 1;
+    }
+
+    .news-button img {
+      width: 24px;
+      height: 24px;
+      display: block;
+      margin-left: 12px;
+    }
+
+    .hidden {
+      display: none !important;
+    }
+  `;
+
+  private handleClick() {
+    const newsModal = document.querySelector("news-modal") as NewsModal;
+    if (newsModal) {
+      newsModal.open();
+    }
+  }
+
+  render() {
+    return html`
+      <div class="text-center mb-0.5 ${this.hidden ? "hidden" : ""}">
+        <button class="news-button" @click=${this.handleClick}>
+          <img src="${megaphone}" alt=${translateText("news.title")} />
+        </button>
+      </div>
+    `;
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+}

src/client/index.html

@@ -249,6 +249,7 @@
         <div class="container__row">
           <flag-input class="w-[20%] md:w-[15%]"></flag-input>
           <username-input class="w-full"></username-input>
+          <news-button class="mt-3"></news-button>
         </div>
         <div></div>
         <div>
@@ -393,6 +394,7 @@
     <dark-mode-button></dark-mode-button>
     <user-setting></user-setting>
     <multi-tab-modal></multi-tab-modal>
+    <news-modal></news-modal>
     <div
       id="language-modal"
       class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex justify-center items-center"