feat: add NewsBox component and integrate news items into PlayPage

resources/news.json

@@ -0,0 +1,23 @@
+[
+  {
+    "id": "clan-tournament-spring-2026",
+    "title": "Upcoming: Spring Clan Tournament",
+    "description": "2v2 clan battles — Sign up on Discord before April 12",
+    "url": "https://discord.gg/openfront",
+    "type": "tournament"
+  },
+  {
+    "id": "clan-tournaments-2026",
+    "title": "Clan Tournaments",
+    "description": "Join a clan and compete in weekly tournaments on Discord!",
+    "url": "https://discord.gg/openfront",
+    "type": "tournament"
+  },
+  {
+    "id": "tutorial-2026",
+    "title": "New Player Tutorial",
+    "description": "Learn the basics of OpenFront in this video guide",
+    "url": "https://www.youtube.com/watch?v=EN2oOog3pSs",
+    "type": "tutorial"
+  }
+]

src/client/components/NewsBox.ts

@@ -0,0 +1,170 @@
+import { LitElement, html, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import newsItems from "resources/news.json" with { type: "json" };
+
+export interface NewsItem {
+  id: string;
+  title: string;
+  description: string;
+  url?: string;
+  type: "tournament" | "tutorial" | "announcement";
+}
+
+const DISMISSED_NEWS_KEY = "dismissedNewsItems";
+const CYCLE_INTERVAL_MS = 5000;
+
+function getDismissedIds(): Set<string> {
+  try {
+    const raw = localStorage.getItem(DISMISSED_NEWS_KEY);
+    if (raw) return new Set(JSON.parse(raw));
+  } catch {
+    // Ignore parse errors
+  }
+  return new Set();
+}
+
+function saveDismissedIds(ids: Set<string>): void {
+  localStorage.setItem(DISMISSED_NEWS_KEY, JSON.stringify([...ids]));
+}
+
+export function getVisibleNewsItems(): NewsItem[] {
+  const dismissed = getDismissedIds();
+  return (newsItems as NewsItem[]).filter((item) => !dismissed.has(item.id));
+}
+
+const typeLabels: Record<NewsItem["type"], string> = {
+  tournament: "TOURNAMENT",
+  tutorial: "TUTORIAL",
+  announcement: "NEWS",
+};
+
+const typeLabelColors: Record<NewsItem["type"], string> = {
+  tournament: "bg-amber-500/20 text-amber-300",
+  tutorial: "bg-sky-500/20 text-sky-300",
+  announcement: "bg-emerald-500/20 text-emerald-300",
+};
+
+@customElement("news-box")
+export class NewsBox extends LitElement {
+  @state() private items: NewsItem[] = [];
+  @state() private activeIndex = 0;
+  private cycleTimer: ReturnType<typeof setInterval> | null = null;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.items = getVisibleNewsItems();
+    this.startCycle();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopCycle();
+  }
+
+  private startCycle() {
+    this.stopCycle();
+    if (this.items.length > 1) {
+      this.cycleTimer = setInterval(() => {
+        this.activeIndex = (this.activeIndex + 1) % this.items.length;
+      }, CYCLE_INTERVAL_MS);
+    }
+  }
+
+  private stopCycle() {
+    if (this.cycleTimer !== null) {
+      clearInterval(this.cycleTimer);
+      this.cycleTimer = null;
+    }
+  }
+
+  private dismiss(id: string) {
+    const dismissed = getDismissedIds();
+    dismissed.add(id);
+    saveDismissedIds(dismissed);
+    this.items = this.items.filter((item) => item.id !== id);
+    if (this.activeIndex >= this.items.length) {
+      this.activeIndex = 0;
+    }
+    this.startCycle();
+  }
+
+  private goTo(index: number) {
+    this.activeIndex = index;
+    this.startCycle();
+  }
+
+  render() {
+    if (this.items.length === 0) return nothing;
+
+    const item = this.items[this.activeIndex];
+
+    return html`
+      <div
+        class="px-2 py-2 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] border-y border-white/10 lg:border-y-0 lg:rounded-xl lg:p-3"
+      >
+        <div class="flex items-center gap-3">
+          <span
+            class="shrink-0 text-[10px] font-bold tracking-wider px-2 py-0.5 rounded ${typeLabelColors[
+              item.type
+            ]}"
+            >${typeLabels[item.type]}</span
+          >
+          <div class="flex-1 min-w-0">
+            ${item.url
+              ? html`<a
+                  href="${item.url}"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-sm font-medium text-white hover:text-blue-300 transition-colors truncate block"
+                  >${item.title}</a
+                >`
+              : html`<span class="text-sm font-medium text-white truncate block"
+                  >${item.title}</span
+                >`}
+            <span class="text-xs text-white/50 truncate block"
+              >${item.description}</span
+            >
+          </div>
+          ${this.items.length > 1
+            ? html`
+                <div class="flex gap-1 shrink-0">
+                  ${this.items.map(
+                    (_, i) => html`
+                      <button
+                        @click=${() => this.goTo(i)}
+                        class="w-1.5 h-1.5 rounded-full transition-colors ${i ===
+                        this.activeIndex
+                          ? "bg-white/60"
+                          : "bg-white/20 hover:bg-white/40"}"
+                        aria-label="Go to item ${i + 1}"
+                      ></button>
+                    `,
+                  )}
+                </div>
+              `
+            : nothing}
+          <button
+            @click=${() => this.dismiss(item.id)}
+            class="shrink-0 p-0.5 text-white/30 hover:text-white/70 transition-colors"
+            aria-label="Dismiss"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              class="w-3.5 h-3.5"
+            >
+              <path
+                d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    `;
+  }
+}

