feat(lootboxes): add lootbox selection feature and routes

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);
+  }
+}