refactor: rename landing component and remove unused files
This commit is contained in:
parent
ea26f5dd80
commit
e6f054f10e
10 changed files with 0 additions and 1775 deletions
|
|
@ -1,481 +0,0 @@
|
|||
<div class="min-h-screen bg-gradient-to-br from-slate-950 via-black to-slate-950 relative">
|
||||
<div class="fixed top-0 left-0 right-0 z-50 transform-gpu">
|
||||
<div
|
||||
class="bg-gradient-to-r from-emerald-600 to-emerald-500 text-white transition-all duration-500 ease-in-out"
|
||||
[class.py-1]="isScrolled"
|
||||
[class.py-1.5]="!isScrolled"
|
||||
>
|
||||
<div class="container mx-auto px-4 overflow-hidden">
|
||||
<div #winnersMarquee class="flex items-center gap-12 animate-marquee will-change-transform">
|
||||
<span
|
||||
*ngFor="let winner of recentWinners$ | async"
|
||||
class="flex items-center gap-3 whitespace-nowrap"
|
||||
>
|
||||
<span class="text-yellow-300 text-lg animate-pulseGlow will-change-transform">🎰</span>
|
||||
<span class="font-medium">
|
||||
{{ winner.name }}
|
||||
<span class="text-yellow-300 font-semibold">{{ winner.isVIP ? '(VIP)' : '' }}</span>
|
||||
won <span class="text-yellow-300 font-semibold">€{{ winner.amount | number }}</span>
|
||||
<span class="text-yellow-300">({{ winner.multiplier }}x)</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
class="w-full transition-all duration-500 ease-in-out transform-gpu will-change-transform"
|
||||
[ngClass]="{
|
||||
'bg-black/80 backdrop-blur-xl border-b border-white/5 py-3': isScrolled,
|
||||
'bg-transparent py-4': !isScrolled,
|
||||
}"
|
||||
>
|
||||
<div class="container mx-auto px-6">
|
||||
<div
|
||||
class="flex justify-between items-center transition-all duration-500 ease-in-out transform-gpu"
|
||||
>
|
||||
<div class="flex items-center gap-6">
|
||||
<div
|
||||
class="text-3xl font-black tracking-tight bg-gradient-to-r from-white via-yellow-200 to-white bg-clip-text text-transparent animate-shimmer will-change-transform"
|
||||
>
|
||||
TRUSTWORTHY
|
||||
</div>
|
||||
<div
|
||||
class="px-3 py-1 bg-emerald-500/10 rounded-full border border-emerald-500/20 transition-all duration-300 hover:bg-emerald-500/20"
|
||||
>
|
||||
<span class="text-emerald-400 text-sm font-medium">Licensed & Regulated</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-8 items-center">
|
||||
<div class="flex flex-col items-end">
|
||||
<div class="animate-pulseGlow will-change-transform">
|
||||
<span class="text-emerald-400 font-bold"
|
||||
>🔥 {{ onlinePlayers$ | async | number }} Players Online</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-white/60 text-sm"
|
||||
>{{ totalWinnersToday | number }} Winners Today</span
|
||||
>
|
||||
<span class="text-emerald-500 text-xs font-semibold">(78.9% Win Rate)</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
(click)="claimBonus(); onButtonClick($event)"
|
||||
class="relative group px-8 py-3 bg-gradient-to-r from-emerald-500 to-emerald-400 text-black font-bold rounded-full transition-all duration-300 ease-out transform-gpu hover:scale-105 hover:shadow-xl hover:shadow-emerald-500/20 will-change-transform"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 rounded-full bg-white/20 opacity-0 group-hover:opacity-100 transition-all duration-500 ease-in-out"
|
||||
></div>
|
||||
<span class="relative text-sm tracking-wide">START PLAYING</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="h-[100px] transition-all duration-500 ease-in-out"></div>
|
||||
|
||||
<div class="relative overflow-hidden">
|
||||
<div #particleContainer class="absolute inset-0 pointer-events-none"></div>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(76,29,149,0.1),rgba(0,0,0,0))] animate-[pulse_4s_ease-in-out_infinite]"
|
||||
>
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute opacity-20 animate-float" style="top: 10%; left: 5%">🎰</div>
|
||||
<div class="absolute opacity-20 animate-float delay-100" style="top: 30%; left: 15%">
|
||||
💎
|
||||
</div>
|
||||
<div class="absolute opacity-20 animate-float delay-200" style="top: 50%; left: 25%">
|
||||
7️⃣
|
||||
</div>
|
||||
<div class="absolute opacity-20 animate-float delay-300" style="top: 70%; left: 35%">
|
||||
🃏
|
||||
</div>
|
||||
<div class="absolute opacity-20 animate-float delay-400" style="top: 20%; right: 15%">
|
||||
💰
|
||||
</div>
|
||||
<div class="absolute opacity-20 animate-float delay-500" style="top: 40%; right: 25%">
|
||||
🎲
|
||||
</div>
|
||||
<div class="absolute opacity-20 animate-float" style="top: 60%; right: 35%">👑</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div #heroSection class="relative z-10">
|
||||
<div class="container mx-auto px-6 pt-16">
|
||||
<div class="text-center mb-12">
|
||||
<div
|
||||
class="inline-block bg-black/40 backdrop-blur-xl rounded-2xl px-10 py-6 border border-white/5 animate-tiltAndGlow"
|
||||
>
|
||||
<div class="text-lg text-white/80 mb-3 font-medium">🏆 MEGA JACKPOT GROWING</div>
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<span
|
||||
#jackpotCounter
|
||||
class="text-6xl font-bold text-white tracking-tight animate-pulseGlow drop-shadow-[0_0_8px_rgba(34,197,94,0.3)]"
|
||||
>
|
||||
€{{ currentJackpot$ | async | number }}
|
||||
</span>
|
||||
<span class="text-emerald-500 text-lg animate-bounce">↑</span>
|
||||
</div>
|
||||
<div class="text-sm text-white/60 mt-3 font-medium">Must drop before €2,000,000</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-20 relative max-w-4xl mx-auto">
|
||||
<div
|
||||
class="absolute -inset-1 bg-gradient-to-r from-emerald-600/20 via-emerald-500/20 to-emerald-600/20 rounded-2xl blur-2xl animate-morphBackground"
|
||||
></div>
|
||||
<div class="relative bg-black/40 backdrop-blur-xl p-10 rounded-2xl border border-white/5">
|
||||
<div
|
||||
class="inline-block px-4 py-1.5 bg-gradient-to-r from-emerald-500 to-emerald-400 rounded-full text-black text-sm mb-6 font-bold tracking-wide animate-pulseGlow"
|
||||
>
|
||||
EXCLUSIVE VIP OFFER
|
||||
</div>
|
||||
<h1 class="text-7xl font-black text-white tracking-tight mb-8">
|
||||
<div class="text-3xl text-white/80 mb-4 font-bold">START WITH</div>
|
||||
<div
|
||||
class="text-8xl bg-gradient-to-r from-white via-yellow-200 to-white bg-clip-text text-transparent animate-shimmer"
|
||||
>
|
||||
€10,000
|
||||
</div>
|
||||
<div class="text-2xl text-emerald-400 mt-4 font-bold">GUARANTEED WINNINGS*</div>
|
||||
</h1>
|
||||
|
||||
<div class="mb-10">
|
||||
<div class="text-4xl font-bold text-white mb-3 tracking-tight">
|
||||
1000% FIRST DEPOSIT MATCH
|
||||
<div class="text-xl text-yellow-400 mt-2">+ 1000 FREE SPINS</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-lg text-red-400 font-semibold animate-pulseGlow drop-shadow-[0_0_8px_rgba(239,68,68,0.3)]"
|
||||
>
|
||||
<span>⚠️ Offer expires in: {{ timeLeft$ | async }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
(click)="claimBonus(); onButtonClick($event)"
|
||||
class="group relative px-12 py-5 bg-gradient-to-r from-emerald-500 to-emerald-400 rounded-full transition-all duration-300 transform hover:scale-105 hover:shadow-2xl hover:shadow-emerald-500/20"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 rounded-full bg-white/20 opacity-0 group-hover:opacity-100 transition-all duration-500"
|
||||
></div>
|
||||
<span class="relative text-2xl font-bold text-black tracking-wide"
|
||||
>CLAIM YOUR €10,000 NOW</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center gap-12 mt-10">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-emerald-500">✓</span>
|
||||
<span class="text-white/60 font-medium">Instant Withdrawals</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-emerald-500">✓</span>
|
||||
<span class="text-white/60 font-medium">24/7 VIP Support</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-emerald-500">✓</span>
|
||||
<span class="text-white/60 font-medium">100% Win Guarantee*</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-black/40 backdrop-blur-xl rounded-xl p-4 mb-16 overflow-hidden border border-white/5"
|
||||
>
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="flex-none animate-marquee">
|
||||
<span *ngFor="let winner of recentWinners$ | async" class="mx-6 whitespace-nowrap">
|
||||
<span
|
||||
[class.animate-pulseGlow]="winner.isVIP"
|
||||
[class.drop-shadow-[0_0_8px_rgba(234,179,8,0.3)]]="winner.isVIP"
|
||||
class="text-white/80 font-medium"
|
||||
>
|
||||
🎰 {{ winner.name }}
|
||||
<span class="text-yellow-400 font-semibold">{{
|
||||
winner.isVIP ? '(VIP)' : ''
|
||||
}}</span>
|
||||
turned <span class="text-emerald-400">€{{ winner.betAmount }}</span> into
|
||||
<span class="text-emerald-400 font-bold">€{{ winner.amount | number }}</span>
|
||||
<span class="text-yellow-400">({{ winner.multiplier }}x)</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div #gamesGrid class="mb-20">
|
||||
<h2 class="text-4xl font-black text-white mb-12 text-center tracking-tight">
|
||||
<span
|
||||
class="bg-gradient-to-r from-white via-yellow-200 to-white bg-clip-text text-transparent animate-shimmer"
|
||||
>
|
||||
TOP WINNING GAMES
|
||||
</span>
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div
|
||||
*ngFor="let game of games$ | async"
|
||||
class="game-card group relative overflow-hidden rounded-2xl cursor-pointer bg-black/40 backdrop-blur-xl border border-white/5 transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-emerald-500/10"
|
||||
(mouseenter)="onGameCardHover($event)"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 to-emerald-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
></div>
|
||||
<img
|
||||
[src]="game.imageUrl"
|
||||
[alt]="game.name"
|
||||
class="w-full h-64 object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/80 to-transparent">
|
||||
<div class="absolute bottom-0 left-0 right-0 p-8">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="text-2xl font-bold text-white tracking-tight">{{ game.name }}</h3>
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<span
|
||||
class="bg-emerald-500/20 text-emerald-400 text-sm px-3 py-1 rounded-full font-medium animate-pulseGlow"
|
||||
>HOT 🔥</span
|
||||
>
|
||||
<span class="text-yellow-400 text-sm"
|
||||
>{{ game.lastWinner }} won €{{ game.lastWin | number }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-white/60 mb-6 font-medium">{{ game.description }}</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span
|
||||
class="text-emerald-400 font-bold animate-pulseGlow drop-shadow-[0_0_8px_rgba(34,197,94,0.2)]"
|
||||
>
|
||||
{{ game.winChance }}% Win Rate
|
||||
</span>
|
||||
<span class="text-yellow-400 font-medium"
|
||||
>Max Win: €{{ game.maxWin | number }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-white/60"
|
||||
>Min: €{{ game.minBet }} | Max: €{{ game.maxBet }}</span
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-white/60">Popularity:</span>
|
||||
<div class="w-24 h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full bg-gradient-to-r from-emerald-500 to-emerald-400 transition-all duration-500"
|
||||
[style.width]="game.popularity + '%'"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center pt-2">
|
||||
<div class="flex gap-2">
|
||||
<span
|
||||
*ngFor="let feature of game.features"
|
||||
class="text-xs px-3 py-1 rounded-full bg-white/5 text-white/60 font-medium"
|
||||
>
|
||||
{{ feature }}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
(click)="playNow(game.id); onButtonClick($event)"
|
||||
class="px-6 py-2.5 bg-gradient-to-r from-emerald-500 to-emerald-400 text-black font-bold rounded-full transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-emerald-500/20 text-sm tracking-wide"
|
||||
>
|
||||
PLAY NOW
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-8 text-center mb-20">
|
||||
<div
|
||||
class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale"
|
||||
>
|
||||
<div class="text-4xl mb-6 animate-float">💎</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3 tracking-tight">Elite VIP Status</h3>
|
||||
<p class="text-white/60 font-medium">Up to €50,000 monthly rewards</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale delay-100"
|
||||
>
|
||||
<div class="text-4xl mb-6 animate-float delay-100">⚡️</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3 tracking-tight">Instant Cashouts</h3>
|
||||
<p class="text-white/60 font-medium">Get paid in 5 minutes!</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale delay-200"
|
||||
>
|
||||
<div class="text-4xl mb-6 animate-float delay-200">🎁</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3 tracking-tight">Daily Rewards</h3>
|
||||
<p class="text-white/60 font-medium">Win up to €5,000 daily!</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale delay-300"
|
||||
>
|
||||
<div class="text-4xl mb-6 animate-float delay-300">🏆</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3 tracking-tight">99.9% Win Rate*</h3>
|
||||
<p class="text-white/60 font-medium">Highest odds in the industry!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fine Print -->
|
||||
<div class="text-center text-xs text-white/40 max-w-2xl mx-auto mb-20">
|
||||
*Terms and conditions apply. Guaranteed winnings based on maximum bonus utilization. Win
|
||||
rate calculated on minimum bets. Withdrawal restrictions and wagering requirements apply.
|
||||
Please gamble responsibly.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
*ngIf="showPopup$ | async"
|
||||
[@fadeSlide]
|
||||
class="fixed inset-0 z-50 flex items-center justify-center px-4"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-black/90 backdrop-blur-md animate-backdropBlur"
|
||||
(click)="closePopup()"
|
||||
></div>
|
||||
<div
|
||||
*ngIf="currentPopup$ | async as popup"
|
||||
class="relative bg-black/80 rounded-2xl p-10 border border-white/10 max-w-lg w-full transform animate-bounceAndFade"
|
||||
>
|
||||
<div
|
||||
class="absolute -inset-1 bg-gradient-to-r from-emerald-600/20 via-emerald-500/20 to-emerald-600/20 rounded-2xl blur-2xl opacity-50 animate-glow"
|
||||
></div>
|
||||
<div class="relative">
|
||||
<button
|
||||
(click)="closePopup(); onButtonClick($event)"
|
||||
class="absolute -top-2 -right-2 w-8 h-8 flex items-center justify-center bg-black/80 rounded-full border border-white/10 text-white/40 hover:text-white/60 hover:scale-110 hover:border-white/20 transition-all duration-300 group"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 transform group-hover:rotate-90 transition-transform duration-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="text-3xl font-black text-white mb-4 tracking-tight animate-slideDown">
|
||||
{{ popup.title }}
|
||||
</h2>
|
||||
<p class="text-xl text-white/80 mb-3 font-medium animate-slideDown delay-100">
|
||||
{{ popup.message }}
|
||||
</p>
|
||||
<p
|
||||
*ngIf="popup.subMessage"
|
||||
class="text-sm text-emerald-400 mb-8 font-medium animate-slideDown delay-200"
|
||||
>
|
||||
{{ popup.subMessage }}
|
||||
</p>
|
||||
<img
|
||||
*ngIf="popup.imageUrl"
|
||||
[src]="popup.imageUrl"
|
||||
[alt]="popup.title"
|
||||
class="w-full h-48 object-cover rounded-xl mb-8 animate-scaleIn"
|
||||
/>
|
||||
<div class="flex justify-between items-center animate-slideUp delay-300">
|
||||
<button
|
||||
(click)="closePopup(); onButtonClick($event)"
|
||||
class="text-white/40 hover:text-white/60 transition-all duration-300 font-medium hover:transform hover:translate-x-1"
|
||||
>
|
||||
Maybe later
|
||||
</button>
|
||||
<button
|
||||
(click)="claimBonus(); onButtonClick($event)"
|
||||
class="group px-8 py-3 bg-gradient-to-r from-emerald-500 to-emerald-400 text-black font-bold rounded-full transition-all duration-500 transform hover:scale-105 hover:shadow-2xl hover:shadow-emerald-500/20 hover:translate-x-0.5 text-sm tracking-wide"
|
||||
>
|
||||
<span class="relative z-10 group-hover:tracking-wider transition-all duration-300">{{
|
||||
popup.cta
|
||||
}}</span>
|
||||
<div
|
||||
class="absolute inset-0 rounded-full bg-white/20 opacity-0 group-hover:opacity-100 transition-all duration-500 scale-105 group-hover:scale-100"
|
||||
></div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
*ngIf="popup.expires"
|
||||
class="mt-6 text-sm text-red-400 font-semibold animate-slideUp delay-400 drop-shadow-[0_0_8px_rgba(239,68,68,0.3)]"
|
||||
>
|
||||
<span class="animate-pulseGlow inline-block">⏰ Expires in: {{ popup.expires }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
*ngIf="nearMiss"
|
||||
[@fadeSlide]
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/95 backdrop-blur-xl"
|
||||
>
|
||||
<div class="absolute inset-0 animate-backdropBlur" (click)="nearMiss = false"></div>
|
||||
<div
|
||||
class="relative bg-black/80 rounded-2xl p-10 border border-white/10 max-w-lg w-full transform animate-bounceAndFade"
|
||||
>
|
||||
<button
|
||||
(click)="nearMiss = false; onButtonClick($event)"
|
||||
class="absolute -top-2 -right-2 w-8 h-8 flex items-center justify-center bg-black/80 rounded-full border border-white/10 text-white/40 hover:text-white/60 hover:scale-110 hover:border-white/20 transition-all duration-300 group"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 transform group-hover:rotate-90 transition-transform duration-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="text-7xl mb-6 animate-spinAndBounce drop-shadow-[0_0_15px_rgba(234,179,8,0.5)]"
|
||||
>
|
||||
🎰
|
||||
</div>
|
||||
<h2 class="text-4xl font-black text-white mb-4 tracking-tight animate-slideDown">
|
||||
SO CLOSE!
|
||||
</h2>
|
||||
<p class="text-xl text-white/80 mb-6 font-medium animate-slideDown delay-100">
|
||||
Just one more spin to win the MEGA JACKPOT!
|
||||
</p>
|
||||
<div class="text-emerald-400 font-semibold mb-8 animate-slideDown delay-200">
|
||||
<span class="animate-pulseGlow inline-block">
|
||||
Hot streak detected - Increased win probability activated!
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
(click)="playNow('mega-fortune'); onButtonClick($event)"
|
||||
class="group px-8 py-3 bg-gradient-to-r from-emerald-500 to-emerald-400 text-black font-bold rounded-full transition-all duration-500 transform hover:scale-105 hover:shadow-2xl hover:shadow-emerald-500/20 text-sm tracking-wide animate-slideUp"
|
||||
>
|
||||
<span class="relative z-10 group-hover:tracking-wider transition-all duration-300"
|
||||
>SPIN AGAIN</span
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 rounded-full bg-white/20 opacity-0 group-hover:opacity-100 transition-all duration-500 scale-105 group-hover:scale-100"
|
||||
></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,262 +0,0 @@
|
|||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
NgZone,
|
||||
ElementRef,
|
||||
ViewChild,
|
||||
AfterViewInit,
|
||||
} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Router } from '@angular/router';
|
||||
import { Subject, interval, Observable } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { animate, style, transition, trigger } from '@angular/animations';
|
||||
|
||||
import { PopupService } from '../services/popup.service';
|
||||
import { GameService } from '../services/game.service';
|
||||
import { WinnerService } from '../services/winner.service';
|
||||
import { JackpotService } from '../services/jackpot.service';
|
||||
import { AnimationService } from '../services/animation.service';
|
||||
|
||||
import { AnimatedButtonComponent } from '../shared/components/animated-button/animated-button.component';
|
||||
import { WinnerTickerComponent } from '../shared/components/winner-ticker/winner-ticker.component';
|
||||
import { GameCardComponent } from '../shared/components/game-card/game-card.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing',
|
||||
standalone: true,
|
||||
imports: [CommonModule, AnimatedButtonComponent, WinnerTickerComponent, GameCardComponent],
|
||||
templateUrl: './landing.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
animations: [
|
||||
trigger('fadeSlide', [
|
||||
transition(':enter', [
|
||||
style({ opacity: 0, transform: 'translateY(20px)' }),
|
||||
animate(
|
||||
'0.5s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
style({ opacity: 1, transform: 'translateY(0)' })
|
||||
),
|
||||
]),
|
||||
transition(':leave', [
|
||||
animate(
|
||||
'0.5s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
style({ opacity: 0, transform: 'translateY(-20px)' })
|
||||
),
|
||||
]),
|
||||
]),
|
||||
],
|
||||
})
|
||||
export class LandingComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
private destroy$ = new Subject<void>();
|
||||
nearMiss = false;
|
||||
isScrolled = false;
|
||||
|
||||
@ViewChild('jackpotCounter') jackpotCounter!: ElementRef;
|
||||
@ViewChild('heroSection') heroSection!: ElementRef;
|
||||
@ViewChild('gamesGrid') gamesGrid!: ElementRef;
|
||||
@ViewChild('winnersMarquee') winnersMarquee!: ElementRef;
|
||||
@ViewChild('particleContainer') particleContainer!: ElementRef;
|
||||
|
||||
readonly showPopup$: Observable<boolean>;
|
||||
readonly currentPopup$: Observable<any>;
|
||||
readonly games$: Observable<any[]>;
|
||||
readonly recentWinners$: Observable<any[]>;
|
||||
readonly onlinePlayers$: Observable<number>;
|
||||
readonly currentJackpot$: Observable<number>;
|
||||
readonly timeLeft$: Observable<string>;
|
||||
readonly totalPlayersToday: number;
|
||||
readonly totalWinnersToday: number;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private ngZone: NgZone,
|
||||
private popupService: PopupService,
|
||||
private gameService: GameService,
|
||||
private winnerService: WinnerService,
|
||||
private jackpotService: JackpotService,
|
||||
private animationService: AnimationService
|
||||
) {
|
||||
this.showPopup$ = this.popupService.showPopup$;
|
||||
this.currentPopup$ = this.popupService.currentPopup$;
|
||||
this.games$ = this.gameService.games$;
|
||||
this.recentWinners$ = this.winnerService.recentWinners$;
|
||||
this.onlinePlayers$ = this.winnerService.onlinePlayers$;
|
||||
this.currentJackpot$ = this.jackpotService.currentJackpot$;
|
||||
this.timeLeft$ = this.jackpotService.timeLeft$;
|
||||
this.totalPlayersToday = this.winnerService.getTotalPlayersToday();
|
||||
this.totalWinnersToday = this.winnerService.getTotalWinnersToday();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initializeTimers();
|
||||
this.initializeScrollListener();
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.initializeAnimations();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
window.removeEventListener('scroll', () => {
|
||||
this.isScrolled = window.scrollY > 0;
|
||||
});
|
||||
}
|
||||
|
||||
private initializeAnimations(): void {
|
||||
this.animationService.createParticleEffect(this.particleContainer);
|
||||
this.animationService.animateEntrance(this.heroSection);
|
||||
const gameCards = this.gamesGrid?.nativeElement.querySelectorAll('.game-card');
|
||||
if (gameCards) {
|
||||
gameCards.forEach((card: HTMLElement, index: number) => {
|
||||
this.animationService.animateEntrance(new ElementRef(card), 0.1 * index);
|
||||
});
|
||||
}
|
||||
|
||||
this.animationService.animateOnScroll(this.gamesGrid, 'slideUp');
|
||||
|
||||
this.currentJackpot$.pipe(takeUntil(this.destroy$)).subscribe((value) => {
|
||||
if (this.jackpotCounter && value) {
|
||||
const prevValue = value - Math.floor(Math.random() * 1000 + 500);
|
||||
this.animationService.animateJackpotCounter(this.jackpotCounter, prevValue, value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private initializeTimers(): void {
|
||||
this.ngZone.runOutsideAngular(() => {
|
||||
interval(1500)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(() => {
|
||||
this.jackpotService.updateJackpot();
|
||||
this.cdr.markForCheck();
|
||||
});
|
||||
interval(3000)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(() => {
|
||||
this.winnerService.updateOnlinePlayers();
|
||||
this.cdr.markForCheck();
|
||||
});
|
||||
interval(1000)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(() => {
|
||||
this.jackpotService.updateTimeLeft();
|
||||
if (this.jackpotService.isUrgent()) {
|
||||
this.showUrgentOffer();
|
||||
}
|
||||
this.cdr.markForCheck();
|
||||
});
|
||||
interval(7000)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(() => {
|
||||
const randomGame = this.gameService.getGameById('mega-fortune');
|
||||
if (randomGame) {
|
||||
const winAmount = Math.floor(Math.random() * 50000) + 10000;
|
||||
this.winnerService.generateNewWinner(randomGame.name, winAmount);
|
||||
if (winAmount > 10000) {
|
||||
this.showBigWinPopup(winAmount);
|
||||
}
|
||||
}
|
||||
this.cdr.markForCheck();
|
||||
});
|
||||
interval(15000)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(() => {
|
||||
this.gameService.updateGameStats();
|
||||
this.cdr.markForCheck();
|
||||
});
|
||||
interval(30000)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(() => {
|
||||
this.popupService.showRandomPopup();
|
||||
this.cdr.markForCheck();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private initializeScrollListener(): void {
|
||||
window.addEventListener('scroll', () => {
|
||||
this.isScrolled = window.scrollY > 0;
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
}
|
||||
|
||||
private showUrgentOffer(): void {
|
||||
this.popupService.showSpecificPopup({
|
||||
title: '⚠️ LAST CHANCE!',
|
||||
message: 'Bonus offer expiring - Lock in 500% now!',
|
||||
type: 'urgent',
|
||||
cta: 'Claim Before Timer Ends',
|
||||
expires: '00:30',
|
||||
});
|
||||
}
|
||||
|
||||
private showBigWinPopup(amount: number): void {
|
||||
this.popupService.showSpecificPopup({
|
||||
title: '🎰 MASSIVE WIN ALERT!',
|
||||
message: `Player just won €${amount.toLocaleString()} on minimum bet!`,
|
||||
subMessage: 'Same game still hot - Win rate increased to 99.9%!',
|
||||
type: 'win',
|
||||
cta: 'Play Same Game',
|
||||
});
|
||||
}
|
||||
|
||||
closePopup(): void {
|
||||
this.popupService.closePopup();
|
||||
}
|
||||
|
||||
claimBonus(): void {
|
||||
this.nearMiss = true;
|
||||
this.cdr.markForCheck();
|
||||
|
||||
setTimeout(() => {
|
||||
this.router.navigate(['/register'], {
|
||||
queryParams: {
|
||||
bonus: 'welcome1000',
|
||||
ref: 'landing_hero',
|
||||
special: 'true',
|
||||
vip: 'fast-track',
|
||||
},
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
playNow(gameId: string): void {
|
||||
const game = this.gameService.getGameById(gameId);
|
||||
if (!game) return;
|
||||
|
||||
this.popupService.showSpecificPopup({
|
||||
title: '🎰 PERFECT TIMING!',
|
||||
message: `${game.name} is currently at ${game.winChance}% win rate!`,
|
||||
subMessage: `Last player won €${game.lastWin.toLocaleString()} - Hot streak active!`,
|
||||
type: 'fomo',
|
||||
cta: 'Play Now',
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.router.navigate(['/game', gameId], {
|
||||
queryParams: {
|
||||
ref: 'landing_games',
|
||||
bonus: 'true',
|
||||
rtp: 'enhanced',
|
||||
multiplier: 'active',
|
||||
},
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
onButtonClick(event: MouseEvent): void {
|
||||
const button = event.currentTarget as HTMLElement;
|
||||
this.animationService.animateButtonClick(new ElementRef(button));
|
||||
}
|
||||
|
||||
onGameCardHover(event: MouseEvent): void {
|
||||
const card = event.currentTarget as HTMLElement;
|
||||
this.animationService.animateFloat(new ElementRef(card));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,380 +0,0 @@
|
|||
import { Injectable, ElementRef } from '@angular/core';
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
import { MotionPathPlugin } from 'gsap/MotionPathPlugin';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class AnimationService {
|
||||
private readonly MEGA_BONUS_THRESHOLD = 25000;
|
||||
private readonly BONUS_THRESHOLD = 1000;
|
||||
private readonly FLASH_THRESHOLD = 10000;
|
||||
|
||||
private readonly ANIMATION_DURATIONS = {
|
||||
MEGA: 3,
|
||||
BONUS: 2,
|
||||
BASE: 1,
|
||||
};
|
||||
|
||||
private readonly SYMBOLS = {
|
||||
MONEY: '💰',
|
||||
SPARKLE: '✨',
|
||||
GEM: '💎',
|
||||
STAR: '🌟',
|
||||
};
|
||||
|
||||
constructor() {
|
||||
// Configure GSAP defaults
|
||||
gsap.config({
|
||||
autoSleep: 60,
|
||||
force3D: true,
|
||||
nullTargetWarn: false,
|
||||
});
|
||||
}
|
||||
|
||||
animateEntrance(element: ElementRef, delay: number = 0) {
|
||||
return gsap.from(element.nativeElement, {
|
||||
duration: 0.6,
|
||||
opacity: 0,
|
||||
y: 30,
|
||||
ease: 'power3.out',
|
||||
delay,
|
||||
clearProps: 'all',
|
||||
});
|
||||
}
|
||||
|
||||
animateFloat(element: ElementRef) {
|
||||
return gsap.to(element.nativeElement, {
|
||||
duration: 2,
|
||||
y: '-=20',
|
||||
ease: 'power1.inOut',
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
});
|
||||
}
|
||||
|
||||
animateShine(element: ElementRef) {
|
||||
const shine = gsap.to(element.nativeElement, {
|
||||
duration: 1.5,
|
||||
backgroundPosition: '200%',
|
||||
ease: 'linear',
|
||||
repeat: -1,
|
||||
});
|
||||
return shine;
|
||||
}
|
||||
|
||||
animateMorphingBackground(element: ElementRef) {
|
||||
return gsap.to(element.nativeElement, {
|
||||
duration: 8,
|
||||
borderRadius: '60% 40% 30% 70% / 60% 30% 70% 40%',
|
||||
ease: 'sine.inOut',
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
});
|
||||
}
|
||||
|
||||
animateOnScroll(element: ElementRef, animation: 'fadeIn' | 'slideUp' | 'scaleIn' = 'fadeIn') {
|
||||
const animations = {
|
||||
fadeIn: {
|
||||
opacity: 0,
|
||||
y: 0,
|
||||
duration: 0.6,
|
||||
},
|
||||
slideUp: {
|
||||
opacity: 0,
|
||||
y: 50,
|
||||
duration: 0.8,
|
||||
},
|
||||
scaleIn: {
|
||||
opacity: 0,
|
||||
scale: 0.8,
|
||||
duration: 0.6,
|
||||
},
|
||||
};
|
||||
|
||||
return gsap.from(element.nativeElement, {
|
||||
...animations[animation],
|
||||
ease: 'power2.out',
|
||||
scrollTrigger: {
|
||||
trigger: element.nativeElement,
|
||||
start: 'top bottom-=100',
|
||||
toggleActions: 'play none none reverse',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
createParticleEffect(container: ElementRef, particleCount: number = 20): void {
|
||||
const particles = Array.from({ length: particleCount }, () => this.createParticle(container));
|
||||
particles.forEach((particle) => this.animateParticle(particle));
|
||||
}
|
||||
|
||||
private createParticle(container: ElementRef): HTMLElement {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'absolute w-2 h-2 bg-emerald-500/20 rounded-full';
|
||||
container.nativeElement.appendChild(particle);
|
||||
|
||||
gsap.set(particle, {
|
||||
x: gsap.utils.random(0, container.nativeElement.offsetWidth),
|
||||
y: gsap.utils.random(0, container.nativeElement.offsetHeight),
|
||||
});
|
||||
|
||||
return particle;
|
||||
}
|
||||
|
||||
private animateParticle(particle: HTMLElement): void {
|
||||
gsap.to(particle, {
|
||||
duration: gsap.utils.random(2, 4),
|
||||
x: '+=50',
|
||||
y: '-=50',
|
||||
opacity: 0,
|
||||
scale: 0,
|
||||
ease: 'none',
|
||||
repeat: -1,
|
||||
onRepeat: () => this.resetParticle(particle),
|
||||
});
|
||||
}
|
||||
|
||||
private resetParticle(particle: HTMLElement): void {
|
||||
gsap.set(particle, {
|
||||
x: gsap.utils.random(0, particle.parentElement!.offsetWidth),
|
||||
y: gsap.utils.random(0, particle.parentElement!.offsetHeight),
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
});
|
||||
}
|
||||
|
||||
animateButtonClick(element: ElementRef): gsap.core.Timeline {
|
||||
return gsap
|
||||
.timeline()
|
||||
.to(element.nativeElement, { scale: 0.95, duration: 0.1 })
|
||||
.to(element.nativeElement, { scale: 1, duration: 0.2, ease: 'elastic.out(1, 0.3)' });
|
||||
}
|
||||
|
||||
animateSuccess(element: ElementRef): gsap.core.Timeline {
|
||||
return gsap
|
||||
.timeline()
|
||||
.to(element.nativeElement, { scale: 1.2, duration: 0.2, ease: 'power2.out' })
|
||||
.to(element.nativeElement, { scale: 1, duration: 0.5, ease: 'elastic.out(1, 0.3)' });
|
||||
}
|
||||
|
||||
animateJackpotCounter(
|
||||
element: ElementRef,
|
||||
startValue: number,
|
||||
endValue: number
|
||||
): gsap.core.Timeline {
|
||||
const container = this.prepareContainer(element);
|
||||
const increase = endValue - startValue;
|
||||
const timeline = gsap.timeline();
|
||||
|
||||
if (increase > this.FLASH_THRESHOLD) {
|
||||
this.addFlashEffect(timeline, container, element);
|
||||
}
|
||||
|
||||
this.addCounterAnimation(timeline, element, startValue, endValue);
|
||||
|
||||
if (increase > this.MEGA_BONUS_THRESHOLD) {
|
||||
this.addMegaBonusEffect(element);
|
||||
} else if (increase > this.BONUS_THRESHOLD) {
|
||||
this.addBonusEffect(element);
|
||||
}
|
||||
|
||||
return timeline;
|
||||
}
|
||||
|
||||
private prepareContainer(element: ElementRef): HTMLElement {
|
||||
const container = element.nativeElement.parentElement;
|
||||
container.style.position = 'relative';
|
||||
this.cleanupExistingEffects(container);
|
||||
return container;
|
||||
}
|
||||
|
||||
private cleanupExistingEffects(container: HTMLElement): void {
|
||||
const existingEffects = container.querySelectorAll('.jackpot-effect');
|
||||
existingEffects.forEach((effect: Element) => effect.remove());
|
||||
}
|
||||
|
||||
private addFlashEffect(
|
||||
timeline: gsap.core.Timeline,
|
||||
container: HTMLElement,
|
||||
element: ElementRef
|
||||
): void {
|
||||
const flash = this.createFlashElement();
|
||||
container.appendChild(flash);
|
||||
|
||||
timeline
|
||||
.to(flash, {
|
||||
opacity: 1,
|
||||
duration: 0.3,
|
||||
yoyo: true,
|
||||
repeat: 2,
|
||||
onComplete: () => flash.remove(),
|
||||
})
|
||||
.to(
|
||||
element.nativeElement,
|
||||
{
|
||||
color: '#FFD700',
|
||||
textShadow: '0 0 20px rgba(255,215,0,0.8)',
|
||||
scale: 1.1,
|
||||
duration: 0.6,
|
||||
yoyo: true,
|
||||
repeat: 1,
|
||||
},
|
||||
'<'
|
||||
);
|
||||
}
|
||||
|
||||
private createFlashElement(): HTMLElement {
|
||||
const flash = document.createElement('div');
|
||||
flash.className =
|
||||
'jackpot-effect absolute inset-0 bg-yellow-400/20 rounded-xl backdrop-blur-sm z-10';
|
||||
return flash;
|
||||
}
|
||||
|
||||
private addCounterAnimation(
|
||||
timeline: gsap.core.Timeline,
|
||||
element: ElementRef,
|
||||
startValue: number,
|
||||
endValue: number
|
||||
): void {
|
||||
const obj = { value: startValue };
|
||||
timeline.to(obj, {
|
||||
duration: this.calculateDuration(endValue - startValue),
|
||||
value: endValue,
|
||||
ease: 'power1.inOut',
|
||||
onUpdate: () => this.updateCounter(obj.value, endValue, element),
|
||||
onComplete: () => this.resetElementStyles(element, endValue),
|
||||
});
|
||||
}
|
||||
|
||||
private updateCounter(currentValue: number, endValue: number, element: ElementRef): void {
|
||||
const progress = currentValue / endValue;
|
||||
const fluctuation = Math.random() * (100 * (1 - progress)) - 50 * (1 - progress);
|
||||
const displayValue = Math.floor(currentValue + fluctuation);
|
||||
element.nativeElement.textContent = '€' + displayValue.toLocaleString();
|
||||
}
|
||||
|
||||
private resetElementStyles(element: ElementRef, finalValue: number): void {
|
||||
element.nativeElement.textContent = '€' + finalValue.toLocaleString();
|
||||
element.nativeElement.style.color = '';
|
||||
element.nativeElement.style.textShadow = '';
|
||||
element.nativeElement.style.transform = '';
|
||||
}
|
||||
|
||||
private calculateDuration(increase: number): number {
|
||||
if (increase > this.MEGA_BONUS_THRESHOLD) return this.ANIMATION_DURATIONS.MEGA;
|
||||
if (increase > this.BONUS_THRESHOLD) return this.ANIMATION_DURATIONS.BONUS;
|
||||
return this.ANIMATION_DURATIONS.BASE;
|
||||
}
|
||||
|
||||
private addMegaBonusEffect(element: ElementRef): void {
|
||||
const effectContainer = this.createEffectContainer(element);
|
||||
this.addGlowEffect(effectContainer, true);
|
||||
this.addFloatingSymbols(element, effectContainer, 10, 50);
|
||||
}
|
||||
|
||||
private addBonusEffect(element: ElementRef): void {
|
||||
const effectContainer = this.createEffectContainer(element);
|
||||
this.addGlowEffect(effectContainer, false);
|
||||
this.addFloatingSymbols(element, effectContainer, 5, 30);
|
||||
}
|
||||
|
||||
private createEffectContainer(element: ElementRef): HTMLElement {
|
||||
const container = element.nativeElement.parentElement;
|
||||
const effectContainer = document.createElement('div');
|
||||
effectContainer.className =
|
||||
'jackpot-effect absolute inset-0 pointer-events-none overflow-hidden z-20';
|
||||
container.appendChild(effectContainer);
|
||||
return effectContainer;
|
||||
}
|
||||
|
||||
private addGlowEffect(container: HTMLElement, isMega: boolean): void {
|
||||
const config = isMega
|
||||
? {
|
||||
shadow: '0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,165,0,0.6)',
|
||||
scale: 1.1,
|
||||
duration: 1.5,
|
||||
repeat: 2,
|
||||
}
|
||||
: {
|
||||
shadow: '0 0 20px rgba(255,215,0,0.4)',
|
||||
scale: 1.05,
|
||||
duration: 0.8,
|
||||
repeat: 1,
|
||||
};
|
||||
|
||||
gsap.to(container, {
|
||||
boxShadow: config.shadow,
|
||||
scale: config.scale,
|
||||
opacity: 0,
|
||||
duration: config.duration,
|
||||
repeat: config.repeat,
|
||||
ease: 'power2.inOut',
|
||||
onComplete: () => container.remove(),
|
||||
});
|
||||
}
|
||||
|
||||
private addFloatingSymbols(
|
||||
element: ElementRef,
|
||||
container: HTMLElement,
|
||||
count: number,
|
||||
radius: number
|
||||
): void {
|
||||
const rect = element.nativeElement.getBoundingClientRect();
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
const symbols = Object.values(this.SYMBOLS);
|
||||
|
||||
Array.from({ length: count }).forEach((_, i) => {
|
||||
const symbol = this.createSymbol(symbols, container);
|
||||
const angle = (i / count) * Math.PI * 2;
|
||||
this.animateSymbol(symbol, centerX, centerY, angle, radius);
|
||||
});
|
||||
}
|
||||
|
||||
private createSymbol(symbols: string[], container: HTMLElement): HTMLElement {
|
||||
const symbol = document.createElement('div');
|
||||
symbol.textContent = symbols[Math.floor(Math.random() * symbols.length)];
|
||||
symbol.className = 'jackpot-effect absolute text-2xl';
|
||||
container.appendChild(symbol);
|
||||
return symbol;
|
||||
}
|
||||
|
||||
private animateSymbol(
|
||||
symbol: HTMLElement,
|
||||
centerX: number,
|
||||
centerY: number,
|
||||
angle: number,
|
||||
radius: number
|
||||
): void {
|
||||
gsap.fromTo(
|
||||
symbol,
|
||||
{
|
||||
x: centerX,
|
||||
y: centerY,
|
||||
opacity: 0,
|
||||
scale: 0,
|
||||
},
|
||||
{
|
||||
x: centerX + Math.cos(angle) * radius,
|
||||
y: centerY + Math.sin(angle) * radius,
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 1.5,
|
||||
ease: 'back.out(1.2)',
|
||||
onComplete: () => this.fadeOutSymbol(symbol),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private fadeOutSymbol(symbol: HTMLElement): void {
|
||||
gsap.to(symbol, {
|
||||
opacity: 0,
|
||||
scale: 0,
|
||||
duration: 0.5,
|
||||
onComplete: () => symbol.remove(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
|
||||
export interface Game {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
minBet: number;
|
||||
maxBet: number;
|
||||
rtp: number;
|
||||
lastWin: number;
|
||||
winChance: number;
|
||||
lastWinner: string;
|
||||
trending: boolean;
|
||||
maxWin: number;
|
||||
popularity: number;
|
||||
volatility: 'low' | 'medium' | 'high';
|
||||
features: string[];
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class GameService {
|
||||
private readonly INITIAL_GAMES: Game[] = [
|
||||
{
|
||||
id: 'mega-fortune',
|
||||
name: 'Mega Fortune Dreams',
|
||||
description: '🔥 Progressive Jackpot at €1.2M - Must Drop Today!',
|
||||
imageUrl: 'assets/games/mega-fortune.jpg',
|
||||
minBet: 0.2,
|
||||
maxBet: 100,
|
||||
rtp: 96.5,
|
||||
lastWin: 15789,
|
||||
winChance: 99.9,
|
||||
lastWinner: 'VIP Player',
|
||||
trending: true,
|
||||
maxWin: 1000000,
|
||||
popularity: 98,
|
||||
volatility: 'high',
|
||||
features: ['Progressive Jackpot', 'Free Spins', 'Multipliers'],
|
||||
},
|
||||
{
|
||||
id: 'lightning-roulette',
|
||||
name: 'Lightning Roulette',
|
||||
description: '⚡️ 500x Multipliers Active - Hot Streak!',
|
||||
imageUrl: 'assets/games/lightning-roulette.jpg',
|
||||
minBet: 1,
|
||||
maxBet: 500,
|
||||
rtp: 97.1,
|
||||
lastWin: 23456,
|
||||
winChance: 99.7,
|
||||
lastWinner: 'New Player',
|
||||
trending: true,
|
||||
maxWin: 500000,
|
||||
popularity: 95,
|
||||
volatility: 'medium',
|
||||
features: ['Lightning Multipliers', 'Live Dealer', 'Instant Wins'],
|
||||
},
|
||||
];
|
||||
|
||||
private readonly STAT_RANGES = {
|
||||
WIN: {
|
||||
MIN: 10000,
|
||||
MAX: 50000,
|
||||
},
|
||||
WIN_CHANCE: {
|
||||
MIN: 99,
|
||||
MAX: 100,
|
||||
},
|
||||
POPULARITY: {
|
||||
MIN: 80,
|
||||
MAX: 100,
|
||||
},
|
||||
};
|
||||
|
||||
private readonly games = new BehaviorSubject<Game[]>(this.INITIAL_GAMES);
|
||||
readonly games$ = this.games.asObservable();
|
||||
|
||||
updateGameStats(): void {
|
||||
const updatedGames = this.games.value.map((game) => ({
|
||||
...game,
|
||||
...this.generateNewStats(),
|
||||
}));
|
||||
this.games.next(updatedGames);
|
||||
}
|
||||
|
||||
getGameById(id: string): Game | undefined {
|
||||
return this.games.value.find((game) => game.id === id);
|
||||
}
|
||||
|
||||
private generateNewStats(): Partial<Game> {
|
||||
return {
|
||||
lastWin: this.getRandomInRange(this.STAT_RANGES.WIN),
|
||||
winChance: this.getRandomInRange(this.STAT_RANGES.WIN_CHANCE),
|
||||
popularity: this.getRandomInRange(this.STAT_RANGES.POPULARITY),
|
||||
};
|
||||
}
|
||||
|
||||
private getRandomInRange(range: { MIN: number; MAX: number }): number {
|
||||
return Math.floor(Math.random() * (range.MAX - range.MIN)) + range.MIN;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class JackpotService {
|
||||
private readonly INITIAL_JACKPOT = 1234567;
|
||||
private readonly INITIAL_TIME = '04:59';
|
||||
private readonly UPDATE_INTERVAL = 2000;
|
||||
|
||||
private readonly INCREASE_THRESHOLDS = {
|
||||
MEGA: 0.997,
|
||||
BONUS: 0.97,
|
||||
BASE: 0.5,
|
||||
};
|
||||
|
||||
private readonly INCREASE_RANGES = {
|
||||
MEGA: {
|
||||
MIN: 30000,
|
||||
MAX: 100000,
|
||||
},
|
||||
BONUS: {
|
||||
MIN: 2000,
|
||||
MAX: 15000,
|
||||
},
|
||||
BASE: {
|
||||
MIN: 100,
|
||||
MAX: 1000,
|
||||
},
|
||||
};
|
||||
|
||||
private readonly TIME_LIMITS = {
|
||||
MINUTES: 4,
|
||||
SECONDS: 59,
|
||||
URGENT_THRESHOLD: 30,
|
||||
};
|
||||
|
||||
private readonly jackpot = new BehaviorSubject<number>(this.INITIAL_JACKPOT);
|
||||
private readonly timeLeft = new BehaviorSubject<string>(this.INITIAL_TIME);
|
||||
private lastUpdateTime = Date.now();
|
||||
private minutes = this.TIME_LIMITS.MINUTES;
|
||||
private seconds = this.TIME_LIMITS.SECONDS;
|
||||
|
||||
readonly currentJackpot$ = this.jackpot.asObservable();
|
||||
readonly timeLeft$ = this.timeLeft.asObservable();
|
||||
|
||||
updateJackpot(): void {
|
||||
if (!this.shouldUpdate()) return;
|
||||
|
||||
const increase = this.calculateIncrease();
|
||||
if (increase > 0) {
|
||||
this.updateJackpotValue(increase);
|
||||
this.lastUpdateTime = Date.now();
|
||||
}
|
||||
}
|
||||
|
||||
updateTimeLeft(): void {
|
||||
this.updateTimers();
|
||||
this.updateTimeDisplay();
|
||||
}
|
||||
|
||||
isUrgent(): boolean {
|
||||
return this.minutes === 0 && this.seconds <= this.TIME_LIMITS.URGENT_THRESHOLD;
|
||||
}
|
||||
|
||||
private shouldUpdate(): boolean {
|
||||
return Date.now() - this.lastUpdateTime >= this.UPDATE_INTERVAL;
|
||||
}
|
||||
|
||||
private calculateIncrease(): number {
|
||||
const random = Math.random();
|
||||
|
||||
if (random > this.INCREASE_THRESHOLDS.MEGA) {
|
||||
return this.getRandomIncrease(this.INCREASE_RANGES.MEGA);
|
||||
}
|
||||
|
||||
if (random > this.INCREASE_THRESHOLDS.BONUS) {
|
||||
return this.getRandomIncrease(this.INCREASE_RANGES.BONUS);
|
||||
}
|
||||
|
||||
if (random > this.INCREASE_THRESHOLDS.BASE) {
|
||||
return this.getRandomIncrease(this.INCREASE_RANGES.BASE);
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
private getRandomIncrease(range: { MIN: number; MAX: number }): number {
|
||||
return Math.floor(Math.random() * (range.MAX - range.MIN) + range.MIN);
|
||||
}
|
||||
|
||||
private updateJackpotValue(increase: number): void {
|
||||
this.jackpot.next(this.jackpot.value + increase);
|
||||
}
|
||||
|
||||
private updateTimers(): void {
|
||||
if (this.seconds === 0) {
|
||||
this.handleMinuteChange();
|
||||
} else {
|
||||
this.seconds--;
|
||||
}
|
||||
}
|
||||
|
||||
private handleMinuteChange(): void {
|
||||
if (this.minutes === 0) {
|
||||
this.resetTimers();
|
||||
} else {
|
||||
this.minutes--;
|
||||
this.seconds = this.TIME_LIMITS.SECONDS;
|
||||
}
|
||||
}
|
||||
|
||||
private resetTimers(): void {
|
||||
this.minutes = this.TIME_LIMITS.MINUTES;
|
||||
this.seconds = this.TIME_LIMITS.SECONDS;
|
||||
}
|
||||
|
||||
private updateTimeDisplay(): void {
|
||||
this.timeLeft.next(this.formatTime());
|
||||
}
|
||||
|
||||
private formatTime(): string {
|
||||
return `${this.padNumber(this.minutes)}:${this.padNumber(this.seconds)}`;
|
||||
}
|
||||
|
||||
private padNumber(num: number): string {
|
||||
return num.toString().padStart(2, '0');
|
||||
}
|
||||
}
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
|
||||
export interface Popup {
|
||||
title: string;
|
||||
message: string;
|
||||
type: 'win' | 'offer' | 'urgent' | 'fomo';
|
||||
cta: string;
|
||||
expires?: string;
|
||||
subMessage?: string;
|
||||
imageUrl?: string;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class PopupService {
|
||||
private readonly POPUP_TEMPLATES: Popup[] = [
|
||||
{
|
||||
title: '🎯 VIP OFFER',
|
||||
message: 'Enhanced RTP + 500% Bonus on Next 5 Deposits',
|
||||
subMessage: 'Limited availability - 3 spots remaining',
|
||||
type: 'urgent',
|
||||
cta: 'Claim VIP Bonus',
|
||||
expires: '5:00',
|
||||
},
|
||||
{
|
||||
title: '🎰 BIG WIN ALERT',
|
||||
message: 'Recent win: €89,432 on minimum bet!',
|
||||
subMessage: 'Game is hot - Enhanced win rate active',
|
||||
type: 'win',
|
||||
cta: 'Play Now',
|
||||
},
|
||||
];
|
||||
|
||||
private readonly DISPLAY_CONFIG = {
|
||||
MIN_INTERVAL: 30000,
|
||||
AUTO_CLOSE_DELAY: 8000,
|
||||
SHOW_CHANCE: 0.7,
|
||||
};
|
||||
|
||||
private readonly popupState = new BehaviorSubject<boolean>(false);
|
||||
private readonly currentPopup = new BehaviorSubject<Popup | null>(null);
|
||||
private lastPopupTime = 0;
|
||||
|
||||
readonly showPopup$ = this.popupState.asObservable();
|
||||
readonly currentPopup$ = this.currentPopup.asObservable();
|
||||
|
||||
showRandomPopup(): void {
|
||||
if (!this.shouldShowPopup()) return;
|
||||
|
||||
const popup = this.getRandomPopup();
|
||||
this.displayPopup(popup);
|
||||
this.scheduleAutoClose();
|
||||
this.updateLastPopupTime();
|
||||
}
|
||||
|
||||
showSpecificPopup(popup: Popup): void {
|
||||
if (!this.shouldShowPopup()) return;
|
||||
|
||||
this.displayPopup(popup);
|
||||
this.updateLastPopupTime();
|
||||
}
|
||||
|
||||
closePopup(): void {
|
||||
this.popupState.next(false);
|
||||
}
|
||||
|
||||
private shouldShowPopup(): boolean {
|
||||
const now = Date.now();
|
||||
const timeSinceLastPopup = now - this.lastPopupTime;
|
||||
const isMinIntervalPassed = timeSinceLastPopup >= this.DISPLAY_CONFIG.MIN_INTERVAL;
|
||||
const isCurrentlyHidden = !this.popupState.value;
|
||||
const isRandomChanceSuccess = Math.random() <= this.DISPLAY_CONFIG.SHOW_CHANCE;
|
||||
|
||||
return isMinIntervalPassed && isCurrentlyHidden && isRandomChanceSuccess;
|
||||
}
|
||||
|
||||
private getRandomPopup(): Popup {
|
||||
const randomIndex = Math.floor(Math.random() * this.POPUP_TEMPLATES.length);
|
||||
return this.POPUP_TEMPLATES[randomIndex];
|
||||
}
|
||||
|
||||
private displayPopup(popup: Popup): void {
|
||||
this.currentPopup.next(popup);
|
||||
this.popupState.next(true);
|
||||
}
|
||||
|
||||
private scheduleAutoClose(): void {
|
||||
setTimeout(() => this.closePopup(), this.DISPLAY_CONFIG.AUTO_CLOSE_DELAY);
|
||||
}
|
||||
|
||||
private updateLastPopupTime(): void {
|
||||
this.lastPopupTime = Date.now();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
|
||||
export interface Winner {
|
||||
name: string;
|
||||
amount: number;
|
||||
game: string;
|
||||
timestamp: Date;
|
||||
isVIP: boolean;
|
||||
betAmount?: number;
|
||||
multiplier?: number;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class WinnerService {
|
||||
private readonly INITIAL_ONLINE_PLAYERS = 2547;
|
||||
private readonly TOTAL_PLAYERS_TODAY = 15789;
|
||||
private readonly TOTAL_WINNERS_TODAY = 12453;
|
||||
private readonly VIP_CHANCE = 0.3;
|
||||
private readonly MAX_RECENT_WINNERS = 10;
|
||||
|
||||
private readonly PLAYER_NAMES = {
|
||||
FIRST: ['Alex', 'Maria', 'John', 'Sarah', 'Mike', 'Lisa', 'David', 'Emma'],
|
||||
LAST: ['K.', 'S.', 'M.', 'L.', 'R.', 'T.', 'B.', 'W.'],
|
||||
};
|
||||
|
||||
private readonly ONLINE_PLAYERS_LIMITS = {
|
||||
MIN: 2000,
|
||||
MAX: 3500,
|
||||
CHANGE_RANGE: 15,
|
||||
};
|
||||
|
||||
private readonly winners = new BehaviorSubject<Winner[]>([]);
|
||||
private readonly onlinePlayers = new BehaviorSubject<number>(this.INITIAL_ONLINE_PLAYERS);
|
||||
|
||||
readonly recentWinners$ = this.winners.asObservable();
|
||||
readonly onlinePlayers$ = this.onlinePlayers.asObservable();
|
||||
|
||||
constructor() {
|
||||
this.initializeWinners();
|
||||
}
|
||||
|
||||
generateNewWinner(game: string, baseAmount: number): void {
|
||||
const winner = this.createWinner(game, baseAmount);
|
||||
this.updateWinnersList(winner);
|
||||
}
|
||||
|
||||
updateOnlinePlayers(): void {
|
||||
const currentCount = this.onlinePlayers.value;
|
||||
const newCount = this.calculateNewPlayerCount(currentCount);
|
||||
this.onlinePlayers.next(newCount);
|
||||
}
|
||||
|
||||
getTotalPlayersToday(): number {
|
||||
return this.TOTAL_PLAYERS_TODAY;
|
||||
}
|
||||
|
||||
getTotalWinnersToday(): number {
|
||||
return this.TOTAL_WINNERS_TODAY;
|
||||
}
|
||||
|
||||
private initializeWinners(): void {
|
||||
const initialWinners = [
|
||||
this.createWinner('Mega Fortune Dreams', 15432),
|
||||
this.createWinner('Lightning Roulette', 8745),
|
||||
this.createWinner('Golden Tiger', 12321),
|
||||
];
|
||||
this.winners.next(initialWinners);
|
||||
}
|
||||
|
||||
private createWinner(game: string, baseAmount: number): Winner {
|
||||
const betAmount = this.calculateBetAmount();
|
||||
const multiplier = Math.floor(baseAmount / betAmount);
|
||||
|
||||
return {
|
||||
name: this.generateRandomName(),
|
||||
amount: baseAmount,
|
||||
game,
|
||||
timestamp: new Date(),
|
||||
isVIP: Math.random() > this.VIP_CHANCE,
|
||||
betAmount,
|
||||
multiplier,
|
||||
};
|
||||
}
|
||||
|
||||
private calculateBetAmount(): number {
|
||||
return Math.floor(Math.random() * 100) + 10;
|
||||
}
|
||||
|
||||
private updateWinnersList(winner: Winner): void {
|
||||
const currentWinners = this.winners.value;
|
||||
const updatedWinners = [winner, ...currentWinners];
|
||||
|
||||
if (updatedWinners.length > this.MAX_RECENT_WINNERS) {
|
||||
updatedWinners.pop();
|
||||
}
|
||||
|
||||
this.winners.next(updatedWinners);
|
||||
}
|
||||
|
||||
private generateRandomName(): string {
|
||||
const firstName = this.getRandomArrayElement(this.PLAYER_NAMES.FIRST);
|
||||
const lastName = this.getRandomArrayElement(this.PLAYER_NAMES.LAST);
|
||||
return `${firstName} ${lastName}`;
|
||||
}
|
||||
|
||||
private calculateNewPlayerCount(currentCount: number): number {
|
||||
const change = Math.floor(Math.random() * this.ONLINE_PLAYERS_LIMITS.CHANGE_RANGE) - 5;
|
||||
return Math.max(
|
||||
this.ONLINE_PLAYERS_LIMITS.MIN,
|
||||
Math.min(this.ONLINE_PLAYERS_LIMITS.MAX, currentCount + change)
|
||||
);
|
||||
}
|
||||
|
||||
private getRandomArrayElement<T>(array: T[]): T {
|
||||
return array[Math.floor(Math.random() * array.length)];
|
||||
}
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
Output,
|
||||
EventEmitter,
|
||||
ElementRef,
|
||||
ChangeDetectionStrategy,
|
||||
} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { AnimationService } from '../../../services/animation.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-animated-button',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<button
|
||||
(click)="handleClick($event)"
|
||||
[class]="buttonClass"
|
||||
[ngClass]="size === 'large' ? 'px-12 py-5 text-2xl' : 'px-8 py-3 text-sm'"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 rounded-full bg-white/20 opacity-0 group-hover:opacity-100 transition-all duration-500 ease-in-out"
|
||||
></div>
|
||||
<span class="relative z-10 group-hover:tracking-wider transition-all duration-300">
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
</button>
|
||||
`,
|
||||
styles: [],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AnimatedButtonComponent {
|
||||
@Input() variant: 'primary' | 'secondary' = 'primary';
|
||||
@Input() size: 'normal' | 'large' = 'normal';
|
||||
@Output() buttonClick = new EventEmitter<MouseEvent>();
|
||||
|
||||
constructor(private animationService: AnimationService) {}
|
||||
|
||||
get buttonClass(): string {
|
||||
const baseClass =
|
||||
'cursor-pointer relative group font-bold rounded-full transition-all duration-300 ease-out transform-gpu hover:scale-105 will-change-transform';
|
||||
const variantClass =
|
||||
this.variant === 'primary'
|
||||
? 'bg-gradient-to-r from-emerald-500 to-emerald-400 text-black hover:shadow-xl hover:shadow-emerald-500/20'
|
||||
: 'bg-white/10 text-white hover:bg-white/20';
|
||||
|
||||
return `${baseClass} ${variantClass}`;
|
||||
}
|
||||
|
||||
handleClick(event: MouseEvent): void {
|
||||
const elementRef = new ElementRef(event.currentTarget);
|
||||
this.animationService.animateButtonClick(elementRef);
|
||||
this.buttonClick.emit(event);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
Output,
|
||||
EventEmitter,
|
||||
ElementRef,
|
||||
ChangeDetectionStrategy,
|
||||
} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Game } from '../../../services/game.service';
|
||||
import { AnimatedButtonComponent } from '../animated-button/animated-button.component';
|
||||
import { AnimationService } from '../../../services/animation.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-game-card',
|
||||
standalone: true,
|
||||
imports: [CommonModule, AnimatedButtonComponent],
|
||||
template: `
|
||||
<div
|
||||
class="game-card group relative overflow-hidden rounded-2xl cursor-pointer bg-black/40 backdrop-blur-xl border border-white/5
|
||||
transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-emerald-500/10"
|
||||
(mouseenter)="onHover($event)"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 to-emerald-400/10 opacity-0
|
||||
group-hover:opacity-100 transition-opacity duration-500"
|
||||
></div>
|
||||
<img
|
||||
[src]="game.imageUrl"
|
||||
[alt]="game.name"
|
||||
class="w-full h-64 object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/80 to-transparent">
|
||||
<div class="absolute bottom-0 left-0 right-0 p-8">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="text-2xl font-bold text-white tracking-tight">{{ game.name }}</h3>
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<span
|
||||
class="bg-emerald-500/20 text-emerald-400 text-sm px-3 py-1 rounded-full font-medium animate-pulseGlow"
|
||||
>
|
||||
HOT 🔥
|
||||
</span>
|
||||
<span class="text-yellow-400 text-sm">
|
||||
{{ game.lastWinner }} won €{{ game.lastWin | number }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-white/60 mb-6 font-medium">{{ game.description }}</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span
|
||||
class="text-emerald-400 font-bold animate-pulseGlow drop-shadow-[0_0_8px_rgba(34,197,94,0.2)]"
|
||||
>
|
||||
{{ game.winChance }}% Win Rate
|
||||
</span>
|
||||
<span class="text-yellow-400 font-medium">Max Win: €{{ game.maxWin | number }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-white/60">
|
||||
Min: €{{ game.minBet }} | Max: €{{ game.maxBet }}
|
||||
</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-white/60">Popularity:</span>
|
||||
<div class="w-24 h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full bg-gradient-to-r from-emerald-500 to-emerald-400 transition-all duration-500"
|
||||
[style.width]="game.popularity + '%'"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center pt-2">
|
||||
<div class="flex gap-2">
|
||||
<span
|
||||
*ngFor="let feature of game.features"
|
||||
class="text-xs px-3 py-1 rounded-full bg-white/5 text-white/60 font-medium"
|
||||
>
|
||||
{{ feature }}
|
||||
</span>
|
||||
</div>
|
||||
<app-animated-button (buttonClick)="onPlay()"> PLAY NOW </app-animated-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class GameCardComponent {
|
||||
@Input() game!: Game;
|
||||
@Output() play = new EventEmitter<void>();
|
||||
|
||||
constructor(private animationService: AnimationService) {}
|
||||
|
||||
onHover(event: MouseEvent): void {
|
||||
const element = event.currentTarget as HTMLElement;
|
||||
const elementRef = new ElementRef(element);
|
||||
this.animationService.animateFloat(elementRef);
|
||||
}
|
||||
|
||||
onPlay(): void {
|
||||
this.play.emit();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
ViewChild,
|
||||
ElementRef,
|
||||
AfterViewInit,
|
||||
ChangeDetectionStrategy,
|
||||
} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { default as autoAnimate } from '@formkit/auto-animate';
|
||||
import { Winner } from '../../../services/winner.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-winner-ticker',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="flex items-center gap-12 animate-marquee will-change-transform" #tickerContainer>
|
||||
<span *ngFor="let winner of winners" class="flex items-center gap-3 whitespace-nowrap">
|
||||
<span class="text-yellow-300 text-lg animate-pulseGlow will-change-transform">🎰</span>
|
||||
<span class="font-medium">
|
||||
{{ winner.name }}
|
||||
<span class="text-yellow-300 font-semibold">{{ winner.isVIP ? '(VIP)' : '' }}</span>
|
||||
won <span class="text-yellow-300 font-semibold">€{{ winner.amount | number }}</span>
|
||||
<span class="text-yellow-300">({{ winner.multiplier }}x)</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`,
|
||||
styles: [],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class WinnerTickerComponent implements AfterViewInit {
|
||||
@Input() winners: Winner[] = [];
|
||||
@ViewChild('tickerContainer') tickerContainer!: ElementRef;
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
autoAnimate(this.tickerContainer.nativeElement);
|
||||
}
|
||||
}
|
||||
Reference in a new issue