From bc56b498ee5d6d73467a12bcf6b61c0f68f60a2b Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 7 May 2025 13:56:25 +0200
Subject: [PATCH 1/7] feat: add bare slots frontend, remove bun start warnings

---
 frontend/src/app/app.routes.ts                |  5 ++
 .../game/blackjack/blackjack.component.ts     | 34 ++++++------
 .../animated-number.component.ts              |  6 +-
 .../game-result/game-result.component.ts      |  2 +-
 .../feature/game/slots/slots.component.html   | 52 ++++++++++++++++++
 .../app/feature/game/slots/slots.component.ts | 55 +++++++++++++++++++
 .../transaction-history.component.ts          | 20 ++-----
 .../components/navbar/navbar.component.ts     |  2 +-
 8 files changed, 139 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/app/feature/game/slots/slots.component.html
 create mode 100644 frontend/src/app/feature/game/slots/slots.component.ts

diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts
index c536f8f..ce4451c 100644
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -21,4 +21,9 @@ 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],
+  },
 ];
diff --git a/frontend/src/app/feature/game/blackjack/blackjack.component.ts b/frontend/src/app/feature/game/blackjack/blackjack.component.ts
index 3e58e25..64ef4ef 100644
--- a/frontend/src/app/feature/game/blackjack/blackjack.component.ts
+++ b/frontend/src/app/feature/game/blackjack/blackjack.component.ts
@@ -1,20 +1,19 @@
-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';
-import { GameInfoComponent } from './components/game-info/game-info.component';
-import { BlackjackGame, Card } from '@blackjack/models/blackjack.model';
-import { BlackjackService } from '@blackjack/services/blackjack.service';
-import { HttpErrorResponse } from '@angular/common/http';
-import { GameResultComponent } from '@blackjack/components/game-result/game-result.component';
-import { GameState } from '@blackjack/enum/gameState';
-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 {ChangeDetectionStrategy, Component, inject, OnInit, signal} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {Router} from '@angular/router';
+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';
+import {GameInfoComponent} from './components/game-info/game-info.component';
+import {BlackjackGame, Card} from '@blackjack/models/blackjack.model';
+import {BlackjackService} from '@blackjack/services/blackjack.service';
+import {HttpErrorResponse} from '@angular/common/http';
+import {GameResultComponent} from '@blackjack/components/game-result/game-result.component';
+import {GameState} from '@blackjack/enum/gameState';
+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';
 
 @Component({
   selector: 'app-blackjack',
@@ -22,7 +21,6 @@ import { DebtDialogComponent } from '@shared/components/debt-dialog/debt-dialog.
   imports: [
     CommonModule,
     NavbarComponent,
-    PlayingCardComponent,
     DealerHandComponent,
     PlayerHandComponent,
     GameControlsComponent,
diff --git a/frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts b/frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts
index 7d78871..0b8cd4c 100644
--- a/frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts
+++ b/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, CurrencyPipe } from '@angular/common';
-import { CountUp } from 'countup.js';
+import {CommonModule} from '@angular/common';
+import {CountUp} from 'countup.js';
 
 @Component({
   selector: 'app-animated-number',
   standalone: true,
-  imports: [CommonModule, CurrencyPipe],
+  imports: [CommonModule],
   template: ` <span #numberElement>{{ formattedValue }}</span> `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts
index 74d02e4..06f2d3a 100644
--- a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts
+++ b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts
@@ -7,7 +7,7 @@ import { AnimatedNumberComponent } from '../animated-number/animated-number.comp
 @Component({
   selector: 'app-game-result',
   standalone: true,
-  imports: [CommonModule, CurrencyPipe, AnimatedNumberComponent],
+  imports: [CommonModule, AnimatedNumberComponent],
   template: `
     <div *ngIf="visible" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed;">
       <div class="modal-card" [@cardAnimation]>
diff --git a/frontend/src/app/feature/game/slots/slots.component.html b/frontend/src/app/feature/game/slots/slots.component.html
new file mode 100644
index 0000000..ae15b69
--- /dev/null
+++ b/frontend/src/app/feature/game/slots/slots.component.html
@@ -0,0 +1,52 @@
+<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">
+      <div class="text-center">{{ slotResult().resultMatrix[0][0] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[0][1] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[0][2] }}</div>
+
+      <div class="text-center">{{ slotResult().resultMatrix[1][0] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[1][1] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[1][2] }}</div>
+
+      <div class="text-center">{{ slotResult().resultMatrix[2][0] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[2][1] }}</div>
+      <div class="text-center">{{ slotResult().resultMatrix[2][2] }}</div>
+    </div>
+
+    <div [ngClass]="slotResult().status === 'win' ? 'text-green-500' : 'text-red-500'">
+      <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>
diff --git a/frontend/src/app/feature/game/slots/slots.component.ts b/frontend/src/app/feature/game/slots/slots.component.ts
new file mode 100644
index 0000000..ca8e1d8
--- /dev/null
+++ b/frontend/src/app/feature/game/slots/slots.component.ts
@@ -0,0 +1,55 @@
+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';
+  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: 'lose',
+    amount: 12,
+    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);
+    });
+  }
+}
diff --git a/frontend/src/app/feature/transaction-history/transaction-history.component.ts b/frontend/src/app/feature/transaction-history/transaction-history.component.ts
index 0bef06d..b0e12f8 100644
--- a/frontend/src/app/feature/transaction-history/transaction-history.component.ts
+++ b/frontend/src/app/feature/transaction-history/transaction-history.component.ts
@@ -1,23 +1,15 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  inject,
-  Input,
-  Output,
-} from '@angular/core';
-import { TransactionService } from '@service/transaction.service';
-import { Observable } from 'rxjs';
-import { AsyncPipe, CurrencyPipe, DatePipe, NgForOf, NgIf } from '@angular/common';
-import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
-import { TransactionData } from '../../model/TransactionData';
+import {ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output,} from '@angular/core';
+import {TransactionService} from '@service/transaction.service';
+import {Observable} from 'rxjs';
+import {AsyncPipe, CurrencyPipe, DatePipe, NgIf} from '@angular/common';
+import {TransactionData} from '../../model/TransactionData';
 
 const PER_PAGE = 5;
 
 @Component({
   standalone: true,
   selector: 'app-transaction-history',
-  imports: [NgForOf, AsyncPipe, CurrencyPipe, DatePipe, AnimatedNumberComponent, NgIf],
+  imports: [AsyncPipe, CurrencyPipe, DatePipe, NgIf],
   templateUrl: './transaction-history.component.html',
   styleUrl: './transaction-history.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts
index 6cc6f56..b414092 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.ts
+++ b/frontend/src/app/shared/components/navbar/navbar.component.ts
@@ -17,7 +17,7 @@ import { AnimatedNumberComponent } from '@blackjack/components/animated-number/a
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   standalone: true,
-  imports: [RouterModule, CurrencyPipe, AnimatedNumberComponent],
+  imports: [RouterModule, AnimatedNumberComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavbarComponent implements OnInit, OnDestroy {

From efc2a8ecec77a7d1d6208d7acb8942341225e3d6 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 7 May 2025 13:58:56 +0200
Subject: [PATCH 2/7] style: run prettier

---
 .../game/blackjack/blackjack.component.ts     | 32 +++++++++----------
 .../animated-number.component.ts              |  4 +--
 .../feature/game/slots/slots.component.html   |  8 +++--
 .../app/feature/game/slots/slots.component.ts | 32 ++++++++-----------
 .../transaction-history.component.ts          | 17 +++++++---
 5 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/frontend/src/app/feature/game/blackjack/blackjack.component.ts b/frontend/src/app/feature/game/blackjack/blackjack.component.ts
index 64ef4ef..a2e760b 100644
--- a/frontend/src/app/feature/game/blackjack/blackjack.component.ts
+++ b/frontend/src/app/feature/game/blackjack/blackjack.component.ts
@@ -1,19 +1,19 @@
-import {ChangeDetectionStrategy, Component, inject, OnInit, signal} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {Router} from '@angular/router';
-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';
-import {GameInfoComponent} from './components/game-info/game-info.component';
-import {BlackjackGame, Card} from '@blackjack/models/blackjack.model';
-import {BlackjackService} from '@blackjack/services/blackjack.service';
-import {HttpErrorResponse} from '@angular/common/http';
-import {GameResultComponent} from '@blackjack/components/game-result/game-result.component';
-import {GameState} from '@blackjack/enum/gameState';
-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 { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+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';
+import { GameInfoComponent } from './components/game-info/game-info.component';
+import { BlackjackGame, Card } from '@blackjack/models/blackjack.model';
+import { BlackjackService } from '@blackjack/services/blackjack.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { GameResultComponent } from '@blackjack/components/game-result/game-result.component';
+import { GameState } from '@blackjack/enum/gameState';
+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';
 
 @Component({
   selector: 'app-blackjack',
diff --git a/frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts b/frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts
index 0b8cd4c..6e61c0e 100644
--- a/frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts
+++ b/frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts
@@ -8,8 +8,8 @@ import {
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {CountUp} from 'countup.js';
+import { CommonModule } from '@angular/common';
+import { CountUp } from 'countup.js';
 
 @Component({
   selector: 'app-animated-number',
diff --git a/frontend/src/app/feature/game/slots/slots.component.html b/frontend/src/app/feature/game/slots/slots.component.html
index ae15b69..2b6298c 100644
--- a/frontend/src/app/feature/game/slots/slots.component.html
+++ b/frontend/src/app/feature/game/slots/slots.component.html
@@ -31,8 +31,12 @@
     </div>
 
     <div [ngClass]="slotResult().status === 'win' ? 'text-green-500' : 'text-red-500'">
-      <p>Game result: <strong>{{ slotResult().status | uppercase }}</strong></p>
-      <p>Amount: <strong>{{ slotResult().amount }}</strong></p>
+      <p>
+        Game result: <strong>{{ slotResult().status | uppercase }}</strong>
+      </p>
+      <p>
+        Amount: <strong>{{ slotResult().amount }}</strong>
+      </p>
     </div>
 
     <div>
diff --git a/frontend/src/app/feature/game/slots/slots.component.ts b/frontend/src/app/feature/game/slots/slots.component.ts
index ca8e1d8..cbf2cc8 100644
--- a/frontend/src/app/feature/game/slots/slots.component.ts
+++ b/frontend/src/app/feature/game/slots/slots.component.ts
@@ -1,8 +1,8 @@
-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";
+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';
@@ -13,13 +13,7 @@ interface SlotResult {
 @Component({
   selector: 'app-slots',
   standalone: true,
-  imports: [
-    NavbarComponent,
-    KeyValuePipe,
-    UpperCasePipe,
-    NgClass,
-    FormsModule
-  ],
+  imports: [NavbarComponent, KeyValuePipe, UpperCasePipe, NgClass, FormsModule],
   templateUrl: './slots.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -30,25 +24,25 @@ export default class SlotsComponent implements OnInit {
     status: 'lose',
     amount: 12,
     resultMatrix: [
-      ["BAR", "BAR", "BAR"],
-      ["SEVEN", "SEVEN", "SEVEN"],
-      ["BELL", "BELL", "BELL"]
-    ]
+      ['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.httpClient.get<Record<string, number>>('/backend/slots/info').subscribe((data) => {
       this.slotInfo.set(data);
     });
   }
 
   spin(): void {
     const payload = {
-      betAmount: this.betAmount()
+      betAmount: this.betAmount(),
     };
 
-    this.httpClient.post<SlotResult>('/backend/slots/spin', payload).subscribe(result => {
+    this.httpClient.post<SlotResult>('/backend/slots/spin', payload).subscribe((result) => {
       this.slotResult.set(result);
     });
   }
diff --git a/frontend/src/app/feature/transaction-history/transaction-history.component.ts b/frontend/src/app/feature/transaction-history/transaction-history.component.ts
index b0e12f8..338ef4e 100644
--- a/frontend/src/app/feature/transaction-history/transaction-history.component.ts
+++ b/frontend/src/app/feature/transaction-history/transaction-history.component.ts
@@ -1,8 +1,15 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output,} from '@angular/core';
-import {TransactionService} from '@service/transaction.service';
-import {Observable} from 'rxjs';
-import {AsyncPipe, CurrencyPipe, DatePipe, NgIf} from '@angular/common';
-import {TransactionData} from '../../model/TransactionData';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from '@angular/core';
+import { TransactionService } from '@service/transaction.service';
+import { Observable } from 'rxjs';
+import { AsyncPipe, CurrencyPipe, DatePipe, NgIf } from '@angular/common';
+import { TransactionData } from '../../model/TransactionData';
 
 const PER_PAGE = 5;
 

From 3f00a5b359378e912d1ed65cb89045f9e4500cdf Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 7 May 2025 14:00:39 +0200
Subject: [PATCH 3/7] style: fix linter issues

---
 .../game-result/game-result.component.ts      |  2 +-
 .../components/navbar/navbar.component.ts     | 20 ++++++-------------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts
index 06f2d3a..1aab1a4 100644
--- a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts
+++ b/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, CurrencyPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { GameState } from '../../enum/gameState';
 import { AnimatedNumberComponent } from '../animated-number/animated-number.component';
diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts
index b414092..04bf38f 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.ts
+++ b/frontend/src/app/shared/components/navbar/navbar.component.ts
@@ -1,17 +1,9 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  OnDestroy,
-  OnInit,
-  signal,
-} 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';
+import {ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit, signal,} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {AuthService} from '../../../service/auth.service';
+import {UserService} from '@service/user.service';
+import {Subscription} from 'rxjs';
+import {AnimatedNumberComponent} from '@blackjack/components/animated-number/animated-number.component';
 
 @Component({
   selector: 'app-navbar',

From 864cb28aac039f2145e32859ae17d8486e7ec834 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 7 May 2025 14:19:44 +0200
Subject: [PATCH 4/7] style: fix prettier

---
 .../components/navbar/navbar.component.ts     | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts
index 04bf38f..5405b07 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.ts
+++ b/frontend/src/app/shared/components/navbar/navbar.component.ts
@@ -1,9 +1,16 @@
-import {ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit, signal,} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {AuthService} from '../../../service/auth.service';
-import {UserService} from '@service/user.service';
-import {Subscription} from 'rxjs';
-import {AnimatedNumberComponent} from '@blackjack/components/animated-number/animated-number.component';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnDestroy,
+  OnInit,
+  signal,
+} from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { AuthService } from '../../../service/auth.service';
+import { UserService } from '@service/user.service';
+import { Subscription } from 'rxjs';
+import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
 
 @Component({
   selector: 'app-navbar',

From fd7c3b3503f0cbbc689bec67f1aad8f4c8667986 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 7 May 2025 14:25:25 +0200
Subject: [PATCH 5/7] refactor: loop through result matrix

---
 .../app/feature/game/slots/slots.component.html  | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/feature/game/slots/slots.component.html b/frontend/src/app/feature/game/slots/slots.component.html
index 2b6298c..d2c7587 100644
--- a/frontend/src/app/feature/game/slots/slots.component.html
+++ b/frontend/src/app/feature/game/slots/slots.component.html
@@ -17,17 +17,11 @@
 
   <div>
     <div class="grid grid-cols-3 gap-1">
-      <div class="text-center">{{ slotResult().resultMatrix[0][0] }}</div>
-      <div class="text-center">{{ slotResult().resultMatrix[0][1] }}</div>
-      <div class="text-center">{{ slotResult().resultMatrix[0][2] }}</div>
-
-      <div class="text-center">{{ slotResult().resultMatrix[1][0] }}</div>
-      <div class="text-center">{{ slotResult().resultMatrix[1][1] }}</div>
-      <div class="text-center">{{ slotResult().resultMatrix[1][2] }}</div>
-
-      <div class="text-center">{{ slotResult().resultMatrix[2][0] }}</div>
-      <div class="text-center">{{ slotResult().resultMatrix[2][1] }}</div>
-      <div class="text-center">{{ slotResult().resultMatrix[2][2] }}</div>
+      @for (row of slotResult().resultMatrix; track $index) {
+        @for (cell of row; track $index) {
+          <div class="text-center">{{ cell }}</div>
+        }
+      }
     </div>
 
     <div [ngClass]="slotResult().status === 'win' ? 'text-green-500' : 'text-red-500'">

From 201b305fe0dc002b2df4f6658a390075c1aee834 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 7 May 2025 14:27:36 +0200
Subject: [PATCH 6/7] feat: add starting stuff

---
 frontend/src/app/feature/game/slots/slots.component.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/feature/game/slots/slots.component.ts b/frontend/src/app/feature/game/slots/slots.component.ts
index cbf2cc8..19ffb57 100644
--- a/frontend/src/app/feature/game/slots/slots.component.ts
+++ b/frontend/src/app/feature/game/slots/slots.component.ts
@@ -5,7 +5,7 @@ import { KeyValuePipe, NgClass, UpperCasePipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 interface SlotResult {
-  status: 'win' | 'lose';
+  status: 'win' | 'lose' | 'blank' | 'start';
   amount: number;
   resultMatrix: string[][];
 }
@@ -21,8 +21,8 @@ export default class SlotsComponent implements OnInit {
   private httpClient: HttpClient = inject(HttpClient);
   slotInfo = signal<Record<string, number> | null>(null);
   slotResult = signal<SlotResult>({
-    status: 'lose',
-    amount: 12,
+    status: 'start',
+    amount: 0,
     resultMatrix: [
       ['BAR', 'BAR', 'BAR'],
       ['SEVEN', 'SEVEN', 'SEVEN'],

From 23673ca0fca8bafc6ad5b88bddd2c40d40f1f115 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 7 May 2025 14:28:39 +0200
Subject: [PATCH 7/7] revert: remove color styling

---
 frontend/src/app/feature/game/slots/slots.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/feature/game/slots/slots.component.html b/frontend/src/app/feature/game/slots/slots.component.html
index d2c7587..b6d9318 100644
--- a/frontend/src/app/feature/game/slots/slots.component.html
+++ b/frontend/src/app/feature/game/slots/slots.component.html
@@ -24,7 +24,7 @@
       }
     </div>
 
-    <div [ngClass]="slotResult().status === 'win' ? 'text-green-500' : 'text-red-500'">
+    <div>
       <p>
         Game result: <strong>{{ slotResult().status | uppercase }}</strong>
       </p>