style: clean up whitespace and formatting in files

backend/requests/blackjack.http

@@ -0,0 +1,20 @@
+POST http://localhost:8080/blackjack/start
+Authorization: Bearer {{token}}
+Content-Type: application/json
+
+{
+  "betAmount": 1.01
+}
+
+###
+POST http://localhost:8080/blackjack/54/hit
+Authorization: Bearer {{token}}
+
+###
+POST http://localhost:8080/blackjack/202/stand
+Authorization: Bearer {{token}}
+
+###
+GET http://localhost:8080/blackjack/202
+Authorization: Bearer {{token}}
+

backend/requests/getBearerToken.http

@@ -0,0 +1,6 @@
+POST http://localhost:9090/realms/LF12/protocol/openid-connect/token
+Content-Type: application/x-www-form-urlencoded
+
+grant_type=password&client_id=lf12&username=lf12_test_user&password=secret&scope=openid
+
+> {% client.global.set("token", response.body.access_token); %}

backend/requests/healthCheck.http

@@ -0,0 +1 @@
+GET localhost:8080/health

backend/requests/lootboxes.http

@@ -0,0 +1,9 @@
+GET http://localhost:8080/lootboxes
+Authorization: Bearer {{token}}
+Content-Type: application/json
+
+###
+
+POST http://localhost:8080/lootboxes/2
+Authorization: Bearer {{token}}
+Content-Type: application/json

backend/requests/user.http

@@ -0,0 +1,27 @@
+### Get User by ID
+GET http://localhost:8080/user/52cc0208-a3bd-4367-94c5-0404b016a003
+Authorization: Bearer {{token}}
+
+### Get current user with token
+GET http://localhost:8080/user
+Authorization: Bearer {{token}}
+
+### Create User
+POST http://localhost:8080/user
+Content-Type: application/json
+Authorization: Bearer {{token}}
+
+{
+  "authentikId": "52cc0208-a3bd-4367-94c5-0404b016a003",
+  "username": "john.doe"
+}
+
+### Deposit
+POST http://localhost:8080/deposit/checkout
+Content-Type: application/json
+Origin: http://localhost:8080
+Authorization: Bearer {{token}}
+
+{
+  "amount": 60.12
+}

backend/requests/webhook.http

@@ -0,0 +1 @@
+POST localhost:8080/webhook

backend/src/main/java/de/szut/casino/CasinoApplication.java

@@ -1,10 +1,20 @@
 package de.szut.casino;
 
+import de.szut.casino.lootboxes.LootBoxEntity;
+import de.szut.casino.lootboxes.LootBoxRepository;
+import de.szut.casino.lootboxes.RewardEntity;
+import de.szut.casino.lootboxes.RewardRepository;
+import org.springframework.boot.CommandLineRunner;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.context.annotation.Bean;
 import org.springframework.web.client.RestTemplate;
 
