feat(lootboxes): add lootbox opening feature and images
This commit is contained in:
parent
b58ceeeaab
commit
8e27c9c7c3
GPG key ID:
300B2F906DC6F1D5
15 changed files with 536 additions and 327 deletions
|
|
@ -0,0 +1,98 @@
|
|||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 4px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
border-top: 4px solid #facc15;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<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-8">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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
import { Component, ChangeDetectorRef } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { LootboxService } from '../services/lootbox.service';
|
||||
import { LootBox, Reward } from 'app/model/LootBox';
|
||||
import { NavbarComponent } from '@shared/components/navbar/navbar.component';
|
||||
|
||||
function shuffle<T>(array: T[]): T[] {
|
||||
const arr = array.slice();
|
||||
for (let i = arr.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[arr[i], arr[j]] = [arr[j], arr[i]];
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-lootbox-opening',
|
||||
standalone: true,
|
||||
imports: [CommonModule, NavbarComponent],
|
||||
templateUrl: './lootbox-opening.component.html',
|
||||
styleUrls: ['./lootbox-opening.component.css']
|
||||
})
|
||||
export default class LootboxOpeningComponent {
|
||||
lootbox: LootBox | null = null;
|
||||
isLoading = true;
|
||||
error = '';
|
||||
|
||||
// UI State
|
||||
isOpening = 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;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private lootboxService: LootboxService,
|
||||
private cdr: ChangeDetectorRef
|
||||
) {
|
||||
const idParam = this.route.snapshot.paramMap.get('id');
|
||||
if (!idParam) {
|
||||
this.error = 'Invalid lootbox ID';
|
||||
this.isLoading = false;
|
||||
return;
|
||||
}
|
||||
const lootboxId = parseInt(idParam, 10);
|
||||
this.lootboxService.getAllLootBoxes().subscribe({
|
||||
next: (lootboxes) => {
|
||||
this.lootbox = lootboxes.find(box => box.id === lootboxId) || null;
|
||||
this.isLoading = false;
|
||||
this.cdr.detectChanges();
|
||||
},
|
||||
error: () => {
|
||||
this.error = 'Failed to load lootbox data';
|
||||
this.isLoading = false;
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openLootbox() {
|
||||
if (!this.lootbox || this.isOpening) return;
|
||||
this.isOpening = true;
|
||||
this.wonReward = null;
|
||||
this.stripTransition = 'none';
|
||||
this.stripTranslateX = 0;
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
// 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);
|
||||
}
|
||||
|
||||
openAgain() {
|
||||
this.isOpening = false;
|
||||
this.wonReward = null;
|
||||
this.strip = [];
|
||||
this.stripTranslateX = 0;
|
||||
this.stripTransition = 'none';
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
|
||||
getBoxImage(id: number): string {
|
||||
return `/images/${id}-box.png`;
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
this.router.navigate(['/game/lootboxes']);
|
||||
}
|
||||
|
||||
getRarityClass(prob: number): string {
|
||||
if (prob <= 0.1) return 'text-yellow-400';
|
||||
if (prob <= 0.3) return 'text-purple-400';
|
||||
return 'text-blue-400';
|
||||
}
|
||||
}
|
||||
Reference in a new issue