feat(lootboxes): add lootbox opening feature and images

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