diff --git a/frontend/src/app/feature/game/blackjack/blackjack.component.ts b/frontend/src/app/feature/game/blackjack/blackjack.component.ts index e5dc78f..d6bfec4 100644 --- a/frontend/src/app/feature/game/blackjack/blackjack.component.ts +++ b/frontend/src/app/feature/game/blackjack/blackjack.component.ts @@ -82,8 +82,7 @@ export default class BlackjackComponent { if (isGameOver) { console.log('Game is over, state:', game.state); - this.refreshUserBalance(); - + this.userService.refreshCurrentUser(); this.showGameResult.set(true); console.log('Game result dialog should be shown now'); } @@ -96,7 +95,7 @@ export default class BlackjackComponent { this.blackjackService.startGame(bet).subscribe({ next: (game) => { this.updateGameState(game); - this.refreshUserBalance(); + this.userService.refreshCurrentUser(); this.isActionInProgress.set(false); }, error: (error) => { @@ -115,6 +114,9 @@ export default class BlackjackComponent { this.blackjackService.hit(this.currentGameId()!).subscribe({ next: (game) => { this.updateGameState(game); + if (game.state !== 'IN_PROGRESS') { + this.userService.refreshCurrentUser(); + } this.isActionInProgress.set(false); }, error: (error) => { @@ -139,6 +141,7 @@ export default class BlackjackComponent { this.blackjackService.stand(this.currentGameId()!).subscribe({ next: (game) => { this.updateGameState(game); + this.userService.refreshCurrentUser(); this.isActionInProgress.set(false); }, error: (error) => { @@ -163,6 +166,7 @@ export default class BlackjackComponent { this.blackjackService.doubleDown(this.currentGameId()!).subscribe({ next: (game) => { this.updateGameState(game); + this.userService.refreshCurrentUser(); this.isActionInProgress.set(false); }, error: (error) => { diff --git a/frontend/src/app/feature/game/blackjack/components/game-info/game-info.component.ts b/frontend/src/app/feature/game/blackjack/components/game-info/game-info.component.ts index 6219b98..fea5453 100644 --- a/frontend/src/app/feature/game/blackjack/components/game-info/game-info.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/game-info/game-info.component.ts @@ -18,10 +18,6 @@ import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angula

Spiel Informationen

-
- Guthaben: - {{ balance | currency: 'EUR' }} -
Aktuelle Wette: 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 0044e0d..a03ff4e 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 @@ -86,7 +86,7 @@ export class GameResultComponent { visible = false; get isWin(): boolean { - return this.gameState === GameState.PLAYER_WON; + return this.gameState === GameState.PLAYER_WON || this.gameState === GameState.PLAYER_BLACKJACK; } get isLoss(): boolean { @@ -98,6 +98,7 @@ export class GameResultComponent { } getResultTitle(): string { + if (this.gameState === GameState.PLAYER_BLACKJACK) return 'Blackjack!'; if (this.isWin) return 'Gewonnen!'; if (this.isLoss) return 'Verloren!'; if (this.isDraw) return 'Unentschieden!'; @@ -105,6 +106,7 @@ export class GameResultComponent { } getResultMessage(): string { + if (this.gameState === GameState.PLAYER_BLACKJACK) return 'Glückwunsch! Du hast mit einem Blackjack gewonnen!'; if (this.isWin) return 'Glückwunsch! Du hast diese Runde gewonnen.'; if (this.isLoss) return 'Schade! Du hast diese Runde verloren.'; if (this.isDraw) return 'Diese Runde endet unentschieden. Dein Einsatz wurde zurückgegeben.'; @@ -112,6 +114,7 @@ export class GameResultComponent { } getResultClass(): string { + if (this.gameState === GameState.PLAYER_BLACKJACK) return 'text-emerald font-bold'; if (this.isWin) return 'text-emerald'; if (this.isLoss) return 'text-accent-red'; if (this.isDraw) return 'text-yellow-400'; diff --git a/frontend/src/app/feature/game/blackjack/enum/gameState.ts b/frontend/src/app/feature/game/blackjack/enum/gameState.ts index 69e3ddf..977e16d 100644 --- a/frontend/src/app/feature/game/blackjack/enum/gameState.ts +++ b/frontend/src/app/feature/game/blackjack/enum/gameState.ts @@ -3,4 +3,5 @@ export enum GameState { IN_PROGRESS = 'IN_PROGRESS', PLAYER_LOST = 'PLAYER_LOST', DRAW = 'DRAW', + PLAYER_BLACKJACK = 'PLAYER_BLACKJACK', } diff --git a/frontend/src/app/service/user.service.ts b/frontend/src/app/service/user.service.ts index 20573ff..c42ebce 100644 --- a/frontend/src/app/service/user.service.ts +++ b/frontend/src/app/service/user.service.ts @@ -1,7 +1,7 @@ import { inject, Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { KeycloakProfile } from 'keycloak-js'; -import { catchError, EMPTY, Observable } from 'rxjs'; +import { BehaviorSubject, catchError, EMPTY, Observable, tap } from 'rxjs'; import { User } from '../model/User'; @Injectable({ @@ -9,20 +9,39 @@ import { User } from '../model/User'; }) export class UserService { private http: HttpClient = inject(HttpClient); + private currentUserSubject = new BehaviorSubject(null); + public currentUser$ = this.currentUserSubject.asObservable(); + + constructor() { + // Initialize with current user data + this.getCurrentUser().subscribe(); + } public getUser(id: string): Observable { - return this.http.get(`/backend/user/${id}`).pipe(catchError(() => EMPTY)); + return this.http.get(`/backend/user/${id}`).pipe( + catchError(() => EMPTY), + tap(user => this.currentUserSubject.next(user)) + ); } public getCurrentUser(): Observable { - return this.http.get('/backend/user').pipe(catchError(() => EMPTY)); + return this.http.get('/backend/user').pipe( + catchError(() => EMPTY), + tap(user => this.currentUserSubject.next(user)) + ); + } + + public refreshCurrentUser(): void { + this.getCurrentUser().subscribe(); } public createUser(id: string, username: string): Observable { return this.http.post('/backend/user', { keycloakId: id, username: username, - }); + }).pipe( + tap(user => this.currentUserSubject.next(user)) + ); } public async getOrCreateUser(userProfile: KeycloakProfile) { diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html index ee95fa2..040e7cf 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.html +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -18,7 +18,7 @@
- Guthaben: {{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }} + {{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}
} diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts index adf7b78..3211a4e 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.ts +++ b/frontend/src/app/shared/components/navbar/navbar.component.ts @@ -1,9 +1,10 @@ -import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject, OnInit, OnDestroy, signal } from '@angular/core'; import { RouterModule } from '@angular/router'; import { KeycloakService } from 'keycloak-angular'; - import { CurrencyPipe } from '@angular/common'; import { UserService } from '@service/user.service'; +import { Subscription } from 'rxjs'; + @Component({ selector: 'app-navbar', templateUrl: './navbar.component.html', @@ -11,22 +12,27 @@ import { UserService } from '@service/user.service'; imports: [RouterModule, CurrencyPipe], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class NavbarComponent implements OnInit { +export class NavbarComponent implements OnInit, OnDestroy { isMenuOpen = false; private keycloakService: KeycloakService = inject(KeycloakService); isLoggedIn = this.keycloakService.isLoggedIn(); private userService = inject(UserService); - private user = this.userService.getCurrentUser(); - + private userSubscription: Subscription | undefined; public balance = signal(0); ngOnInit() { - this.user.subscribe((user) => { + this.userSubscription = this.userService.currentUser$.subscribe((user) => { this.balance.set(user?.balance ?? 0); }); } + ngOnDestroy() { + if (this.userSubscription) { + this.userSubscription.unsubscribe(); + } + } + login() { try { const baseUrl = window.location.origin;