style: clean up and reorganize lootbox component styles
This commit is contained in:
parent
e9d2f6e0ca
commit
45c5b19e41
GPG key ID:
22BEAC760B3333D6
3 changed files with 286 additions and 166 deletions
|
|
@ -2,88 +2,28 @@ body {
|
|||
background: linear-gradient(to bottom, #181c2a, #232c43);
|
||||
}
|
||||
|
||||
.case-strip-outer {
|
||||
position: relative;
|
||||
width: 900px;
|
||||
max-width: 100vw;
|
||||
height: 120px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background: #232c43;
|
||||
border-radius: 16px;
|
||||
border: 2px solid #2d3748;
|
||||
box-shadow: 0 4px 32px 0 #000a;
|
||||
}
|
||||
|
||||
.case-strip-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.case-strip-reward {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
margin: 0 6px;
|
||||
background: #1a2233;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
/* Color classes */
|
||||
.text-yellow-400 {
|
||||
border-color: #facc15;
|
||||
color: #facc15;
|
||||
}
|
||||
.text-purple-400 {
|
||||
border-color: #a78bfa;
|
||||
color: #a78bfa;
|
||||
}
|
||||
.text-blue-400 {
|
||||
border-color: #60a5fa;
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.case-strip-marker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #facc15 60%, #fff0 100%);
|
||||
z-index: 2;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 16px #facc15, 0 0 2px #fff;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.open-btn {
|
||||
background: linear-gradient(90deg, #facc15 0%, #a78bfa 100%);
|
||||
color: #232c43;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
padding: 0.75rem 2.5rem;
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 12px #0005;
|
||||
transition: background 0.2s, color 0.2s, transform 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.open-btn:hover {
|
||||
background: linear-gradient(90deg, #ffe066 0%, #c4b5fd 100%);
|
||||
color: #181c2a;
|
||||
transform: translateY(-2px) scale(1.04);
|
||||
.border-yellow-400 {
|
||||
border-color: #facc15;
|
||||
}
|
||||
.border-purple-400 {
|
||||
border-color: #a78bfa;
|
||||
}
|
||||
.border-blue-400 {
|
||||
border-color: #60a5fa;
|
||||
}
|
||||
|
||||
/* Loader animation */
|
||||
.loader {
|
||||
border: 4px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
|
|
@ -95,4 +35,142 @@ body {
|
|||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Open button styling */
|
||||
.open-btn {
|
||||
background: linear-gradient(90deg, #4338ca 0%, #8b5cf6 100%);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.open-btn:hover {
|
||||
background: linear-gradient(90deg, #4f46e5 0%, #a78bfa 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* CSGO-style case opening display */
|
||||
.case-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: rgba(26, 31, 48, 0.6);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.case-indicator {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
background: #facc15;
|
||||
box-shadow: 0 0 10px #facc15, 0 0 15px rgba(255, 255, 255, 0.5);
|
||||
z-index: 3;
|
||||
animation: indicator-pulse 1.5s ease-in-out 3s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes indicator-pulse {
|
||||
0% {
|
||||
opacity: 0.6;
|
||||
box-shadow: 0 0 10px #facc15, 0 0 15px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 15px #facc15, 0 0 20px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.case-items-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 10px 5px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 150px; /* Fixed height for the horizontal row */
|
||||
overflow: hidden; /* Hide scrollbar */
|
||||
}
|
||||
|
||||
.case-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
animation: slide-in 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
|
||||
transform: translateX(120%); /* Initial position far to the right */
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateX(120%);
|
||||
}
|
||||
90% {
|
||||
transform: translateX(-5%); /* Slight overshoot */
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0%); /* Final centered position */
|
||||
}
|
||||
}
|
||||
|
||||
.case-item {
|
||||
transition: all 0.2s ease;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.case-item-inner {
|
||||
background: #232c43;
|
||||
border: 2px solid #2d3748;
|
||||
border-radius: 8px;
|
||||
padding: 12px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.case-item-won {
|
||||
z-index: 2;
|
||||
animation: highlight-winner 0.5s ease-out 3s forwards;
|
||||
}
|
||||
|
||||
.case-item-won .case-item-inner {
|
||||
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
|
||||
background: linear-gradient(to right, #232c43, #2a3354, #232c43);
|
||||
}
|
||||
|
||||
@keyframes highlight-winner {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.rarity {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -25,25 +25,12 @@ export default class LootboxOpeningComponent {
|
|||
lootbox: LootBox | null = null;
|
||||
isLoading = true;
|
||||
error = '';
|
||||
|
||||
|
||||
// UI State
|
||||
isOpening = false;
|
||||
isOpen = false;
|
||||
wonReward: Reward | null = null;
|
||||
strip: Reward[] = [];
|
||||
stripTranslateX = 0;
|
||||
stripTransition = 'none';
|
||||
|
||||
// Config
|
||||
readonly visibleCount = 7;
|
||||
readonly rewardWidth = 120;
|
||||
readonly stripLength = 200;
|
||||
readonly ticks = 60;
|
||||
readonly minTickMs = 30;
|
||||
readonly maxTickMs = 180;
|
||||
private tickIndex = 0;
|
||||
private stopIndex = 0;
|
||||
private center = Math.floor(this.visibleCount / 2);
|
||||
private animationTimeout: any;
|
||||
prizeList: Reward[] = [];
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
|
|
@ -75,68 +62,84 @@ export default class LootboxOpeningComponent {
|
|||
openLootbox() {
|
||||
if (!this.lootbox || this.isOpening) return;
|
||||
this.isOpening = true;
|
||||
this.isOpen = false;
|
||||
this.wonReward = null;
|
||||
this.stripTransition = 'none';
|
||||
this.stripTranslateX = 0;
|
||||
this.prizeList = []; // Clear previous prizes
|
||||
this.cdr.detectChanges();
|
||||
this.lootboxService.purchaseLootBox(this.lootbox.id).subscribe({
|
||||
next: (reward) => this.startSlidingAnimation(reward),
|
||||
error: () => {
|
||||
const rewards = this.lootbox!.rewards;
|
||||
const fallback = rewards[Math.floor(Math.random() * rewards.length)];
|
||||
this.startSlidingAnimation(fallback);
|
||||
|
||||
// Short delay to ensure animation plays from the beginning
|
||||
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();
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
generateCasePrizes(wonReward: Reward) {
|
||||
if (!this.lootbox) return;
|
||||
|
||||
// Create a case opening display with fewer prizes to fit on screen without scrolling
|
||||
const prizeCount = 9; // Total number of prizes to show (odd number to have center prize)
|
||||
const winningPosition = Math.floor(prizeCount / 2); // Position of the winning prize (middle)
|
||||
|
||||
// Get possible rewards from the lootbox
|
||||
const possibleRewards = this.lootbox.rewards;
|
||||
|
||||
// Generate an array of random rewards
|
||||
let items: Reward[] = [];
|
||||
for (let i = 0; i < prizeCount; i++) {
|
||||
// Special handling for the winning position
|
||||
if (i === winningPosition) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private startSlidingAnimation(won: Reward) {
|
||||
// Fill the strip with shuffled rewards, repeat as needed
|
||||
const rewards = this.lootbox!.rewards;
|
||||
let strip: Reward[] = [];
|
||||
while (strip.length < this.stripLength) {
|
||||
strip = strip.concat(shuffle(rewards));
|
||||
}
|
||||
// Place the won reward at the final center position
|
||||
this.center = Math.floor(this.visibleCount / 2);
|
||||
this.stopIndex = this.ticks + this.center;
|
||||
strip[this.stopIndex] = won;
|
||||
this.strip = strip;
|
||||
this.stripTransition = 'none';
|
||||
this.stripTranslateX = 0;
|
||||
this.tickIndex = 0;
|
||||
this.cdr.detectChanges();
|
||||
this.stepSliding();
|
||||
|
||||
this.prizeList = items;
|
||||
}
|
||||
|
||||
private stepSliding() {
|
||||
if (this.tickIndex > this.ticks) {
|
||||
// Animation done
|
||||
this.stripTransition = 'none';
|
||||
this.stripTranslateX = -((this.stopIndex - this.center) * this.rewardWidth);
|
||||
this.isOpening = false;
|
||||
this.wonReward = this.strip[this.stopIndex];
|
||||
this.cdr.detectChanges();
|
||||
return;
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
// Ease-out: slow down at the end
|
||||
const progress = this.tickIndex / this.ticks;
|
||||
const eased = 1 - Math.pow(1 - progress, 2.5);
|
||||
const currentIndex = Math.round(eased * (this.stopIndex - this.center));
|
||||
this.stripTransition = 'transform 0.12s cubic-bezier(0.4,0.7,0.5,1)';
|
||||
this.stripTranslateX = -(currentIndex * this.rewardWidth);
|
||||
this.cdr.detectChanges();
|
||||
// Calculate next tick interval
|
||||
const tickMs = this.minTickMs + (this.maxTickMs - this.minTickMs) * eased;
|
||||
this.tickIndex++;
|
||||
this.animationTimeout = setTimeout(() => this.stepSliding(), tickMs);
|
||||
|
||||
// Fallback, should never reach here
|
||||
return { ...rewards[0] };
|
||||
}
|
||||
|
||||
openAgain() {
|
||||
this.isOpening = false;
|
||||
this.isOpen = false;
|
||||
this.wonReward = null;
|
||||
this.strip = [];
|
||||
this.stripTranslateX = 0;
|
||||
this.stripTransition = 'none';
|
||||
this.prizeList = [];
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
|
||||
|
|
@ -149,8 +152,18 @@ export default class LootboxOpeningComponent {
|
|||
}
|
||||
|
||||
getRarityClass(prob: number): string {
|
||||
if (prob <= 0.1) return 'text-yellow-400';
|
||||
if (prob <= 0.3) return 'text-purple-400';
|
||||
return 'text-blue-400';
|
||||
if (prob <= 0.1) return 'text-yellow-400 border-yellow-400';
|
||||
if (prob <= 0.3) return 'text-purple-400 border-purple-400';
|
||||
return 'text-blue-400 border-blue-400';
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue