feat: add audio features and sounds to the game

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

@@ -14,6 +14,7 @@ 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',
@@ -35,6 +36,7 @@ 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[]>([]);
@@ -91,6 +93,9 @@ 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');
         });
       });
@@ -99,6 +104,7 @@ export default class BlackjackComponent implements OnInit {
 
   onNewGame(bet: number): void {
     this.isActionInProgress.set(true);
+    this.audioService.playBetSound();
 
     this.blackjackService.startGame(bet).subscribe({
       next: (game) => {
@@ -117,6 +123,7 @@ 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) => {
@@ -143,6 +150,7 @@ export default class BlackjackComponent implements OnInit {
     }
 
     this.isActionInProgress.set(true);
+    this.audioService.playBetSound();
 
     this.blackjackService.stand(this.currentGameId()!).subscribe({
       next: (game) => {
@@ -167,6 +175,7 @@ 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,6 +40,7 @@ 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>({
@@ -56,6 +57,10 @@ 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);
@@ -111,6 +116,7 @@ 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,6 +24,7 @@ export default class LootboxOpeningComponent {
   prizeList: Reward[] = [];
   animationCompleted = false;
   currentUser: User | null = null;
+  private winSound: HTMLAudioElement;
 
   constructor(
     private route: ActivatedRoute,
@@ -33,6 +34,7 @@ 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;
@@ -145,6 +147,7 @@ export default class LootboxOpeningComponent {
       this.animationCompleted = true;
 
       if (this.wonReward) {
+        this.winSound.play();
         this.userService.updateLocalBalance(this.wonReward.value);
       }