+import java.math.BigDecimal;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
 @SpringBootApplication
 public class CasinoApplication {
 
@@ -16,4 +26,65 @@ public class CasinoApplication {
     public static RestTemplate restTemplate() {
         return new RestTemplate();
     }
+
+    @Bean
+    public CommandLineRunner initData(LootBoxRepository lootBoxRepository, RewardRepository rewardRepository) {
+        return _ -> {
+            if (lootBoxRepository.count() == 0) {
+                LootBoxEntity basicLootBox = new LootBoxEntity();
+                basicLootBox.setName("Basic LootBox");
+                basicLootBox.setPrice(new BigDecimal("2"));
+                basicLootBox.setRewards(new ArrayList<>()); // Initialize the list
+
+                LootBoxEntity premiumLootBox = new LootBoxEntity();
+                premiumLootBox.setName("Premium LootBox");
+                premiumLootBox.setPrice(new BigDecimal("5"));
+                premiumLootBox.setRewards(new ArrayList<>()); // Initialize the list
+
+                lootBoxRepository.saveAll(Arrays.asList(basicLootBox, premiumLootBox));
+
+                RewardEntity commonReward = new RewardEntity();
+                commonReward.setValue(new BigDecimal("0.50"));
+                commonReward.setProbability(new BigDecimal("0.7"));
+
+                RewardEntity rareReward = new RewardEntity();
+                rareReward.setValue(new BigDecimal("2.00"));
+                rareReward.setProbability(new BigDecimal("0.25"));
+
+                RewardEntity epicReward = new RewardEntity();
+                epicReward.setValue(new BigDecimal("5.00"));
+                epicReward.setProbability(new BigDecimal("0.5"));
+
+                RewardEntity premiumCommon = new RewardEntity();
+                premiumCommon.setValue(new BigDecimal("2.00"));
+                premiumCommon.setProbability(new BigDecimal("0.6"));
+
+                RewardEntity premiumRare = new RewardEntity();
+                premiumRare.setValue(new BigDecimal("5.00"));
+                premiumRare.setProbability(new BigDecimal("0.3"));
+
+                RewardEntity legendaryReward = new RewardEntity();
+                legendaryReward.setValue(new BigDecimal("15.00"));
+                legendaryReward.setProbability(new BigDecimal("0.10"));
+
+                rewardRepository.saveAll(Arrays.asList(
+                        commonReward, rareReward, epicReward,
+                        premiumCommon, premiumRare, legendaryReward
+                ));
+
+                basicLootBox.getRewards().add(commonReward);
+                basicLootBox.getRewards().add(premiumRare);
+
+                premiumLootBox.getRewards().add(premiumCommon);
+                premiumLootBox.getRewards().add(premiumRare);
+                premiumLootBox.getRewards().add(legendaryReward);
+
+                lootBoxRepository.saveAll(Arrays.asList(basicLootBox, premiumLootBox));
+
+                System.out.println("Initial LootBoxes and rewards created successfully");
+            } else {
+                System.out.println("LootBoxes already exist, skipping initialization");
+            }
+        };
+    }
 }

backend/src/main/java/de/szut/casino/blackjack/BlackJackGameRepository.java

@@ -1,8 +1,12 @@
 package de.szut.casino.blackjack;
 
+import de.szut.casino.user.UserEntity;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
 import org.springframework.stereotype.Service;
 
+import java.util.Optional;
+
 @Service
 public interface BlackJackGameRepository extends JpaRepository<BlackJackGameEntity, Long> {
 }

backend/src/main/java/de/szut/casino/blackjack/BlackJackService.java

@@ -7,6 +7,7 @@ import org.springframework.transaction.annotation.Transactional;
 
 import java.math.BigDecimal;
 import java.util.List;
+import java.util.Optional;
 import java.util.Random;
 
 @Service

backend/src/main/java/de/szut/casino/deposit/DepositController.java

@@ -8,6 +8,7 @@ import de.szut.casino.deposit.dto.AmountDto;
 import de.szut.casino.deposit.dto.SessionIdDto;
 import de.szut.casino.user.UserEntity;
 import de.szut.casino.user.UserRepository;
+import de.szut.casino.user.UserService;
 import de.szut.casino.user.dto.KeycloakUserDto;
 import jakarta.validation.Valid;
 import org.springframework.beans.factory.annotation.Value;
@@ -15,10 +16,7 @@ import org.springframework.http.HttpEntity;
 import org.springframework.http.HttpHeaders;
 import org.springframework.http.HttpMethod;
 import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestHeader;
-import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.client.RestTemplate;
 
 import java.util.Optional;

backend/src/main/java/de/szut/casino/deposit/TransactionEntity.java

@@ -5,7 +5,7 @@ import jakarta.persistence.*;
 import lombok.Getter;
 import lombok.Setter;
 
-import java.util.Date;
+import java.math.BigDecimal;
 
 @Setter
 @Getter
@@ -26,7 +26,4 @@ public class TransactionEntity {
 
     @Enumerated(EnumType.STRING)
     private TransactionStatus status = TransactionStatus.PROCESSING;
-
-    @Column(name = "created_at")
-    private Date createdAt = new Date();
 }

backend/src/main/java/de/szut/casino/deposit/TransactionRepository.java

@@ -5,20 +5,10 @@ import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.Query;
 import org.springframework.stereotype.Service;
 
-import java.util.List;
 import java.util.Optional;
 
 @Service
 public interface TransactionRepository extends JpaRepository<TransactionEntity, Long> {
     @Query("SELECT t FROM TransactionEntity t WHERE t.sessionId = ?1")
     Optional<TransactionEntity> findOneBySessionID(String sessionId);
-
-    @Query("SELECT t FROM TransactionEntity t WHERE t.user = ?1")
-    List<TransactionEntity> findAllByUserId(UserEntity id);
-
-    @Query("SELECT t FROM TransactionEntity t WHERE t.user = ?1 ORDER BY t.createdAt DESC LIMIT ?2 OFFSET ?3")
-    List<TransactionEntity> findByUserIdWithLimit(UserEntity userEntity, Integer limit, Integer offset);
-
-    @Query("SELECT COUNT(t) > ?2 + ?3 FROM TransactionEntity t WHERE t.user = ?1")
-    Boolean hasMore(UserEntity userEntity, Integer limit, Integer offset);
 }

backend/src/main/java/de/szut/casino/deposit/TransactionService.java

@@ -7,6 +7,7 @@ import de.szut.casino.user.UserEntity;
 import de.szut.casino.user.UserRepository;
 import org.springframework.stereotype.Service;
 
+import java.util.Objects;
 import java.util.Optional;
 
 @Service

backend/src/main/java/de/szut/casino/deposit/WebhookController.java

@@ -1,21 +1,26 @@
 package de.szut.casino.deposit;
 
+import com.fasterxml.jackson.core.JsonProcessingException;
+
 import com.stripe.Stripe;
+import com.stripe.exception.SignatureVerificationException;
 import com.stripe.exception.StripeException;
-import com.stripe.model.Event;
+import com.stripe.model.*;
 import com.stripe.model.checkout.Session;
 import com.stripe.net.Webhook;
+import com.stripe.param.checkout.SessionRetrieveParams;
+import de.szut.casino.user.UserEntity;
+import de.szut.casino.user.UserRepository;
 import jakarta.annotation.PostConstruct;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestHeader;
-import org.springframework.web.bind.annotation.RestController;
 
+import java.math.BigDecimal;
 import java.util.Objects;
+import java.util.Optional;
 
 @RestController
 public class WebhookController {

backend/src/main/java/de/szut/casino/lootboxes/CreateLootBoxDto.java

@@ -1,30 +0,0 @@
-package de.szut.casino.lootboxes;
-
-import jakarta.validation.constraints.DecimalMin;
-import jakarta.validation.constraints.NotEmpty;
-import jakarta.validation.constraints.NotNull;
-import jakarta.validation.constraints.Size;
-import lombok.AllArgsConstructor;
-import lombok.Getter;
-import lombok.NoArgsConstructor;
-import lombok.Setter;
-
-import java.math.BigDecimal;
-import java.util.ArrayList;
-import java.util.List;
-
-@Getter
-@Setter
-@AllArgsConstructor
-@NoArgsConstructor
-public class CreateLootBoxDto {
-    @NotEmpty(message = "Loot box name cannot be empty")
-    @Size(min = 3, max = 50, message = "Loot box name must be between 3 and 50 characters")
-    private String name;
-
-    @NotNull(message = "Price cannot be null")
-    @DecimalMin(value = "0.01", message = "Price must be greater than 0")
-    private BigDecimal price;
-
-    private List<CreateRewardDto> rewards = new ArrayList<>();
-}

backend/src/main/java/de/szut/casino/lootboxes/CreateRewardDto.java

@@ -1,26 +0,0 @@
-package de.szut.casino.lootboxes;
-
-import jakarta.validation.constraints.DecimalMax;
-import jakarta.validation.constraints.DecimalMin;
-import jakarta.validation.constraints.NotNull;
-import lombok.AllArgsConstructor;
-import lombok.Getter;
-import lombok.NoArgsConstructor;
-import lombok.Setter;
-
-import java.math.BigDecimal;
-
-@Getter
-@Setter
-@AllArgsConstructor
-@NoArgsConstructor
-public class CreateRewardDto {
-    @NotNull(message = "Reward value cannot be null")
-    @DecimalMin(value = "0.00", message = "Reward value must be positive")
-    private BigDecimal value;
-
-    @NotNull(message = "Probability cannot be null")
-    @DecimalMin(value = "0.0", message = "Probability must be at least 0.0")
-    @DecimalMax(value = "1.0", message = "Probability must be at most 1.0")
-    private BigDecimal probability;
-}

backend/src/main/java/de/szut/casino/lootboxes/LootBoxController.java

@@ -3,11 +3,13 @@ package de.szut.casino.lootboxes;
 import de.szut.casino.user.UserEntity;
 import de.szut.casino.user.UserRepository;
 import de.szut.casino.user.UserService;
-import jakarta.validation.Valid;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
-import java.util.*;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Optional;
 
 @RestController
 public class LootBoxController {
@@ -53,37 +55,4 @@ public class LootBoxController {
 
         return ResponseEntity.ok(reward);
     }
-
-    @PostMapping("/lootboxes")
-    public ResponseEntity<Object> createLootbox(@RequestBody @Valid CreateLootBoxDto createLootBoxDto) {
-        List<RewardEntity> rewardEntities = new ArrayList<>();
-
-        for (CreateRewardDto createRewardDto : createLootBoxDto.getRewards()) {
-            rewardEntities.add(new RewardEntity(createRewardDto.getValue(), createRewardDto.getProbability()));
-        }
-
-        LootBoxEntity lootBoxEntity = new LootBoxEntity(
-                createLootBoxDto.getName(),
-                createLootBoxDto.getPrice(),
-                rewardEntities
-        );
-
-        this.lootBoxRepository.save(lootBoxEntity);
-
-        return ResponseEntity.ok(lootBoxEntity);
-    }
-
-    @DeleteMapping("/lootboxes/{id}")
-    public ResponseEntity<Object> deleteLootbox(@PathVariable Long id) {
-        Optional<LootBoxEntity> optionalLootBox = lootBoxRepository.findById(id);
-        if (optionalLootBox.isEmpty()) {
-            return ResponseEntity.notFound().build();
-        }
-
-        LootBoxEntity lootBox = optionalLootBox.get();
-        lootBoxRepository.delete(lootBox);
-
-        return ResponseEntity.ok(Collections.singletonMap("message", "successfully deleted lootbox"));
-    }
-
 }

backend/src/main/java/de/szut/casino/lootboxes/LootBoxEntity.java

@@ -1,9 +1,15 @@
 package de.szut.casino.lootboxes;
 
+import com.fasterxml.jackson.annotation.JsonBackReference;
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import com.fasterxml.jackson.annotation.JsonManagedReference;
+import de.szut.casino.blackjack.CardEntity;
 import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
 import lombok.Setter;
+import org.hibernate.annotations.SQLRestriction;
 
 import java.math.BigDecimal;
 import java.util.ArrayList;
@@ -12,15 +18,9 @@ import java.util.List;
 @Entity
 @Getter
 @Setter
+@AllArgsConstructor
 @NoArgsConstructor
 public class LootBoxEntity {
-
-    public LootBoxEntity(String name, BigDecimal price, List<RewardEntity> rewards) {
-        this.name = name;
-        this.price = price;
-        this.rewards = rewards;
-    }
-
     @Id
     @GeneratedValue
     private Long id;

backend/src/main/java/de/szut/casino/lootboxes/RewardEntity.java

@@ -1,9 +1,9 @@
 package de.szut.casino.lootboxes;
 
 import com.fasterxml.jackson.annotation.JsonBackReference;
+import com.fasterxml.jackson.annotation.JsonManagedReference;
 import jakarta.persistence.*;
 import lombok.Getter;
-import lombok.NoArgsConstructor;
 import lombok.Setter;
 
 import java.math.BigDecimal;
@@ -13,14 +13,7 @@ import java.util.List;
 @Getter
 @Setter
 @Entity
-@NoArgsConstructor
 public class RewardEntity {
-
-    public RewardEntity(BigDecimal value, BigDecimal probability) {
-        this.value = value;
-        this.probability = probability;
-    }
-
     @Id
     @GeneratedValue
     private Long id;

backend/src/main/java/de/szut/casino/user/UserController.java

@@ -1,14 +1,19 @@
 package de.szut.casino.user;
 
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestHeader;
+import org.springframework.web.bind.annotation.RestController;
+
 import de.szut.casino.user.dto.CreateUserDto;
 import de.szut.casino.user.dto.GetUserDto;
 import jakarta.validation.Valid;
 import lombok.extern.slf4j.Slf4j;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.http.HttpHeaders;
-import org.springframework.http.HttpStatus;
-import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.*;
 
 @Slf4j
 @RestController

backend/src/main/java/de/szut/casino/user/transaction/GetTransactionService.java

@@ -1,45 +0,0 @@
-package de.szut.casino.user.transaction;
-
-import de.szut.casino.deposit.TransactionEntity;
-import de.szut.casino.deposit.TransactionRepository;
-import de.szut.casino.user.UserEntity;
-import de.szut.casino.user.UserService;
-import de.szut.casino.user.transaction.dto.GetTransactionDto;
-import de.szut.casino.user.transaction.dto.UserTransactionsDto;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.stereotype.Service;
-
-import java.util.List;
-import java.util.Optional;
-
-@Service
-public class GetTransactionService {
-
-    @Autowired
-    private UserService userService;
-
-    @Autowired
-    private TransactionRepository transactionRepository;
-
-    public UserTransactionsDto getUserTransactionsDto(String authToken, Integer limit, Integer offset) {
-        Optional<UserEntity> user = this.userService.getCurrentUser(authToken);
-        if (user.isPresent()) {
-            List<TransactionEntity> transactionEntities = this.transactionRepository.findByUserIdWithLimit(user.get(), limit, offset);
-            Boolean hasMore = this.transactionRepository.hasMore(user.get(), limit, offset);
-
-            return new UserTransactionsDto(mapTransactionsToDtos(transactionEntities), hasMore);
-        }
-
-        return new UserTransactionsDto(List.of(), false);
-    }
-
-    public List<GetTransactionDto> mapTransactionsToDtos(List<TransactionEntity> transactions) {
-        return transactions.stream()
-                .map(transaction -> new GetTransactionDto(
-                        transaction.getAmount(),
-                        transaction.getStatus(),
-                        transaction.getCreatedAt())
-                ).toList();
-    }
-}
-

backend/src/main/java/de/szut/casino/user/transaction/TransactionController.java

@@ -1,28 +0,0 @@
-package de.szut.casino.user.transaction;
-
-import de.szut.casino.user.transaction.dto.UserTransactionsDto;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestHeader;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.RestController;
-
-@RestController
-public class TransactionController {
-
-    @Autowired
-    private GetTransactionService transactionService;
-
-    @GetMapping("/user/transactions")
-    public ResponseEntity<UserTransactionsDto> getUserTransactions(
-            @RequestHeader("Authorization") String authToken,
-            @RequestParam(value = "limit", required = false) Integer limit,
-            @RequestParam(value = "offset", required = false) Integer offset
-            ) {
-        UserTransactionsDto transactionEntities = this.transactionService.getUserTransactionsDto(authToken, limit, offset);
-
-        return ResponseEntity.ok(transactionEntities);
-    }
-}
-

backend/src/main/java/de/szut/casino/user/transaction/dto/GetTransactionDto.java

@@ -1,16 +0,0 @@
-package de.szut.casino.user.transaction.dto;
-
-import de.szut.casino.deposit.TransactionStatus;
-import lombok.AllArgsConstructor;
-import lombok.NoArgsConstructor;
-
-import java.util.Date;
-
-@AllArgsConstructor
-@NoArgsConstructor
-public class GetTransactionDto {
-    public double amount = 0;
-    public TransactionStatus status = TransactionStatus.PROCESSING;
-    public Date createdAt = new Date();
-}
-

backend/src/main/java/de/szut/casino/user/transaction/dto/UserTransactionsDto.java

@@ -1,12 +0,0 @@
-package de.szut.casino.user.transaction.dto;
-
-import lombok.AllArgsConstructor;
-
-import java.util.List;
-
-@AllArgsConstructor
-public class UserTransactionsDto {
-    public List<GetTransactionDto> transactions;
-    public Boolean hasMore;
-}
-

frontend/bun.lock

@@ -46,7 +46,7 @@
         "karma-jasmine-html-reporter": "~2.1.0",
         "prettier": "^3.4.2",
         "typescript": "~5.8.0",
-        "typescript-eslint": "8.31.0",
+        "typescript-eslint": "8.29.1",
       },
     },
   },
@@ -683,13 +683,13 @@
 
     "@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],
 
-    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.31.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.31.0", "@typescript-eslint/type-utils": "8.31.0", "@typescript-eslint/utils": "8.31.0", "@typescript-eslint/visitor-keys": "8.31.0", "graphemer": "^1.4.0", "ignore": "^5.3.1", "natural-compare": "^1.4.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-evaQJZ/J/S4wisevDvC1KFZkPzRetH8kYZbkgcTRyql3mcKsf+ZFDV1BVWUGTCAW5pQHoqn5gK5b8kn7ou9aFQ=="],
+    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.29.1", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.29.1", "@typescript-eslint/type-utils": "8.29.1", "@typescript-eslint/utils": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1", "graphemer": "^1.4.0", "ignore": "^5.3.1", "natural-compare": "^1.4.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-ba0rr4Wfvg23vERs3eB+P3lfj2E+2g3lhWcCVukUuhtcdUx5lSIFZlGFEBHKr+3zizDa/TvZTptdNHVZWAkSBg=="],
 
-    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.31.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.31.0", "@typescript-eslint/types": "8.31.0", "@typescript-eslint/typescript-estree": "8.31.0", "@typescript-eslint/visitor-keys": "8.31.0", "debug": "^4.3.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-67kYYShjBR0jNI5vsf/c3WG4u+zDnCTHTPqVMQguffaWWFs7artgwKmfwdifl+r6XyM5LYLas/dInj2T0SgJyw=="],
+    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.29.1", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.29.1", "@typescript-eslint/types": "8.29.1", "@typescript-eslint/typescript-estree": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1", "debug": "^4.3.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-zczrHVEqEaTwh12gWBIJWj8nx+ayDcCJs06yoNMY0kwjMWDM6+kppljY+BxWI06d2Ja+h4+WdufDcwMnnMEWmg=="],
 
     "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.29.0", "", { "dependencies": { "@typescript-eslint/types": "8.29.0", "@typescript-eslint/visitor-keys": "8.29.0" } }, "sha512-aO1PVsq7Gm+tcghabUpzEnVSFMCU4/nYIgC2GOatJcllvWfnhrgW0ZEbnTxm36QsikmCN1K/6ZgM7fok2I7xNw=="],
 
