feat: add jackpot animations and enhance currency handling across components

- Introduced new CSS animations for jackpot effects to improve visual engagement.
- Integrated CurrencySwitcher into PlayerPanel and HallScreen for better currency management.
- Updated various components to utilize active player currency for consistent display.
- Enhanced event handling for currency changes to ensure real-time updates across the application.
This commit is contained in:
2026-05-25 14:31:38 +08:00
parent 2bf44e4c29
commit 9bd7cc9b9e
37 changed files with 1030 additions and 180 deletions

View File

@@ -155,4 +155,125 @@
[data-sonner-toast][data-styled="true"] [data-icon] svg {
width: 14px;
height: 14px;
}
/* Jackpot 爆池全屏动画 */
@keyframes jackpot-backdrop-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes jackpot-card-in {
0% {
opacity: 0;
transform: scale(0.72) translateY(24px);
}
55% {
opacity: 1;
transform: scale(1.04) translateY(-4px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes jackpot-flash {
0% {
opacity: 0.85;
}
100% {
opacity: 0;
}
}
@keyframes jackpot-shimmer {
0% {
background-position: 200% center;
}
100% {
background-position: -200% center;
}
}
@keyframes jackpot-lightning {
0%,
100% {
filter: drop-shadow(0 0 6px rgba(245, 197, 66, 0.5));
transform: scale(1);
}
40% {
filter: drop-shadow(0 0 18px rgba(255, 220, 100, 0.95));
transform: scale(1.12);
}
55% {
filter: drop-shadow(0 0 8px rgba(245, 197, 66, 0.6));
transform: scale(0.96);
}
}
@keyframes jackpot-ring-pulse {
0% {
transform: scale(0.85);
opacity: 0.7;
}
100% {
transform: scale(1.35);
opacity: 0;
}
}
@keyframes jackpot-particle {
0% {
opacity: 0;
transform: translateY(0) scale(0.4);
}
15% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-120px) scale(1);
}
}
@keyframes jackpot-digit-pop {
0% {
transform: scale(1.35);
filter: brightness(1.8);
}
100% {
transform: scale(1);
filter: brightness(1);
}
}
@keyframes jackpot-amount-glow {
0%,
100% {
text-shadow: 0 0 8px rgba(201, 162, 39, 0.25);
}
50% {
text-shadow: 0 0 16px rgba(201, 162, 39, 0.55);
}
}
@keyframes jackpot-amount-row-glow {
0%,
100% {
box-shadow: 0 0 0 rgba(245, 197, 66, 0);
}
50% {
box-shadow: 0 0 20px rgba(245, 197, 66, 0.22);
}
}
@keyframes jackpot-border-spin {
to {
transform: rotate(360deg);
}
}