SZUT/casino
SZUT/casino
Archived
3
1
Fork 0
Code Issues Pull requests 2 Releases 162 Packages 2 Wiki Activity Actions

style: Improve CSS formatting and animation adjustments

Browse source
This commit is contained in:
Jan K9f 2025-04-23 14:16:03 +02:00 • committed by Jan-Marlon Leibl
commit f44f5ed02b
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
3 changed files with 124 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.html
View file

@ -36,7 +36,7 @@
<!-- 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="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>
@ -56,21 +56,36 @@
<!-- 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)">
[class.case-item-won]="isWonReward(reward)"
[id]="isWonReward(reward) ? 'winning-item' : ''"
[style.border]="isCenterItem(i) ? '3px solid #00ff00' : 'none'"
[style.animation-delay]="isWonReward(reward) ? '10s' : (8 + (i % 50) * 0.04) + 's'">
<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>
[ngClass]="getRarityClass(reward.probability)"
[style.border]="isCenterItem(i) ? '5px solid lime' : ''"
[style.background-color]="isCenterItem(i) ? '#004400' : ''"
[style.transform]="isCenterItem(i) ? 'scale(1.1)' : ''"
[style.box-shadow]="isCenterItem(i) ? '0 0 15px lime' : ''"
[style.margin-left]="isWonReward(reward) ? getCenterOffset() : '0'"
[style.transition-delay]="(i % 20) * 0.01 + 's'">
<div class="amount" [style.color]="isCenterItem(i) ? '#00ff00' : ''">{{ reward.value | currency:'EUR' }}</div>
<div class="rarity" [style.color]="isCenterItem(i) ? '#00ff00' : ''">{{ (reward.probability * 100) | number:'1.0-0' }}%</div>
</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>
</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;">
<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>