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

50
frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.html Normal file
View file

@ -0,0 +1,50 @@
<app-navbar></app-navbar>
<div class="flex flex-col items-center min-h-screen bg-gradient-to-b from-[#181c2a] to-[#232c43] py-10">
<div *ngIf="isLoading" class="flex flex-col items-center justify-center h-96">
<div class="loader mb-4"></div>
<div class="text-white text-lg">Lade Lootbox...</div>
</div>
<ng-container *ngIf="!isLoading && lootbox">
<h1 class="text-3xl font-bold text-white mb-2">{{ lootbox.name }}</h1>
<div class="text-lg text-blue-300 mb-8">Preis: {{ lootbox.price | currency:'EUR' }}</div>
<div class="relative w-[900px] max-w-full mb-8">
<div class="case-strip-outer">
<div class="case-strip-inner" [ngStyle]="{ transform: 'translateX(' + stripTranslateX + 'px)', transition: stripTransition }">
<div *ngFor="let reward of strip" class="case-strip-reward" [ngClass]="getRarityClass(reward.probability)">
<div class="text-xl font-bold">{{ reward.value | currency:'EUR' }}</div>
<div class="text-xs opacity-70">{{ (reward.probability * 100) | number:'1.0-0' }}%</div>
</div>
</div>
<div class="case-strip-marker"></div>
</div>
</div>
<div *ngIf="!isOpening && !wonReward" class="flex flex-col items-center">
<button (click)="openLootbox()" class="open-btn">Öffnen</button>
<div class="mt-6 text-white/70 text-sm">Mögliche Gewinne:</div>
<div class="flex flex-wrap gap-4 justify-center mt-2">
<div *ngFor="let reward of lootbox.rewards" class="px-4 py-2 rounded bg-[#232c43] text-white border border-[#2d3748]">
<span [ngClass]="getRarityClass(reward.probability)">{{ reward.value | currency:'EUR' }}</span>
<span class="ml-2 text-xs text-white/60">({{ (reward.probability * 100) | number:'1.0-0' }}%)</span>
</div>
</div>
</div>
<div *ngIf="isOpening" class="flex flex-col items-center">
<div class="loader mb-4"></div>
<div class="text-white text-lg">Öffne Lootbox...</div>
</div>
<div *ngIf="wonReward && !isOpening" class="flex flex-col items-center mt-8">
<div class="text-2xl font-bold text-emerald mb-2">Glückwunsch!</div>
<div class="text-4xl font-bold text-white mb-4">{{ wonReward.value | currency:'EUR' }}</div>
<div class="text-white/80 mb-6">wurde deinem Konto gutgeschrieben</div>
<div class="flex gap-4">
<button (click)="openAgain()" class="open-btn">Nochmal öffnen</button>
<button (click)="goBack()" class="bg-[#232c43] hover:bg-[#2d3748] text-white px-6 py-2 rounded font-semibold transition">Zurück zur Übersicht</button>
</div>
</div>
</ng-container>
</div>