-    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.31.0", "", { "dependencies": { "@typescript-eslint/typescript-estree": "8.31.0", "@typescript-eslint/utils": "8.31.0", "debug": "^4.3.4", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-DJ1N1GdjI7IS7uRlzJuEDCgDQix3ZVYVtgeWEyhyn4iaoitpMBX6Ndd488mXSx0xah/cONAkEaYyylDyAeHMHg=="],
+    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.29.1", "", { "dependencies": { "@typescript-eslint/typescript-estree": "8.29.1", "@typescript-eslint/utils": "8.29.1", "debug": "^4.3.4", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-DkDUSDwZVCYN71xA4wzySqqcZsHKic53A4BLqmrWFFpOpNSoxX233lwGu/2135ymTCR04PoKiEEEvN1gFYg4Tw=="],
 
     "@typescript-eslint/types": ["@typescript-eslint/types@8.29.0", "", {}, "sha512-wcJL/+cOXV+RE3gjCyl/V2G877+2faqvlgtso/ZRbTCnZazh0gXhe+7gbAnfubzN2bNsBtZjDvlh7ero8uIbzg=="],
 
@@ -697,7 +697,7 @@
 
     "@typescript-eslint/utils": ["@typescript-eslint/utils@8.29.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@typescript-eslint/scope-manager": "8.29.0", "@typescript-eslint/types": "8.29.0", "@typescript-eslint/typescript-estree": "8.29.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-gX/A0Mz9Bskm8avSWFcK0gP7cZpbY4AIo6B0hWYFCaIsz750oaiWR4Jr2CI+PQhfW1CpcQr9OlfPS+kMFegjXA=="],
 
-    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.31.0", "", { "dependencies": { "@typescript-eslint/types": "8.31.0", "eslint-visitor-keys": "^4.2.0" } }, "sha512-QcGHmlRHWOl93o64ZUMNewCdwKGU6WItOU52H0djgNmn1EOrhVudrDzXz4OycCRSCPwFCDrE2iIt5vmuUdHxuQ=="],
+    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "eslint-visitor-keys": "^4.2.0" } }, "sha512-RGLh5CRaUEf02viP5c1Vh1cMGffQscyHe7HPAzGpfmfflFg1wUz2rYxd+OZqwpeypYvZ8UxSxuIpF++fmOzEcg=="],
 
     "@vitejs/plugin-basic-ssl": ["@vitejs/plugin-basic-ssl@1.2.0", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" } }, "sha512-mkQnxTkcldAzIsomk1UuLfAu9n+kpQ3JbHcpCp7d2Oo6ITtji8pHS3QToOWjhPFvNQSnhlkAjmGbhv2QvwO/7Q=="],
 
@@ -1779,7 +1779,7 @@
 
     "typescript": ["typescript@5.8.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ=="],
 
-    "typescript-eslint": ["typescript-eslint@8.31.0", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.31.0", "@typescript-eslint/parser": "8.31.0", "@typescript-eslint/utils": "8.31.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-u+93F0sB0An8WEAPtwxVhFby573E8ckdjwUUQUj9QA4v8JAvgtoDdIyYR3XFwFHq2W1KJ1AurwJCO+w+Y1ixyQ=="],
+    "typescript-eslint": ["typescript-eslint@8.29.1", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.29.1", "@typescript-eslint/parser": "8.29.1", "@typescript-eslint/utils": "8.29.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-f8cDkvndhbQMPcysk6CUSGBWV+g1utqdn71P5YKwMumVMOG/5k7cHq0KyG4O52nB0oKS4aN2Tp5+wB4APJGC+w=="],
 
     "ua-parser-js": ["ua-parser-js@0.7.40", "", { "bin": { "ua-parser-js": "script/cli.js" } }, "sha512-us1E3K+3jJppDBa3Tl0L3MOJiGhe1C6P0+nIvQAFYbxlMAx0h81eOwLmU57xgqToduDDPx3y5QsdjPfDu+FgOQ=="],
 
@@ -1973,27 +1973,27 @@
 
     "@types/express/@types/express-serve-static-core": ["@types/express-serve-static-core@4.19.6", "", { "dependencies": { "@types/node": "*", "@types/qs": "*", "@types/range-parser": "*", "@types/send": "*" } }, "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A=="],
 
-    "@typescript-eslint/eslint-plugin/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.31.0", "", { "dependencies": { "@typescript-eslint/types": "8.31.0", "@typescript-eslint/visitor-keys": "8.31.0" } }, "sha512-knO8UyF78Nt8O/B64i7TlGXod69ko7z6vJD9uhSlm0qkAbGeRUSudcm0+K/4CrRjrpiHfBCjMWlc08Vav1xwcw=="],
+    "@typescript-eslint/eslint-plugin/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1" } }, "sha512-2nggXGX5F3YrsGN08pw4XpMLO1Rgtnn4AzTegC2MDesv6q3QaTU5yU7IbS1tf1IwCR0Hv/1EFygLn9ms6LIpDA=="],
 
