Lobby Notification System (Audible Ping on Match)

index.html

@@ -454,6 +454,8 @@
     <help-modal></help-modal>
     <game-info-modal></game-info-modal>
     <dark-mode-button></dark-mode-button>
+    <lobby-notification-button></lobby-notification-button>
+    <lobby-notification-modal></lobby-notification-modal>
     <stats-button></stats-button>
     <alert-frame></alert-frame>
     <chat-modal></chat-modal>

resources/lang/en.json

@@ -861,5 +861,13 @@
     "stats_games_played": "Games Played",
     "mode_ffa": "Free-for-All",
     "mode_team": "Team"
+  },
+  "lobby_notification_modal": {
+    "title": "Lobby Notifications",
+    "min": "Min:",
+    "max": "Max:",
+    "sound_notifications": "Sound Notifications",
+    "enable_hint": "Select a game mode to enable notifications",
+    "team_count_range": "Players per Team"
   }
 }

src/client/LangSelector.ts

@@ -195,6 +195,7 @@ export class LangSelector extends LitElement {
       "o-modal",
       "o-button",
       "territory-patterns-modal",
+      "lobby-notification-modal",
     ];
 
     document.title = this.translateText("main.title") ?? document.title;

src/client/LobbyNotificationButton.ts

@@ -0,0 +1,30 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { translateText } from "./Utils";
+
+@customElement("lobby-notification-button")
+export class LobbyNotificationButton extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  private openModal() {
+    const event = new CustomEvent("open-notification-modal", {
+      bubbles: true,
+      composed: true,
+    });
+    window.dispatchEvent(event);
+  }
+
+  render() {
+    return html`
+      <button
+        title="${translateText("lobby_notification_modal.title")}"
+        class="absolute top-0 left-[50px] md:top-[10px] md:left-[60px] border-0 bg-transparent cursor-pointer text-2xl"
+        @click=${this.openModal}
+      >
+        🔔
+      </button>
+    `;
+  }
+}

src/client/LobbyNotificationManager.ts

@@ -0,0 +1,176 @@
+import { GameConfig, GameInfo } from "../core/Schemas";
+import { GameMode } from "../core/game/Game";
+
+interface NotificationSettings {
+  ffaEnabled: boolean;
+  teamEnabled: boolean;
+  soundEnabled: boolean;
+  minTeamCount: number;
+  maxTeamCount: number;
+}
+
+export class LobbyNotificationManager {
+  private settings: NotificationSettings | null = null;
+  private audioContext: AudioContext | null = null;
+  private seenLobbies: Set<string> = new Set();
+
+  constructor() {
+    this.loadSettings();
+    this.setupEventListeners();
+  }
+
+  private setupEventListeners() {
+    window.addEventListener(
+      "notification-settings-changed",
+      this.handleSettingsChanged,
+    );
+    window.addEventListener("lobbies-updated", this.handleLobbiesUpdated);
+  }
+
+  private handleSettingsChanged = (e: Event) => {
+    const event = e as CustomEvent<NotificationSettings>;
+    this.settings = event.detail;
+  };
+
+  private loadSettings() {
+    try {
+      const saved = localStorage.getItem("lobbyNotificationSettings");
+      if (saved) {
+        this.settings = JSON.parse(saved);
+      }
+    } catch (error) {
+      console.error("Failed to load notification settings:", error);
+    }
+  }
+
+  private handleLobbiesUpdated = (e: Event) => {
+    const event = e as CustomEvent<GameInfo[]>;
+    const lobbies = event.detail || [];
+
+    // Check for new lobbies
+    lobbies.forEach((lobby) => {
+      if (!this.seenLobbies.has(lobby.gameID) && lobby.gameConfig) {
+        this.seenLobbies.add(lobby.gameID);
+
+        // Check if this lobby matches user preferences
+        if (this.matchesPreferences(lobby.gameConfig)) {
+          this.playNotificationSound();
+        }
+      }
+    });
+
+    // Clean up old lobbies no longer in the list
+    const currentIds = new Set(lobbies.map((l) => l.gameID));
+    for (const id of this.seenLobbies) {
+      if (!currentIds.has(id)) {
+        this.seenLobbies.delete(id);
+      }
+    }
+  };
+
+  private matchesPreferences(config: GameConfig): boolean {
+    if (!this.settings) return false;
+
+    // Check FFA
+    if (this.settings.ffaEnabled && config.gameMode === GameMode.FFA) {
+      return true;
+    }
+
+    // Check Team
+    if (this.settings.teamEnabled && config.gameMode === GameMode.Team) {
+      const maxPlayers = config.maxPlayers ?? 0;
+      const playerTeams = config.playerTeams;
+
+      if (maxPlayers === 0) return false;
+
+      // Map fixed modes to players per team
+      const playersPerTeamMap: Record<string, number> = {
+        Duos: 2,
+        Trios: 3,
+        Quads: 4,
+        "Humans Vs Nations": 1,
+      };
+
+      // Calculate players per team
+      // If playerTeams is a string (Duos/Trios/Quads), use the map
+      // If it's a number, it's the number of teams, so calculate players per team
+      const playersPerTeam =
+        typeof playerTeams === "string"
+          ? (playersPerTeamMap[playerTeams] ?? 0)
+          : typeof playerTeams === "number"
+            ? Math.floor(maxPlayers / playerTeams)
+            : 0;
+
+      if (playersPerTeam === 0) return false;
+
+      if (playersPerTeam < this.settings.minTeamCount) return false;
+      if (playersPerTeam > this.settings.maxTeamCount) return false;
+
+      return true;
+    }
+
+    return false;
+  }
+
+  private playNotificationSound() {
+    if (!this.settings?.soundEnabled) {
+      return;
+    }
+
+    this.playBeepSound();
+  }
+
+  private getAudioContext(): AudioContext | null {
+    if (this.audioContext) {
+      return this.audioContext;
+    }
+
+    try {
+      this.audioContext = new (window.AudioContext ||
+        (window as any).webkitAudioContext)();
+      return this.audioContext;
+    } catch (error) {
+      console.error("Failed to create AudioContext:", error);
+      return null;
+    }
+  }
+
+  private playBeepSound() {
+    try {
+      const audioContext = this.getAudioContext();
+      if (!audioContext) return;
+
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+
+      oscillator.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+
+      oscillator.frequency.value = 800;
+      oscillator.type = "sine";
+
+      gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.01,
+        audioContext.currentTime + 0.3,
+      );
+
+      oscillator.start(audioContext.currentTime);
+      oscillator.stop(audioContext.currentTime + 0.3);
+    } catch (error) {
+      console.error("Failed to play beep sound:", error);
+    }
+  }
+
+  public destroy() {
+    if (this.audioContext) {
+      this.audioContext.close();
+      this.audioContext = null;
+    }
+    window.removeEventListener(
+      "notification-settings-changed",
+      this.handleSettingsChanged,
+    );
+    window.removeEventListener("lobbies-updated", this.handleLobbiesUpdated);
+  }
+}