refactor: remove unused imports and clean up code
This commit is contained in:
parent
667e4313d2
commit
d29fc10cc8
GPG key ID:
300B2F906DC6F1D5
4 changed files with 312 additions and 237 deletions
|
|
@ -25,13 +25,14 @@ body {
|
|||
|
||||
/* Loader animation */
|
||||
.loader {
|
||||
border: 4px solid rgba(255, 255, 255, 0.2);
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top: 4px solid #facc15;
|
||||
border-top: 4px solid #fff;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -115,23 +116,20 @@ body {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 0px; /* Remove horizontal padding */
|
||||
padding: 5px 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
animation: slide-in 10s cubic-bezier(0.05, 0.82, 0.17, 1) forwards;
|
||||
transform: translateX(3000%); /* Extremely far initial position for 200 items */
|
||||
position: relative; /* Ensure positioning context */
|
||||
animation: slide-in 10s cubic-bezier(0.33, 0.9, 0.3, 1) forwards;
|
||||
transform: translateX(4500px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateX(2000%);
|
||||
}
|
||||
90% {
|
||||
transform: translateX(-16%); /* Single overshoot for dramatic effect */
|
||||
transform: translateX(4500px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-8%); /* Centered position */
|
||||
transform: translateX(-37.5px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -140,6 +138,8 @@ body {
|
|||
padding: 2px;
|
||||
animation: item-flash 0.3s ease-out forwards;
|
||||
animation-play-state: paused;
|
||||
width: 69px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes item-flash {
|
||||
|
|
@ -163,7 +163,6 @@ body {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 65px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -172,6 +171,16 @@ body {
|
|||
animation: highlight-winner 1s ease-out 10s forwards;
|
||||
}
|
||||
|
||||
.winning-prize {
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.winning-prize.highlight {
|
||||
border-color: #fff !important;
|
||||
box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
|
||||
/* Specific ID for the winning item to ensure it's visible */
|
||||
#winning-item {
|
||||
z-index: 5; /* Higher than indicator */
|
||||
|
|
@ -183,44 +192,44 @@ body {
|
|||
filter: brightness(1);
|
||||
}
|
||||
10% {
|
||||
transform: scale(1.3);
|
||||
filter: brightness(2);
|
||||
transform: scale(1.1);
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
20% {
|
||||
transform: scale(1.2);
|
||||
filter: brightness(1.8);
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
30% {
|
||||
transform: scale(1.25);
|
||||
filter: brightness(2);
|
||||
transform: scale(1.1);
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.2);
|
||||
filter: brightness(1.8);
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.25);
|
||||
filter: brightness(2);
|
||||
transform: scale(1.1);
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.2);
|
||||
filter: brightness(1.8);
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.25);
|
||||
filter: brightness(2);
|
||||
transform: scale(1.1);
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
80% {
|
||||
transform: scale(1.2);
|
||||
filter: brightness(1.8);
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
90% {
|
||||
transform: scale(1.25);
|
||||
filter: brightness(2);
|
||||
transform: scale(1.1);
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.2);
|
||||
filter: brightness(1.5);
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -234,3 +243,76 @@ body {
|
|||
font-size: 0.75rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Prize animation */
|
||||
.prize-reel {
|
||||
animation: slide-prizes 10s cubic-bezier(0.05, 0.82, 0.17, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes slide-prizes {
|
||||
0% {
|
||||
transform: translateX(800px);
|
||||
}
|
||||
85% {
|
||||
transform: translateX(-120px); /* Small overshoot */
|
||||
}
|
||||
92% {
|
||||
transform: translateX(-90px); /* Bounce back */
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100px); /* Final position centered */
|
||||
}
|
||||
}
|
||||
|
||||
.animate-item-flash {
|
||||
animation: item-flash 0.5s ease-out alternate infinite;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
animation: highlight-winner 1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Reward rarity classes */
|
||||
.text-common {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.text-uncommon {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.text-rare {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.text-epic {
|
||||
color: #a78bfa;
|
||||
}
|
||||
|
||||
.text-legendary {
|
||||
color: #facc15;
|
||||
}
|
||||
|
||||
.text-mythic {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.text-emerald {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.text-accent-red {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.animation-fade {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
.animation-fade.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,136 +1,133 @@
|
|||
<app-navbar></app-navbar>
|
||||
<div
|
||||
class="flex flex-col items-center min-h-screen bg-gradient-to-b from-[#181c2a] to-[#232c43] py-10"
|
||||
>
|
||||
<div *ngIf="isLoading" class="flex flex-col items-center justify-center h-96">
|
||||
<div class="loader mb-4"></div>
|
||||
<div class="text-white text-lg">Lade Lootbox...</div>
|
||||
|
||||
<div class="container mx-auto px-4 py-6 space-y-8">
|
||||
<h1 class="text-3xl font-bold text-white mb-6">Lootbox Öffnen</h1>
|
||||
|
||||
<div *ngIf="isLoading" class="flex justify-center">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="!isLoading && lootbox">
|
||||
<h1 class="text-3xl font-bold text-white mb-2">{{ lootbox.name }}</h1>
|
||||
<div class="text-lg text-blue-300 mb-6">Preis: {{ lootbox.price | currency: 'EUR' }}</div>
|
||||
|
||||
<!-- Before opening - show possible rewards -->
|
||||
<div
|
||||
*ngIf="!isOpening && !isOpen"
|
||||
class="bg-[#1a1f30] p-6 rounded-lg shadow-lg w-full max-w-3xl mb-8"
|
||||
>
|
||||
<h2 class="text-xl font-semibold text-white mb-4">Mögliche Gewinne:</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<div
|
||||
*ngFor="let reward of lootbox.rewards"
|
||||
class="bg-[#232c43] p-4 rounded-lg border border-[#2d3748] text-center"
|
||||
>
|
||||
<div class="text-2xl font-bold mb-1">
|
||||
{{ reward.value | currency: 'EUR' }}
|
||||
</div>
|
||||
<div class="text-sm text-white/60">
|
||||
Chance: {{ reward.probability * 100 | number: '1.0-0' }}%
|
||||
|
||||
<div *ngIf="error" class="bg-red-500 text-white p-4 rounded mb-6">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isLoading && lootbox" class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
<div class="lg:col-span-3">
|
||||
<div class="card bg-deep-blue-light rounded-lg overflow-hidden shadow-lg">
|
||||
<div class="relative" *ngIf="!isOpen">
|
||||
<img [src]="getBoxImage(lootbox.id)" [alt]="lootbox.name" class="w-full h-48 object-cover">
|
||||
<div class="absolute top-2 right-2 bg-deep-blue px-2 py-1 rounded-full text-white">
|
||||
{{ lootbox.price | currency:'EUR' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Open button -->
|
||||
<div *ngIf="!isOpening && !isOpen" class="flex flex-col items-center mb-8">
|
||||
<button
|
||||
(click)="openLootbox()"
|
||||
class="open-btn text-white px-8 py-3 rounded-lg font-bold text-lg shadow-lg transition-all"
|
||||
>
|
||||
Öffnen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div *ngIf="isOpening" class="flex flex-col items-center">
|
||||
<div class="loader mb-4"></div>
|
||||
<div class="text-white text-lg">Öffne Lootbox...</div>
|
||||
</div>
|
||||
|
||||
<!-- Case opening display - CSGO style -->
|
||||
<div *ngIf="isOpen && !isOpening" class="w-full max-w-lg">
|
||||
<!-- Winner display - only shown after animation completes -->
|
||||
<div
|
||||
class="flex flex-col items-center mb-6"
|
||||
style="opacity: 0; animation: fade-in 0.5s ease-out 10.5s forwards"
|
||||
>
|
||||
<div class="text-2xl font-bold text-green-400 mb-2">Dein Gewinn:</div>
|
||||
<div class="text-4xl font-bold text-white mb-4">
|
||||
{{ wonReward?.value | currency: 'EUR' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- CSGO-style case opening display (horizontal version) -->
|
||||
<div class="case-container">
|
||||
<!-- Central indicator -->
|
||||
<div class="case-indicator"></div>
|
||||
|
||||
<!-- Horizontal row of prizes -->
|
||||
<div class="case-items-container">
|
||||
<div class="case-items">
|
||||
<!-- Add a reference element first to help with alignment -->
|
||||
<div class="case-item case-item-ref" style="opacity: 0; pointer-events: none"></div>
|
||||
|
||||
<div
|
||||
*ngFor="let reward of prizeList; let i = index"
|
||||
class="case-item"
|
||||
[class.case-item-won]="isWonReward(reward)"
|
||||
[id]="isWonReward(reward) ? 'winning-item' : ''"
|
||||
[style.border]="'none'"
|
||||
[style.animation-delay]="isWonReward(reward) ? '10s' : 8 + (i % 50) * 0.04 + 's'"
|
||||
>
|
||||
<div
|
||||
class="case-item-inner"
|
||||
[style.border]="''"
|
||||
[style.background-color]="''"
|
||||
[style.transform]="''"
|
||||
[style.box-shadow]="''"
|
||||
[style.margin-left]="isWonReward(reward) ? getCenterOffset() : '0'"
|
||||
[style.transition-delay]="(i % 20) * 0.01 + 's'"
|
||||
>
|
||||
<div class="amount">{{ reward.value | currency: 'EUR' }}</div>
|
||||
<div class="rarity">{{ reward.probability * 100 | number: '1.0-0' }}%</div>
|
||||
|
||||
<div class="p-6">
|
||||
<h2 class="text-xl font-bold text-white mb-4">{{ lootbox.name }}</h2>
|
||||
|
||||
<div *ngIf="!isOpening && !isOpen" class="mb-6">
|
||||
<button
|
||||
(click)="openLootbox()"
|
||||
class="button-primary w-full py-3 text-lg font-semibold rounded">
|
||||
Öffnen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="isOpening" class="flex flex-col items-center py-8">
|
||||
<div class="loader mb-4"></div>
|
||||
<div class="text-white text-lg">Öffne Lootbox...</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="isOpen && !isOpening" class="space-y-6">
|
||||
<div class="text-center mb-8 animation-fade"
|
||||
[class.visible]="animationCompleted">
|
||||
<h2 class="text-xl font-bold text-white mb-2">Dein Gewinn:</h2>
|
||||
<div class="text-3xl font-bold" [ngClass]="getRewardClass()">
|
||||
{{ wonReward?.value | currency: 'EUR' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add another reference element at the end to help with alignment -->
|
||||
<div class="case-item case-item-ref" style="opacity: 0; pointer-events: none"></div>
|
||||
|
||||
<div class="relative w-full overflow-hidden bg-deep-blue rounded-lg p-4 h-32 mb-6">
|
||||
<div class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-white z-10 transform -translate-x-0" style="margin-left: 0px;"></div>
|
||||
|
||||
<div class="relative h-full flex items-center overflow-hidden">
|
||||
<div class="flex case-items">
|
||||
<div
|
||||
*ngFor="let reward of prizeList; let i = index"
|
||||
class="case-item"
|
||||
[class.case-item-won]="isWonReward(reward) && animationCompleted"
|
||||
[id]="isWonReward(reward) ? 'winning-item' : ''"
|
||||
>
|
||||
<div class="case-item-inner"
|
||||
[class.winning-prize]="isWonReward(reward)"
|
||||
[class.highlight]="isWonReward(reward) && animationCompleted">
|
||||
<div class="amount" [ngClass]="getRewardRarityClass(reward)">
|
||||
{{ reward.value | currency: 'EUR' }}
|
||||
</div>
|
||||
<div class="text-xs text-text-secondary">
|
||||
{{ reward.probability * 100 | number: '1.0-0' }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div 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"
|
||||
>
|
||||
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"
|
||||
>
|
||||
Zurück zur Übersicht
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6 pb-6">
|
||||
<div class="text-sm text-text-secondary">
|
||||
<p>Fairness garantiert - Alle Ergebnisse werden transparent berechnet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons - only shown after animation completes -->
|
||||
<div
|
||||
class="flex gap-4 justify-center mt-8"
|
||||
style="opacity: 0; animation: fade-in 0.5s ease-out 10.7s forwards"
|
||||
>
|
||||
<button
|
||||
(click)="openAgain()"
|
||||
class="open-btn text-white px-6 py-2 rounded-lg font-semibold transition-all"
|
||||
>
|
||||
Nochmal öffnen
|
||||
</button>
|
||||
<button
|
||||
(click)="goBack()"
|
||||
class="bg-[#232c43] hover:bg-[#2d3748] text-white px-6 py-2 rounded-lg font-semibold transition"
|
||||
>
|
||||
Zurück zur Übersicht
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-1">
|
||||
<div class="card bg-deep-blue-light rounded-lg overflow-hidden shadow-lg p-6">
|
||||
<h3 class="text-lg font-semibold text-white mb-4">Mögliche Gewinne:</h3>
|
||||
<ul class="space-y-3">
|
||||
<li *ngFor="let reward of lootbox.rewards" class="flex justify-between">
|
||||
<span [ngClass]="getRewardRarityClass(reward)">{{ reward.value | currency:'EUR' }}</span>
|
||||
<span class="text-white">{{ reward.probability * 100 | number: '1.0-0' }}%</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div *ngIf="isOpen && wonReward && animationCompleted" class="mt-6 pt-6 border-t border-deep-blue-contrast">
|
||||
<h3 class="text-lg font-semibold text-white mb-4">Gewinn-Details:</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-text-secondary">Kosten:</span>
|
||||
<span>{{ lootbox.price | currency: 'EUR' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-text-secondary">Gewinn:</span>
|
||||
<span [ngClass]="getRewardClass()">{{ wonReward.value | currency: 'EUR' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-text-secondary">Profit:</span>
|
||||
<span [ngClass]="wonReward.value > (lootbox.price || 0) ? 'text-emerald' : 'text-accent-red'">
|
||||
{{ (wonReward.value - (lootbox.price || 0)) | currency: 'EUR' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,15 +5,6 @@ import { LootboxService } from '../services/lootbox.service';
|
|||
import { LootBox, Reward } from 'app/model/LootBox';
|
||||
import { NavbarComponent } from '@shared/components/navbar/navbar.component';
|
||||
|
||||
function shuffle<T>(array: T[]): T[] {
|
||||
const arr = array.slice();
|
||||
for (let i = arr.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[arr[i], arr[j]] = [arr[j], arr[i]];
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-lootbox-opening',
|
||||
standalone: true,
|
||||
|
|
@ -25,12 +16,11 @@ export default class LootboxOpeningComponent {
|
|||
lootbox: LootBox | null = null;
|
||||
isLoading = true;
|
||||
error = '';
|
||||
|
||||
// UI State
|
||||
isOpening = false;
|
||||
isOpen = false;
|
||||
wonReward: Reward | null = null;
|
||||
prizeList: Reward[] = [];
|
||||
animationCompleted = false;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
|
|
@ -38,12 +28,17 @@ export default class LootboxOpeningComponent {
|
|||
private lootboxService: LootboxService,
|
||||
private cdr: ChangeDetectorRef
|
||||
) {
|
||||
this.loadLootbox();
|
||||
}
|
||||
|
||||
private loadLootbox(): void {
|
||||
const idParam = this.route.snapshot.paramMap.get('id');
|
||||
if (!idParam) {
|
||||
this.error = 'Invalid lootbox ID';
|
||||
this.isLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const lootboxId = parseInt(idParam, 10);
|
||||
this.lootboxService.getAllLootBoxes().subscribe({
|
||||
next: (lootboxes) => {
|
||||
|
|
@ -59,88 +54,86 @@ export default class LootboxOpeningComponent {
|
|||
});
|
||||
}
|
||||
|
||||
openLootbox() {
|
||||
openLootbox(): void {
|
||||
if (!this.lootbox || this.isOpening) return;
|
||||
this.isOpening = true;
|
||||
this.isOpen = false;
|
||||
this.wonReward = null;
|
||||
this.prizeList = []; // Clear previous prizes
|
||||
this.cdr.detectChanges();
|
||||
|
||||
// Short delay to ensure animation plays from the beginning
|
||||
|
||||
this.resetState(true);
|
||||
|
||||
setTimeout(() => {
|
||||
this.lootboxService.purchaseLootBox(this.lootbox!.id).subscribe({
|
||||
next: (reward) => {
|
||||
this.wonReward = reward;
|
||||
this.generateCasePrizes(reward);
|
||||
this.isOpening = false;
|
||||
this.isOpen = true;
|
||||
this.cdr.detectChanges();
|
||||
},
|
||||
error: () => {
|
||||
// Fallback if API fails
|
||||
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();
|
||||
},
|
||||
next: this.handleRewardSuccess.bind(this),
|
||||
error: this.handleRewardError.bind(this),
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
generateCasePrizes(wonReward: Reward) {
|
||||
private handleRewardSuccess(reward: Reward): void {
|
||||
this.wonReward = reward;
|
||||
this.generateCasePrizes(reward);
|
||||
this.isOpening = false;
|
||||
this.isOpen = true;
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
|
||||
private handleRewardError(): void {
|
||||
if (!this.lootbox) return;
|
||||
|
||||
const rewards = this.lootbox.rewards;
|
||||
const fallback = rewards[Math.floor(Math.random() * rewards.length)];
|
||||
this.handleRewardSuccess(fallback);
|
||||
}
|
||||
|
||||
private resetState(isOpening = false): void {
|
||||
this.isOpening = isOpening;
|
||||
this.isOpen = false;
|
||||
this.wonReward = null;
|
||||
this.prizeList = [];
|
||||
this.animationCompleted = false;
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
|
||||
generateCasePrizes(wonReward: Reward): void {
|
||||
if (!this.lootbox) return;
|
||||
|
||||
// Create a case opening display with an extremely large number of prizes for a massive scrolling animation
|
||||
const prizeCount = 200; // Set to 200 for an extremely long scrolling animation
|
||||
const winningPosition = Math.floor(prizeCount / 2); // Position of the winning prize (middle)
|
||||
|
||||
// Get possible rewards from the lootbox
|
||||
const prizeCount = 120;
|
||||
const winningPosition = Math.floor(prizeCount / 2);
|
||||
const possibleRewards = this.lootbox.rewards;
|
||||
|
||||
// Generate an array of random rewards
|
||||
let items: Reward[] = [];
|
||||
const items: Reward[] = [];
|
||||
|
||||
for (let i = 0; i < prizeCount; i++) {
|
||||
// Special handling for the winning position
|
||||
if (i === winningPosition) {
|
||||
items.push(wonReward);
|
||||
items.push({...wonReward});
|
||||
} else {
|
||||
// For all other positions, choose a random reward
|
||||
// Weight rarer items to appear less frequently
|
||||
const randomReward = this.getWeightedRandomReward(possibleRewards);
|
||||
items.push(randomReward);
|
||||
items.push(this.getWeightedRandomReward(possibleRewards));
|
||||
}
|
||||
}
|
||||
|
||||
this.prizeList = items;
|
||||
|
||||
setTimeout(() => {
|
||||
this.animationCompleted = true;
|
||||
this.cdr.detectChanges();
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
getWeightedRandomReward(rewards: Reward[]): Reward {
|
||||
// Create a weighted distribution based on probabilities
|
||||
const totalProbability = rewards.reduce((sum, reward) => sum + reward.probability, 0);
|
||||
const randomValue = Math.random() * totalProbability;
|
||||
|
||||
let cumulativeProbability = 0;
|
||||
|
||||
for (const reward of rewards) {
|
||||
cumulativeProbability += reward.probability;
|
||||
if (randomValue <= cumulativeProbability) {
|
||||
return { ...reward }; // Return a copy of the reward
|
||||
return { ...reward };
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback, should never reach here
|
||||
|
||||
return { ...rewards[0] };
|
||||
}
|
||||
|
||||
openAgain() {
|
||||
this.isOpening = false;
|
||||
this.isOpen = false;
|
||||
this.wonReward = null;
|
||||
this.prizeList = [];
|
||||
this.cdr.detectChanges();
|
||||
openAgain(): void {
|
||||
this.resetState();
|
||||
this.openLootbox();
|
||||
}
|
||||
|
||||
getBoxImage(id: number): string {
|
||||
|
|
@ -152,25 +145,28 @@ export default class LootboxOpeningComponent {
|
|||
}
|
||||
|
||||
isWonReward(reward: Reward): boolean {
|
||||
if (!this.wonReward) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
reward.id === this.wonReward.id &&
|
||||
reward.value === this.wonReward.value &&
|
||||
reward.probability === this.wonReward.probability
|
||||
);
|
||||
if (!this.wonReward || !this.prizeList.length) return false;
|
||||
|
||||
const middleIndex = Math.floor(this.prizeList.length / 2);
|
||||
return this.prizeList.indexOf(reward) === middleIndex;
|
||||
}
|
||||
|
||||
// Calculate the center position for better alignment
|
||||
getCenterOffset(): string {
|
||||
return '0px'; // No additional offset - using animation transform instead
|
||||
|
||||
getRewardRarityClass(reward: Reward): string {
|
||||
if (!reward) return 'text-common';
|
||||
|
||||
const probability = reward.probability;
|
||||
|
||||
if (probability < 0.01) return 'text-mythic';
|
||||
if (probability < 0.05) return 'text-legendary';
|
||||
if (probability < 0.10) return 'text-epic';
|
||||
if (probability < 0.20) return 'text-rare';
|
||||
if (probability < 0.40) return 'text-uncommon';
|
||||
return 'text-common';
|
||||
}
|
||||
|
||||
// Check if item is at center position (100th item)
|
||||
isCenterItem(index: number): boolean {
|
||||
return index === Math.floor(200 / 2); // Center item at index 100 (0-indexed)
|
||||
|
||||
getRewardClass(): string {
|
||||
if (!this.wonReward || !this.lootbox) return '';
|
||||
return this.wonReward.value > (this.lootbox.price || 0) ? 'text-emerald' : 'text-accent-red';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="container mx-auto px-4 py-6">
|
||||
<h1 class="text-3xl font-bold text-white mb-6">Lootboxen</h1>
|
||||
|
||||
<div style="color:lime">isLoading: {{ isLoading }} | error: {{ error }} | lootboxes: {{ lootboxes?.length }}</div>
|
||||
<div style="color:lime">isLoading: {{ isLoading }} | error: {{ error }} | lootboxes: {{ lootboxes.length }}</div>
|
||||
|
||||
<div *ngIf="isLoading" class="flex justify-center">
|
||||
<div class="loader"></div>
|
||||
|
|
|
|||
Reference in a new issue