src/client/components/PlayPage.ts

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
+import "./NewsBox.js";
 
 @customElement("play-page")
 export class PlayPage extends LitElement {
@@ -107,6 +108,9 @@ export class PlayPage extends LitElement {
             class="lg:hidden h-[calc(env(safe-area-inset-top)+56px)] lg:col-span-2 -mb-4"
           ></div>
 
+          <!-- News box above username -->
+          <news-box class="lg:col-span-2"></news-box>
+
           <!-- Username: left col -->
           <div
             class="px-2 py-2 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] border-y border-white/10 overflow-visible lg:flex lg:items-center lg:gap-x-2 lg:h-[60px] lg:p-3 lg:relative lg:z-20 lg:border-y-0 lg:rounded-xl"

tests/client/components/NewsBox.test.ts

@@ -0,0 +1,94 @@
+import newsItems from "../../../resources/news.json";
+import {
+  getVisibleNewsItems,
+  NewsItem,
+} from "../../../src/client/components/NewsBox";
+
+const DISMISSED_NEWS_KEY = "dismissedNewsItems";
+
+function createMockLocalStorage(): Storage {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => {
+      store[key] = String(value);
+    },
+    removeItem: (key: string) => {
+      delete store[key];
+    },
+    clear: () => {
+      store = {};
+    },
+    get length() {
+      return Object.keys(store).length;
+    },
+    key: (index: number) => Object.keys(store)[index] ?? null,
+  };
+}
+
+describe("NewsBox", () => {
+  beforeEach(() => {
+    vi.stubGlobal("localStorage", createMockLocalStorage());
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  describe("getVisibleNewsItems", () => {
+    it("returns all items when none are dismissed", () => {
+      const items = getVisibleNewsItems();
+      expect(items.length).toBe(newsItems.length);
+    });
+
+    it("filters out dismissed items", () => {
+      const items = getVisibleNewsItems();
+      const firstId = items[0].id;
+      localStorage.setItem(DISMISSED_NEWS_KEY, JSON.stringify([firstId]));
+      const filtered = getVisibleNewsItems();
+      expect(filtered.find((i) => i.id === firstId)).toBeUndefined();
+      expect(filtered.length).toBe(items.length - 1);
+    });
+
+    it("handles corrupted localStorage gracefully", () => {
+      localStorage.setItem(DISMISSED_NEWS_KEY, "not-valid-json");
+      expect(() => getVisibleNewsItems()).not.toThrow();
+      const items = getVisibleNewsItems();
+      expect(items.length).toBe(newsItems.length);
+    });
+
+    it("returns empty when all items are dismissed", () => {
+      const allIds = (newsItems as NewsItem[]).map((i) => i.id);
+      localStorage.setItem(DISMISSED_NEWS_KEY, JSON.stringify(allIds));
+      const items = getVisibleNewsItems();
+      expect(items.length).toBe(0);
+    });
+  });
+
+  describe("news items structure", () => {
+    it("each item has required fields", () => {
+      const items = getVisibleNewsItems();
+      for (const item of items) {
+        expect(item.id).toBeDefined();
+        expect(typeof item.id).toBe("string");
+        expect(item.title).toBeDefined();
+        expect(typeof item.title).toBe("string");
+        expect(item.description).toBeDefined();
+        expect(typeof item.description).toBe("string");
+        expect(item.type).toBeDefined();
+        expect(["tournament", "tutorial", "announcement"]).toContain(item.type);
+      }
+    });
+
+    it("each item has a unique id", () => {
+      const items = getVisibleNewsItems();
+      const ids = items.map((i) => i.id);
+      expect(new Set(ids).size).toBe(ids.length);
+    });
+
+    it("contains a tournament entry", () => {
+      const items = getVisibleNewsItems();
+      expect(items.some((i) => i.type === "tournament")).toBe(true);
+    });
+  });
+});