Skip to content

Commit 1eed561

Browse files
evanpelleevanpelle
authored
Add enzo video tutorial in the help modal (#3059)
## 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
1 parent 80c8ddd commit 1eed561

5 files changed

Lines changed: 95 additions & 12 deletions

File tree

‎resources/lang/en.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@
5959
"title": "Release Notes"
6060
},
6161
"help_modal": {
62+
"video_tutorial": "Video Tutorial",
63+
"video_tutorial_title": "OpenFront.io Tutorial",
6264
"hotkeys": "Hotkeys",
6365
"table_key": "Key",
6466
"table_action": "Action",

‎src/client/HelpModal.ts‎

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { html } from "lit";
2-
import { customElement, state } from "lit/decorators.js";
3-
import { translateText } from "../client/Utils";
2+
import { customElement, query, state } from "lit/decorators.js";
3+
import { translateText, TUTORIAL_VIDEO_URL } from "../client/Utils";
44
import { BaseModal } from "./components/BaseModal";
55
import "./components/Difficulties";
66
import "./components/Maps";
@@ -9,6 +9,7 @@ import { modalHeader } from "./components/ui/ModalHeader";
99
@customElement("help-modal")
1010
export class HelpModal extends BaseModal {
1111
@state() private keybinds: Record<string, string> = this.getKeybinds();
12+
@query("#tutorial-video-iframe") private videoIframe?: HTMLIFrameElement;
1213

1314
private isKeybindObject(v: unknown): v is { value: string } {
1415
return (
@@ -120,6 +121,47 @@ export class HelpModal extends BaseModal {
120121
[&_p]:text-gray-300 [&_p]:mb-3 [&_strong]:text-white [&_strong]:font-bold
121122
scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent"
122123
>
124+
<!-- Video Tutorial Section -->
125+
<div class="flex items-center gap-3 mb-3">
126+
<div class="text-blue-400">
127+
<svg
128+
xmlns="http://www.w3.org/2000/svg"
129+
class="w-5 h-5"
130+
viewBox="0 0 24 24"
131+
fill="none"
132+
stroke="currentColor"
133+
stroke-width="2"
134+
stroke-linecap="round"
135+
stroke-linejoin="round"
136+
>
137+
<polygon points="5 3 19 12 5 21 5 3"></polygon>
138+
</svg>
139+
</div>
140+
<h3
141+
class="text-xl font-bold uppercase tracking-widest text-white/90"
142+
>
143+
${translateText("help_modal.video_tutorial")}
144+
</h3>
145+
<div
146+
class="flex-1 h-px bg-gradient-to-r from-blue-500/50 to-transparent"
147+
></div>
148+
</div>
149+
<section
150+
class="bg-white/5 rounded-xl border border-white/10 overflow-hidden mb-8"
151+
>
152+
<div class="relative w-full h-0 pb-[56.25%]">
153+
<iframe
154+
id="tutorial-video-iframe"
155+
class="absolute top-0 left-0 w-full h-full"
156+
src="${TUTORIAL_VIDEO_URL}"
157+
title="${translateText("help_modal.video_tutorial_title")}"
158+
frameborder="0"
159+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
160+
allowfullscreen
161+
></iframe>
162+
</div>
163+
</section>
164+
123165
<!-- Hotkeys Section -->
124166
<div class="flex items-center gap-3 mb-3">
125167
<div class="text-blue-400">
@@ -1139,5 +1181,16 @@ export class HelpModal extends BaseModal {
11391181

11401182
protected onOpen(): void {
11411183
this.keybinds = this.getKeybinds();
1184+
// Restore the video src when modal opens
1185+
if (this.videoIframe) {
1186+
this.videoIframe.src = TUTORIAL_VIDEO_URL;
1187+
}
1188+
}
1189+
1190+
protected onClose(): void {
1191+
// Clear the iframe src to stop video playback
1192+
if (this.videoIframe) {
1193+
this.videoIframe.src = "";
1194+
}
11421195
}
11431196
}

‎src/client/Utils.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import IntlMessageFormat from "intl-messageformat";
22
import { MessageType } from "../core/game/Game";
33
import type { LangSelector } from "./LangSelector";
44

5+
export const TUTORIAL_VIDEO_URL = "https://www.youtube.com/embed/EN2oOog3pSs";
6+
57
export function renderDuration(totalSeconds: number): string {
68
if (totalSeconds <= 0) return "0s";
79
const minutes = Math.floor(totalSeconds / 60);

‎src/client/components/DesktopNavBar.ts‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import { LitElement, html } from "lit";
2-
import { customElement } from "lit/decorators.js";
2+
import { customElement, state } from "lit/decorators.js";
3+
import { getGamesPlayed } from "../Utils";
4+
5+
const HELP_SEEN_KEY = "helpSeen";
36

47
@customElement("desktop-nav-bar")
58
export class DesktopNavBar extends LitElement {
9+
@state() private _helpSeen = localStorage.getItem(HELP_SEEN_KEY) === "true";
10+
611
createRenderRoot() {
712
return this;
813
}
@@ -40,6 +45,15 @@ export class DesktopNavBar extends LitElement {
4045
});
4146
}
4247

48+
private showHelpDot(): boolean {
49+
return getGamesPlayed() < 10 && !this._helpSeen;
50+
}
51+
52+
private onHelpClick = () => {
53+
localStorage.setItem(HELP_SEEN_KEY, "true");
54+
this._helpSeen = true;
55+
};
56+
4357
render() {
4458
return html`
4559
<nav
@@ -125,11 +139,24 @@ export class DesktopNavBar extends LitElement {
125139
data-page="page-stats"
126140
data-i18n="main.stats"
127141
></button>
128-
<button
129-
class="nav-menu-item text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
130-
data-page="page-help"
131-
data-i18n="main.help"
132-
></button>
142+
<div class="relative">
143+
<button
144+
class="nav-menu-item text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500"
145+
data-page="page-help"
146+
data-i18n="main.help"
147+
@click=${this.onHelpClick}
148+
></button>
149+
${this.showHelpDot()
150+
? html`
151+
<span
152+
class="absolute -top-1 -right-1 w-2 h-2 bg-yellow-400 rounded-full animate-ping"
153+
></span>
154+
<span
155+
class="absolute -top-1 -right-1 w-2 h-2 bg-yellow-400 rounded-full"
156+
></span>
157+
`
158+
: ""}
159+
</div>
133160
<lang-selector></lang-selector>
134161
<button
135162
id="nav-account-button"

‎src/client/graphics/layers/WinModal.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { LitElement, TemplateResult, html } from "lit";
1+
import { html, LitElement, TemplateResult } from "lit";
22
import { customElement, state } from "lit/decorators.js";
33
import {
44
getGamesPlayed,
55
isInIframe,
66
translateText,
7+
TUTORIAL_VIDEO_URL,
78
} from "../../../client/Utils";
89
import { ColorPalette, Pattern } from "../../../core/CosmeticSchemas";
910
import { EventBus } from "../../../core/EventBus";
@@ -131,9 +132,7 @@ export class WinModal extends LitElement implements Layer {
131132
<div class="relative w-full pb-[56.25%]">
132133
<iframe
133134
class="absolute top-0 left-0 w-full h-full rounded-sm"
134-
src="${this.isVisible
135-
? "https://www.youtube.com/embed/EN2oOog3pSs"
136-
: ""}"
135+
src="${this.isVisible ? TUTORIAL_VIDEO_URL : ""}"
137136
title="YouTube video player"
138137
frameborder="0"
139138
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

0 commit comments

Comments
 (0)