-    "@typescript-eslint/eslint-plugin/@typescript-eslint/utils": ["@typescript-eslint/utils@8.31.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@typescript-eslint/scope-manager": "8.31.0", "@typescript-eslint/types": "8.31.0", "@typescript-eslint/typescript-estree": "8.31.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-qi6uPLt9cjTFxAb1zGNgTob4x9ur7xC6mHQJ8GwEzGMGE9tYniublmJaowOJ9V2jUzxrltTPfdG2nKlWsq0+Ww=="],
+    "@typescript-eslint/eslint-plugin/@typescript-eslint/utils": ["@typescript-eslint/utils@8.29.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@typescript-eslint/scope-manager": "8.29.1", "@typescript-eslint/types": "8.29.1", "@typescript-eslint/typescript-estree": "8.29.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-QAkFEbytSaB8wnmB+DflhUPz6CLbFWE2SnSCrRMEa+KnXIzDYbpsn++1HGvnfAsUY44doDXmvRkO5shlM/3UfA=="],
 
-    "@typescript-eslint/parser/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.31.0", "", { "dependencies": { "@typescript-eslint/types": "8.31.0", "@typescript-eslint/visitor-keys": "8.31.0" } }, "sha512-knO8UyF78Nt8O/B64i7TlGXod69ko7z6vJD9uhSlm0qkAbGeRUSudcm0+K/4CrRjrpiHfBCjMWlc08Vav1xwcw=="],
+    "@typescript-eslint/parser/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1" } }, "sha512-2nggXGX5F3YrsGN08pw4XpMLO1Rgtnn4AzTegC2MDesv6q3QaTU5yU7IbS1tf1IwCR0Hv/1EFygLn9ms6LIpDA=="],
 
-    "@typescript-eslint/parser/@typescript-eslint/types": ["@typescript-eslint/types@8.31.0", "", {}, "sha512-Ch8oSjVyYyJxPQk8pMiP2FFGYatqXQfQIaMp+TpuuLlDachRWpUAeEu1u9B/v/8LToehUIWyiKcA/w5hUFRKuQ=="],
+    "@typescript-eslint/parser/@typescript-eslint/types": ["@typescript-eslint/types@8.29.1", "", {}, "sha512-VT7T1PuJF1hpYC3AGm2rCgJBjHL3nc+A/bhOp9sGMKfi5v0WufsX/sHCFBfNTx2F+zA6qBc/PD0/kLRLjdt8mQ=="],
 
-    "@typescript-eslint/parser/@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.31.0", "", { "dependencies": { "@typescript-eslint/types": "8.31.0", "@typescript-eslint/visitor-keys": "8.31.0", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "typescript": ">=4.8.4 <5.9.0" } }, "sha512-xLmgn4Yl46xi6aDSZ9KkyfhhtnYI15/CvHbpOy/eR5NWhK/BK8wc709KKwhAR0m4ZKRP7h07bm4BWUYOCuRpQQ=="],
+    "@typescript-eslint/parser/@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "typescript": ">=4.8.4 <5.9.0" } }, "sha512-l1enRoSaUkQxOQnbi0KPUtqeZkSiFlqrx9/3ns2rEDhGKfTa+88RmXqedC1zmVTOWrLc2e6DEJrTA51C9iLH5g=="],
 
     "@typescript-eslint/scope-manager/@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.29.0", "", { "dependencies": { "@typescript-eslint/types": "8.29.0", "eslint-visitor-keys": "^4.2.0" } }, "sha512-Sne/pVz8ryR03NFK21VpN88dZ2FdQXOlq3VIklbrTYEt8yXtRFr9tvUhqvCeKjqYk5FSim37sHbooT6vzBTZcg=="],
 
-    "@typescript-eslint/type-utils/@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.31.0", "", { "dependencies": { "@typescript-eslint/types": "8.31.0", "@typescript-eslint/visitor-keys": "8.31.0", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "typescript": ">=4.8.4 <5.9.0" } }, "sha512-xLmgn4Yl46xi6aDSZ9KkyfhhtnYI15/CvHbpOy/eR5NWhK/BK8wc709KKwhAR0m4ZKRP7h07bm4BWUYOCuRpQQ=="],
+    "@typescript-eslint/type-utils/@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "typescript": ">=4.8.4 <5.9.0" } }, "sha512-l1enRoSaUkQxOQnbi0KPUtqeZkSiFlqrx9/3ns2rEDhGKfTa+88RmXqedC1zmVTOWrLc2e6DEJrTA51C9iLH5g=="],
 
-    "@typescript-eslint/type-utils/@typescript-eslint/utils": ["@typescript-eslint/utils@8.31.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@typescript-eslint/scope-manager": "8.31.0", "@typescript-eslint/types": "8.31.0", "@typescript-eslint/typescript-estree": "8.31.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-qi6uPLt9cjTFxAb1zGNgTob4x9ur7xC6mHQJ8GwEzGMGE9tYniublmJaowOJ9V2jUzxrltTPfdG2nKlWsq0+Ww=="],
+    "@typescript-eslint/type-utils/@typescript-eslint/utils": ["@typescript-eslint/utils@8.29.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@typescript-eslint/scope-manager": "8.29.1", "@typescript-eslint/types": "8.29.1", "@typescript-eslint/typescript-estree": "8.29.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-QAkFEbytSaB8wnmB+DflhUPz6CLbFWE2SnSCrRMEa+KnXIzDYbpsn++1HGvnfAsUY44doDXmvRkO5shlM/3UfA=="],
 
     "@typescript-eslint/typescript-estree/@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.29.0", "", { "dependencies": { "@typescript-eslint/types": "8.29.0", "eslint-visitor-keys": "^4.2.0" } }, "sha512-Sne/pVz8ryR03NFK21VpN88dZ2FdQXOlq3VIklbrTYEt8yXtRFr9tvUhqvCeKjqYk5FSim37sHbooT6vzBTZcg=="],
 
     "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
 
-    "@typescript-eslint/visitor-keys/@typescript-eslint/types": ["@typescript-eslint/types@8.31.0", "", {}, "sha512-Ch8oSjVyYyJxPQk8pMiP2FFGYatqXQfQIaMp+TpuuLlDachRWpUAeEu1u9B/v/8LToehUIWyiKcA/w5hUFRKuQ=="],
+    "@typescript-eslint/visitor-keys/@typescript-eslint/types": ["@typescript-eslint/types@8.29.1", "", {}, "sha512-VT7T1PuJF1hpYC3AGm2rCgJBjHL3nc+A/bhOp9sGMKfi5v0WufsX/sHCFBfNTx2F+zA6qBc/PD0/kLRLjdt8mQ=="],
 
     "accepts/negotiator": ["negotiator@0.6.3", "", {}, "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="],
 
@@ -2157,7 +2157,7 @@
 
     "tar/mkdirp": ["mkdirp@1.0.4", "", { "bin": { "mkdirp": "bin/cmd.js" } }, "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="],
 
