79 lines
No EOL
3.7 KiB
HTML
79 lines
No EOL
3.7 KiB
HTML
<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>
|
|
|
|
<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 [ngClass]="getRarityClass(reward.probability)" 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>
|
|
</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 3.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">
|
|
<div *ngFor="let reward of prizeList; let i = index"
|
|
class="case-item"
|
|
[class.case-item-won]="isWonReward(reward)">
|
|
<div class="case-item-inner"
|
|
[ngClass]="getRarityClass(reward.probability)">
|
|
<div class="amount">{{ reward.value | currency:'EUR' }}</div>
|
|
<div class="rarity">{{ (reward.probability * 100) | number:'1.0-0' }}%</div>
|
|
</div>
|
|
</div>
|
|
</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 3.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>
|
|
</ng-container>
|
|
</div> |