feat(lootboxes): add lootbox opening feature and images

frontend/src/app/app.routes.ts

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

frontend/src/app/feature/home/home.component.ts

@@ -68,7 +68,7 @@ export default class HomeComponent implements OnInit {
       id: '6',
       name: 'Lootboxen',
       image: '/lootbox.webp',
-      route: '/game/lootbox',
+      route: '/game/lootboxes',
     },
   ];
 

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

@@ -1,40 +0,0 @@
-# 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-opening/lootbox-opening.component.css

@@ -0,0 +1,98 @@
+body {
+  background: linear-gradient(to bottom, #181c2a, #232c43);
+}
+
+.case-strip-outer {
+  position: relative;
+  width: 900px;
+  max-width: 100vw;
+  height: 120px;
+  margin: 0 auto;
+  overflow: hidden;
+  background: #232c43;
+  border-radius: 16px;
+  border: 2px solid #2d3748;
+  box-shadow: 0 4px 32px 0 #000a;
+}
+
+.case-strip-inner {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  will-change: transform;
+}
+
+.case-strip-reward {
+  width: 120px;
+  height: 100px;
+  margin: 0 6px;
+  background: #1a2233;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  border: 2px solid transparent;
+  transition: border-color 0.2s, color 0.2s;
+}
+
+.text-yellow-400 {
+  border-color: #facc15;
+  color: #facc15;
+}
+.text-purple-400 {
+  border-color: #a78bfa;
+  color: #a78bfa;
+}
+.text-blue-400 {
+  border-color: #60a5fa;
+  color: #60a5fa;
+}
+
+.case-strip-marker {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 6px;
+  height: 100%;
+  background: linear-gradient(to bottom, #facc15 60%, #fff0 100%);
+  z-index: 2;
+  border-radius: 3px;
+  box-shadow: 0 0 16px #facc15, 0 0 2px #fff;
+  pointer-events: none;
+}
+
+.open-btn {
+  background: linear-gradient(90deg, #facc15 0%, #a78bfa 100%);
+  color: #232c43;
+  font-size: 1.5rem;
+  font-weight: bold;
+  padding: 0.75rem 2.5rem;
+  border-radius: 999px;
+  border: none;
+  box-shadow: 0 2px 12px #0005;
+  transition: background 0.2s, color 0.2s, transform 0.1s;
+  cursor: pointer;
+}
+.open-btn:hover {
+  background: linear-gradient(90deg, #ffe066 0%, #c4b5fd 100%);
+  color: #181c2a;
+  transform: translateY(-2px) scale(1.04);
+}
+
+.loader {
+  border: 4px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  border-top: 4px solid #facc15;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+} 

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

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

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

@@ -0,0 +1,156 @@
+import { Component, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { LootboxService } from '../services/lootbox.service';
+import { LootBox, Reward } from 'app/model/LootBox';
+import { NavbarComponent } from '@shared/components/navbar/navbar.component';
+
+function shuffle<T>(array: T[]): T[] {
+  const arr = array.slice();
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+  return arr;
+}
+
+@Component({
+  selector: 'app-lootbox-opening',
+  standalone: true,
+  imports: [CommonModule, NavbarComponent],
+  templateUrl: './lootbox-opening.component.html',
+  styleUrls: ['./lootbox-opening.component.css']
+})
+export default class LootboxOpeningComponent {
+  lootbox: LootBox | null = null;
+  isLoading = true;
+  error = '';
+
+  // UI State
+  isOpening = false;
+  wonReward: Reward | null = null;
+  strip: Reward[] = [];
+  stripTranslateX = 0;
+  stripTransition = 'none';
+
+  // Config
+  readonly visibleCount = 7;
+  readonly rewardWidth = 120;
+  readonly stripLength = 200;
+  readonly ticks = 60;
+  readonly minTickMs = 30;
+  readonly maxTickMs = 180;
+  private tickIndex = 0;
+  private stopIndex = 0;
+  private center = Math.floor(this.visibleCount / 2);
+  private animationTimeout: any;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private lootboxService: LootboxService,
+    private cdr: ChangeDetectorRef
+  ) {
+    const idParam = this.route.snapshot.paramMap.get('id');
+    if (!idParam) {
+      this.error = 'Invalid lootbox ID';
+      this.isLoading = false;
+      return;
+    }
+    const lootboxId = parseInt(idParam, 10);
+    this.lootboxService.getAllLootBoxes().subscribe({
+      next: (lootboxes) => {
+        this.lootbox = lootboxes.find(box => box.id === lootboxId) || null;
+        this.isLoading = false;
+        this.cdr.detectChanges();
+      },
+      error: () => {
+        this.error = 'Failed to load lootbox data';
+        this.isLoading = false;
+        this.cdr.detectChanges();
+      }
+    });
+  }
+
+  openLootbox() {
+    if (!this.lootbox || this.isOpening) return;
+    this.isOpening = true;
+    this.wonReward = null;
+    this.stripTransition = 'none';
+    this.stripTranslateX = 0;
+    this.cdr.detectChanges();
+    this.lootboxService.purchaseLootBox(this.lootbox.id).subscribe({
+      next: (reward) => this.startSlidingAnimation(reward),
+      error: () => {
+        const rewards = this.lootbox!.rewards;
+        const fallback = rewards[Math.floor(Math.random() * rewards.length)];
+        this.startSlidingAnimation(fallback);
+      }
+    });
+  }
+
+  private startSlidingAnimation(won: Reward) {
+    // Fill the strip with shuffled rewards, repeat as needed
+    const rewards = this.lootbox!.rewards;
+    let strip: Reward[] = [];
+    while (strip.length < this.stripLength) {
+      strip = strip.concat(shuffle(rewards));
+    }
+    // Place the won reward at the final center position
+    this.center = Math.floor(this.visibleCount / 2);
+    this.stopIndex = this.ticks + this.center;
+    strip[this.stopIndex] = won;
+    this.strip = strip;
+    this.stripTransition = 'none';
+    this.stripTranslateX = 0;
+    this.tickIndex = 0;
+    this.cdr.detectChanges();
+    this.stepSliding();
+  }
+
+  private stepSliding() {
+    if (this.tickIndex > this.ticks) {
+      // Animation done
+      this.stripTransition = 'none';
+      this.stripTranslateX = -((this.stopIndex - this.center) * this.rewardWidth);
+      this.isOpening = false;
+      this.wonReward = this.strip[this.stopIndex];
+      this.cdr.detectChanges();
+      return;
+    }
+    // Ease-out: slow down at the end
+    const progress = this.tickIndex / this.ticks;
+    const eased = 1 - Math.pow(1 - progress, 2.5);
+    const currentIndex = Math.round(eased * (this.stopIndex - this.center));
+    this.stripTransition = 'transform 0.12s cubic-bezier(0.4,0.7,0.5,1)';
+    this.stripTranslateX = -(currentIndex * this.rewardWidth);
+    this.cdr.detectChanges();
+    // Calculate next tick interval
+    const tickMs = this.minTickMs + (this.maxTickMs - this.minTickMs) * eased;
+    this.tickIndex++;
+    this.animationTimeout = setTimeout(() => this.stepSliding(), tickMs);
+  }
+
+  openAgain() {
+    this.isOpening = false;
+    this.wonReward = null;
+    this.strip = [];
+    this.stripTranslateX = 0;
+    this.stripTransition = 'none';
+    this.cdr.detectChanges();
+  }
+
+  getBoxImage(id: number): string {
+    return `/images/${id}-box.png`;
+  }
+
+  goBack(): void {
+    this.router.navigate(['/game/lootboxes']);
+  }
+
+  getRarityClass(prob: number): string {
+    if (prob <= 0.1) return 'text-yellow-400';
+    if (prob <= 0.3) return 'text-purple-400';
+    return 'text-blue-400';
+  }
+}

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

@@ -0,0 +1,22 @@
+.loader {
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top: 4px solid #fff;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.card {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+} 

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

@@ -1,53 +1,51 @@
-<div class="lootbox-container">
+<app-navbar></app-navbar>
-  <header class="lootbox-header">
+<div class="container mx-auto px-4 py-6">
-    <h1>Lootboxen</h1>
+  <h1 class="text-3xl font-bold text-white mb-6">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">
+  <div style="color:lime">isLoading: {{ isLoading }} | error: {{ error }} | lootboxes: {{ lootboxes?.length }}</div>
-    <p>Alle unsere Lootboxen unterliegen einem verifizierbaren Fairness-System. 
+  
-       Die Gewinnchancen sind transparent und werden von unabhängigen Prüfern bestätigt.</p>
+  <div *ngIf="isLoading" class="flex justify-center">
-    <a routerLink="/lootboxes/fairness" class="info-link">Mehr zur Fairness-Garantie</a>
+    <div class="loader"></div>
   </div>
   
-  <div class="lootbox-grid">
+  <div *ngIf="error" class="bg-red-500 text-white p-4 rounded mb-6">
-    <div *ngFor="let lootbox of filteredLootboxes" class="lootbox-card-wrapper">
+    {{ error }}
-      <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 *ngIf="!isLoading && !error" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <div class="lootbox-details">
+    <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="detail-item">
+      <div class="relative">
-              <span class="label">Preis:</span>
+        <img [src]="getBoxImage(lootbox.id)" [alt]="lootbox.name" class="w-full h-48 object-cover">
-              <span class="value">{{ lootbox.price }}€</span>
+        <div class="absolute top-2 right-2 bg-deep-blue px-2 py-1 rounded-full text-white">
-            </div>
+          {{ lootbox.price | currency:'EUR' }}
-            <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 class="p-4">
+        <h2 class="text-xl font-bold text-white mb-2">{{ lootbox.name }}</h2>
+        
+        <div class="mb-4">
+          <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 class="text-white">{{ formatProbability(reward.probability) }}</span>
+            </li>
+          </ul>
+        </div>
+        
+        <div class="mt-4">
+          <button 
+            (click)="openLootbox(lootbox.id)" 
+            class="button-primary w-full py-2 rounded font-semibold">
+            Öffnen
+          </button>
+        </div>
+      </div>
+      
+      <div class="px-4 pb-4">
+        <div class="text-sm text-text-secondary">
+          <p>Fairness garantiert - Alle Ergebnisse werden transparent berechnet.</p>
         </div>
       </div>
     </div>

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

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

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';
+import { NavbarComponent } from '@shared/components/navbar/navbar.component';
-
+import { LootboxService } from '../services/lootbox.service';
-interface Lootbox {
+import { LootBox } from 'app/model/LootBox';
-  id: string;
+import { Router } from '@angular/router';
-  name: string;
+import { timeout } from 'rxjs';
-  category: 'common' | 'rare' | 'legendary';
-  price: number;
-  image: string;
-  chance: number;
-  maxPrize: number;
-}
 
 @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 {
+export default class LootboxSelectionComponent implements OnInit {
-  lootboxes: Lootbox[] = [
+  lootboxes: LootBox[] = [];
+  isLoading = true;
+  error = '';
+
+  // Fallback data in case the API call fails
+  fallbackLootboxes: LootBox[] = [
     {
-      id: 'common-box',
+      id: 1,
-      name: 'Gewöhnliche Box',
+      name: "Basic LootBox",
-      category: 'common',
+      price: 2.00,
-      price: 5,
+      rewards: [
-      image: '/assets/images/lootboxes/common-box.png',
+        {
-      chance: 7,
+          id: 1,
-      maxPrize: 50
+          value: 0.50,
+          probability: 0.70
         },
         {
-      id: 'rare-box',
+          id: 5,
-      name: 'Seltene Box',
+          value: 5.00,
-      category: 'rare',
+          probability: 0.30
-      price: 20,
+        }
-      image: '/assets/images/lootboxes/rare-box.png',
+      ]
-      chance: 3.5,
-      maxPrize: 200
     },
     {
-      id: 'legendary-box',
+      id: 2,
-      name: 'Legendäre Box',
+      name: "Premium LootBox",
-      category: 'legendary',
+      price: 5.00,
-      price: 50,
+      rewards: [
-      image: '/assets/images/lootboxes/legendary-box.png',
+        {
-      chance: 1,
+          id: 4,
-      maxPrize: 1000
+          value: 2.00,
+          probability: 0.60
+        },
+        {
+          id: 5,
+          value: 5.00,
+          probability: 0.30
+        },
+        {
+          id: 6,
+          value: 15.00,
+          probability: 0.10
+        }
+      ]
+    },
+    {
+      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 = [
+  constructor(private lootboxService: LootboxService, private router: Router, private cdr: ChangeDetectorRef) {}
-    { id: 'common', name: 'Gewöhnlich' },
-    { id: 'rare', name: 'Selten' },
-    { id: 'legendary', name: 'Legendär' }
-  ];
 
-  selectedCategory: string | null = null;
+  ngOnInit(): void {
-
+    this.loadLootboxes();
-  filterByCategory(category: string | null): void {
-    this.selectedCategory = category;
   }
 
-  get filteredLootboxes(): Lootbox[] {
+  loadLootboxes(): void {
-    if (!this.selectedCategory) {
+    this.isLoading = true;
-      return this.lootboxes;
+    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);
       }
-    return this.lootboxes.filter(box => box.category === this.selectedCategory);
+    });
+  }
+
+  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
+    }
+  }
+
+  formatProbability(probability: number): string {
+    return (probability * 100).toFixed(0) + '%';
   }
 } 

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[]> {
+    return this.http
+      .get<LootBox[]>('/backend/lootboxes', { responseType: 'json' })
+      .pipe(
+        catchError((error) => {
+          console.error('Get lootboxes error:', error);
+          throw error;
+        })
+      );
+  }
+
+  purchaseLootBox(lootBoxId: number): Observable<Reward> {
+    return this.http
+      .post<Reward>(`/backend/lootboxes/${lootBoxId}`, {}, { responseType: 'json' })
+      .pipe(
+        catchError((error) => {
+          console.error('Purchase lootbox error:', error);
+          throw error;
+        })
+      );
+  }
+} 

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[];
+}