feat(lootboxes): add lootbox selection feature and routes

frontend/src/app/app.routes.ts

@@ -26,4 +26,9 @@ export const routes: Routes = [
     loadComponent: () => import('./feature/game/slots/slots.component'),
     canActivate: [authGuard],
   },
+  {
+    path: 'game/lootboxes',
+    loadComponent: () => import('./feature/lootboxes/lootbox-selection/lootbox-selection.component'),
+    canActivate: [authGuard],
+  },
 ];

frontend/src/app/feature/lootboxes/README.md

@@ -0,0 +1,40 @@
+# Lootboxes Feature
+
+Diese Funktion ermöglicht es Spielern, Lootboxen zu kaufen und zu öffnen.
+
+## Komponenten
+
+- **LootboxSelection**: Zeigt alle verfügbaren Lootboxen an und ermöglicht Filterung nach Kategorien.
+- (Weitere Komponenten werden implementiert)
+
+## Implementierung
+
+### Lootbox-Kategorien
+- Gewöhnlich (Common): Niedrigere Preise, höhere Gewinnchance
+- Selten (Rare): Mittlere Preise, mittlere Gewinnchance
+- Legendär (Legendary): Hohe Preise, niedrige Gewinnchance
+
+### Routen
+- `/lootboxes`: Hauptseite mit Lootbox-Auswahl
+- `/lootboxes/open/:id`: Öffnen einer bestimmten Lootbox
+- `/lootboxes/fairness`: Informationen zur Fairness-Garantie
+
+## Hinweise zur Implementierung
+
+1. **Bilder**: Stelle sicher, dass die korrekten Bilder unter `/assets/images/lootboxes/` vorhanden sind.
+2. **Styling**: Das Styling ist an Counter-Strike-Lootboxen angelehnt.
+3. **Authentifizierung**: Alle Lootbox-Routen sind durch den Auth-Guard geschützt.
+
+## Lootbox-Objekt-Interface
+
+```typescript
+interface Lootbox {
+  id: string;
+  name: string;
+  category: 'common' | 'rare' | 'legendary';
+  price: number;
+  image: string;
+  chance: number;
+  maxPrize: number;
+}
+``` 

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

@@ -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> 

frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.scss

@@ -0,0 +1,188 @@
+
+.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;
+  }
+} 

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

@@ -0,0 +1,71 @@
+import { Component } 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;
+}
+
+@Component({
+  selector: 'app-lootbox-selection',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+  templateUrl: './lootbox-selection.component.html',
+  styleUrl: './lootbox-selection.component.scss'
+})
+export default class LootboxSelectionComponent {
+  lootboxes: Lootbox[] = [
+    {
+      id: 'common-box',
+      name: 'Gewöhnliche Box',
+      category: 'common',
+      price: 5,
+      image: '/assets/images/lootboxes/common-box.png',
+      chance: 7,
+      maxPrize: 50
+    },
+    {
+      id: 'rare-box',
+      name: 'Seltene Box',
+      category: 'rare',
+      price: 20,
+      image: '/assets/images/lootboxes/rare-box.png',
+      chance: 3.5,
+      maxPrize: 200
+    },
+    {
+      id: 'legendary-box',
+      name: 'Legendäre Box',
+      category: 'legendary',
+      price: 50,
+      image: '/assets/images/lootboxes/legendary-box.png',
+      chance: 1,
+      maxPrize: 1000
+    }
+  ];
+
+  categories = [
+    { id: 'common', name: 'Gewöhnlich' },
+    { id: 'rare', name: 'Selten' },
+    { id: 'legendary', name: 'Legendär' }
+  ];
+
+  selectedCategory: string | null = null;
+
+  filterByCategory(category: string | null): void {
+    this.selectedCategory = category;
+  }
+
+  get filteredLootboxes(): Lootbox[] {
+    if (!this.selectedCategory) {
+      return this.lootboxes;
+    }
+    return this.lootboxes.filter(box => box.category === this.selectedCategory);
+  }
+} 

frontend/src/assets/images/lootboxes/common-box.png

@@ -0,0 +1 @@
+ 

frontend/src/assets/images/lootboxes/legendary-box.png

@@ -0,0 +1 @@
+ 

frontend/src/assets/images/lootboxes/rare-box.png

@@ -0,0 +1 @@
+