Merge pull request 'feat(slots): add slot machine component with styling and logic' (!170) from task/CAS-44/lootbox-selection into main

Reviewed-on: #170
Reviewed-by: Constantin Simonis <constantin@simonis.lol>

backend/src/main/java/de/szut/casino/slots/SlotService.java

@@ -54,12 +54,13 @@ public class SlotService {
         SpinResult spinResult = new SpinResult();
         spinResult.setStatus(status.name().toLowerCase());
 
+        this.balanceService.subtractFunds(user, betAmount);
+
         if (status == Status.WIN) {
             BigDecimal winAmount = betAmount.multiply(winSymbol.getPayoutMultiplier());
             this.balanceService.addFunds(user, winAmount);
             spinResult.setAmount(winAmount);
         } else {
-            this.balanceService.subtractFunds(user, betAmount);
             spinResult.setAmount(betAmount);
         }
 

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

@@ -14,6 +14,7 @@ import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 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';
 
 @Component({
   selector: 'app-blackjack',
@@ -34,6 +35,7 @@ import { DebtDialogComponent } from '@shared/components/debt-dialog/debt-dialog.
 export default class BlackjackComponent implements OnInit {
   private router = inject(Router);
   private userService = inject(UserService);
+  private authService = inject(AuthService);
   private blackjackService = inject(BlackjackService);
 
   dealerCards = signal<Card[]>([]);
@@ -51,7 +53,8 @@ export default class BlackjackComponent implements OnInit {
   debtAmount = signal(0);
 
   ngOnInit(): void {
-    this.userService.getCurrentUser().subscribe((user) => {
+    // Subscribe to user updates for real-time balance changes
+    this.authService.userSubject.subscribe((user) => {
       if (user) {
         this.balance.set(user.balance);
       }
@@ -84,10 +87,15 @@ export default class BlackjackComponent implements OnInit {
     if (isGameOver) {
       console.log('Game is over, state:', game.state);
       this.userService.refreshCurrentUser();
-      timer(1500).subscribe(() => {
+
+      // Get the latest balance before showing the result dialog
+      timer(1000).subscribe(() => {
+        // Show the result dialog after refreshing user data
+        timer(500).subscribe(() => {
           this.showGameResult.set(true);
           console.log('Game result dialog shown after delay');
         });
+      });
     }
   }
 
@@ -165,12 +173,16 @@ export default class BlackjackComponent implements OnInit {
     this.blackjackService.doubleDown(this.currentGameId()!).subscribe({
       next: (game) => {
         this.updateGameState(game);
-        this.userService.getCurrentUser().subscribe((user) => {
+
+        // Wait a bit to ensure the backend has finished processing
+        timer(1000).subscribe(() => {
+          const user = this.authService.currentUserValue;
           if (user && user.balance < 0) {
             this.debtAmount.set(Math.abs(user.balance));
             this.showDebtDialog.set(true);
           }
         });
+
         this.isActionInProgress.set(false);
       },
       error: (error) => {
@@ -184,7 +196,6 @@ export default class BlackjackComponent implements OnInit {
   onCloseGameResult(): void {
     console.log('Closing game result dialog');
     this.showGameResult.set(false);
-    this.userService.refreshCurrentUser();
   }
 
   onCloseDebtDialog(): void {

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

@@ -0,0 +1,16 @@
+/* Symbol colors */
+.symbol-BAR {
+  color: var(--color-accent-yellow);
+}
+.symbol-SEVEN {
+  color: var(--color-accent-red);
+}
+.symbol-BELL {
+  color: var(--color-accent-purple);
+}
+.symbol-CHERRY {
+  color: #ec4899;
+}
+.symbol-LEMON {
+  color: #a3e635;
+}

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

@@ -1,40 +1,66 @@
 <app-navbar></app-navbar>
 
-<div>
-  <h2>Payouts</h2>
-  @if (slotInfo(); as info) {
-    <table>
-      <tbody>
-        @for (item of info | keyvalue; track item.key) {
-          <tr>
-            <td>{{ item.key }}</td>
-            <td>{{ item.value }}</td>
-          </tr>
-        }
-      </tbody>
-    </table>
-  }
+<div class="container mx-auto px-4 py-6 space-y-8">
+  <h1 class="text-3xl font-bold text-white mb-6">Spielautomaten</h1>
 
-  <div>
-    <div class="grid grid-cols-3 gap-1">
+  <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+    <!-- Slot Machine Display -->
+    <div class="lg:col-span-3 space-y-6 flex flex-col">
+      <div class="card">
+        <!-- Slot Machine Top -->
+        <div class="p-6">
+          <div class="flex items-center justify-between">
+            <h2 class="text-xl font-bold text-white">Slot Machine</h2>
+            <div
+              [ngClass]="{
+                'bg-emerald': slotResult().status === 'win',
+                'bg-accent-red': slotResult().status === 'lose',
+                'bg-deep-blue-light': slotResult().status === 'start',
+              }"
+              class="px-3 py-1 rounded-full text-sm font-semibold"
+            >
+              <span class="text-white">
+                {{
+                  slotResult().status === 'win'
+                    ? 'Gewonnen!'
+                    : slotResult().status === 'lose'
+                      ? 'Verloren'
+                      : 'Bereit'
+                }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Slot Display -->
+        <div class="p-6">
+          <div class="bg-deep-blue-light rounded-lg p-4 shadow-inner mb-6">
+            <div class="grid grid-cols-3 gap-3">
               @for (row of slotResult().resultMatrix; track $index) {
                 @for (cell of row; track $index) {
-          <div class="text-center">{{ cell }}</div>
+                  <div
+                    class="bg-deep-blue-contrast rounded-lg shadow-md p-2 flex items-center justify-center"
+                  >
+                    <span class="text-2xl font-bold" [ngClass]="getSymbolClass(cell)">{{
+                      cell
+                    }}</span>
+                  </div>
                 }
               }
             </div>
-
-    <div>
-      <p>
-        Game result: <strong>{{ slotResult().status | uppercase }}</strong>
-      </p>
-      <p>
-        Amount: <strong>{{ slotResult().amount }}</strong>
-      </p>
           </div>
 
-    <div>
-      <label for="betAmount">Bet Amount: </label>
+          <!-- Game Result -->
+          <div class="text-center mb-6" *ngIf="slotResult().status === 'win'">
+            <div class="text-emerald text-xl font-bold">
+              +{{ slotResult().amount | currency: 'EUR' }}
+            </div>
+          </div>
+
+          <!-- Controls -->
+          <div class="flex flex-col sm:flex-row gap-4 items-center justify-center">
+            <div class="flex items-center bg-deep-blue-light rounded-lg p-2 flex-1">
+              <label for="betAmount" class="text-text-secondary mr-3">Einsatz:</label>
               <input
                 id="betAmount"
                 type="number"
@@ -42,9 +68,110 @@
                 (ngModelChange)="betAmount.set($event)"
                 step="0.01"
                 min="0.01"
+                class="w-full bg-deep-blue-light text-white focus:outline-none focus:ring-1 focus:ring-emerald"
               />
             </div>
 
-    <button (click)="spin()">SPIN</button>
+            <button
+              (click)="spin()"
+              class="button-primary px-4 py-1.5 font-bold"
+              [ngClass]="{
+                'bg-gray-500 cursor-not-allowed': !hasEnoughBalance(),
+              }"
+              [disabled]="isSpinning || !hasEnoughBalance()"
+            >
+              @if (!isSpinning) {
+                <span>{{ hasEnoughBalance() ? 'SPIN' : 'Nicht genug Guthaben' }}</span>
+              } @else {
+                <div
+                  class="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin"
+                ></div>
+              }
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Game Info Panel -->
+    <div class="lg:col-span-1">
+      <div class="card p-4">
+        <h3 class="section-heading text-xl mb-4">Spiel Informationen</h3>
+        <div class="space-y-4">
+          <div class="flex justify-between items-center">
+            <span class="text-text-secondary">Kontostand:</span>
+            <span class="text-emerald">
+              <app-animated-number [value]="balance()" [duration]="0.5"></app-animated-number>
+            </span>
+          </div>
+          <div class="flex justify-between items-center">
+            <span class="text-text-secondary">Einsatz:</span>
+            <span [class]="betAmount() > 0 ? 'text-accent-red' : 'text-text-secondary'">
+              <app-animated-number [value]="betAmount()" [duration]="0.5"></app-animated-number>
+            </span>
+          </div>
+
+          <div class="grid grid-cols-2 gap-2 mb-4">
+            <button
+              (click)="setBetAmount(0.1)"
+              class="button-primary py-2 text-sm"
+              [disabled]="isSpinning"
+            >
+              10%
+            </button>
+            <button
+              (click)="setBetAmount(0.25)"
+              class="button-primary py-2 text-sm"
+              [disabled]="isSpinning"
+            >
+              25%
+            </button>
+            <button
+              (click)="setBetAmount(0.5)"
+              class="button-primary py-2 text-sm"
+              [disabled]="isSpinning"
+            >
+              50%
+            </button>
+            <button
+              (click)="setBetAmount(1)"
+              class="button-primary py-2 text-sm"
+              [disabled]="isSpinning"
+            >
+              100%
+            </button>
+          </div>
+
+          <h3 class="text-lg font-semibold text-white mb-2">Auszahlungen:</h3>
+
+          @if (slotInfo(); as info) {
+            <ul class="space-y-1">
+              @for (item of info | keyvalue; track item.key) {
+                <li class="flex justify-between items-center py-1 border-b border-deep-blue-light">
+                  <div class="bg-deep-blue-contrast px-2 py-1 rounded text-center w-12">
+                    <span [ngClass]="getSymbolClass(item.key)">{{ item.key }}</span>
+                  </div>
+                  <span class="text-emerald">{{ item.value }}x</span>
+                </li>
+              }
+            </ul>
+          } @else {
+            <div class="flex justify-center py-4">
+              <div
+                class="w-4 h-4 border-2 border-deep-blue-contrast border-t-emerald rounded-full animate-spin"
+              ></div>
+            </div>
+          }
+
+          <div class="mt-4 pt-2">
+            <h4 class="text-sm font-semibold text-white mb-2">Spielregeln:</h4>
+            <ul class="text-text-secondary text-xs space-y-1">
+              <li>• Gewinne mit 3 gleichen Symbolen</li>
+              <li>• Höhere Symbole = höhere Gewinne</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>

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

@@ -1,8 +1,19 @@
-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';
+import { AuthService } from '@service/auth.service';
 
 interface SlotResult {
   status: 'win' | 'lose' | 'blank' | 'start';
@@ -13,12 +24,25 @@ 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 authService = inject(AuthService);
+  private userSubscription: Subscription | undefined;
+
   slotInfo = signal<Record<string, number> | null>(null);
   slotResult = signal<SlotResult>({
     status: 'start',
@@ -29,21 +53,80 @@ 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.authService.userSubject.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.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.userService.refreshCurrentUser();
+
+          this.isSpinning = false;
+        }, 1500);
+      },
+      error: (err) => {
+        console.error('Error spinning slot machine:', err);
+        this.userService.updateLocalBalance(betAmount);
+        this.userService.refreshCurrentUser();
+        this.isSpinning = false;
+      },
     });
   }
 }

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

@@ -6,6 +6,7 @@ import { LootBox, Reward } from 'app/model/LootBox';
 import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 import { UserService } from '@service/user.service';
 import { User } from 'app/model/User';
+import { AuthService } from '@service/auth.service';
 
 @Component({
   selector: 'app-lootbox-opening',
@@ -30,10 +31,11 @@ export default class LootboxOpeningComponent {
     private router: Router,
     private lootboxService: LootboxService,
     private userService: UserService,
+    private authService: AuthService,
     private cdr: ChangeDetectorRef
   ) {
     this.loadLootbox();
-    this.userService.currentUser$.subscribe((user) => {
+    this.authService.userSubject.subscribe((user) => {
       this.currentUser = user;
       this.cdr.detectChanges();
     });

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

@@ -5,8 +5,9 @@ import { LootboxService } from '../services/lootbox.service';
 import { LootBox } from 'app/model/LootBox';
 import { Router } from '@angular/router';
 import { timeout } from 'rxjs';
-import { UserService } from '@service/user.service';
 import { User } from 'app/model/User';
+import { AuthService } from '@service/auth.service';
+import { UserService } from '@service/user.service';
 
 @Component({
   selector: 'app-lootbox-selection',
@@ -90,12 +91,13 @@ export default class LootboxSelectionComponent implements OnInit {
     private lootboxService: LootboxService,
     private router: Router,
     private cdr: ChangeDetectorRef,
+    private authService: AuthService,
     private userService: UserService
   ) {}
 
   ngOnInit(): void {
     this.loadLootboxes();
-    this.userService.currentUser$.subscribe((user) => {
+    this.authService.userSubject.subscribe((user) => {
       this.currentUser = user;
       this.cdr.detectChanges();
     });

frontend/src/app/service/user.service.ts

@@ -1,38 +1,33 @@
 import { inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject, catchError, EMPTY, Observable, tap } from 'rxjs';
-import { User } from '../model/User';
 import { AuthService } from '@service/auth.service';
+import { User } from '../model/User';
 
 @Injectable({
   providedIn: 'root',
 })
 export class UserService {
-  public currentUserSubject = new BehaviorSubject<User | null>(null);
-  public currentUser$ = this.currentUserSubject.asObservable();
-  private http: HttpClient = inject(HttpClient);
   private authService = inject(AuthService);
 
-  public getCurrentUser(): Observable<User | null> {
-    return this.http.get<User | null>('/backend/users/me').pipe(
-      catchError(() => EMPTY),
-      tap((user) => this.currentUserSubject.next(user))
-    );
-  }
-
-  public refreshCurrentUser(): void {
-    this.getCurrentUser().subscribe();
-    this.authService.loadCurrentUser();
-  }
-
+  /**
+   * Updates the user's balance locally for immediate UI feedback
+   * This should be called before a server-side balance change is made
+   * The server update will be reflected when AuthService.loadCurrentUser() is called
+   */
   public updateLocalBalance(amount: number): void {
-    const currentUser = this.currentUserSubject.getValue();
+    const currentUser = this.authService.currentUserValue;
     if (currentUser) {
-      const updatedUser = {
+      const updatedUser: User = {
         ...currentUser,
         balance: currentUser.balance + amount,
       };
-      this.currentUserSubject.next(updatedUser);
+      this.authService.userSubject.next(updatedUser);
     }
   }
+
+  /**
+   * Refreshes the current user's data from the server
+   */
+  public refreshCurrentUser(): void {
+    this.authService.loadCurrentUser();
+  }
 }