From 80c8ddda0fa106da7cf1ea573fe7da0fce665ec2 Mon Sep 17 00:00:00 2001
From: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
Date: Wed, 28 Jan 2026 23:56:53 +0000
Subject: [PATCH 1/2] Shop new tag (#3057)

adds a "tag" of NEW to the shop which pulses
<img width="159" height="83" alt="image"
src="https://github.com/user-attachments/assets/603adbaa-0699-443b-b7de-2fe383cdf759"
/>

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

regression is found:

w.o.n
---
 resources/lang/en.json                 |  1 +
 src/client/components/DesktopNavBar.ts | 16 +++++++++++-----
 src/client/components/MobileNavBar.ts  | 16 +++++++++++-----
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index 3cb7cfba5..d484d3c6d 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -45,6 +45,7 @@
     "play": "Play",
     "news": "News",
     "store": "Store",
+    "store_new_badge": "NEW",
     "settings": "Settings",
     "keys": "Keys",
     "stats": "Stats",
diff --git a/src/client/components/DesktopNavBar.ts b/src/client/components/DesktopNavBar.ts
index b6b67b435..c197306b4 100644
--- a/src/client/components/DesktopNavBar.ts
+++ b/src/client/components/DesktopNavBar.ts
@@ -104,11 +104,17 @@ export class DesktopNavBar extends LitElement {
           data-page="page-news"
           data-i18n="main.news"
         ></button>
-        <button
-          class="nav-menu-item no-crazygames text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500 relative"
-          data-page="page-item-store"
-          data-i18n="main.store"
-        ></button>
+        <div class="relative no-crazygames">
+          <button
+            class="nav-menu-item text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
+            data-page="page-item-store"
+            data-i18n="main.store"
+          ></button>
+          <span
+            class="absolute -top-3 -right-2 bg-gradient-to-br from-red-600 to-red-700 text-white text-[9px] font-black tracking-wider px-2 py-0.5 rounded rotate-12 shadow-lg shadow-red-600/50 animate-pulse pointer-events-none"
+            data-i18n="main.store_new_badge"
+          ></span>
+        </div>
         <button
           class="nav-menu-item text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
           data-page="page-settings"
diff --git a/src/client/components/MobileNavBar.ts b/src/client/components/MobileNavBar.ts
index a96ecdf6e..900ee2a3b 100644
--- a/src/client/components/MobileNavBar.ts
+++ b/src/client/components/MobileNavBar.ts
@@ -124,11 +124,17 @@ export class MobileNavBar extends LitElement {
           data-page="page-stats"
           data-i18n="main.stats"
         ></button>
-        <button
-          class="no-crazygames nav-menu-item block w-full text-left font-bold uppercase tracking-[0.05em] text-white/70 transition-all duration-200 cursor-pointer hover:text-blue-600 hover:translate-x-2.5 hover:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] [&.active]:text-blue-600 [&.active]:translate-x-2.5 [&.active]:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] text-[clamp(18px,2.8vh,32px)] py-[clamp(0.2rem,0.8vh,0.75rem)]"
-          data-page="page-item-store"
-          data-i18n="main.store"
-        ></button>
+        <div class="relative no-crazygames">
+          <button
+            class="nav-menu-item block w-full text-left font-bold uppercase tracking-[0.05em] text-white/70 transition-all duration-200 cursor-pointer hover:text-blue-600 hover:translate-x-2.5 hover:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] [&.active]:text-blue-600 [&.active]:translate-x-2.5 [&.active]:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] text-[clamp(18px,2.8vh,32px)] py-[clamp(0.2rem,0.8vh,0.75rem)]"
+            data-page="page-item-store"
+            data-i18n="main.store"
+          ></button>
+          <span
+            class="absolute top-[45%] -translate-y-1/2 right-4 bg-gradient-to-br from-red-600 to-red-700 text-white text-[10px] font-black tracking-wider px-2.5 py-1 rounded rotate-12 shadow-lg shadow-red-600/50 animate-pulse pointer-events-none"
+            data-i18n="main.store_new_badge"
+          ></span>
+        </div>
         <button
           class="nav-menu-item block w-full text-left font-bold uppercase tracking-[0.05em] text-white/70 transition-all duration-200 cursor-pointer hover:text-blue-600 hover:translate-x-2.5 hover:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] [&.active]:text-blue-600 [&.active]:translate-x-2.5 [&.active]:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] text-[clamp(18px,2.8vh,32px)] py-[clamp(0.2rem,0.8vh,0.75rem)]"
           data-page="page-settings"

From 1eed561be5bcd20cc8155505fea7758414f5edf5 Mon Sep 17 00:00:00 2001
From: Evan <evanpelle@gmail.com>
Date: Wed, 28 Jan 2026 19:43:25 -0800
Subject: [PATCH 2/2] Add enzo video tutorial in the help modal (#3059)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

Add video at top of help section, also show a glowing dot for new
players.

<img width="301" height="133" alt="Screenshot 2026-01-28 at 7 25 23 PM"
src="https://github.com/user-attachments/assets/c6b01853-f066-470f-a22d-8995fd81fe0f"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan
---
 resources/lang/en.json                 |  2 +
 src/client/HelpModal.ts                | 57 +++++++++++++++++++++++++-
 src/client/Utils.ts                    |  2 +
 src/client/components/DesktopNavBar.ts | 39 +++++++++++++++---
 src/client/graphics/layers/WinModal.ts |  7 ++--
 5 files changed, 95 insertions(+), 12 deletions(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index d484d3c6d..ef196e881 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -59,6 +59,8 @@
     "title": "Release Notes"
   },
   "help_modal": {
+    "video_tutorial": "Video Tutorial",
+    "video_tutorial_title": "OpenFront.io Tutorial",
     "hotkeys": "Hotkeys",
     "table_key": "Key",
     "table_action": "Action",
diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts
index cfc2a611b..6b4daacc6 100644
--- a/src/client/HelpModal.ts
+++ b/src/client/HelpModal.ts
@@ -1,6 +1,6 @@
 import { html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { translateText } from "../client/Utils";
+import { customElement, query, state } from "lit/decorators.js";
+import { translateText, TUTORIAL_VIDEO_URL } from "../client/Utils";
 import { BaseModal } from "./components/BaseModal";
 import "./components/Difficulties";
 import "./components/Maps";
@@ -9,6 +9,7 @@ import { modalHeader } from "./components/ui/ModalHeader";
 @customElement("help-modal")
 export class HelpModal extends BaseModal {
   @state() private keybinds: Record<string, string> = this.getKeybinds();
+  @query("#tutorial-video-iframe") private videoIframe?: HTMLIFrameElement;
 
   private isKeybindObject(v: unknown): v is { value: string } {
     return (
@@ -120,6 +121,47 @@ export class HelpModal extends BaseModal {
             [&_p]:text-gray-300 [&_p]:mb-3 [&_strong]:text-white [&_strong]:font-bold
             scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent"
         >
+          <!-- Video Tutorial Section -->
+          <div class="flex items-center gap-3 mb-3">
+            <div class="text-blue-400">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-5 h-5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polygon points="5 3 19 12 5 21 5 3"></polygon>
+              </svg>
+            </div>
+            <h3
+              class="text-xl font-bold uppercase tracking-widest text-white/90"
+            >
+              ${translateText("help_modal.video_tutorial")}
+            </h3>
+            <div
+              class="flex-1 h-px bg-gradient-to-r from-blue-500/50 to-transparent"
+            ></div>
+          </div>
+          <section
+            class="bg-white/5 rounded-xl border border-white/10 overflow-hidden mb-8"
+          >
+            <div class="relative w-full h-0 pb-[56.25%]">
+              <iframe
+                id="tutorial-video-iframe"
+                class="absolute top-0 left-0 w-full h-full"
+                src="${TUTORIAL_VIDEO_URL}"
+                title="${translateText("help_modal.video_tutorial_title")}"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen
+              ></iframe>
+            </div>
+          </section>
+
           <!-- Hotkeys Section -->
           <div class="flex items-center gap-3 mb-3">
             <div class="text-blue-400">
@@ -1139,5 +1181,16 @@ export class HelpModal extends BaseModal {
 
   protected onOpen(): void {
     this.keybinds = this.getKeybinds();
+    // Restore the video src when modal opens
+    if (this.videoIframe) {
+      this.videoIframe.src = TUTORIAL_VIDEO_URL;
+    }
+  }
+
+  protected onClose(): void {
+    // Clear the iframe src to stop video playback
+    if (this.videoIframe) {
+      this.videoIframe.src = "";
+    }
   }
 }
diff --git a/src/client/Utils.ts b/src/client/Utils.ts
index 2f4e0dafd..9a7454a65 100644
--- a/src/client/Utils.ts
+++ b/src/client/Utils.ts
@@ -2,6 +2,8 @@ import IntlMessageFormat from "intl-messageformat";
 import { MessageType } from "../core/game/Game";
 import type { LangSelector } from "./LangSelector";
 
+export const TUTORIAL_VIDEO_URL = "https://www.youtube.com/embed/EN2oOog3pSs";
+
 export function renderDuration(totalSeconds: number): string {
   if (totalSeconds <= 0) return "0s";
   const minutes = Math.floor(totalSeconds / 60);
diff --git a/src/client/components/DesktopNavBar.ts b/src/client/components/DesktopNavBar.ts
index c197306b4..1e13f87c1 100644
--- a/src/client/components/DesktopNavBar.ts
+++ b/src/client/components/DesktopNavBar.ts
@@ -1,8 +1,13 @@
 import { LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
+import { getGamesPlayed } from "../Utils";
+
+const HELP_SEEN_KEY = "helpSeen";
 
 @customElement("desktop-nav-bar")
 export class DesktopNavBar extends LitElement {
+  @state() private _helpSeen = localStorage.getItem(HELP_SEEN_KEY) === "true";
+
   createRenderRoot() {
     return this;
   }
@@ -40,6 +45,15 @@ export class DesktopNavBar extends LitElement {
     });
   }
 
+  private showHelpDot(): boolean {
+    return getGamesPlayed() < 10 && !this._helpSeen;
+  }
+
+  private onHelpClick = () => {
+    localStorage.setItem(HELP_SEEN_KEY, "true");
+    this._helpSeen = true;
+  };
+
   render() {
     return html`
       <nav
@@ -125,11 +139,24 @@ export class DesktopNavBar extends LitElement {
           data-page="page-stats"
           data-i18n="main.stats"
         ></button>
-        <button
-          class="nav-menu-item text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
-          data-page="page-help"
-          data-i18n="main.help"
-        ></button>
+        <div class="relative">
+          <button
+            class="nav-menu-item text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
+            data-page="page-help"
+            data-i18n="main.help"
+            @click=${this.onHelpClick}
+          ></button>
+          ${this.showHelpDot()
+            ? html`
+                <span
+                  class="absolute -top-1 -right-1 w-2 h-2 bg-yellow-400 rounded-full animate-ping"
+                ></span>
+                <span
+                  class="absolute -top-1 -right-1 w-2 h-2 bg-yellow-400 rounded-full"
+                ></span>
+              `
+            : ""}
+        </div>
         <lang-selector></lang-selector>
         <button
           id="nav-account-button"
diff --git a/src/client/graphics/layers/WinModal.ts b/src/client/graphics/layers/WinModal.ts
index 7d9172367..3a1942ed6 100644
--- a/src/client/graphics/layers/WinModal.ts
+++ b/src/client/graphics/layers/WinModal.ts
@@ -1,9 +1,10 @@
-import { LitElement, TemplateResult, html } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import {
   getGamesPlayed,
   isInIframe,
   translateText,
+  TUTORIAL_VIDEO_URL,
 } from "../../../client/Utils";
 import { ColorPalette, Pattern } from "../../../core/CosmeticSchemas";
 import { EventBus } from "../../../core/EventBus";
@@ -131,9 +132,7 @@ export class WinModal extends LitElement implements Layer {
         <div class="relative w-full pb-[56.25%]">
           <iframe
             class="absolute top-0 left-0 w-full h-full rounded-sm"
-            src="${this.isVisible
-              ? "https://www.youtube.com/embed/EN2oOog3pSs"
-              : ""}"
+            src="${this.isVisible ? TUTORIAL_VIDEO_URL : ""}"
             title="YouTube video player"
             frameborder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"