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

@@ -312,11 +312,9 @@ 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

@@ -31,15 +31,9 @@
           <div *ngIf="!isOpening && !isOpen" class="mb-6">
             <button
               (click)="openLootbox()"
-              [disabled]="!hasEnoughBalance()"
-              [ngClass]="{
-                'button-primary': hasEnoughBalance(),
-                'bg-gray-500 cursor-not-allowed': !hasEnoughBalance(),
-              }"
-              class="w-full py-3 text-lg font-semibold rounded"
+              class="button-primary w-full py-3 text-lg font-semibold rounded"
             >
-              <span *ngIf="hasEnoughBalance()">Öffnen</span>
-              <span *ngIf="!hasEnoughBalance()">Nicht genug Guthaben</span>
+              Öffnen
             </button>
           </div>
 
@@ -91,24 +85,12 @@
               class="flex justify-center gap-4 mt-8 animation-fade"
               [class.visible]="animationCompleted"
             >
-              <button
-                (click)="openAgain()"
-                [disabled]="!animationCompleted || !hasEnoughBalance()"
-                [ngClass]="{
-                  'button-primary': hasEnoughBalance(),
-                  'bg-gray-500 cursor-not-allowed': !hasEnoughBalance(),
-                }"
-                class="px-6 py-2 font-semibold rounded"
-                [attr.aria-hidden]="!animationCompleted"
-              >
-                <span *ngIf="hasEnoughBalance()">Nochmal Öffnen</span>
-                <span *ngIf="!hasEnoughBalance()">Nicht genug Guthaben</span>
+              <button (click)="openAgain()" class="button-primary px-6 py-2 font-semibold rounded">
+                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,8 +4,6 @@ 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';
-import { User } from 'app/model/User';
 
 @Component({
   selector: 'app-lootbox-opening',
@@ -23,20 +21,14 @@ export default class LootboxOpeningComponent {
   wonReward: Reward | null = null;
   prizeList: Reward[] = [];
   animationCompleted = false;
-  currentUser: User | null = null;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private lootboxService: LootboxService,
-    private userService: UserService,
     private cdr: ChangeDetectorRef
   ) {
     this.loadLootbox();
-    this.userService.currentUser$.subscribe((user) => {
-      this.currentUser = user;
-      this.cdr.detectChanges();
-    });
   }
 
   private loadLootbox(): void {
@@ -65,24 +57,8 @@ 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);
 
-    if (this.lootbox.price) {
-      this.userService.updateLocalBalance(-this.lootbox.price);
-    }
-
     setTimeout(() => {
       this.lootboxService.purchaseLootBox(this.lootbox!.id).subscribe({
         next: this.handleRewardSuccess.bind(this),
@@ -96,7 +72,6 @@ export default class LootboxOpeningComponent {
     this.generateCasePrizes(reward);
     this.isOpening = false;
     this.isOpen = true;
-
     this.cdr.detectChanges();
   }
 
@@ -105,12 +80,7 @@ export default class LootboxOpeningComponent {
 
     const rewards = this.lootbox.rewards;
     const fallback = rewards[Math.floor(Math.random() * rewards.length)];
-
-    this.wonReward = fallback;
-    this.generateCasePrizes(fallback);
-    this.isOpening = false;
-    this.isOpen = true;
-    this.cdr.detectChanges();
+    this.handleRewardSuccess(fallback);
   }
 
   private resetState(isOpening = false): void {
@@ -142,12 +112,6 @@ export default class LootboxOpeningComponent {
 
     setTimeout(() => {
       this.animationCompleted = true;
-
-      if (this.wonReward) {
-        this.userService.updateLocalBalance(this.wonReward.value);
-      }
-
-      this.userService.refreshCurrentUser();
       this.cdr.detectChanges();
     }, 10000);
   }
@@ -204,9 +168,4 @@ 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;
-  }
 }

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

@@ -44,15 +44,9 @@
         <div class="mt-4">
           <button
             (click)="openLootbox(lootbox.id)"
-            [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"
+            class="button-primary w-full py-2 rounded font-semibold"
           >
-            <span *ngIf="hasEnoughBalance(lootbox.price)">Öffnen</span>
-            <span *ngIf="!hasEnoughBalance(lootbox.price)">Nicht genug Guthaben</span>
+            Öffnen
           </button>
         </div>
       </div>

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

@@ -5,8 +5,6 @@ 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',
@@ -19,7 +17,6 @@ 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[] = [
@@ -89,16 +86,11 @@ export default class LootboxSelectionComponent implements OnInit {
   constructor(
     private lootboxService: LootboxService,
     private router: Router,
-    private cdr: ChangeDetectorRef,
-    private userService: UserService
+    private cdr: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
     this.loadLootboxes();
-    this.userService.currentUser$.subscribe((user) => {
-      this.currentUser = user;
-      this.cdr.detectChanges();
-    });
   }
 
   loadLootboxes(): void {
@@ -128,24 +120,6 @@ 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]);
   }
 
@@ -162,8 +136,4 @@ 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;
-  }
 }

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

@@ -33,17 +33,6 @@ 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,10 +31,7 @@ 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() {