SZUT/casino
SZUT/casino
Archived
3
1
Fork 0
Code Issues Pull requests 2 Releases 162 Packages 2 Wiki Activity Actions

style: clean up and reorganize lootbox component styles

Browse source
This commit is contained in:
Jan K9f 2025-04-23 13:47:36 +02:00 • committed by Jan-Marlon Leibl
commit 6f61e6dc3d
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
3 changed files with 286 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,25 +25,12 @@ export default class LootboxOpeningComponent {
lootbox: LootBox | null = null;
isLoading = true;
error = '';
// UI State
isOpening = false;
isOpen = 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;
prizeList: Reward[] = [];
constructor(
private route: ActivatedRoute,
@ -75,68 +62,84 @@ export default class LootboxOpeningComponent {
openLootbox() {
if (!this.lootbox || this.isOpening) return;
this.isOpening = true;
this.isOpen = false;
this.wonReward = null;
this.stripTransition = 'none';
this.stripTranslateX = 0;
this.prizeList = []; // Clear previous prizes
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);
// 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 fewer prizes to fit on screen without scrolling
const prizeCount = 9; // Total number of prizes to show (odd number to have center prize)
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);
}
});
}
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();
this.prizeList = items;
}
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;
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
}
}
// 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);
// Fallback, should never reach here
return { ...rewards[0] };
}
openAgain() {
this.isOpening = false;
this.isOpen = false;
this.wonReward = null;
this.strip = [];
this.stripTranslateX = 0;
this.stripTransition = 'none';
this.prizeList = [];
this.cdr.detectChanges();
}
@ -149,8 +152,18 @@ export default class LootboxOpeningComponent {
}
getRarityClass(prob: number): string {
if (prob <= 0.1) return 'text-yellow-400';
if (prob <= 0.3) return 'text-purple-400';
return 'text-blue-400';
if (prob <= 0.1) return 'text-yellow-400 border-yellow-400';
if (prob <= 0.3) return 'text-purple-400 border-purple-400';
return 'text-blue-400 border-blue-400';
}
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;
}
}