feat: add audio features and sounds to the game

frontend/src/app/shared/directives/play-sound.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, HostListener, inject } from '@angular/core';
+import { AudioService } from '../services/audio.service';
+
+@Directive({
+  selector: '[appPlaySound]',
+  standalone: true
+})
+export class PlaySoundDirective {
+  private audioService = inject(AudioService);
+
+  @HostListener('click')
+  onClick() {
+    this.audioService.playBetSound();
+  }
+} 

frontend/src/app/shared/services/audio.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AudioService {
+  private audioCache = new Map<string, HTMLAudioElement>();
+
+  private getAudio(soundName: string): HTMLAudioElement {
+    if (!this.audioCache.has(soundName)) {
+      const audio = new Audio(`/sounds/${soundName}`);
+      this.audioCache.set(soundName, audio);
+      return audio;
+    }
+    return this.audioCache.get(soundName)!;
+  }
+
+  playBetSound(): void {
+    const audio = this.getAudio('bet.mp3');
+    audio.currentTime = 0;
+    audio.play().catch(error => console.error('Error playing bet sound:', error));
+  }
+
+  playWinSound(): void {
+    const audio = this.getAudio('win.mp3');
+    audio.currentTime = 0;
+    audio.play().catch(error => console.error('Error playing win sound:', error));
+  }
+} 

frontend/src/app/shared/services/sound-initializer.service.ts

@@ -0,0 +1,48 @@
+import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SoundInitializerService {
+  private renderer: Renderer2;
+  private observer: MutationObserver;
+
+  constructor(rendererFactory: RendererFactory2) {
+    this.renderer = rendererFactory.createRenderer(null, null);
+    
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof HTMLElement) {
+            this.processElement(node);
+          }
+        });
+      });
+    });
+  }
+
+  initialize() {
+    document.querySelectorAll('button, a').forEach(element => {
+      if (!element.hasAttribute('appPlaySound')) {
+        this.renderer.setAttribute(element, 'appPlaySound', '');
+      }
+    });
+
+    this.observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  private processElement(element: HTMLElement) {
+    if ((element.tagName === 'BUTTON' || element.tagName === 'A') && !element.hasAttribute('appPlaySound')) {
+      this.renderer.setAttribute(element, 'appPlaySound', '');
+    }
+
+    element.querySelectorAll('button, a').forEach(child => {
+      if (!child.hasAttribute('appPlaySound')) {
+        this.renderer.setAttribute(child, 'appPlaySound', '');
+      }
+    });
+  }
+}