style: format code for better readability and consistency

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

@@ -8,15 +8,21 @@
 }
 
 @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 {
   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,48 +1,60 @@
 <app-navbar></app-navbar>
 <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>
   </div>
-  
+
   <div *ngIf="error" class="bg-red-500 text-white p-4 rounded mb-6">
     {{ error }}
   </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>
-      
+
       <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 [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">
+          <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>
@@ -50,4 +62,4 @@
       </div>
     </div>
   </div>
-</div> 
+</div>

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

@@ -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,23 +95,24 @@ export default class LootboxSelectionComponent implements OnInit {
 
   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);
-      }
-    });
+    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 {
@@ -131,4 +136,4 @@ export default class LootboxSelectionComponent implements OnInit {
   formatProbability(probability: number): string {
     return (probability * 100).toFixed(0) + '%';
   }
-} 
+}