-
-
-
-
Lootboxen
-
-
-
-
-
-
Alle unsere Lootboxen unterliegen einem verifizierbaren Fairness-System. - Die Gewinnchancen sind transparent und werden von unabhängigen Prüfern bestätigt.
- Mehr zur Fairness-Garantie +
+
Lootboxen
+ +isLoading: {{ isLoading }} | error: {{ error }} | lootboxes: {{ lootboxes?.length }}
+
+
+
-
-
-
-
-
- ![]()
-
{{ lootbox.category | titlecase }}
+
+
+ {{ error }}
+
+
+
+
+ {
+ return this.http
+ .get('/backend/lootboxes', { responseType: 'json' })
+ .pipe(
+ catchError((error) => {
+ console.error('Get lootboxes error:', error);
+ throw error;
+ })
+ );
+ }
+
+ purchaseLootBox(lootBoxId: number): Observable {
+ return this.http
+ .post(`/backend/lootboxes/${lootBoxId}`, {}, { responseType: 'json' })
+ .pipe(
+ catchError((error) => {
+ console.error('Purchase lootbox error:', error);
+ throw error;
+ })
+ );
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/app/model/LootBox.ts b/frontend/src/app/model/LootBox.ts
new file mode 100644
index 0000000..f1547b1
--- /dev/null
+++ b/frontend/src/app/model/LootBox.ts
@@ -0,0 +1,12 @@
+export interface Reward {
+ id: number;
+ value: number;
+ probability: number;
+}
+
+export interface LootBox {
+ id: number;
+ name: string;
+ price: number;
+ rewards: Reward[];
+}
\ No newline at end of file
+ ![]()
+
diff --git a/frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.scss b/frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.scss
deleted file mode 100644
index 879dccc..0000000
--- a/frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.scss
+++ /dev/null
@@ -1,188 +0,0 @@
-
-.lootbox-container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 2rem;
- background-color: #1a1a1a;
- color: #fff;
- font-family: 'Inter', sans-serif;
-}
-
-.lootbox-header {
- text-align: center;
- margin-bottom: 2rem;
-
- h1 {
- font-size: 2.5rem;
- font-weight: 700;
- margin-bottom: 1rem;
- color: #f8f8f8;
- text-transform: uppercase;
- letter-spacing: 2px;
- }
-}
-
-.category-filters {
- display: flex;
- justify-content: center;
- gap: 1rem;
- margin: 1.5rem 0;
-
- .category-btn {
- background-color: #2a2a2a;
- border: none;
- color: #aaa;
- padding: 0.5rem 1.5rem;
- border-radius: 4px;
- cursor: pointer;
- transition: all 0.2s ease;
- font-weight: 500;
-
- &:hover {
- background-color: #3a3a3a;
- color: #fff;
- }
-
- &.active {
- background-color: #4a4a4a;
- color: #fff;
- box-shadow: 0 0 0 2px rgba(#ffcc00, 0.5);
- }
- }
-}
-
-.fairness-info {
- background-color: rgba(#ffcc00, 0.1);
- border-left: 4px solid #ffcc00;
- padding: 1rem;
- margin-bottom: 2rem;
- border-radius: 4px;
-
- p {
- margin: 0 0 0.5rem 0;
- color: #ddd;
- font-size: 0.9rem;
- }
-
- .info-link {
- color: #ffcc00;
- text-decoration: none;
- font-size: 0.9rem;
- font-weight: 500;
-
- &:hover {
- text-decoration: underline;
- }
- }
-}
-
-.lootbox-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 2rem;
-}
-
-.lootbox-card {
- background: linear-gradient(135deg, #2a2a2a 0%, #1c1c1c 100%);
- border-radius: 8px;
- overflow: hidden;
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
- transition: transform 0.3s ease, box-shadow 0.3s ease;
-
- &:hover {
- transform: translateY(-5px);
- box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
- }
-}
-
-.lootbox-image-container {
- position: relative;
- padding-bottom: 75%;
- overflow: hidden;
-
- .lootbox-image {
- position: absolute;
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: transform 0.3s ease;
- }
-
- .lootbox-category {
- position: absolute;
- top: 10px;
- right: 10px;
- padding: 5px 10px;
- border-radius: 4px;
- font-size: 0.8rem;
- font-weight: 600;
- text-transform: uppercase;
-
- &.common {
- background-color: #6b6b6b;
- color: #fff;
- }
-
- &.rare {
- background-color: #4b69ff;
- color: #fff;
- }
-
- &.legendary {
- background-color: #d32ce6;
- color: #fff;
- }
- }
-
- &:hover .lootbox-image {
- transform: scale(1.05);
- }
-}
-
-.lootbox-info {
- padding: 1.5rem;
-}
-
-.lootbox-name {
- font-size: 1.25rem;
- margin: 0 0 1rem 0;
- font-weight: 600;
-}
-
-.lootbox-details {
- margin-bottom: 1.5rem;
-
- .detail-item {
- display: flex;
- justify-content: space-between;
- margin-bottom: 0.5rem;
-
- .label {
- color: #aaa;
- font-size: 0.9rem;
- }
-
- .value {
- font-weight: 600;
- font-size: 0.9rem;
- }
- }
-}
-
-.kaufen-btn {
- width: 100%;
- background-color: #ffcc00;
- color: #000;
- border: none;
- border-radius: 4px;
- padding: 0.75rem 0;
- font-weight: 600;
- cursor: pointer;
- transition: background-color 0.2s ease;
- text-transform: uppercase;
- letter-spacing: 1px;
-
- &:hover {
- background-color: #ffd633;
- }
-}
\ No newline at end of file
diff --git a/frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.ts b/frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.ts
index 43fe751..1382b23 100644
--- a/frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.ts
+++ b/frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.ts
@@ -1,71 +1,134 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-
-interface Lootbox {
- id: string;
- name: string;
- category: 'common' | 'rare' | 'legendary';
- price: number;
- image: string;
- chance: number;
- maxPrize: number;
-}
+import { NavbarComponent } from '@shared/components/navbar/navbar.component';
+import { LootboxService } from '../services/lootbox.service';
+import { LootBox } from 'app/model/LootBox';
+import { Router } from '@angular/router';
+import { timeout } from 'rxjs';
@Component({
selector: 'app-lootbox-selection',
standalone: true,
- imports: [CommonModule, RouterModule],
+ imports: [CommonModule, NavbarComponent],
templateUrl: './lootbox-selection.component.html',
- styleUrl: './lootbox-selection.component.scss'
+ styleUrls: ['./lootbox-selection.component.css']
})
-export default class LootboxSelectionComponent {
- lootboxes: Lootbox[] = [
+export default class LootboxSelectionComponent implements OnInit {
+ lootboxes: LootBox[] = [];
+ isLoading = true;
+ error = '';
+
+ // Fallback data in case the API call fails
+ fallbackLootboxes: LootBox[] = [
{
- id: 'common-box',
- name: 'Gewöhnliche Box',
- category: 'common',
- price: 5,
- image: '/assets/images/lootboxes/common-box.png',
- chance: 7,
- maxPrize: 50
+ id: 1,
+ name: "Basic LootBox",
+ price: 2.00,
+ rewards: [
+ {
+ id: 1,
+ value: 0.50,
+ probability: 0.70
+ },
+ {
+ id: 5,
+ value: 5.00,
+ probability: 0.30
+ }
+ ]
},
{
- id: 'rare-box',
- name: 'Seltene Box',
- category: 'rare',
- price: 20,
- image: '/assets/images/lootboxes/rare-box.png',
- chance: 3.5,
- maxPrize: 200
+ id: 2,
+ name: "Premium LootBox",
+ price: 5.00,
+ rewards: [
+ {
+ id: 4,
+ value: 2.00,
+ probability: 0.60
+ },
+ {
+ id: 5,
+ value: 5.00,
+ probability: 0.30
+ },
+ {
+ id: 6,
+ value: 15.00,
+ probability: 0.10
+ }
+ ]
},
{
- id: 'legendary-box',
- name: 'Legendäre Box',
- category: 'legendary',
- price: 50,
- image: '/assets/images/lootboxes/legendary-box.png',
- chance: 1,
- maxPrize: 1000
+ id: 3,
+ name: "Legendäre LootBox",
+ price: 15.00,
+ rewards: [
+ {
+ id: 4,
+ value: 2.00,
+ probability: 0.60
+ },
+ {
+ id: 5,
+ value: 5.00,
+ probability: 0.30
+ },
+ {
+ id: 6,
+ value: 15.00,
+ probability: 0.10
+ }
+ ]
}
];
- categories = [
- { id: 'common', name: 'Gewöhnlich' },
- { id: 'rare', name: 'Selten' },
- { id: 'legendary', name: 'Legendär' }
- ];
+ constructor(private lootboxService: LootboxService, private router: Router, private cdr: ChangeDetectorRef) {}
- selectedCategory: string | null = null;
-
- filterByCategory(category: string | null): void {
- this.selectedCategory = category;
+ ngOnInit(): void {
+ this.loadLootboxes();
}
- get filteredLootboxes(): Lootbox[] {
- if (!this.selectedCategory) {
- return this.lootboxes;
+ loadLootboxes(): void {
+ this.isLoading = true;
+ this.lootboxService.getAllLootBoxes().pipe(
+ timeout(5000)
+ ).subscribe({
+ next: (data) => {
+ console.log('Received lootboxes:', data);
+ this.lootboxes = data;
+ this.isLoading = false;
+ this.cdr.detectChanges();
+ },
+ error: (err) => {
+ this.error = 'Konnte keine Verbindung zum Backend herstellen. Zeige Demo-Daten.';
+ this.lootboxes = this.fallbackLootboxes;
+ this.isLoading = false;
+ this.cdr.detectChanges();
+ console.error('Failed to load lootboxes:', err);
+ }
+ });
+ }
+
+ getBoxImage(id: number): string {
+ return `/images/${id}-box.png`;
+ }
+
+ openLootbox(lootboxId: number): void {
+ this.router.navigate(['/game/lootboxes/open', lootboxId]);
+ }
+
+ getRarityClass(probability: number): string {
+ if (probability <= 0.1) {
+ return 'text-yellow-400'; // Legendary
+ } else if (probability <= 0.3) {
+ return 'text-purple-400'; // Rare
+ } else {
+ return 'text-blue-400'; // Common
}
- return this.lootboxes.filter(box => box.category === this.selectedCategory);
+ }
+
+ formatProbability(probability: number): string {
+ return (probability * 100).toFixed(0) + '%';
}
}
\ No newline at end of file
diff --git a/frontend/src/app/feature/lootboxes/services/lootbox.service.ts b/frontend/src/app/feature/lootboxes/services/lootbox.service.ts
new file mode 100644
index 0000000..040b55d
--- /dev/null
+++ b/frontend/src/app/feature/lootboxes/services/lootbox.service.ts
@@ -0,0 +1,33 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, catchError } from 'rxjs';
+import { LootBox, Reward } from 'app/model/LootBox';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class LootboxService {
+ private http = inject(HttpClient);
+
+ getAllLootBoxes(): Observable
+ {{ lootbox.price | currency:'EUR' }}
-
-
+
+ {{ lootbox.name }}
-
-
-
+
- Preis:
- {{ lootbox.price }}€
-
-
- Wahrscheinlichkeit:
- {{ lootbox.chance }}%
-
-
- Höchster Preis:
- {{ lootbox.maxPrize }}€
-
-
+
+
+ {{ lootbox.name }}
+ +
+
+
+ Mögliche Gewinne:
+-
+
- + {{ reward.value | currency:'EUR' }} + {{ formatProbability(reward.probability) }} + +
+
+
+
+
+
Fairness garantiert - Alle Ergebnisse werden transparent berechnet.