feat: add user balance updates during lootbox opening

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

@@ -312,9 +312,11 @@ body {
     opacity 0.5s ease-out,
     transform 0.5s ease-out;
   transition-delay: 0.5s;
+  pointer-events: none; /* Prevent clicks when invisible */
 }
 
 .animation-fade.visible {
   opacity: 1;
   transform: translateY(0);
+  pointer-events: auto; /* Enable clicks when visible */
 }

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

@@ -85,12 +85,19 @@
               class="flex justify-center gap-4 mt-8 animation-fade"
               [class.visible]="animationCompleted"
             >
-              <button (click)="openAgain()" class="button-primary px-6 py-2 font-semibold rounded">
+              <button 
+                (click)="openAgain()" 
+                class="button-primary px-6 py-2 font-semibold rounded" 
+                [disabled]="!animationCompleted"
+                [attr.aria-hidden]="!animationCompleted"
+              >
                 Nochmal Öffnen
               </button>
               <button
                 (click)="goBack()"
                 class="bg-deep-blue hover:bg-deep-blue-contrast text-white px-6 py-2 rounded font-semibold transition"
+                [disabled]="!animationCompleted"
+                [attr.aria-hidden]="!animationCompleted"
               >
                 Zurück zur Übersicht
               </button>

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

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 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';
 
 @Component({
   selector: 'app-lootbox-opening',
@@ -26,6 +27,7 @@ export default class LootboxOpeningComponent {
     private route: ActivatedRoute,
     private router: Router,
     private lootboxService: LootboxService,
+    private userService: UserService,
     private cdr: ChangeDetectorRef
   ) {
     this.loadLootbox();
@@ -59,6 +61,10 @@ export default class LootboxOpeningComponent {
 
     this.resetState(true);
     
+    if (this.lootbox.price) {
+      this.userService.updateLocalBalance(-this.lootbox.price);
+    }
+
     setTimeout(() => {
       this.lootboxService.purchaseLootBox(this.lootbox!.id).subscribe({
         next: this.handleRewardSuccess.bind(this),
@@ -72,6 +78,7 @@ export default class LootboxOpeningComponent {
     this.generateCasePrizes(reward);
     this.isOpening = false;
     this.isOpen = true;
+    
     this.cdr.detectChanges();
   }
 
@@ -80,7 +87,12 @@ export default class LootboxOpeningComponent {
 
     const rewards = this.lootbox.rewards;
     const fallback = rewards[Math.floor(Math.random() * rewards.length)];
-    this.handleRewardSuccess(fallback);
+    
+    this.wonReward = fallback;
+    this.generateCasePrizes(fallback);
+    this.isOpening = false;
+    this.isOpen = true;
+    this.cdr.detectChanges();
   }
 
   private resetState(isOpening = false): void {
@@ -112,6 +124,12 @@ export default class LootboxOpeningComponent {
 
     setTimeout(() => {
       this.animationCompleted = true;
+      
+      if (this.wonReward) {
+        this.userService.updateLocalBalance(this.wonReward.value);
+      }
+      
+      this.userService.refreshCurrentUser();
       this.cdr.detectChanges();
     }, 10000);
   }

frontend/src/app/service/user.service.ts

@@ -33,6 +33,17 @@ export class UserService {
     this.getCurrentUser().subscribe();
   }
 
+  public updateLocalBalance(amount: number): void {
+    const currentUser = this.currentUserSubject.getValue();
+    if (currentUser) {
+      const updatedUser = { 
+        ...currentUser,
+        balance: currentUser.balance + amount 
+      };
+      this.currentUserSubject.next(updatedUser);
+    }
+  }
+
   public createUser(id: string, username: string): Observable<User> {
     return this.http
       .post<User>('/backend/user', {

frontend/src/app/shared/components/navbar/navbar.component.ts

@@ -31,7 +31,10 @@ export class NavbarComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.userSubscription = this.userService.currentUser$.subscribe((user) => {
       this.balance.set(user?.balance ?? 0);
+      console.log('Updated navbar balance:', user?.balance);
     });
+    
+    this.userService.refreshCurrentUser();
   }
 
   ngOnDestroy() {