-    "typescript-eslint/@typescript-eslint/utils": ["@typescript-eslint/utils@8.31.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@typescript-eslint/scope-manager": "8.31.0", "@typescript-eslint/types": "8.31.0", "@typescript-eslint/typescript-estree": "8.31.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-qi6uPLt9cjTFxAb1zGNgTob4x9ur7xC6mHQJ8GwEzGMGE9tYniublmJaowOJ9V2jUzxrltTPfdG2nKlWsq0+Ww=="],
+    "typescript-eslint/@typescript-eslint/utils": ["@typescript-eslint/utils@8.29.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@typescript-eslint/scope-manager": "8.29.1", "@typescript-eslint/types": "8.29.1", "@typescript-eslint/typescript-estree": "8.29.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-QAkFEbytSaB8wnmB+DflhUPz6CLbFWE2SnSCrRMEa+KnXIzDYbpsn++1HGvnfAsUY44doDXmvRkO5shlM/3UfA=="],
 
     "webpack/eslint-scope": ["eslint-scope@5.1.1", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^4.1.1" } }, "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw=="],
 
@@ -2193,21 +2193,21 @@
 
     "@tufjs/models/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
 
-    "@typescript-eslint/eslint-plugin/@typescript-eslint/scope-manager/@typescript-eslint/types": ["@typescript-eslint/types@8.31.0", "", {}, "sha512-Ch8oSjVyYyJxPQk8pMiP2FFGYatqXQfQIaMp+TpuuLlDachRWpUAeEu1u9B/v/8LToehUIWyiKcA/w5hUFRKuQ=="],
+    "@typescript-eslint/eslint-plugin/@typescript-eslint/scope-manager/@typescript-eslint/types": ["@typescript-eslint/types@8.29.1", "", {}, "sha512-VT7T1PuJF1hpYC3AGm2rCgJBjHL3nc+A/bhOp9sGMKfi5v0WufsX/sHCFBfNTx2F+zA6qBc/PD0/kLRLjdt8mQ=="],
 
-    "@typescript-eslint/eslint-plugin/@typescript-eslint/utils/@typescript-eslint/types": ["@typescript-eslint/types@8.31.0", "", {}, "sha512-Ch8oSjVyYyJxPQk8pMiP2FFGYatqXQfQIaMp+TpuuLlDachRWpUAeEu1u9B/v/8LToehUIWyiKcA/w5hUFRKuQ=="],
+    "@typescript-eslint/eslint-plugin/@typescript-eslint/utils/@typescript-eslint/types": ["@typescript-eslint/types@8.29.1", "", {}, "sha512-VT7T1PuJF1hpYC3AGm2rCgJBjHL3nc+A/bhOp9sGMKfi5v0WufsX/sHCFBfNTx2F+zA6qBc/PD0/kLRLjdt8mQ=="],
 
-    "@typescript-eslint/eslint-plugin/@typescript-eslint/utils/@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.31.0", "", { "dependencies": { "@typescript-eslint/types": "8.31.0", "@typescript-eslint/visitor-keys": "8.31.0", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "typescript": ">=4.8.4 <5.9.0" } }, "sha512-xLmgn4Yl46xi6aDSZ9KkyfhhtnYI15/CvHbpOy/eR5NWhK/BK8wc709KKwhAR0m4ZKRP7h07bm4BWUYOCuRpQQ=="],
+    "@typescript-eslint/eslint-plugin/@typescript-eslint/utils/@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "typescript": ">=4.8.4 <5.9.0" } }, "sha512-l1enRoSaUkQxOQnbi0KPUtqeZkSiFlqrx9/3ns2rEDhGKfTa+88RmXqedC1zmVTOWrLc2e6DEJrTA51C9iLH5g=="],
 
     "@typescript-eslint/parser/@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
 
-    "@typescript-eslint/type-utils/@typescript-eslint/typescript-estree/@typescript-eslint/types": ["@typescript-eslint/types@8.31.0", "", {}, "sha512-Ch8oSjVyYyJxPQk8pMiP2FFGYatqXQfQIaMp+TpuuLlDachRWpUAeEu1u9B/v/8LToehUIWyiKcA/w5hUFRKuQ=="],
+    "@typescript-eslint/type-utils/@typescript-eslint/typescript-estree/@typescript-eslint/types": ["@typescript-eslint/types@8.29.1", "", {}, "sha512-VT7T1PuJF1hpYC3AGm2rCgJBjHL3nc+A/bhOp9sGMKfi5v0WufsX/sHCFBfNTx2F+zA6qBc/PD0/kLRLjdt8mQ=="],
 
     "@typescript-eslint/type-utils/@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
 
-    "@typescript-eslint/type-utils/@typescript-eslint/utils/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.31.0", "", { "dependencies": { "@typescript-eslint/types": "8.31.0", "@typescript-eslint/visitor-keys": "8.31.0" } }, "sha512-knO8UyF78Nt8O/B64i7TlGXod69ko7z6vJD9uhSlm0qkAbGeRUSudcm0+K/4CrRjrpiHfBCjMWlc08Vav1xwcw=="],
+    "@typescript-eslint/type-utils/@typescript-eslint/utils/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1" } }, "sha512-2nggXGX5F3YrsGN08pw4XpMLO1Rgtnn4AzTegC2MDesv6q3QaTU5yU7IbS1tf1IwCR0Hv/1EFygLn9ms6LIpDA=="],
 
-    "@typescript-eslint/type-utils/@typescript-eslint/utils/@typescript-eslint/types": ["@typescript-eslint/types@8.31.0", "", {}, "sha512-Ch8oSjVyYyJxPQk8pMiP2FFGYatqXQfQIaMp+TpuuLlDachRWpUAeEu1u9B/v/8LToehUIWyiKcA/w5hUFRKuQ=="],
+    "@typescript-eslint/type-utils/@typescript-eslint/utils/@typescript-eslint/types": ["@typescript-eslint/types@8.29.1", "", {}, "sha512-VT7T1PuJF1hpYC3AGm2rCgJBjHL3nc+A/bhOp9sGMKfi5v0WufsX/sHCFBfNTx2F+zA6qBc/PD0/kLRLjdt8mQ=="],
 
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
 
@@ -2287,11 +2287,11 @@
 
     "tar/minizlib/minipass": ["minipass@3.3.6", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw=="],
 
-    "typescript-eslint/@typescript-eslint/utils/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.31.0", "", { "dependencies": { "@typescript-eslint/types": "8.31.0", "@typescript-eslint/visitor-keys": "8.31.0" } }, "sha512-knO8UyF78Nt8O/B64i7TlGXod69ko7z6vJD9uhSlm0qkAbGeRUSudcm0+K/4CrRjrpiHfBCjMWlc08Vav1xwcw=="],
+    "typescript-eslint/@typescript-eslint/utils/@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1" } }, "sha512-2nggXGX5F3YrsGN08pw4XpMLO1Rgtnn4AzTegC2MDesv6q3QaTU5yU7IbS1tf1IwCR0Hv/1EFygLn9ms6LIpDA=="],
 
-    "typescript-eslint/@typescript-eslint/utils/@typescript-eslint/types": ["@typescript-eslint/types@8.31.0", "", {}, "sha512-Ch8oSjVyYyJxPQk8pMiP2FFGYatqXQfQIaMp+TpuuLlDachRWpUAeEu1u9B/v/8LToehUIWyiKcA/w5hUFRKuQ=="],
+    "typescript-eslint/@typescript-eslint/utils/@typescript-eslint/types": ["@typescript-eslint/types@8.29.1", "", {}, "sha512-VT7T1PuJF1hpYC3AGm2rCgJBjHL3nc+A/bhOp9sGMKfi5v0WufsX/sHCFBfNTx2F+zA6qBc/PD0/kLRLjdt8mQ=="],
 
-    "typescript-eslint/@typescript-eslint/utils/@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.31.0", "", { "dependencies": { "@typescript-eslint/types": "8.31.0", "@typescript-eslint/visitor-keys": "8.31.0", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "typescript": ">=4.8.4 <5.9.0" } }, "sha512-xLmgn4Yl46xi6aDSZ9KkyfhhtnYI15/CvHbpOy/eR5NWhK/BK8wc709KKwhAR0m4ZKRP7h07bm4BWUYOCuRpQQ=="],
+    "typescript-eslint/@typescript-eslint/utils/@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "typescript": ">=4.8.4 <5.9.0" } }, "sha512-l1enRoSaUkQxOQnbi0KPUtqeZkSiFlqrx9/3ns2rEDhGKfTa+88RmXqedC1zmVTOWrLc2e6DEJrTA51C9iLH5g=="],
 
     "webpack-dev-server/chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 

frontend/package.json

@@ -55,6 +55,6 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "prettier": "^3.4.2",
     "typescript": "~5.8.0",
-    "typescript-eslint": "8.31.0"
+    "typescript-eslint": "8.29.1"
   }
 }

frontend/src/app/app.config.ts

@@ -6,7 +6,7 @@ import { routes } from './app.routes';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { OAuthStorage, provideOAuthClient } from 'angular-oauth2-oidc';
-import { httpInterceptor } from '@shared/interceptor/http.interceptor';
+import { httpInterceptor } from './shared/interceptor/http.interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [

frontend/src/app/app.routes.ts

@@ -21,4 +21,14 @@ export const routes: Routes = [
     loadComponent: () => import('./feature/game/blackjack/blackjack.component'),
     canActivate: [authGuard],
   },
