style: clean up and reorganize lootbox component styles
This commit is contained in:
parent
8e27c9c7c3
commit
6f61e6dc3d
GPG key ID:
300B2F906DC6F1D5
3 changed files with 286 additions and 166 deletions
|
|
@ -7,43 +7,72 @@
|
|||
|
||||
<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-8">Preis: {{ lootbox.price | currency:'EUR' }}</div>
|
||||
<div class="text-lg text-blue-300 mb-6">Preis: {{ lootbox.price | currency:'EUR' }}</div>
|
||||
|
||||
<div class="relative w-[900px] max-w-full mb-8">
|
||||
<div class="case-strip-outer">
|
||||
<div class="case-strip-inner" [ngStyle]="{ transform: 'translateX(' + stripTranslateX + 'px)', transition: stripTransition }">
|
||||
<div *ngFor="let reward of strip" class="case-strip-reward" [ngClass]="getRarityClass(reward.probability)">
|
||||
<div class="text-xl font-bold">{{ reward.value | currency:'EUR' }}</div>
|
||||
<div class="text-xs opacity-70">{{ (reward.probability * 100) | number:'1.0-0' }}%</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>
|
||||
<div class="case-strip-marker"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isOpening && !wonReward" class="flex flex-col items-center">
|
||||
<button (click)="openLootbox()" class="open-btn">Öffnen</button>
|
||||
<div class="mt-6 text-white/70 text-sm">Mögliche Gewinne:</div>
|
||||
<div class="flex flex-wrap gap-4 justify-center mt-2">
|
||||
<div *ngFor="let reward of lootbox.rewards" class="px-4 py-2 rounded bg-[#232c43] text-white border border-[#2d3748]">
|
||||
<span [ngClass]="getRarityClass(reward.probability)">{{ reward.value | currency:'EUR' }}</span>
|
||||
<span class="ml-2 text-xs text-white/60">({{ (reward.probability * 100) | number:'1.0-0' }}%)</span>
|
||||
<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>
|
||||
|
||||
<div *ngIf="wonReward && !isOpening" class="flex flex-col items-center mt-8">
|
||||
<div class="text-2xl font-bold text-emerald mb-2">Glückwunsch!</div>
|
||||
<div class="text-4xl font-bold text-white mb-4">{{ wonReward.value | currency:'EUR' }}</div>
|
||||
<div class="text-white/80 mb-6">wurde deinem Konto gutgeschrieben</div>
|
||||
<div class="flex gap-4">
|
||||
<button (click)="openAgain()" class="open-btn">Nochmal öffnen</button>
|
||||
<button (click)="goBack()" class="bg-[#232c43] hover:bg-[#2d3748] text-white px-6 py-2 rounded font-semibold transition">Zurück zur Übersicht</button>
|
||||
<!-- 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>
|
||||
|
|
|
|||
Reference in a new issue