feat(lootboxes): add lootbox opening feature and images

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

@@ -0,0 +1,156 @@
+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;
+  wonReward: Reward | null = null;
+  strip: Reward[] = [];
+  stripTranslateX = 0;
+  stripTransition = 'none';
+
+  // Config
+  readonly visibleCount = 7;
+  readonly rewardWidth = 120;
+  readonly stripLength = 200;
+  readonly ticks = 60;
+  readonly minTickMs = 30;
+  readonly maxTickMs = 180;
+  private tickIndex = 0;
+  private stopIndex = 0;
+  private center = Math.floor(this.visibleCount / 2);
+  private animationTimeout: any;
+
+  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.wonReward = null;
+    this.stripTransition = 'none';
+    this.stripTranslateX = 0;
+    this.cdr.detectChanges();
+    this.lootboxService.purchaseLootBox(this.lootbox.id).subscribe({
+      next: (reward) => this.startSlidingAnimation(reward),
+      error: () => {
+        const rewards = this.lootbox!.rewards;
+        const fallback = rewards[Math.floor(Math.random() * rewards.length)];
+        this.startSlidingAnimation(fallback);
+      }
+    });
+  }
+
+  private startSlidingAnimation(won: Reward) {
+    // Fill the strip with shuffled rewards, repeat as needed
+    const rewards = this.lootbox!.rewards;
+    let strip: Reward[] = [];
+    while (strip.length < this.stripLength) {
+      strip = strip.concat(shuffle(rewards));
+    }
+    // Place the won reward at the final center position
+    this.center = Math.floor(this.visibleCount / 2);
+    this.stopIndex = this.ticks + this.center;
+    strip[this.stopIndex] = won;
+    this.strip = strip;
+    this.stripTransition = 'none';
+    this.stripTranslateX = 0;
+    this.tickIndex = 0;
+    this.cdr.detectChanges();
+    this.stepSliding();
+  }
+
+  private stepSliding() {
+    if (this.tickIndex > this.ticks) {
+      // Animation done
+      this.stripTransition = 'none';
+      this.stripTranslateX = -((this.stopIndex - this.center) * this.rewardWidth);
+      this.isOpening = false;
+      this.wonReward = this.strip[this.stopIndex];
+      this.cdr.detectChanges();
+      return;
+    }
+    // Ease-out: slow down at the end
+    const progress = this.tickIndex / this.ticks;
+    const eased = 1 - Math.pow(1 - progress, 2.5);
+    const currentIndex = Math.round(eased * (this.stopIndex - this.center));
+    this.stripTransition = 'transform 0.12s cubic-bezier(0.4,0.7,0.5,1)';
+    this.stripTranslateX = -(currentIndex * this.rewardWidth);
+    this.cdr.detectChanges();
+    // Calculate next tick interval
+    const tickMs = this.minTickMs + (this.maxTickMs - this.minTickMs) * eased;
+    this.tickIndex++;
+    this.animationTimeout = setTimeout(() => this.stepSliding(), tickMs);
+  }
+
+  openAgain() {
+    this.isOpening = false;
+    this.wonReward = null;
+    this.strip = [];
+    this.stripTranslateX = 0;
+    this.stripTransition = 'none';
+    this.cdr.detectChanges();
+  }
+
+  getBoxImage(id: number): string {
+    return `/images/${id}-box.png`;
+  }
+
+  goBack(): void {
+    this.router.navigate(['/game/lootboxes']);
+  }
+
+  getRarityClass(prob: number): string {
+    if (prob <= 0.1) return 'text-yellow-400';
+    if (prob <= 0.3) return 'text-purple-400';
+    return 'text-blue-400';
+  }
+}