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 selection feature and routes

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-04-23 09:47:32 +02:00
commit b58ceeeaab
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
8 changed files with 362 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,55 @@
<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>
</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>
<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>
</div>
</div>
</div>