SZUT/casino
5
1
Fork 0
Code Issues Pull requests 1 Releases 72 Wiki Activity Actions

style: update lootbox component styles and remove debug code

Browse source
This commit is contained in:
Jan K9f 2025-04-23 14:20:02 +02:00
parent 55fb776052
commit 2c6be517c1
Signed by: jank
GPG key ID: 22BEAC760B3333D6
2 changed files with 16 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.css
View file

@ -71,12 +71,12 @@ body {
top: 50%; top: 50%;
left: 50%; /* Back to center - we'll adjust the animation instead */ left: 50%; /* Back to center - we'll adjust the animation instead */
transform: translate(-50%, -50%); /* Center precisely */ transform: translate(-50%, -50%); /* Center precisely */
width: 4px; width: 6px;
height: 100%; height: 100%;
background: #ff0000; /* Bright red for debugging */ background: #facc15;
box-shadow: box-shadow:
0 0 10px #ff0000, 0 0 10px #facc15,
0 0 15px rgba(255, 0, 0, 0.5); 0 0 15px rgba(255, 255, 255, 0.5);
z-index: 3; z-index: 3;
animation: indicator-pulse 1.5s ease-in-out 10s infinite alternate; animation: indicator-pulse 1.5s ease-in-out 10s infinite alternate;
} }
@ -85,14 +85,14 @@ body {
0% { 0% {
opacity: 0.6; opacity: 0.6;
box-shadow: box-shadow:
0 0 10px #ff0000, 0 0 10px #facc15,
0 0 15px rgba(255, 0, 0, 0.3); 0 0 15px rgba(255, 255, 255, 0.3);
} }
100% { 100% {
opacity: 1; opacity: 1;
box-shadow: box-shadow:
0 0 15px #ff0000, 0 0 15px #facc15,
0 0 20px rgba(255, 0, 0, 0.7); 0 0 20px rgba(255, 255, 255, 0.7);
} }
} }
@ -175,7 +175,7 @@ body {
.case-item-won .case-item-inner { .case-item-won .case-item-inner {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
background: linear-gradient(to right, #232c43, #2a3354, #232c43); background: linear-gradient(to right, #232c43, #2a3354, #232c43);
border: 3px solid #ff0000 !important; /* Bright red border for debugging */ border: 2px solid #facc15; /* Gold border for winning item */
} }
/* Specific ID for the winning item to ensure it's visible */ /* Specific ID for the winning item to ensure it's visible */

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

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