feat(slots): add slot machine component with styling and logic

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

@@ -1,8 +1,18 @@
-import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+  OnDestroy,
+  signal,
+} from '@angular/core';
 import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 import { HttpClient } from '@angular/common/http';
-import { KeyValuePipe, UpperCasePipe } from '@angular/common';
+import { CommonModule, KeyValuePipe, NgClass, CurrencyPipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { UserService } from '@service/user.service';
+import { Subscription } from 'rxjs';
+import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
 
 interface SlotResult {
   status: 'win' | 'lose' | 'blank' | 'start';
@@ -13,12 +23,24 @@ interface SlotResult {
 @Component({
   selector: 'app-slots',
   standalone: true,
-  imports: [NavbarComponent, KeyValuePipe, UpperCasePipe, FormsModule],
+  imports: [
+    CommonModule,
+    NavbarComponent,
+    KeyValuePipe,
+    NgClass,
+    FormsModule,
+    CurrencyPipe,
+    AnimatedNumberComponent,
+  ],
   templateUrl: './slots.component.html',
+  styleUrl: './slots.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export default class SlotsComponent implements OnInit {
+export default class SlotsComponent implements OnInit, OnDestroy {
   private httpClient: HttpClient = inject(HttpClient);
+  private userService = inject(UserService);
+  private userSubscription: Subscription | undefined;
+
   slotInfo = signal<Record<string, number> | null>(null);
   slotResult = signal<SlotResult>({
     status: 'start',
@@ -29,21 +51,77 @@ export default class SlotsComponent implements OnInit {
       ['BELL', 'BELL', 'BELL'],
     ],
   });
+
+  balance = signal<number>(0);
   betAmount = signal<number>(1);
+  isSpinning = false;
 
   ngOnInit(): void {
     this.httpClient.get<Record<string, number>>('/backend/slots/info').subscribe((data) => {
       this.slotInfo.set(data);
     });
+
+    this.userSubscription = this.userService.currentUser$.subscribe((user) => {
+      this.balance.set(user?.balance ?? 0);
+    });
+
+    this.userService.refreshCurrentUser();
+  }
+
+  ngOnDestroy(): void {
+    if (this.userSubscription) {
+      this.userSubscription.unsubscribe();
+    }
+  }
+
+  getSymbolClass(symbol: string): string {
+    return `symbol-${symbol}`;
+  }
+
+  hasEnoughBalance(): boolean {
+    return this.balance() >= this.betAmount();
+  }
+
+  setBetAmount(percentage: number): void {
+    const calculatedBet = Math.floor(this.balance() * percentage * 100) / 100;
+    const minimumBet = 0.01;
+
+    const newBet = Math.max(minimumBet, Math.min(calculatedBet, this.balance()));
+
+    this.betAmount.set(newBet);
   }
 
   spin(): void {
+    if (!this.hasEnoughBalance()) {
+      return;
+    }
+
+    this.isSpinning = true;
+    const betAmount = this.betAmount();
+
+    this.userService.updateLocalBalance(-betAmount);
+
     const payload = {
-      betAmount: this.betAmount(),
+      betAmount: betAmount,
     };
 
-    this.httpClient.post<SlotResult>('/backend/slots/spin', payload).subscribe((result) => {
-      this.slotResult.set(result);
+    this.httpClient.post<SlotResult>('/backend/slots/spin', payload).subscribe({
+      next: (result) => {
+        setTimeout(() => {
+          this.slotResult.set(result);
+
+          if (result.status === 'win') {
+            this.userService.updateLocalBalance(result.amount);
+          }
+
+          this.isSpinning = false;
+        }, 1500);
+      },
+      error: (err) => {
+        console.error('Error spinning slot machine:', err);
+        this.userService.updateLocalBalance(betAmount);
+        this.isSpinning = false;
+      },
     });
   }
 }