Compare commits
No commits in common. "v1.45.0" and "v1.44.1" have entirely different histories.
13 changed files with 1 additions and 928 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 789 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
|
|
@ -26,15 +26,4 @@ export const routes: Routes = [
|
||||||
loadComponent: () => import('./feature/game/slots/slots.component'),
|
loadComponent: () => import('./feature/game/slots/slots.component'),
|
||||||
canActivate: [authGuard],
|
canActivate: [authGuard],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'game/lootboxes',
|
|
||||||
loadComponent: () =>
|
|
||||||
import('./feature/lootboxes/lootbox-selection/lootbox-selection.component'),
|
|
||||||
canActivate: [authGuard],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'game/lootboxes/open/:id',
|
|
||||||
loadComponent: () => import('./feature/lootboxes/lootbox-opening/lootbox-opening.component'),
|
|
||||||
canActivate: [authGuard],
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,7 @@ export default class HomeComponent implements OnInit {
|
||||||
id: '6',
|
id: '6',
|
||||||
name: 'Lootboxen',
|
name: 'Lootboxen',
|
||||||
image: '/lootbox.webp',
|
image: '/lootbox.webp',
|
||||||
route: '/game/lootboxes',
|
route: '/game/lootbox',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,320 +0,0 @@
|
||||||
body {
|
|
||||||
background: linear-gradient(to bottom, #181c2a, #232c43);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Color classes */
|
|
||||||
.text-yellow-400 {
|
|
||||||
color: #facc15;
|
|
||||||
}
|
|
||||||
.text-purple-400 {
|
|
||||||
color: #a78bfa;
|
|
||||||
}
|
|
||||||
.text-blue-400 {
|
|
||||||
color: #60a5fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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.3);
|
|
||||||
border-radius: 50%;
|
|
||||||
border-top: 4px solid #fff;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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%; /* Back to center - we'll adjust the animation instead */
|
|
||||||
transform: translate(-50%, -50%); /* Center precisely */
|
|
||||||
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 10s 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 */
|
|
||||||
display: flex;
|
|
||||||
justify-content: center; /* Center the items container */
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-items {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 5px 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
animation: slide-in 10s cubic-bezier(0.33, 0.9, 0.3, 1) forwards;
|
|
||||||
transform: translateX(4500px);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide-in {
|
|
||||||
0% {
|
|
||||||
transform: translateX(4500px);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(-37.5px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-item {
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
padding: 2px;
|
|
||||||
animation: item-flash 0.3s ease-out forwards;
|
|
||||||
animation-play-state: paused;
|
|
||||||
width: 69px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes item-flash {
|
|
||||||
0% {
|
|
||||||
filter: brightness(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
filter: brightness(1.8);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
filter: brightness(1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-item-inner {
|
|
||||||
background: #232c43;
|
|
||||||
border: 2px solid #2d3748;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px 5px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-item-won {
|
|
||||||
z-index: 2;
|
|
||||||
animation: highlight-winner 1s ease-out 10s forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.winning-prize {
|
|
||||||
border: 2px solid transparent;
|
|
||||||
transition: all 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.winning-prize.highlight {
|
|
||||||
border-color: #fff !important;
|
|
||||||
box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Specific ID for the winning item to ensure it's visible */
|
|
||||||
#winning-item {
|
|
||||||
z-index: 5; /* Higher than indicator */
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes highlight-winner {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
filter: brightness(1);
|
|
||||||
}
|
|
||||||
10% {
|
|
||||||
transform: scale(1.1);
|
|
||||||
filter: brightness(1.5);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
filter: brightness(1.3);
|
|
||||||
}
|
|
||||||
30% {
|
|
||||||
transform: scale(1.1);
|
|
||||||
filter: brightness(1.5);
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
filter: brightness(1.3);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.1);
|
|
||||||
filter: brightness(1.5);
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
filter: brightness(1.3);
|
|
||||||
}
|
|
||||||
70% {
|
|
||||||
transform: scale(1.1);
|
|
||||||
filter: brightness(1.5);
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
filter: brightness(1.3);
|
|
||||||
}
|
|
||||||
90% {
|
|
||||||
transform: scale(1.1);
|
|
||||||
filter: brightness(1.5);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
filter: brightness(1.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.amount {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rarity {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Prize animation */
|
|
||||||
.prize-reel {
|
|
||||||
animation: slide-prizes 10s cubic-bezier(0.05, 0.82, 0.17, 1) forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide-prizes {
|
|
||||||
0% {
|
|
||||||
transform: translateX(800px);
|
|
||||||
}
|
|
||||||
85% {
|
|
||||||
transform: translateX(-120px); /* Small overshoot */
|
|
||||||
}
|
|
||||||
92% {
|
|
||||||
transform: translateX(-90px); /* Bounce back */
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(-100px); /* Final position centered */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-item-flash {
|
|
||||||
animation: item-flash 0.5s ease-out alternate infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
animation: highlight-winner 1s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Reward rarity classes */
|
|
||||||
.text-common {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-uncommon {
|
|
||||||
color: #4ade80;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-rare {
|
|
||||||
color: #60a5fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-epic {
|
|
||||||
color: #a78bfa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-legendary {
|
|
||||||
color: #facc15;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-mythic {
|
|
||||||
color: #f87171;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-emerald {
|
|
||||||
color: #10b981;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-accent-red {
|
|
||||||
color: #ef4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animation-fade {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
transition:
|
|
||||||
opacity 0.5s ease-out,
|
|
||||||
transform 0.5s ease-out;
|
|
||||||
transition-delay: 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animation-fade.visible {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
@ -1,150 +0,0 @@
|
||||||
<app-navbar></app-navbar>
|
|
||||||
|
|
||||||
<div class="container mx-auto px-4 py-6 space-y-8">
|
|
||||||
<h1 class="text-3xl font-bold text-white mb-6">Lootbox Öffnen</h1>
|
|
||||||
|
|
||||||
<div *ngIf="isLoading" class="flex justify-center">
|
|
||||||
<div class="loader"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div *ngIf="error" class="bg-red-500 text-white p-4 rounded mb-6">
|
|
||||||
{{ error }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div *ngIf="!isLoading && lootbox" class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="lg:col-span-3">
|
|
||||||
<div class="card bg-deep-blue-light rounded-lg overflow-hidden shadow-lg">
|
|
||||||
<div class="relative" *ngIf="!isOpen">
|
|
||||||
<img
|
|
||||||
[src]="getBoxImage(lootbox.id)"
|
|
||||||
[alt]="lootbox.name"
|
|
||||||
class="w-full h-48 object-cover"
|
|
||||||
/>
|
|
||||||
<div class="absolute top-2 right-2 bg-deep-blue px-2 py-1 rounded-full text-white">
|
|
||||||
{{ lootbox.price | currency: 'EUR' }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6">
|
|
||||||
<h2 class="text-xl font-bold text-white mb-4">{{ lootbox.name }}</h2>
|
|
||||||
|
|
||||||
<div *ngIf="!isOpening && !isOpen" class="mb-6">
|
|
||||||
<button
|
|
||||||
(click)="openLootbox()"
|
|
||||||
class="button-primary w-full py-3 text-lg font-semibold rounded"
|
|
||||||
>
|
|
||||||
Öffnen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div *ngIf="isOpening" class="flex flex-col items-center py-8">
|
|
||||||
<div class="loader mb-4"></div>
|
|
||||||
<div class="text-white text-lg">Öffne Lootbox...</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div *ngIf="isOpen && !isOpening" class="space-y-6">
|
|
||||||
<div class="text-center mb-8 animation-fade" [class.visible]="animationCompleted">
|
|
||||||
<h2 class="text-xl font-bold text-white mb-2">Dein Gewinn:</h2>
|
|
||||||
<div class="text-3xl font-bold" [ngClass]="getRewardClass()">
|
|
||||||
{{ wonReward?.value | currency: 'EUR' }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative w-full overflow-hidden bg-deep-blue rounded-lg p-4 h-32 mb-6">
|
|
||||||
<div
|
|
||||||
class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-white z-10 transform -translate-x-0"
|
|
||||||
style="margin-left: 0px"
|
|
||||||
></div>
|
|
||||||
|
|
||||||
<div class="relative h-full flex items-center overflow-hidden">
|
|
||||||
<div class="flex case-items">
|
|
||||||
<div
|
|
||||||
*ngFor="let reward of prizeList; let i = index"
|
|
||||||
class="case-item"
|
|
||||||
[class.case-item-won]="isWonReward(reward) && animationCompleted"
|
|
||||||
[id]="isWonReward(reward) ? 'winning-item' : ''"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="case-item-inner"
|
|
||||||
[class.winning-prize]="isWonReward(reward)"
|
|
||||||
[class.highlight]="isWonReward(reward) && animationCompleted"
|
|
||||||
>
|
|
||||||
<div class="amount" [ngClass]="getRewardRarityClass(reward)">
|
|
||||||
{{ reward.value | currency: 'EUR' }}
|
|
||||||
</div>
|
|
||||||
<div class="text-xs text-text-secondary">
|
|
||||||
{{ reward.probability * 100 | number: '1.0-0' }}%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="flex justify-center gap-4 mt-8 animation-fade"
|
|
||||||
[class.visible]="animationCompleted"
|
|
||||||
>
|
|
||||||
<button (click)="openAgain()" class="button-primary px-6 py-2 font-semibold rounded">
|
|
||||||
Nochmal Öffnen
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
(click)="goBack()"
|
|
||||||
class="bg-deep-blue hover:bg-deep-blue-contrast text-white px-6 py-2 rounded font-semibold transition"
|
|
||||||
>
|
|
||||||
Zurück zur Übersicht
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="px-6 pb-6">
|
|
||||||
<div class="text-sm text-text-secondary">
|
|
||||||
<p>Fairness garantiert - Alle Ergebnisse werden transparent berechnet.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="lg:col-span-1">
|
|
||||||
<div class="card bg-deep-blue-light rounded-lg overflow-hidden shadow-lg p-6">
|
|
||||||
<h3 class="text-lg font-semibold text-white mb-4">Mögliche Gewinne:</h3>
|
|
||||||
<ul class="space-y-3">
|
|
||||||
<li *ngFor="let reward of lootbox.rewards" class="flex justify-between">
|
|
||||||
<span [ngClass]="getRewardRarityClass(reward)">{{
|
|
||||||
reward.value | currency: 'EUR'
|
|
||||||
}}</span>
|
|
||||||
<span class="text-white">{{ reward.probability * 100 | number: '1.0-0' }}%</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div
|
|
||||||
*ngIf="isOpen && wonReward && animationCompleted"
|
|
||||||
class="mt-6 pt-6 border-t border-deep-blue-contrast"
|
|
||||||
>
|
|
||||||
<h3 class="text-lg font-semibold text-white mb-4">Gewinn-Details:</h3>
|
|
||||||
<div class="space-y-3">
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<span class="text-text-secondary">Kosten:</span>
|
|
||||||
<span>{{ lootbox.price | currency: 'EUR' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<span class="text-text-secondary">Gewinn:</span>
|
|
||||||
<span [ngClass]="getRewardClass()">{{ wonReward.value | currency: 'EUR' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<span class="text-text-secondary">Profit:</span>
|
|
||||||
<span
|
|
||||||
[ngClass]="
|
|
||||||
wonReward.value > (lootbox.price || 0) ? 'text-emerald' : 'text-accent-red'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ wonReward.value - (lootbox.price || 0) | currency: 'EUR' }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,171 +0,0 @@
|
||||||
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';
|
|
||||||
|
|
||||||
@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 = '';
|
|
||||||
isOpening = false;
|
|
||||||
isOpen = false;
|
|
||||||
wonReward: Reward | null = null;
|
|
||||||
prizeList: Reward[] = [];
|
|
||||||
animationCompleted = false;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private route: ActivatedRoute,
|
|
||||||
private router: Router,
|
|
||||||
private lootboxService: LootboxService,
|
|
||||||
private cdr: ChangeDetectorRef
|
|
||||||
) {
|
|
||||||
this.loadLootbox();
|
|
||||||
}
|
|
||||||
|
|
||||||
private loadLootbox(): void {
|
|
||||||
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(): void {
|
|
||||||
if (!this.lootbox || this.isOpening) return;
|
|
||||||
|
|
||||||
this.resetState(true);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.lootboxService.purchaseLootBox(this.lootbox!.id).subscribe({
|
|
||||||
next: this.handleRewardSuccess.bind(this),
|
|
||||||
error: this.handleRewardError.bind(this),
|
|
||||||
});
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleRewardSuccess(reward: Reward): void {
|
|
||||||
this.wonReward = reward;
|
|
||||||
this.generateCasePrizes(reward);
|
|
||||||
this.isOpening = false;
|
|
||||||
this.isOpen = true;
|
|
||||||
this.cdr.detectChanges();
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleRewardError(): void {
|
|
||||||
if (!this.lootbox) return;
|
|
||||||
|
|
||||||
const rewards = this.lootbox.rewards;
|
|
||||||
const fallback = rewards[Math.floor(Math.random() * rewards.length)];
|
|
||||||
this.handleRewardSuccess(fallback);
|
|
||||||
}
|
|
||||||
|
|
||||||
private resetState(isOpening = false): void {
|
|
||||||
this.isOpening = isOpening;
|
|
||||||
this.isOpen = false;
|
|
||||||
this.wonReward = null;
|
|
||||||
this.prizeList = [];
|
|
||||||
this.animationCompleted = false;
|
|
||||||
this.cdr.detectChanges();
|
|
||||||
}
|
|
||||||
|
|
||||||
generateCasePrizes(wonReward: Reward): void {
|
|
||||||
if (!this.lootbox) return;
|
|
||||||
|
|
||||||
const prizeCount = 120;
|
|
||||||
const winningPosition = Math.floor(prizeCount / 2);
|
|
||||||
const possibleRewards = this.lootbox.rewards;
|
|
||||||
const items: Reward[] = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < prizeCount; i++) {
|
|
||||||
if (i === winningPosition) {
|
|
||||||
items.push({ ...wonReward });
|
|
||||||
} else {
|
|
||||||
items.push(this.getWeightedRandomReward(possibleRewards));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.prizeList = items;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.animationCompleted = true;
|
|
||||||
this.cdr.detectChanges();
|
|
||||||
}, 10000);
|
|
||||||
}
|
|
||||||
|
|
||||||
getWeightedRandomReward(rewards: Reward[]): Reward {
|
|
||||||
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 { ...rewards[0] };
|
|
||||||
}
|
|
||||||
|
|
||||||
openAgain(): void {
|
|
||||||
this.resetState();
|
|
||||||
this.openLootbox();
|
|
||||||
}
|
|
||||||
|
|
||||||
getBoxImage(id: number): string {
|
|
||||||
return `/images/${id}-box.png`;
|
|
||||||
}
|
|
||||||
|
|
||||||
goBack(): void {
|
|
||||||
this.router.navigate(['/game/lootboxes']);
|
|
||||||
}
|
|
||||||
|
|
||||||
isWonReward(reward: Reward): boolean {
|
|
||||||
if (!this.wonReward || !this.prizeList.length) return false;
|
|
||||||
|
|
||||||
const middleIndex = Math.floor(this.prizeList.length / 2);
|
|
||||||
return this.prizeList.indexOf(reward) === middleIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
getRewardRarityClass(reward: Reward): string {
|
|
||||||
if (!reward) return 'text-common';
|
|
||||||
|
|
||||||
const probability = reward.probability;
|
|
||||||
|
|
||||||
if (probability < 0.01) return 'text-mythic';
|
|
||||||
if (probability < 0.05) return 'text-legendary';
|
|
||||||
if (probability < 0.1) return 'text-epic';
|
|
||||||
if (probability < 0.2) return 'text-rare';
|
|
||||||
if (probability < 0.4) return 'text-uncommon';
|
|
||||||
return 'text-common';
|
|
||||||
}
|
|
||||||
|
|
||||||
getRewardClass(): string {
|
|
||||||
if (!this.wonReward || !this.lootbox) return '';
|
|
||||||
return this.wonReward.value > (this.lootbox.price || 0) ? 'text-emerald' : 'text-accent-red';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
.loader {
|
|
||||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 50%;
|
|
||||||
border-top: 4px solid #fff;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
transition:
|
|
||||||
transform 0.3s ease,
|
|
||||||
box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
<app-navbar></app-navbar>
|
|
||||||
<div class="container mx-auto px-4 py-6">
|
|
||||||
<h1 class="text-3xl font-bold text-white mb-6">Lootboxen</h1>
|
|
||||||
|
|
||||||
<div style="color: lime">
|
|
||||||
isLoading: {{ isLoading }} | error: {{ error }} | lootboxes: {{ lootboxes.length }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div *ngIf="isLoading" class="flex justify-center">
|
|
||||||
<div class="loader"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div *ngIf="error" class="bg-red-500 text-white p-4 rounded mb-6">
|
|
||||||
{{ error }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div *ngIf="!isLoading && !error" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
<div
|
|
||||||
*ngFor="let lootbox of lootboxes"
|
|
||||||
class="card bg-deep-blue-light rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"
|
|
||||||
>
|
|
||||||
<div class="relative">
|
|
||||||
<img
|
|
||||||
[src]="getBoxImage(lootbox.id)"
|
|
||||||
[alt]="lootbox.name"
|
|
||||||
class="w-full h-48 object-cover"
|
|
||||||
/>
|
|
||||||
<div class="absolute top-2 right-2 bg-deep-blue px-2 py-1 rounded-full text-white">
|
|
||||||
{{ lootbox.price | currency: 'EUR' }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-4">
|
|
||||||
<h2 class="text-xl font-bold text-white mb-2">{{ lootbox.name }}</h2>
|
|
||||||
|
|
||||||
<div class="mb-4">
|
|
||||||
<h3 class="text-lg font-semibold text-white mb-2">Mögliche Gewinne:</h3>
|
|
||||||
<ul class="space-y-2">
|
|
||||||
<li *ngFor="let reward of lootbox.rewards" class="flex justify-between">
|
|
||||||
<span [ngClass]="getRarityClass(reward.probability)">{{
|
|
||||||
reward.value | currency: 'EUR'
|
|
||||||
}}</span>
|
|
||||||
<span class="text-white">{{ formatProbability(reward.probability) }}</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-4">
|
|
||||||
<button
|
|
||||||
(click)="openLootbox(lootbox.id)"
|
|
||||||
class="button-primary w-full py-2 rounded font-semibold"
|
|
||||||
>
|
|
||||||
Öffnen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="px-4 pb-4">
|
|
||||||
<div class="text-sm text-text-secondary">
|
|
||||||
<p>Fairness garantiert - Alle Ergebnisse werden transparent berechnet.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,139 +0,0 @@
|
||||||
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
|
|
||||||
import { CommonModule } from '@angular/common';
|
|
||||||
import { NavbarComponent } from '@shared/components/navbar/navbar.component';
|
|
||||||
import { LootboxService } from '../services/lootbox.service';
|
|
||||||
import { LootBox } from 'app/model/LootBox';
|
|
||||||
import { Router } from '@angular/router';
|
|
||||||
import { timeout } from 'rxjs';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-lootbox-selection',
|
|
||||||
standalone: true,
|
|
||||||
imports: [CommonModule, NavbarComponent],
|
|
||||||
templateUrl: './lootbox-selection.component.html',
|
|
||||||
styleUrls: ['./lootbox-selection.component.css'],
|
|
||||||
})
|
|
||||||
export default class LootboxSelectionComponent implements OnInit {
|
|
||||||
lootboxes: LootBox[] = [];
|
|
||||||
isLoading = true;
|
|
||||||
error = '';
|
|
||||||
|
|
||||||
// Fallback data in case the API call fails
|
|
||||||
fallbackLootboxes: LootBox[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'Basic LootBox',
|
|
||||||
price: 2.0,
|
|
||||||
rewards: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
value: 0.5,
|
|
||||||
probability: 0.7,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
value: 5.0,
|
|
||||||
probability: 0.3,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'Premium LootBox',
|
|
||||||
price: 5.0,
|
|
||||||
rewards: [
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
value: 2.0,
|
|
||||||
probability: 0.6,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
value: 5.0,
|
|
||||||
probability: 0.3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
value: 15.0,
|
|
||||||
probability: 0.1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'Legendäre LootBox',
|
|
||||||
price: 15.0,
|
|
||||||
rewards: [
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
value: 2.0,
|
|
||||||
probability: 0.6,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
value: 5.0,
|
|
||||||
probability: 0.3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
value: 15.0,
|
|
||||||
probability: 0.1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private lootboxService: LootboxService,
|
|
||||||
private router: Router,
|
|
||||||
private cdr: ChangeDetectorRef
|
|
||||||
) {}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
this.loadLootboxes();
|
|
||||||
}
|
|
||||||
|
|
||||||
loadLootboxes(): void {
|
|
||||||
this.isLoading = true;
|
|
||||||
this.lootboxService
|
|
||||||
.getAllLootBoxes()
|
|
||||||
.pipe(timeout(5000))
|
|
||||||
.subscribe({
|
|
||||||
next: (data) => {
|
|
||||||
console.log('Received lootboxes:', data);
|
|
||||||
this.lootboxes = data;
|
|
||||||
this.isLoading = false;
|
|
||||||
this.cdr.detectChanges();
|
|
||||||
},
|
|
||||||
error: (err) => {
|
|
||||||
this.error = 'Konnte keine Verbindung zum Backend herstellen. Zeige Demo-Daten.';
|
|
||||||
this.lootboxes = this.fallbackLootboxes;
|
|
||||||
this.isLoading = false;
|
|
||||||
this.cdr.detectChanges();
|
|
||||||
console.error('Failed to load lootboxes:', err);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
getBoxImage(id: number): string {
|
|
||||||
return `/images/${id}-box.png`;
|
|
||||||
}
|
|
||||||
|
|
||||||
openLootbox(lootboxId: number): void {
|
|
||||||
this.router.navigate(['/game/lootboxes/open', lootboxId]);
|
|
||||||
}
|
|
||||||
|
|
||||||
getRarityClass(probability: number): string {
|
|
||||||
if (probability <= 0.1) {
|
|
||||||
return 'text-yellow-400'; // Legendary
|
|
||||||
} else if (probability <= 0.3) {
|
|
||||||
return 'text-purple-400'; // Rare
|
|
||||||
} else {
|
|
||||||
return 'text-blue-400'; // Common
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
formatProbability(probability: number): string {
|
|
||||||
return (probability * 100).toFixed(0) + '%';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
import { Injectable, inject } from '@angular/core';
|
|
||||||
import { HttpClient } from '@angular/common/http';
|
|
||||||
import { Observable, catchError } from 'rxjs';
|
|
||||||
import { LootBox, Reward } from 'app/model/LootBox';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root',
|
|
||||||
})
|
|
||||||
export class LootboxService {
|
|
||||||
private http = inject(HttpClient);
|
|
||||||
|
|
||||||
getAllLootBoxes(): Observable<LootBox[]> {
|
|
||||||
return this.http.get<LootBox[]>('/backend/lootboxes', { responseType: 'json' }).pipe(
|
|
||||||
catchError((error) => {
|
|
||||||
console.error('Get lootboxes error:', error);
|
|
||||||
throw error;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
purchaseLootBox(lootBoxId: number): Observable<Reward> {
|
|
||||||
return this.http
|
|
||||||
.post<Reward>(`/backend/lootboxes/${lootBoxId}`, {}, { responseType: 'json' })
|
|
||||||
.pipe(
|
|
||||||
catchError((error) => {
|
|
||||||
console.error('Purchase lootbox error:', error);
|
|
||||||
throw error;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
export interface Reward {
|
|
||||||
id: number;
|
|
||||||
value: number;
|
|
||||||
probability: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LootBox {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
price: number;
|
|
||||||
rewards: Reward[];
|
|
||||||
}
|
|
||||||
Reference in a new issue