frontend/src/app/app.routes.ts

@@ -21,9 +21,4 @@ export const routes: Routes = [
     loadComponent: () => import('./feature/game/blackjack/blackjack.component'),
     canActivate: [authGuard],
   },
-  {
-    path: 'game/slots',
-    loadComponent: () => import('./feature/game/slots/slots.component'),
-    canActivate: [authGuard],
-  },
 ];

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

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
+import { PlayingCardComponent } from './components/playing-card/playing-card.component';
 import { DealerHandComponent } from './components/dealer-hand/dealer-hand.component';
 import { PlayerHandComponent } from './components/player-hand/player-hand.component';
 import { GameControlsComponent } from './components/game-controls/game-controls.component';
@@ -21,6 +22,7 @@ import { DebtDialogComponent } from '@shared/components/debt-dialog/debt-dialog.
   imports: [
     CommonModule,
     NavbarComponent,
+    PlayingCardComponent,
     DealerHandComponent,
     PlayerHandComponent,
     GameControlsComponent,

frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts

@@ -8,13 +8,13 @@ import {
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, CurrencyPipe } from '@angular/common';
 import { CountUp } from 'countup.js';
 
 @Component({
   selector: 'app-animated-number',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, CurrencyPipe],
   template: ` <span #numberElement>{{ formattedValue }}</span> `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, CurrencyPipe } from '@angular/common';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { GameState } from '../../enum/gameState';
 import { AnimatedNumberComponent } from '../animated-number/animated-number.component';
@@ -7,7 +7,7 @@ import { AnimatedNumberComponent } from '../animated-number/animated-number.comp
 @Component({
   selector: 'app-game-result',
   standalone: true,
-  imports: [CommonModule, AnimatedNumberComponent],
+  imports: [CommonModule, CurrencyPipe, AnimatedNumberComponent],
   template: `
     <div *ngIf="visible" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed;">
       <div class="modal-card" [@cardAnimation]>

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

@@ -1,50 +0,0 @@
-<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>
-    <div class="grid grid-cols-3 gap-1">
-      @for (row of slotResult().resultMatrix; track $index) {
-        @for (cell of row; track $index) {
-          <div class="text-center">{{ cell }}</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>
-      <input
-        id="betAmount"
-        type="number"
-        [ngModel]="betAmount()"
-        (ngModelChange)="betAmount.set($event)"
-        step="0.01"
-        min="0.01"
-      />
-    </div>
-
-    <button (click)="spin()">SPIN</button>
-  </div>
-</div>

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

@@ -1,49 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
-import { NavbarComponent } from '@shared/components/navbar/navbar.component';
-import { HttpClient } from '@angular/common/http';
-import { KeyValuePipe, NgClass, UpperCasePipe } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-interface SlotResult {
-  status: 'win' | 'lose' | 'blank' | 'start';
-  amount: number;
-  resultMatrix: string[][];
-}
-
-@Component({
-  selector: 'app-slots',
-  standalone: true,
-  imports: [NavbarComponent, KeyValuePipe, UpperCasePipe, NgClass, FormsModule],
-  templateUrl: './slots.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export default class SlotsComponent implements OnInit {
-  private httpClient: HttpClient = inject(HttpClient);
-  slotInfo = signal<Record<string, number> | null>(null);
-  slotResult = signal<SlotResult>({
-    status: 'start',
-    amount: 0,
-    resultMatrix: [
-      ['BAR', 'BAR', 'BAR'],
-      ['SEVEN', 'SEVEN', 'SEVEN'],
-      ['BELL', 'BELL', 'BELL'],
-    ],
-  });
-  betAmount = signal<number>(1);
-
-  ngOnInit(): void {
-    this.httpClient.get<Record<string, number>>('/backend/slots/info').subscribe((data) => {
-      this.slotInfo.set(data);
-    });
-  }
-
-  spin(): void {
-    const payload = {
-      betAmount: this.betAmount(),
-    };
-
-    this.httpClient.post<SlotResult>('/backend/slots/spin', payload).subscribe((result) => {
-      this.slotResult.set(result);
-    });
-  }
-}

frontend/src/app/feature/transaction-history/transaction-history.component.ts

@@ -8,7 +8,8 @@ import {
 } from '@angular/core';
 import { TransactionService } from '@service/transaction.service';
 import { Observable } from 'rxjs';
-import { AsyncPipe, CurrencyPipe, DatePipe, NgIf } from '@angular/common';
+import { AsyncPipe, CurrencyPipe, DatePipe, NgForOf, NgIf } from '@angular/common';
+import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
 import { TransactionData } from '../../model/TransactionData';
 
 const PER_PAGE = 5;
@@ -16,7 +17,7 @@ const PER_PAGE = 5;
 @Component({
   standalone: true,
   selector: 'app-transaction-history',
-  imports: [AsyncPipe, CurrencyPipe, DatePipe, NgIf],
+  imports: [NgForOf, AsyncPipe, CurrencyPipe, DatePipe, AnimatedNumberComponent, NgIf],
   templateUrl: './transaction-history.component.html',
   styleUrl: './transaction-history.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,

frontend/src/app/shared/components/navbar/navbar.component.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { AuthService } from '../../../service/auth.service';
+import { CurrencyPipe } from '@angular/common';
 import { UserService } from '@service/user.service';
 import { Subscription } from 'rxjs';
 import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
@@ -16,7 +17,7 @@ import { AnimatedNumberComponent } from '@blackjack/components/animated-number/a
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   standalone: true,
-  imports: [RouterModule, AnimatedNumberComponent],
+  imports: [RouterModule, CurrencyPipe, AnimatedNumberComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavbarComponent implements OnInit, OnDestroy {