SZUT/casino
SZUT/casino
Archived
3
1
Fork 0
Code Issues Pull requests 2 Releases 162 Packages 2 Wiki Activity Actions

feat(lootboxes): add lootbox opening feature and images

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-04-23 13:17:44 +02:00
commit 8e27c9c7c3
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
15 changed files with 536 additions and 327 deletions
Download patch file Download diff file Expand all files Collapse all files

94
frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.html
View file

@ -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>