frontend/src/app/app.component.ts

@@ -1,12 +1,10 @@
-import { Component, HostListener, inject, signal } from '@angular/core';
+import { Component, HostListener, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { NavbarComponent } from './shared/components/navbar/navbar.component';
 import { FooterComponent } from './shared/components/footer/footer.component';
 import { LoginComponent } from './feature/auth/login/login.component';
 import { RegisterComponent } from './feature/auth/register/register.component';
 import { RecoverPasswordComponent } from './feature/auth/recover-password/recover-password.component';
-import { PlaySoundDirective } from './shared/directives/play-sound.directive';
-import { SoundInitializerService } from './shared/services/sound-initializer.service';
 
 @Component({
   selector: 'app-root',
@@ -18,22 +16,14 @@ import { SoundInitializerService } from './shared/services/sound-initializer.ser
     LoginComponent,
     RegisterComponent,
     RecoverPasswordComponent,
-    PlaySoundDirective,
   ],
   templateUrl: './app.component.html',
-  hostDirectives: [PlaySoundDirective],
 })
 export class AppComponent {
-  private soundInitializer = inject(SoundInitializerService);
-
   showLogin = signal(false);
   showRegister = signal(false);
   showRecoverPassword = signal(false);
 
-  constructor() {
-    this.soundInitializer.initialize();
-  }
-
   @HostListener('document:keydown.escape')
   handleEscapeKey() {
     this.hideAuthForms();

frontend/src/app/feature/game/blackjack/blackjack.component.ts

@@ -14,7 +14,6 @@ import { UserService } from '@service/user.service';
 import { timer } from 'rxjs';
 import { DebtDialogComponent } from '@shared/components/debt-dialog/debt-dialog.component';
 import { AuthService } from '@service/auth.service';
-import { AudioService } from '@shared/services/audio.service';
 
 @Component({
   selector: 'app-blackjack',
@@ -36,7 +35,6 @@ export default class BlackjackComponent implements OnInit {
   private userService = inject(UserService);
   private authService = inject(AuthService);
   private blackjackService = inject(BlackjackService);
-  private audioService = inject(AudioService);
 
   dealerCards = signal<Card[]>([]);
   playerCards = signal<Card[]>([]);
@@ -93,9 +91,6 @@ export default class BlackjackComponent implements OnInit {
         // Show the result dialog after refreshing user data
         timer(500).subscribe(() => {
           this.showGameResult.set(true);
-          if (game.state === GameState.PLAYER_WON || game.state === GameState.PLAYER_BLACKJACK) {
-            this.audioService.playWinSound();
-          }
           console.log('Game result dialog shown after delay');
         });
       });
@@ -104,7 +99,6 @@ export default class BlackjackComponent implements OnInit {
 
   onNewGame(bet: number): void {
     this.isActionInProgress.set(true);
-    this.audioService.playBetSound();
 
     this.blackjackService.startGame(bet).subscribe({
       next: (game) => {
@@ -123,7 +117,6 @@ export default class BlackjackComponent implements OnInit {
     if (!this.currentGameId() || this.isActionInProgress()) return;
 
     this.isActionInProgress.set(true);
-    this.audioService.playBetSound();
 
     this.blackjackService.hit(this.currentGameId()!).subscribe({
       next: (game) => {
@@ -150,7 +143,6 @@ export default class BlackjackComponent implements OnInit {
     }
 
     this.isActionInProgress.set(true);
-    this.audioService.playBetSound();
 
     this.blackjackService.stand(this.currentGameId()!).subscribe({
       next: (game) => {
@@ -175,7 +167,6 @@ export default class BlackjackComponent implements OnInit {
     }
 
     this.isActionInProgress.set(true);
-    this.audioService.playBetSound();
 
     this.blackjackService.doubleDown(this.currentGameId()!).subscribe({
       next: (game) => {

frontend/src/app/feature/game/slots/slots.component.ts

@@ -40,7 +40,6 @@ export default class SlotsComponent implements OnInit, OnDestroy {
   private userService = inject(UserService);
   private authService = inject(AuthService);
   private userSubscription: Subscription | undefined;
-  private winSound: HTMLAudioElement;
 
   slotInfo = signal<Record<string, number> | null>(null);
   slotResult = signal<SlotResult>({
@@ -57,10 +56,6 @@ export default class SlotsComponent implements OnInit, OnDestroy {
   betAmount = signal<number>(1);
   isSpinning = false;
 
-  constructor() {
-    this.winSound = new Audio('/sounds/win.mp3');
-  }
-
   ngOnInit(): void {
     this.httpClient.get<Record<string, number>>('/backend/slots/info').subscribe((data) => {
       this.slotInfo.set(data);
@@ -116,7 +111,6 @@ export default class SlotsComponent implements OnInit, OnDestroy {
           this.slotResult.set(result);
 
           if (result.status === 'win') {
-            this.winSound.play();
             this.userService.updateLocalBalance(result.amount);
           }
 

frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.ts

@@ -24,7 +24,6 @@ export default class LootboxOpeningComponent {
   prizeList: Reward[] = [];
   animationCompleted = false;
   currentUser: User | null = null;
-  private winSound: HTMLAudioElement;
 
   constructor(
     private route: ActivatedRoute,
@@ -34,7 +33,6 @@ export default class LootboxOpeningComponent {
     private authService: AuthService,
     private cdr: ChangeDetectorRef
   ) {
-    this.winSound = new Audio('/sounds/win.mp3');
     this.loadLootbox();
     this.authService.userSubject.subscribe((user) => {
       this.currentUser = user;
@@ -147,7 +145,6 @@ export default class LootboxOpeningComponent {
       this.animationCompleted = true;
 
       if (this.wonReward) {
-        this.winSound.play();
         this.userService.updateLocalBalance(this.wonReward.value);
       }
 

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

@@ -1,15 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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)) {
-      return this.audioCache.get(soundName)!;
-    }
-
-    const audio = new Audio(`/sounds/${soundName}.mp3`);
-    this.audioCache.set(soundName, audio);
-    return audio;
-  }
-
-  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

@@ -1,51 +0,0 @@
-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', '');
-      }
-    });
-  }
-}

frontend/src/styles.css

@@ -174,18 +174,3 @@ a {
 .modal-card .button-secondary {
   @apply bg-deep-blue-light/50 hover:bg-deep-blue-light w-full py-2.5 my-2 border border-deep-blue-light/30 hover:border-deep-blue-light/50;
 }
-
-button,
-a {
-  -webkit-tap-highlight-color: transparent;
-}
-
-button[appPlaySound],
-a[appPlaySound] {
-  cursor: pointer;
-}
-
-button:not([appPlaySound]),
-a:not([appPlaySound]) {
-  --add-sound-directive: true;
-}