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

3
frontend/src/app/app.routes.ts
View file

@ -28,7 +28,8 @@ export const routes: Routes = [
},
{
path: 'game/lootboxes',
loadComponent: () => import('./feature/lootboxes/lootbox-selection/lootbox-selection.component'),
loadComponent: () =>
import('./feature/lootboxes/lootbox-selection/lootbox-selection.component'),
canActivate: [authGuard],
},
{

4
frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.css
View file

@ -308,7 +308,9 @@ body {
.animation-fade {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
transition:
opacity 0.5s ease-out,
transform 0.5s ease-out;
transition-delay: 0.5s;
}

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

@ -15,9 +15,13 @@
<div class="lg:col-span-3">
<div class="card bg-deep-blue-light rounded-lg overflow-hidden shadow-lg">
<div class="relative" *ngIf="!isOpen">
<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>
@ -27,7 +31,8 @@
<div *ngIf="!isOpening && !isOpen" class="mb-6">
<button
(click)="openLootbox()"
class="button-primary w-full py-3 text-lg font-semibold rounded">
class="button-primary w-full py-3 text-lg font-semibold rounded"
>
Öffnen
</button>
</div>
@ -38,8 +43,7 @@
</div>
<div *ngIf="isOpen && !isOpening" class="space-y-6">
<div class="text-center mb-8 animation-fade"
[class.visible]="animationCompleted">
<div class="text-center mb-8 animation-fade" [class.visible]="animationCompleted">
<h2 class="text-xl font-bold text-white mb-2">Dein Gewinn:</h2>
<div class="text-3xl font-bold" [ngClass]="getRewardClass()">
{{ wonReward?.value | currency: 'EUR' }}
@ -47,7 +51,10 @@
</div>
<div class="relative w-full overflow-hidden bg-deep-blue rounded-lg p-4 h-32 mb-6">
<div class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-white z-10 transform -translate-x-0" style="margin-left: 0px;"></div>
<div
class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-white z-10 transform -translate-x-0"
style="margin-left: 0px"
></div>
<div class="relative h-full flex items-center overflow-hidden">
<div class="flex case-items">
@ -57,9 +64,11 @@
[class.case-item-won]="isWonReward(reward) && animationCompleted"
[id]="isWonReward(reward) ? 'winning-item' : ''"
>
<div class="case-item-inner"
<div
class="case-item-inner"
[class.winning-prize]="isWonReward(reward)"
[class.highlight]="isWonReward(reward) && animationCompleted">
[class.highlight]="isWonReward(reward) && animationCompleted"
>
<div class="amount" [ngClass]="getRewardRarityClass(reward)">
{{ reward.value | currency: 'EUR' }}
</div>
@ -72,12 +81,11 @@
</div>
</div>
<div class="flex justify-center gap-4 mt-8 animation-fade"
[class.visible]="animationCompleted">
<button
(click)="openAgain()"
class="button-primary px-6 py-2 font-semibold rounded"
<div
class="flex justify-center gap-4 mt-8 animation-fade"
[class.visible]="animationCompleted"
>
<button (click)="openAgain()" class="button-primary px-6 py-2 font-semibold rounded">
Nochmal Öffnen
</button>
<button
@ -103,12 +111,17 @@
<h3 class="text-lg font-semibold text-white mb-4">Mögliche Gewinne:</h3>
<ul class="space-y-3">
<li *ngFor="let reward of lootbox.rewards" class="flex justify-between">
<span [ngClass]="getRewardRarityClass(reward)">{{ reward.value | currency:'EUR' }}</span>
<span [ngClass]="getRewardRarityClass(reward)">{{
reward.value | currency: 'EUR'
}}</span>
<span class="text-white">{{ reward.probability * 100 | number: '1.0-0' }}%</span>
</li>
</ul>
<div *ngIf="isOpen && wonReward && animationCompleted" class="mt-6 pt-6 border-t border-deep-blue-contrast">
<div
*ngIf="isOpen && wonReward && animationCompleted"
class="mt-6 pt-6 border-t border-deep-blue-contrast"
>
<h3 class="text-lg font-semibold text-white mb-4">Gewinn-Details:</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
@ -121,8 +134,12 @@
</div>
<div class="flex justify-between items-center">
<span class="text-text-secondary">Profit:</span>
<span [ngClass]="wonReward.value > (lootbox.price || 0) ? 'text-emerald' : 'text-accent-red'">
{{ (wonReward.value - (lootbox.price || 0)) | currency: 'EUR' }}
<span
[ngClass]="
wonReward.value > (lootbox.price || 0) ? 'text-emerald' : 'text-accent-red'
"
>
{{ wonReward.value - (lootbox.price || 0) | currency: 'EUR' }}
</span>
</div>
</div>

9
frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.ts
View file

@ -102,7 +102,7 @@ export default class LootboxOpeningComponent {
for (let i = 0; i < prizeCount; i++) {
if (i === winningPosition) {
items.push({...wonReward});
items.push({ ...wonReward });
} else {
items.push(this.getWeightedRandomReward(possibleRewards));
}
@ -158,9 +158,9 @@ export default class LootboxOpeningComponent {
if (probability < 0.01) return 'text-mythic';
if (probability < 0.05) return 'text-legendary';
if (probability < 0.10) return 'text-epic';
if (probability < 0.20) return 'text-rare';
if (probability < 0.40) return 'text-uncommon';
if (probability < 0.1) return 'text-epic';
if (probability < 0.2) return 'text-rare';
if (probability < 0.4) return 'text-uncommon';
return 'text-common';
}
@ -169,4 +169,3 @@ export default class LootboxOpeningComponent {
return this.wonReward.value > (this.lootbox.price || 0) ? 'text-emerald' : 'text-accent-red';
}
}

12
frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.css
View file

@ -8,12 +8,18 @@
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.card:hover {

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

@ -2,7 +2,9 @@
<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>
@ -13,11 +15,18 @@
</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>
@ -28,7 +37,9 @@
<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>
@ -37,7 +48,8 @@
<div class="mt-4">
<button
(click)="openLootbox(lootbox.id)"
class="button-primary w-full py-2 rounded font-semibold">
class="button-primary w-full py-2 rounded font-semibold"
>
Öffnen
</button>
</div>

75
frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.ts
View file

@ -11,7 +11,7 @@ import { timeout } from 'rxjs';
standalone: true,
imports: [CommonModule, NavbarComponent],
templateUrl: './lootbox-selection.component.html',
styleUrls: ['./lootbox-selection.component.css']
styleUrls: ['./lootbox-selection.component.css'],
})
export default class LootboxSelectionComponent implements OnInit {
lootboxes: LootBox[] = [];
@ -22,68 +22,72 @@ export default class LootboxSelectionComponent implements OnInit {
fallbackLootboxes: LootBox[] = [
{
id: 1,
name: "Basic LootBox",
price: 2.00,
name: 'Basic LootBox',
price: 2.0,
rewards: [
{
id: 1,
value: 0.50,
probability: 0.70
value: 0.5,
probability: 0.7,
},
{
id: 5,
value: 5.00,
probability: 0.30
}
]
value: 5.0,
probability: 0.3,
},
],
},
{
id: 2,
name: "Premium LootBox",
price: 5.00,
name: 'Premium LootBox',
price: 5.0,
rewards: [
{
id: 4,
value: 2.00,
probability: 0.60
value: 2.0,
probability: 0.6,
},
{
id: 5,
value: 5.00,
probability: 0.30
value: 5.0,
probability: 0.3,
},
{
id: 6,
value: 15.00,
probability: 0.10
}
]
value: 15.0,
probability: 0.1,
},
],
},
{
id: 3,
name: "Legendäre LootBox",
price: 15.00,
name: 'Legendäre LootBox',
price: 15.0,
rewards: [
{
id: 4,
value: 2.00,
probability: 0.60
value: 2.0,
probability: 0.6,
},
{
id: 5,
value: 5.00,
probability: 0.30
value: 5.0,
probability: 0.3,
},
{
id: 6,
value: 15.00,
probability: 0.10
}
]
}
value: 15.0,
probability: 0.1,
},
],
},
];
constructor(private lootboxService: LootboxService, private router: Router, private cdr: ChangeDetectorRef) {}
constructor(
private lootboxService: LootboxService,
private router: Router,
private cdr: ChangeDetectorRef
) {}
ngOnInit(): void {
this.loadLootboxes();
@ -91,9 +95,10 @@ export default class LootboxSelectionComponent implements OnInit {
loadLootboxes(): void {
this.isLoading = true;
this.lootboxService.getAllLootBoxes().pipe(
timeout(5000)
).subscribe({
this.lootboxService
.getAllLootBoxes()
.pipe(timeout(5000))
.subscribe({
next: (data) => {
console.log('Received lootboxes:', data);
this.lootboxes = data;
@ -106,7 +111,7 @@ export default class LootboxSelectionComponent implements OnInit {
this.isLoading = false;
this.cdr.detectChanges();
console.error('Failed to load lootboxes:', err);
}
},
});
}

4
frontend/src/app/feature/lootboxes/services/lootbox.service.ts
View file

@ -10,9 +10,7 @@ export class LootboxService {
private http = inject(HttpClient);
getAllLootBoxes(): Observable<LootBox[]> {
return this.http
.get<LootBox[]>('/backend/lootboxes', { responseType: 'json' })
.pipe(
return this.http.get<LootBox[]>('/backend/lootboxes', { responseType: 'json' }).pipe(
catchError((error) => {
console.error('Get lootboxes error:', error);
throw error;