diff --git a/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.css b/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.css index 1272a49..4e5f67f 100644 --- a/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.css +++ b/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 */ } 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 0da3ed8..8867cb1 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 @@ -85,12 +85,19 @@ class="flex justify-center gap-4 mt-8 animation-fade" [class.visible]="animationCompleted" > - diff --git a/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.ts b/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.ts index cd3ed1f..3b4d0e8 100644 --- a/frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.ts +++ b/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(); @@ -58,6 +60,10 @@ export default class LootboxOpeningComponent { if (!this.lootbox || this.isOpening) return; this.resetState(true); + + if (this.lootbox.price) { + this.userService.updateLocalBalance(-this.lootbox.price); + } setTimeout(() => { this.lootboxService.purchaseLootBox(this.lootbox!.id).subscribe({ @@ -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); } diff --git a/frontend/src/app/service/user.service.ts b/frontend/src/app/service/user.service.ts index 5f668c2..9031845 100644 --- a/frontend/src/app/service/user.service.ts +++ b/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 { return this.http .post('/backend/user', { diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts index 5405b07..c7ea92f 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.ts +++ b/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() {