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

style: format code for better readability and consistency
All checks were successful
CI / Get Changed Files (pull_request) Successful in 10s
Details
CI / Docker backend validation (pull_request) Successful in 17s
Details
CI / Docker frontend validation (pull_request) Successful in 48s
Details
CI / Checkstyle Main (pull_request) Has been skipped
Details
CI / oxlint (pull_request) Successful in 27s
Details
CI / eslint (pull_request) Successful in 31s
Details
CI / prettier (pull_request) Successful in 36s
Details
CI / test-build (pull_request) Successful in 1m1s
Details

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-05-07 14:57:24 +02:00
commit c7f26c4df3
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
9 changed files with 175 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,48 +1,60 @@
<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 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
*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">
<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' }}
{{ 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 [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">
<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>
@ -50,4 +62,4 @@
</div>
</div>
</div>
</div>
</div>