+  {
+    path: 'game/lootboxes',
+    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/deposit/deposit.component.ts

@@ -1,18 +1,18 @@
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
   inject,
   Input,
-  OnChanges,
-  OnDestroy,
   OnInit,
   Output,
-  SimpleChanges,
   ViewChild,
+  AfterViewInit,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { loadStripe, Stripe } from '@stripe/stripe-js';

frontend/src/app/feature/game/blackjack/blackjack.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
 import { PlayingCardComponent } from './components/playing-card/playing-card.component';
@@ -6,7 +6,7 @@ import { DealerHandComponent } from './components/dealer-hand/dealer-hand.compon
 import { PlayerHandComponent } from './components/player-hand/player-hand.component';
 import { GameControlsComponent } from './components/game-controls/game-controls.component';
 import { GameInfoComponent } from './components/game-info/game-info.component';
-import { BlackjackGame, Card } from '@blackjack/models/blackjack.model';
+import { Card, BlackjackGame } from '@blackjack/models/blackjack.model';
 import { BlackjackService } from '@blackjack/services/blackjack.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { GameResultComponent } from '@blackjack/components/game-result/game-result.component';

frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts

@@ -1,12 +1,12 @@
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
   Input,
   OnChanges,
   SimpleChanges,
+  ElementRef,
   ViewChild,
+  AfterViewInit,
 } from '@angular/core';
 import { CommonModule, CurrencyPipe } from '@angular/common';
 import { CountUp } from 'countup.js';

frontend/src/app/feature/game/blackjack/components/game-info/game-info.component.ts

@@ -5,8 +5,8 @@ import {
   Input,
   OnChanges,
   Output,
-  signal,
   SimpleChanges,
+  signal,
 } from '@angular/core';
 import { CommonModule, CurrencyPipe } from '@angular/common';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';

frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule, CurrencyPipe } from '@angular/common';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { GameState } from '../../enum/gameState';

frontend/src/app/feature/game/blackjack/components/playing-card/playing-card.component.ts

@@ -1,9 +1,9 @@
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
   Input,
+  AfterViewInit,
+  ElementRef,
   OnChanges,
   SimpleChanges,
 } from '@angular/core';

frontend/src/app/feature/game/blackjack/services/blackjack.service.ts

