feat(lootboxes): add balance check for opening lootboxes

frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.ts

@@ -5,6 +5,7 @@ import { LootboxService } from '../services/lootbox.service';
 import { LootBox, Reward } from 'app/model/LootBox';
 import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 import { UserService } from '@service/user.service';
+import { User } from 'app/model/User';
 
 @Component({
   selector: 'app-lootbox-opening',
@@ -22,6 +23,7 @@ export default class LootboxOpeningComponent {
   wonReward: Reward | null = null;
   prizeList: Reward[] = [];
   animationCompleted = false;
+  currentUser: User | null = null;
 
   constructor(
     private route: ActivatedRoute,
@@ -31,6 +33,10 @@ export default class LootboxOpeningComponent {
     private cdr: ChangeDetectorRef
   ) {
     this.loadLootbox();
+    this.userService.currentUser$.subscribe(user => {
+      this.currentUser = user;
+      this.cdr.detectChanges();
+    });
   }
 
   private loadLootbox(): void {
@@ -58,6 +64,18 @@ export default class LootboxOpeningComponent {
 
   openLootbox(): void {
     if (!this.lootbox || this.isOpening) return;
+    
+    // Check if user has enough balance
+    if (!this.hasEnoughBalance()) {
+      this.error = 'Nicht genug Guthaben, um diese Lootbox zu öffnen.';
+      window.scrollTo(0, 0);
+      this.cdr.detectChanges();
+      setTimeout(() => {
+        this.error = '';
+        this.cdr.detectChanges();
+      }, 5000);
+      return;
+    }
 
     this.resetState(true);
     
@@ -186,4 +204,9 @@ export default class LootboxOpeningComponent {
     if (!this.wonReward || !this.lootbox) return '';
     return this.wonReward.value > (this.lootbox.price || 0) ? 'text-emerald' : 'text-accent-red';
   }
+
+  hasEnoughBalance(): boolean {
+    if (!this.currentUser || !this.lootbox) return false;
+    return this.currentUser.balance >= this.lootbox.price;
+  }
 }