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..b6d9318
--- /dev/null
+++ b/frontend/src/app/feature/game/slots/slots.component.html
@@ -0,0 +1,50 @@
+
+
+
+
Payouts
+ @if (slotInfo(); as info) {
+
+
+ @for (item of info | keyvalue; track item.key) {
+
+ | {{ item.key }} |
+ {{ item.value }} |
+
+ }
+
+
+ }
+
+
+
+ @for (row of slotResult().resultMatrix; track $index) {
+ @for (cell of row; track $index) {
+
{{ cell }}
+ }
+ }
+
+
+
+
+ Game result: {{ slotResult().status | uppercase }}
+
+
+ Amount: {{ slotResult().amount }}
+
+
+
+
+
+
+
+
+
+
+
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..19ffb57
--- /dev/null
+++ b/frontend/src/app/feature/game/slots/slots.component.ts
@@ -0,0 +1,49 @@
+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
| null>(null);
+ slotResult = signal({
+ status: 'start',
+ amount: 0,
+ resultMatrix: [
+ ['BAR', 'BAR', 'BAR'],
+ ['SEVEN', 'SEVEN', 'SEVEN'],
+ ['BELL', 'BELL', 'BELL'],
+ ],
+ });
+ betAmount = signal(1);
+
+ ngOnInit(): void {
+ this.httpClient.get>('/backend/slots/info').subscribe((data) => {
+ this.slotInfo.set(data);
+ });
+ }
+
+ spin(): void {
+ const payload = {
+ betAmount: this.betAmount(),
+ };
+
+ this.httpClient.post('/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..338ef4e 100644
--- a/frontend/src/app/feature/transaction-history/transaction-history.component.ts
+++ b/frontend/src/app/feature/transaction-history/transaction-history.component.ts
@@ -8,8 +8,7 @@ import {
} 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 { AsyncPipe, CurrencyPipe, DatePipe, NgIf } from '@angular/common';
import { TransactionData } from '../../model/TransactionData';
const PER_PAGE = 5;
@@ -17,7 +16,7 @@ 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..5405b07 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.ts
+++ b/frontend/src/app/shared/components/navbar/navbar.component.ts
@@ -8,7 +8,6 @@ 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';
@@ -17,7 +16,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 {