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,22 @@
|
|||
.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,53 +1,51 @@
|
|||
<div class="lootbox-container">
|
||||
<header class="lootbox-header">
|
||||
<h1>Lootboxen</h1>
|
||||
<div class="category-filters">
|
||||
<button
|
||||
class="category-btn"
|
||||
[class.active]="selectedCategory === null"
|
||||
(click)="filterByCategory(null)">
|
||||
Alle
|
||||
</button>
|
||||
<button
|
||||
*ngFor="let category of categories"
|
||||
class="category-btn"
|
||||
[class.active]="selectedCategory === category.id"
|
||||
(click)="filterByCategory(category.id)">
|
||||
{{ category.name }}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fairness-info">
|
||||
<p>Alle unsere Lootboxen unterliegen einem verifizierbaren Fairness-System.
|
||||
Die Gewinnchancen sind transparent und werden von unabhängigen Prüfern bestätigt.</p>
|
||||
<a routerLink="/lootboxes/fairness" class="info-link">Mehr zur Fairness-Garantie</a>
|
||||
<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 class="lootbox-grid">
|
||||
<div *ngFor="let lootbox of filteredLootboxes" class="lootbox-card-wrapper">
|
||||
<div class="lootbox-card">
|
||||
<div class="lootbox-image-container">
|
||||
<img [src]="lootbox.image" [alt]="lootbox.name" class="lootbox-image">
|
||||
<div class="lootbox-category" [ngClass]="lootbox.category">{{ lootbox.category | titlecase }}</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 class="lootbox-info">
|
||||
<h3 class="lootbox-name">{{ lootbox.name }}</h3>
|
||||
<div class="lootbox-details">
|
||||
<div class="detail-item">
|
||||
<span class="label">Preis:</span>
|
||||
<span class="value">{{ lootbox.price }}€</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Wahrscheinlichkeit:</span>
|
||||
<span class="value">{{ lootbox.chance }}%</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Höchster Preis:</span>
|
||||
<span class="value">{{ lootbox.maxPrize }}€</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="kaufen-btn" routerLink="/lootboxes/open/{{ lootbox.id }}">Kaufen</button>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,188 +0,0 @@
|
|||
|
||||
.lootbox-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.lootbox-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: #f8f8f8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.category-filters {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
|
||||
.category-btn {
|
||||
background-color: #2a2a2a;
|
||||
border: none;
|
||||
color: #aaa;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a3a3a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #4a4a4a;
|
||||
color: #fff;
|
||||
box-shadow: 0 0 0 2px rgba(#ffcc00, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fairness-info {
|
||||
background-color: rgba(#ffcc00, 0.1);
|
||||
border-left: 4px solid #ffcc00;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 4px;
|
||||
|
||||
p {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #ddd;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.info-link {
|
||||
color: #ffcc00;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lootbox-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.lootbox-card {
|
||||
background: linear-gradient(135deg, #2a2a2a 0%, #1c1c1c 100%);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.lootbox-image-container {
|
||||
position: relative;
|
||||
padding-bottom: 75%;
|
||||
overflow: hidden;
|
||||
|
||||
.lootbox-image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.lootbox-category {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.common {
|
||||
background-color: #6b6b6b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.rare {
|
||||
background-color: #4b69ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.legendary {
|
||||
background-color: #d32ce6;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .lootbox-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.lootbox-info {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.lootbox-name {
|
||||
font-size: 1.25rem;
|
||||
margin: 0 0 1rem 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lootbox-details {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.label {
|
||||
color: #aaa;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kaufen-btn {
|
||||
width: 100%;
|
||||
background-color: #ffcc00;
|
||||
color: #000;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem 0;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:hover {
|
||||
background-color: #ffd633;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +1,134 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
interface Lootbox {
|
||||
id: string;
|
||||
name: string;
|
||||
category: 'common' | 'rare' | 'legendary';
|
||||
price: number;
|
||||
image: string;
|
||||
chance: number;
|
||||
maxPrize: number;
|
||||
}
|
||||
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, RouterModule],
|
||||
imports: [CommonModule, NavbarComponent],
|
||||
templateUrl: './lootbox-selection.component.html',
|
||||
styleUrl: './lootbox-selection.component.scss'
|
||||
styleUrls: ['./lootbox-selection.component.css']
|
||||
})
|
||||
export default class LootboxSelectionComponent {
|
||||
lootboxes: Lootbox[] = [
|
||||
export default class LootboxSelectionComponent implements OnInit {
|
||||
lootboxes: LootBox[] = [];
|
||||
isLoading = true;
|
||||
error = '';
|
||||
|
||||
// Fallback data in case the API call fails
|
||||
fallbackLootboxes: LootBox[] = [
|
||||
{
|
||||
id: 'common-box',
|
||||
name: 'Gewöhnliche Box',
|
||||
category: 'common',
|
||||
price: 5,
|
||||
image: '/assets/images/lootboxes/common-box.png',
|
||||
chance: 7,
|
||||
maxPrize: 50
|
||||
id: 1,
|
||||
name: "Basic LootBox",
|
||||
price: 2.00,
|
||||
rewards: [
|
||||
{
|
||||
id: 1,
|
||||
value: 0.50,
|
||||
probability: 0.70
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: 5.00,
|
||||
probability: 0.30
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'rare-box',
|
||||
name: 'Seltene Box',
|
||||
category: 'rare',
|
||||
price: 20,
|
||||
image: '/assets/images/lootboxes/rare-box.png',
|
||||
chance: 3.5,
|
||||
maxPrize: 200
|
||||
id: 2,
|
||||
name: "Premium LootBox",
|
||||
price: 5.00,
|
||||
rewards: [
|
||||
{
|
||||
id: 4,
|
||||
value: 2.00,
|
||||
probability: 0.60
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: 5.00,
|
||||
probability: 0.30
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: 15.00,
|
||||
probability: 0.10
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'legendary-box',
|
||||
name: 'Legendäre Box',
|
||||
category: 'legendary',
|
||||
price: 50,
|
||||
image: '/assets/images/lootboxes/legendary-box.png',
|
||||
chance: 1,
|
||||
maxPrize: 1000
|
||||
id: 3,
|
||||
name: "Legendäre LootBox",
|
||||
price: 15.00,
|
||||
rewards: [
|
||||
{
|
||||
id: 4,
|
||||
value: 2.00,
|
||||
probability: 0.60
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: 5.00,
|
||||
probability: 0.30
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: 15.00,
|
||||
probability: 0.10
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
categories = [
|
||||
{ id: 'common', name: 'Gewöhnlich' },
|
||||
{ id: 'rare', name: 'Selten' },
|
||||
{ id: 'legendary', name: 'Legendär' }
|
||||
];
|
||||
constructor(private lootboxService: LootboxService, private router: Router, private cdr: ChangeDetectorRef) {}
|
||||
|
||||
selectedCategory: string | null = null;
|
||||
|
||||
filterByCategory(category: string | null): void {
|
||||
this.selectedCategory = category;
|
||||
ngOnInit(): void {
|
||||
this.loadLootboxes();
|
||||
}
|
||||
|
||||
get filteredLootboxes(): Lootbox[] {
|
||||
if (!this.selectedCategory) {
|
||||
return this.lootboxes;
|
||||
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
|
||||
}
|
||||
return this.lootboxes.filter(box => box.category === this.selectedCategory);
|
||||
}
|
||||
|
||||
formatProbability(probability: number): string {
|
||||
return (probability * 100).toFixed(0) + '%';
|
||||
}
|
||||
}
|
||||
Reference in a new issue