feat(lootboxes): add balance check for opening lootboxes

frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.html

@@ -44,9 +44,15 @@
         <div class="mt-4">
           <button
             (click)="openLootbox(lootbox.id)"
-            class="button-primary w-full py-2 rounded font-semibold"
+            [disabled]="!hasEnoughBalance(lootbox.price)"
+            [ngClass]="{
+              'button-primary': hasEnoughBalance(lootbox.price),
+              'bg-gray-500 cursor-not-allowed': !hasEnoughBalance(lootbox.price)
+            }"
+            class="w-full py-2 rounded font-semibold"
           >
-            Öffnen
+            <span *ngIf="hasEnoughBalance(lootbox.price)">Öffnen</span>
+            <span *ngIf="!hasEnoughBalance(lootbox.price)">Nicht genug Guthaben</span>
           </button>
         </div>
       </div>

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;
+  }
 }