@@ -1,6 +1,6 @@
-import { inject, Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { catchError, Observable } from 'rxjs';
+import { Observable, catchError } from 'rxjs';
 import { BlackjackGame } from '@blackjack/models/blackjack.model';
 
 @Injectable({

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

@@ -81,16 +81,12 @@
             [isOpen]="isDepositModalOpen"
             (closeModalEmitter)="closeDepositModal()"
           ></app-deposit>
-          <button
+          <button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
-            class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded"
-            (click)="openTransactionModal()"
-          >
             Transaktionen
           </button>
-          <app-transaction-history
+          <button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
-            [isOpen]="isTransactionModalOpen"
+            Kontoeinstellungen
-            (closeEventEmitter)="closeTransactionModal()"
+          </button>
-          />
         </div>
       </div>
 
@@ -104,13 +100,11 @@
         <div class="space-y-3">
           <div
             class="flex justify-between items-center"
-            *ngFor="let transaction of (recentTransactionData | async)?.transactions"
+            *ngFor="let transaction of recentTransactions"
           >
             <div>
-              <p class="text-sm font-medium">{{ transaction.status }}</p>
+              <p class="text-sm font-medium">{{ transaction.type }}</p>
-              <p class="text-xs text-text-secondary">
+              <p class="text-xs text-text-secondary">{{ transaction.date }}</p>
-                {{ transaction.createdAt | date: 'd.m.Y H:m' }}
-              </p>
             </div>
             <span [class]="transaction.amount > 0 ? 'text-emerald' : 'text-accent-red'">
               {{ transaction.amount | currency: 'EUR' }}

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

@@ -1,36 +1,22 @@
-import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { AsyncPipe, CurrencyPipe, DatePipe, NgFor } from '@angular/common';
+import { CurrencyPipe, NgFor } from '@angular/common';
 import { DepositComponent } from '../deposit/deposit.component';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ConfirmationComponent } from '@shared/components/confirmation/confirmation.component';
+import { Transaction } from 'app/model/Transaction';
 import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 import { Game } from 'app/model/Game';
-import { Observable } from 'rxjs';
-import { TransactionService } from '@service/transaction.service';
-import format from 'ajv/dist/vocabularies/format';
-import { TransactionHistoryComponent } from '../transaction-history/transaction-history.component';
-import { TransactionData } from '../../model/TransactionData';
 
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [
+  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent],
-    NavbarComponent,
-    CurrencyPipe,
-    NgFor,
-    DepositComponent,
-    ConfirmationComponent,
-    AsyncPipe,
-    DatePipe,
-    TransactionHistoryComponent,
-  ],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class HomeComponent implements OnInit {
   isDepositModalOpen = false;
   isDepositSuccessful = false;
-  isTransactionModalOpen = false;
 
   constructor(
     public route: ActivatedRoute,
@@ -82,19 +68,17 @@ export default class HomeComponent implements OnInit {
       id: '6',
       name: 'Lootboxen',
       image: '/lootbox.webp',
-      route: '/game/lootbox',
+      route: '/game/lootboxes',
     },
   ];
 
   allGames: Game[] = [...this.featuredGames];
 
-  recentTransactionData: Observable<TransactionData> =
+  recentTransactions: Transaction[] = [];
-    inject(TransactionService).getUsersTransactions(5);
 
   openDepositModal() {
     this.isDepositModalOpen = true;
   }
-
   closeDepositModal() {
     this.isDepositModalOpen = false;
   }
@@ -102,22 +86,11 @@ export default class HomeComponent implements OnInit {
   openDepositConfirmationModal() {
     this.isDepositSuccessful = true;
   }
-
-  openTransactionModal() {
-    this.isTransactionModalOpen = true;
-  }
-
   closeDepositConfirmationModal() {
     this.isDepositSuccessful = false;
   }
 
-  closeTransactionModal() {
-    this.isTransactionModalOpen = false;
-  }
-
   navigateToGame(route: string) {
     this.router.navigate([route]);
   }
-
-  protected readonly format = format;
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, OnDestroy } from '@angular/core';
 import { NgFor } from '@angular/common';
 import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 

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

@@ -0,0 +1,236 @@
+body {
+  background: linear-gradient(to bottom, #181c2a, #232c43);
+}
+
+/* Color classes */
+.text-yellow-400 {
+  color: #facc15;
+}
+.text-purple-400 {
+  color: #a78bfa;
+}
+.text-blue-400 {
+  color: #60a5fa;
+}
+
+.border-yellow-400 {
+  border-color: #facc15;
+}
+.border-purple-400 {
+  border-color: #a78bfa;
+}
+.border-blue-400 {
+  border-color: #60a5fa;
+}
+
+/* Loader animation */
+.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);
+  }
+}
+
+/* Open button styling */
+.open-btn {
+  background: linear-gradient(90deg, #4338ca 0%, #8b5cf6 100%);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease;
+}
+.open-btn:hover {
+  background: linear-gradient(90deg, #4f46e5 0%, #a78bfa 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* CSGO-style case opening display */
+.case-container {
+  position: relative;
+  width: 100%;
+  background: rgba(26, 31, 48, 0.6);
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.case-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%; /* Back to center - we'll adjust the animation instead */
+  transform: translate(-50%, -50%); /* Center precisely */
+  width: 6px;
+  height: 100%;
+  background: #facc15;
+  box-shadow:
+    0 0 10px #facc15,
+    0 0 15px rgba(255, 255, 255, 0.5);
+  z-index: 3;
+  animation: indicator-pulse 1.5s ease-in-out 10s infinite alternate;
+}
+
+@keyframes indicator-pulse {
+  0% {
+    opacity: 0.6;
+    box-shadow:
+      0 0 10px #facc15,
+      0 0 15px rgba(255, 255, 255, 0.3);
+  }
+  100% {
+    opacity: 1;
+    box-shadow:
+      0 0 15px #facc15,
+      0 0 20px rgba(255, 255, 255, 0.7);
+  }
+}
+
+.case-items-container {
+  position: relative;
+  z-index: 1;
+  padding: 10px 5px;
+  margin: 0 auto;
+  width: 100%;
+  height: 150px; /* Fixed height for the horizontal row */
+  overflow: hidden; /* Hide scrollbar */
+  display: flex;
+  justify-content: center; /* Center the items container */
+  align-items: center;
+}
+
+.case-items {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 0px; /* Remove horizontal padding */
+  height: 100%;
+  width: 100%;
+  animation: slide-in 10s cubic-bezier(0.05, 0.82, 0.17, 1) forwards;
+  transform: translateX(3000%); /* Extremely far initial position for 200 items */
+  position: relative; /* Ensure positioning context */
+}
+
+@keyframes slide-in {
+  0% {
+    transform: translateX(2000%);
+  }
+  90% {
+    transform: translateX(-16%); /* Single overshoot for dramatic effect */
+  }
+  100% {
+    transform: translateX(-8%); /* Centered position */
+  }
+}
+
+.case-item {
+  transition: all 0.2s ease;
+  padding: 2px;
+  animation: item-flash 0.3s ease-out forwards;
+  animation-play-state: paused;
+}
+
+@keyframes item-flash {
+  0% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.8);
+  }
+  100% {
+    filter: brightness(1.2);
+  }
+}
+
+.case-item-inner {
+  background: #232c43;
+  border: 2px solid #2d3748;
+  border-radius: 8px;
+  padding: 10px 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+  height: 100%;
+}
+
+.case-item-won {
+  z-index: 2;
+  animation: highlight-winner 1s ease-out 10s forwards;
+}
+
+/* Specific ID for the winning item to ensure it's visible */
+#winning-item {
+  z-index: 5; /* Higher than indicator */
+}
+
+@keyframes highlight-winner {
+  0% {
+    transform: scale(1);
+    filter: brightness(1);
+  }
+  10% {
+    transform: scale(1.3);
+    filter: brightness(2);
+  }
+  20% {
+    transform: scale(1.2);
+    filter: brightness(1.8);
+  }
+  30% {
+    transform: scale(1.25);
+    filter: brightness(2);
+  }
+  40% {
+    transform: scale(1.2);
+    filter: brightness(1.8);
+  }
+  50% {
+    transform: scale(1.25);
+    filter: brightness(2);
+  }
+  60% {
+    transform: scale(1.2);
+    filter: brightness(1.8);
+  }
+  70% {
+    transform: scale(1.25);
+    filter: brightness(2);
+  }
+  80% {
+    transform: scale(1.2);
+    filter: brightness(1.8);
+  }
+  90% {
+    transform: scale(1.25);
+    filter: brightness(2);
+  }
+  100% {
+    transform: scale(1.2);
+    filter: brightness(1.5);
+  }
+}
+
+.amount {
+  font-size: 1rem;
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.rarity {
+  font-size: 0.75rem;
+  opacity: 0.7;
+}

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

@@ -0,0 +1,136 @@
+<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-6">Preis: {{ lootbox.price | currency: 'EUR' }}</div>
+
+    <!-- Before opening - show possible rewards -->
+    <div
+      *ngIf="!isOpening && !isOpen"
+      class="bg-[#1a1f30] p-6 rounded-lg shadow-lg w-full max-w-3xl mb-8"
+    >
+      <h2 class="text-xl font-semibold text-white mb-4">Mögliche Gewinne:</h2>
+      <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+        <div
+          *ngFor="let reward of lootbox.rewards"
+          class="bg-[#232c43] p-4 rounded-lg border border-[#2d3748] text-center"
+        >
+          <div class="text-2xl font-bold mb-1">
+            {{ reward.value | currency: 'EUR' }}
+          </div>
+          <div class="text-sm text-white/60">
+            Chance: {{ reward.probability * 100 | number: '1.0-0' }}%
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Open button -->
+    <div *ngIf="!isOpening && !isOpen" class="flex flex-col items-center mb-8">
+      <button
+        (click)="openLootbox()"
+        class="open-btn text-white px-8 py-3 rounded-lg font-bold text-lg shadow-lg transition-all"
+      >
+        Öffnen
+      </button>
+    </div>
+
+    <!-- Loading state -->
+    <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>
+
+    <!-- Case opening display - CSGO style -->
+    <div *ngIf="isOpen && !isOpening" class="w-full max-w-lg">
+      <!-- Winner display - only shown after animation completes -->
+      <div
+        class="flex flex-col items-center mb-6"
+        style="opacity: 0; animation: fade-in 0.5s ease-out 10.5s forwards"
+      >
+        <div class="text-2xl font-bold text-green-400 mb-2">Dein Gewinn:</div>
+        <div class="text-4xl font-bold text-white mb-4">
+          {{ wonReward?.value | currency: 'EUR' }}
+        </div>
+      </div>
+
+      <style>
+        @keyframes fade-in {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      </style>
+
+      <!-- CSGO-style case opening display (horizontal version) -->
+      <div class="case-container">
+        <!-- Central indicator -->
+        <div class="case-indicator"></div>
+
+        <!-- Horizontal row of prizes -->
+        <div class="case-items-container">
+          <div class="case-items">
+            <!-- Add a reference element first to help with alignment -->
+            <div class="case-item case-item-ref" style="opacity: 0; pointer-events: none"></div>
+
+            <div
+              *ngFor="let reward of prizeList; let i = index"
+              class="case-item"
+              [class.case-item-won]="isWonReward(reward)"
+              [id]="isWonReward(reward) ? 'winning-item' : ''"
+              [style.border]="'none'"
+              [style.animation-delay]="isWonReward(reward) ? '10s' : 8 + (i % 50) * 0.04 + 's'"
+            >
+              <div
+                class="case-item-inner"
+                [style.border]="''"
+                [style.background-color]="''"
+                [style.transform]="''"
+                [style.box-shadow]="''"
+                [style.margin-left]="isWonReward(reward) ? getCenterOffset() : '0'"
+                [style.transition-delay]="(i % 20) * 0.01 + 's'"
+              >
+                <div class="amount">{{ reward.value | currency: 'EUR' }}</div>
+                <div class="rarity">{{ reward.probability * 100 | number: '1.0-0' }}%</div>
+              </div>
+            </div>
+
+            <!-- Add another reference element at the end to help with alignment -->
+            <div class="case-item case-item-ref" style="opacity: 0; pointer-events: none"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Action buttons - only shown after animation completes -->
+      <div
+        class="flex gap-4 justify-center mt-8"
+        style="opacity: 0; animation: fade-in 0.5s ease-out 10.7s forwards"
+      >
+        <button
+          (click)="openAgain()"
+          class="open-btn text-white px-6 py-2 rounded-lg font-semibold transition-all"
+        >
+          Nochmal öffnen
+        </button>
+        <button
+          (click)="goBack()"
+          class="bg-[#232c43] hover:bg-[#2d3748] text-white px-6 py-2 rounded-lg 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,176 @@
+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;
+  isOpen = false;
+  wonReward: Reward | null = null;
+  prizeList: Reward[] = [];
+
+  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.isOpen = false;
+    this.wonReward = null;
+    this.prizeList = []; // Clear previous prizes
+    this.cdr.detectChanges();
+
+    // Short delay to ensure animation plays from the beginning
+    setTimeout(() => {
+      this.lootboxService.purchaseLootBox(this.lootbox!.id).subscribe({
+        next: (reward) => {
+          this.wonReward = reward;
+          this.generateCasePrizes(reward);
+          this.isOpening = false;
+          this.isOpen = true;
+          this.cdr.detectChanges();
+        },
+        error: () => {
+          // Fallback if API fails
+          const rewards = this.lootbox!.rewards;
+          const fallback = rewards[Math.floor(Math.random() * rewards.length)];
+          this.wonReward = fallback;
+          this.generateCasePrizes(fallback);
+          this.isOpening = false;
+          this.isOpen = true;
+          this.cdr.detectChanges();
+        },
+      });
+    }, 100);
+  }
+
+  generateCasePrizes(wonReward: Reward) {
+    if (!this.lootbox) return;
+
+    // Create a case opening display with an extremely large number of prizes for a massive scrolling animation
+    const prizeCount = 200; // Set to 200 for an extremely long scrolling animation
+    const winningPosition = Math.floor(prizeCount / 2); // Position of the winning prize (middle)
+
+    // Get possible rewards from the lootbox
+    const possibleRewards = this.lootbox.rewards;
+
+    // Generate an array of random rewards
+    let items: Reward[] = [];
+    for (let i = 0; i < prizeCount; i++) {
+      // Special handling for the winning position
+      if (i === winningPosition) {
+        items.push(wonReward);
+      } else {
+        // For all other positions, choose a random reward
+        // Weight rarer items to appear less frequently
+        const randomReward = this.getWeightedRandomReward(possibleRewards);
+        items.push(randomReward);
+      }
+    }
+
+    this.prizeList = items;
+  }
+
+  getWeightedRandomReward(rewards: Reward[]): Reward {
+    // Create a weighted distribution based on probabilities
+    const totalProbability = rewards.reduce((sum, reward) => sum + reward.probability, 0);
+    const randomValue = Math.random() * totalProbability;
+
+    let cumulativeProbability = 0;
+    for (const reward of rewards) {
+      cumulativeProbability += reward.probability;
+      if (randomValue <= cumulativeProbability) {
+        return { ...reward }; // Return a copy of the reward
+      }
+    }
+
+    // Fallback, should never reach here
+    return { ...rewards[0] };
+  }
+
+  openAgain() {
+    this.isOpening = false;
+    this.isOpen = false;
+    this.wonReward = null;
+    this.prizeList = [];
+    this.cdr.detectChanges();
+  }
+
+  getBoxImage(id: number): string {
+    return `/images/${id}-box.png`;
+  }
+
+  goBack(): void {
+    this.router.navigate(['/game/lootboxes']);
+  }
+
+  isWonReward(reward: Reward): boolean {
+    if (!this.wonReward) {
+      return false;
+    }
+
+    return (
+      reward.id === this.wonReward.id &&
+      reward.value === this.wonReward.value &&
+      reward.probability === this.wonReward.probability
+    );
+  }
+
+  // Calculate the center position for better alignment
+  getCenterOffset(): string {
+    return '0px'; // No additional offset - using animation transform instead
+  }
+
+  // Check if item is at center position (100th item)
+  isCenterItem(index: number): boolean {
+    return index === Math.floor(200 / 2); // Center item at index 100 (0-indexed)
+  }
+}
+

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

