style: format code for better readability and consistency

frontend/src/app/app.routes.ts

@@ -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],
   },
   {

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

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

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

@@ -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"
+            <div class="text-center mb-8 animation-fade" [class.visible]="animationCompleted">
-                 [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"
+            <div
-                 [class.visible]="animationCompleted">
+              class="flex justify-center gap-4 mt-8 animation-fade"
-              <button
+              [class.visible]="animationCompleted"
-                (click)="openAgain()"
-                class="button-primary px-6 py-2 font-semibold rounded"
             >
+              <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'">
+              <span
-                {{ (wonReward.value - (lootbox.price || 0)) | currency: 'EUR' }}
+                [ngClass]="
+                  wonReward.value > (lootbox.price || 0) ? 'text-emerald' : 'text-accent-red'
+                "
+              >
+                {{ wonReward.value - (lootbox.price || 0) | currency: 'EUR' }}
               </span>
             </div>
           </div>

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

@@ -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.1) return 'text-epic';
-    if (probability < 0.20) return 'text-rare';
+    if (probability < 0.2) return 'text-rare';
-    if (probability < 0.40) return 'text-uncommon';
+    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';
   }
 }
-

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

@@ -8,12 +8,18 @@
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    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 {

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

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

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",
+      name: 'Basic LootBox',
-      price: 2.00,
+      price: 2.0,
       rewards: [
         {
           id: 1,
-          value: 0.50,
+          value: 0.5,
-          probability: 0.70
+          probability: 0.7,
         },
         {
           id: 5,
-          value: 5.00,
+          value: 5.0,
-          probability: 0.30
+          probability: 0.3,
-        }
+        },
-      ]
+      ],
     },
     {
       id: 2,
-      name: "Premium LootBox",
+      name: 'Premium LootBox',
-      price: 5.00,
+      price: 5.0,
       rewards: [
         {
           id: 4,
-          value: 2.00,
+          value: 2.0,
-          probability: 0.60
+          probability: 0.6,
         },
         {
           id: 5,
-          value: 5.00,
+          value: 5.0,
-          probability: 0.30
+          probability: 0.3,
         },
         {
           id: 6,
-          value: 15.00,
+          value: 15.0,
-          probability: 0.10
+          probability: 0.1,
-        }
+        },
-      ]
+      ],
     },
     {
       id: 3,
-      name: "Legendäre LootBox",
+      name: 'Legendäre LootBox',
-      price: 15.00,
+      price: 15.0,
       rewards: [
         {
           id: 4,
-          value: 2.00,
+          value: 2.0,
-          probability: 0.60
+          probability: 0.6,
         },
         {
           id: 5,
-          value: 5.00,
+          value: 5.0,
-          probability: 0.30
+          probability: 0.3,
         },
         {
           id: 6,
-          value: 15.00,
+          value: 15.0,
-          probability: 0.10
+          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(
+    this.lootboxService
-      timeout(5000)
+      .getAllLootBoxes()
-    ).subscribe({
+      .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);
-      }
+        },
       });
   }
 

frontend/src/app/feature/lootboxes/services/lootbox.service.ts

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