diff --git a/resources/images/Megaphone.svg b/resources/images/Megaphone.svg
new file mode 100644
index 000000000..372c915ed
--- /dev/null
+++ b/resources/images/Megaphone.svg
@@ -0,0 +1,93 @@
+
+
diff --git a/src/client/Main.ts b/src/client/Main.ts
index a8fddd2e5..9fc9e0f2c 100644
--- a/src/client/Main.ts
+++ b/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 { SinglePlayerModal } from "./SinglePlayerModal";
@@ -26,6 +27,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 { OButton } from "./components/baseComponents/Button";
import "./components/baseComponents/Modal";
@@ -57,6 +60,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;
diff --git a/src/client/NewsModal.ts b/src/client/NewsModal.ts
new file mode 100644
index 000000000..94c8116bf
--- /dev/null
+++ b/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`
+
+
+
+
+
+ `;
+ }
+
+ public open() {
+ this.requestUpdate();
+ this.modalEl?.open();
+ }
+
+ private close() {
+ this.modalEl?.close();
+ }
+
+ createRenderRoot() {
+ return this; // light DOM
+ }
+}
diff --git a/src/client/components/NewsButton.ts b/src/client/components/NewsButton.ts
new file mode 100644
index 000000000..2fda8e1ac
--- /dev/null
+++ b/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`
+
+
+
+
@@ -382,6 +383,7 @@
+