feat(dice): enhance game UI and add sound effects

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

@@ -0,0 +1,39 @@
+import { Directive, ElementRef, HostListener, inject, Input, OnInit } from '@angular/core';
+import { AudioService } from '../services/audio.service';
+import { AbstractControl } from '@angular/forms';
+
+@Directive({
+  selector: '[appDragSound]',
+  standalone: true,
+})
+export class DragSoundDirective implements OnInit {
+  private audioService = inject(AudioService);
+  private elementRef = inject(ElementRef);
+  private lastValue: number | null = null;
+
+  @Input('appDragSound') formControl: AbstractControl | null = null;
+
+  ngOnInit() {
+    if (this.formControl) {
+      this.lastValue = this.formControl.value;
+
+      this.formControl.valueChanges.subscribe((newValue) => {
+        if (this.lastValue !== newValue) {
+          this.playSound();
+          this.lastValue = newValue;
+        }
+      });
+    }
+  }
+
+  private playSound() {
+    this.audioService.playDragStepSound();
+  }
+
+  @HostListener('input')
+  onInput() {
+    if (!this.formControl) {
+      this.playSound();
+    }
+  }
+}

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

@@ -27,4 +27,15 @@ export class AudioService {
     audio.currentTime = 0;
     audio.play().catch((error) => console.error('Error playing win sound:', error));
   }
+
+  getDragSound(): HTMLAudioElement {
+    return this.getAudio('drag.mp3');
+  }
+
+  playDragStepSound(): void {
+    const audio = this.getAudio('drag.mp3');
+    audio.currentTime = 0;
+    audio.volume = 0.5;
+    audio.play().catch((error) => console.error('Error playing drag step sound:', error));
+  }
 }