diff --git a/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.html b/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.html index 8867cb1..841a985 100644 --- a/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.html +++ b/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.html @@ -31,9 +31,15 @@
@@ -87,11 +93,16 @@ > diff --git a/frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.ts b/frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.ts index 217af16..6ee3462 100644 --- a/frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.ts +++ b/frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.ts @@ -5,6 +5,8 @@ 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'; @Component({ selector: 'app-lootbox-selection', @@ -17,6 +19,7 @@ export default class LootboxSelectionComponent implements OnInit { lootboxes: LootBox[] = []; isLoading = true; error = ''; + currentUser: User | null = null; // Fallback data in case the API call fails fallbackLootboxes: LootBox[] = [ @@ -86,11 +89,16 @@ export default class LootboxSelectionComponent implements OnInit { constructor( private lootboxService: LootboxService, private router: Router, - private cdr: ChangeDetectorRef + private cdr: ChangeDetectorRef, + private userService: UserService ) {} ngOnInit(): void { this.loadLootboxes(); + this.userService.currentUser$.subscribe(user => { + this.currentUser = user; + this.cdr.detectChanges(); + }); } loadLootboxes(): void { @@ -120,6 +128,24 @@ export default class LootboxSelectionComponent implements OnInit { } openLootbox(lootboxId: number): void { + const lootbox = this.lootboxes.find(box => box.id === lootboxId); + + if (!lootbox) { + return; + } + + if (!this.currentUser || this.currentUser.balance < lootbox.price) { + this.error = 'Nicht genug Guthaben, um diese Lootbox zu öffnen.'; + // Scroll to top to see the error message + window.scrollTo(0, 0); + this.cdr.detectChanges(); + setTimeout(() => { + this.error = ''; + this.cdr.detectChanges(); + }, 5000); + return; + } + this.router.navigate(['/game/lootboxes/open', lootboxId]); } @@ -136,4 +162,8 @@ export default class LootboxSelectionComponent implements OnInit { formatProbability(probability: number): string { return (probability * 100).toFixed(0) + '%'; } + + hasEnoughBalance(price: number): boolean { + return !!this.currentUser && this.currentUser.balance >= price; + } }