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
This commit is contained in:
Evan
2026-01-28 19:43:25 -08:00
committed by GitHub
parent 80c8ddda0f
commit 1eed561be5
5 changed files with 95 additions and 12 deletions
+33 -6
View File
@@ -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"