@@ -0,0 +1,53 @@
+<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 *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 class="relative">
+        <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' }}
+        </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 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>
+  </div>
+</div> 

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

@@ -0,0 +1,134 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavbarComponent } from '@shared/components/navbar/navbar.component';
+import { LootboxService } from '../services/lootbox.service';
+import { LootBox } from 'app/model/LootBox';
+import { Router } from '@angular/router';
+import { timeout } from 'rxjs';
+
+@Component({
+  selector: 'app-lootbox-selection',
+  standalone: true,
+  imports: [CommonModule, NavbarComponent],
+  templateUrl: './lootbox-selection.component.html',
+  styleUrls: ['./lootbox-selection.component.css']
+})
+export default class LootboxSelectionComponent implements OnInit {
+  lootboxes: LootBox[] = [];
+  isLoading = true;
+  error = '';
+
+  // Fallback data in case the API call fails
+  fallbackLootboxes: LootBox[] = [
+    {
+      id: 1,
+      name: "Basic LootBox",
+      price: 2.00,
+      rewards: [
+        {
+          id: 1,
+          value: 0.50,
+          probability: 0.70
+        },
+        {
+          id: 5,
+          value: 5.00,
+          probability: 0.30
+        }
+      ]
+    },
+    {
+      id: 2,
+      name: "Premium LootBox",
+      price: 5.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
+        }
+      ]
+    },
+    {
+      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
+        }
+      ]
+    }
+  ];
+
+  constructor(private lootboxService: LootboxService, private router: Router, private cdr: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    this.loadLootboxes();
+  }
+
+  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);
+      }
+    });
+  }
+
+  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/feature/transaction-history/transaction-history.component.css

@@ -1,8 +0,0 @@
-button[disabled] {
-  cursor: not-allowed;
-  background-color: #077b58;
-  box-shadow: none;
-}
-button[disabled]:hover {
-  background-color: #077b58;
-}

frontend/src/app/feature/transaction-history/transaction-history.component.html

@@ -1,60 +0,0 @@
-<div *ngIf="isOpen" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed">
-  <div class="modal-card" [@cardAnimation]>
-    <button
-      type="button"
-      (click)="closeDialog()"
-      class="absolute top-2 right-2 text-text-secondary"
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
-        <path
-          fill="none"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M18 6L6 18M6 6l12 12"
-        />
-      </svg>
-    </button>
-    <h2 class="modal-heading mb-0">Transaktionen</h2>
-    <p class="pb-1 text-text-secondary mb-4">Hier siehst du alle vergangenen Einzahlungen</p>
-    @for (transaction of (transactionData$ | async)?.transactions; track null) {
-      <div class="flex justify-between items-center mb-4">
-        <div>
-          <p class="text-sm font-medium">{{ transaction.status }}</p>
-          <p class="text-xs text-text-secondary">{{ transaction.createdAt | date: 'd.m.Y H:m' }}</p>
-        </div>
-        <span [class]="transaction.amount > 0 ? 'text-emerald' : 'text-accent-red'">
-          {{ transaction.amount | currency: 'EUR' }}
-        </span>
-      </div>
-    } @empty {
-      <div class="flex justify-center items-center w-full h-32">
-        <div
-          class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full border-gray-300 border-t-gree-600"
-          role="status"
-        >
-          <span class="sr-only">Loading...</span>
-        </div>
-      </div>
-    }
-    <div class="inline inline-flex w-full gap-2">
-      <button
-        type="button"
-        (click)="back()"
-        class="button-primary w-full py-2"
-        [disabled]="offset <= 0"
-      >
-        <
-      </button>
-      <button
-        type="button"
-        (click)="forward()"
-        class="button-primary w-full py-2"
-        [disabled]="!(transactionData$ | async)?.hasMore"
-      >
-        >
-      </button>
-    </div>
-  </div>
-</div>

frontend/src/app/feature/transaction-history/transaction-history.component.ts

@@ -1,54 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  inject,
-  Input,
-  Output,
-} from '@angular/core';
-import { TransactionService } from '@service/transaction.service';
-import { Observable } from 'rxjs';
-import { AsyncPipe, CurrencyPipe, DatePipe, NgForOf, NgIf } from '@angular/common';
-import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
-import { TransactionData } from '../../model/TransactionData';
-
-const PER_PAGE = 5;
-
-@Component({
-  standalone: true,
-  selector: 'app-transaction-history',
-  imports: [NgForOf, AsyncPipe, CurrencyPipe, DatePipe, AnimatedNumberComponent, NgIf],
-  templateUrl: './transaction-history.component.html',
-  styleUrl: './transaction-history.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TransactionHistoryComponent {
-  @Input()
-  isOpen = false;
-  @Output()
-  closeEventEmitter = new EventEmitter<void>();
-
-  protected offset = 0;
-
-  private transactionService: TransactionService = inject(TransactionService);
-  transactionData$: Observable<TransactionData> = this.loadTransactions();
-
-  closeDialog() {
-    this.isOpen = false;
-    this.closeEventEmitter.emit();
-  }
-
-  forward() {
-    this.offset++;
-    this.transactionData$ = this.loadTransactions();
-  }
-
-  back() {
-    this.offset--;
-    this.transactionData$ = this.loadTransactions();
-  }
-
-  loadTransactions() {
-    return this.transactionService.getUsersTransactions(PER_PAGE, this.offset * PER_PAGE);
-  }
-}

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

frontend/src/app/model/Transaction.ts

@@ -1,5 +1,6 @@
 export interface Transaction {
-  status: string;
+  id: string;
+  type: string;
   amount: number;
-  createdAt: string;
+  date: string;
 }

frontend/src/app/model/TransactionData.ts

@@ -1,6 +0,0 @@
-import { Transaction } from './Transaction';
-
-export interface TransactionData {
-  transactions: Transaction[];
-  hasMore: boolean;
-}

frontend/src/app/service/transaction.service.ts

@@ -1,24 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { TransactionData } from '../model/TransactionData';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class TransactionService {
-  private http: HttpClient = inject(HttpClient);
-
-  public getUsersTransactions(limit: number | null = null, offset: number | null = null) {
-    const baseUrl = new URL(`${window.location.origin}/backend/user/transactions`);
-
-    if (limit !== null) {
-      baseUrl.searchParams.append('limit', limit.toString());
-    }
-
-    if (offset !== null) {
-      baseUrl.searchParams.append('offset', offset.toString());
-    }
-
-    return this.http.get<TransactionData>(`${baseUrl}`);
-  }
-}

frontend/src/app/shared/components/confirmation/confirmation.component.ts

@@ -1,12 +1,12 @@
 import {
-  AfterViewInit,
   Component,
   ElementRef,
   EventEmitter,
   Input,
-  OnDestroy,
   Output,
   ViewChild,
+  AfterViewInit,
+  OnDestroy,
 } from '@angular/core';
 import { ModalAnimationService } from '@shared/services/modal-animation.service';
 import gsap from 'gsap';

frontend/src/app/shared/components/footer/footer.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faCreditCard, faMoneyBillTransfer, faWallet } from '@fortawesome/free-solid-svg-icons';
+import { faMoneyBillTransfer, faCreditCard, faWallet } from '@fortawesome/free-solid-svg-icons';
-import { faApplePay, faGooglePay, faPaypal } from '@fortawesome/free-brands-svg-icons';
+import { faPaypal, faGooglePay, faApplePay } from '@fortawesome/free-brands-svg-icons';
 
 @Component({
   selector: 'app-footer',

frontend/src/app/shared/components/navbar/navbar.component.ts

@@ -2,8 +2,8 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
-  OnDestroy,
   OnInit,
+  OnDestroy,
   signal,
 } from '@angular/core';
 import { RouterModule } from '@angular/router';

frontend/src/assets/images/lootboxes/common-box.png

@@ -0,0 +1 @@
+ 

frontend/src/assets/images/lootboxes/legendary-box.png

@@ -0,0 +1 @@
+ 

frontend/src/assets/images/lootboxes/rare-box.png

@@ -0,0 +1 @@
+