Jan-Marlon Leibl
d336ca77d3
All checks were successful
CI / Get Changed Files (pull_request) Successful in 12s
CI / Checkstyle Main (pull_request) Has been skipped
CI / Docker backend validation (pull_request) Successful in 16s
CI / eslint (pull_request) Successful in 35s
CI / oxlint (pull_request) Successful in 29s
CI / Docker frontend validation (pull_request) Successful in 53s
CI / prettier (pull_request) Successful in 28s
CI / test-build (pull_request) Successful in 33s
61 lines
2 KiB
HTML
61 lines
2 KiB
HTML
<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 *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>
|