feat(game): 更新游戏状态栏和彩金池组件
- 重构桌面版状态栏布局，优化响应式设计和组件结构 - 添加hud变体类型的彩金池ticker组件，支持新的视觉样式 - 为移动版状态栏调整网格布局和间距设置 - 在多个语言包中添加彩金池促销文案 - 设置默认彩金池金额并改进计时器逻辑 - 优化移动版入口文件中的组件排列方式
This commit is contained in:
JiaJun
@@ -42,194 +42,196 @@ export function DesktopStatusLine() {
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={'relative w-full flex flex-col text-design-22'}>
|
||||
<div className={'w-full px-design-16 mb-design-10'}>
|
||||
<MessageBroadcast showJackpotPool={false} />
|
||||
</div>
|
||||
<SmartBackground
|
||||
src={statusLine}
|
||||
size="100% 100%"
|
||||
className="w-full h-design-75 bg-no-repeat bg-center flex items-center justify-center"
|
||||
>
|
||||
{/* 状态栏左侧 */}
|
||||
<div
|
||||
className={
|
||||
'relative h-full flex-1 flex items-center justify-center gap-design-50 overflow-visible'
|
||||
}
|
||||
>
|
||||
{showStreakLimitOnly && (
|
||||
<div className="relative w-full text-design-22">
|
||||
<div className="flex w-full items-start gap-design-14 px-design-16">
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<div className="mb-design-10 w-full">
|
||||
<MessageBroadcast showJackpotPool={false} />
|
||||
</div>
|
||||
<SmartBackground
|
||||
src={statusLine}
|
||||
size="100% 100%"
|
||||
className="flex h-design-75 w-full items-center justify-center bg-center bg-no-repeat"
|
||||
>
|
||||
{/* 状态栏左侧 */}
|
||||
<div
|
||||
className={'pointer-events-none absolute bg-center bg-no-repeat'}
|
||||
style={{
|
||||
top: 'calc(var(--design-unit)*-14)',
|
||||
right: 'calc(var(--design-unit)*-190)',
|
||||
bottom: 'calc(var(--design-unit)*-1)',
|
||||
left: 0,
|
||||
backgroundImage: `url(${streakBg})`,
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: '113% 150%',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
className={
|
||||
'relative flex h-full w-design-760 shrink-0 items-center justify-center gap-design-64 overflow-visible'
|
||||
}
|
||||
>
|
||||
{showStreakLimitOnly && (
|
||||
<div
|
||||
className={
|
||||
'pointer-events-none absolute bg-center bg-no-repeat'
|
||||
}
|
||||
style={{
|
||||
top: 'calc(var(--design-unit)*-14)',
|
||||
right: 'calc(var(--design-unit)*-190)',
|
||||
bottom: 'calc(var(--design-unit)*-1)',
|
||||
left: 0,
|
||||
backgroundImage: `url(${streakBg})`,
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: '113% 150%',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!showStreakLimitOnly && (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
'shrink-0 whitespace-nowrap font-bold text-[#CBD3D5]'
|
||||
}
|
||||
>
|
||||
{t('gameDesktop.status.odds')}:{' '}
|
||||
<span className={'text-[#E3D171]'}>{oddsLabel}</span>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
'flex shrink-0 items-center gap-design-5 whitespace-nowrap font-bold text-[#CBD3D5]'
|
||||
}
|
||||
>
|
||||
<SmartImage
|
||||
className={'w-design-37 h-design-47'}
|
||||
alt={'fire'}
|
||||
src={fire}
|
||||
/>
|
||||
<div>
|
||||
{t('gameDesktop.status.streak')}:{' '}
|
||||
<span
|
||||
className={
|
||||
'bg-gradient-to-b from-[#EBA661] to-[#FCC785] bg-clip-text text-transparent'
|
||||
}
|
||||
>
|
||||
{streakLabel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!showStreakLimitOnly && (
|
||||
<>
|
||||
<div className={'text-[#CBD3D5] font-bold'}>
|
||||
{t('gameDesktop.status.odds')}:{' '}
|
||||
<span className={'text-[#E3D171]'}>{oddsLabel}</span>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
'flex items-center gap-design-5 text-[#CBD3D5] font-bold'
|
||||
'relative z-20 flex shrink-0 items-center gap-design-5 whitespace-nowrap font-bold text-[#CBD3D5]'
|
||||
}
|
||||
>
|
||||
<SmartImage
|
||||
className={'w-design-37 h-design-47'}
|
||||
alt={'fire'}
|
||||
src={fire}
|
||||
className={'w-design-25 h-design-33'}
|
||||
alt={'lock'}
|
||||
src={lock}
|
||||
/>
|
||||
<div>
|
||||
{t('gameDesktop.status.streak')}:{' '}
|
||||
<span
|
||||
className={
|
||||
'bg-gradient-to-b from-[#EBA661] to-[#FCC785] bg-clip-text text-transparent'
|
||||
}
|
||||
>
|
||||
{streakLabel}
|
||||
</span>
|
||||
<div className={'flex items-center gap-design-10'}>
|
||||
<div>{t('gameDesktop.status.limit')}:</div>
|
||||
<div className={'flex items-center gap-design-5'}>
|
||||
<SmartImage
|
||||
className={'w-design-35 h-design-35'}
|
||||
alt={'diamond'}
|
||||
src={diamond}
|
||||
/>
|
||||
<div>{limitLabel}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
'relative z-20 flex items-center gap-design-5 text-[#CBD3D5] font-bold'
|
||||
}
|
||||
>
|
||||
<SmartImage
|
||||
className={'w-design-25 h-design-33'}
|
||||
alt={'lock'}
|
||||
src={lock}
|
||||
/>
|
||||
<div className={'flex items-center gap-design-10'}>
|
||||
<div>{t('gameDesktop.status.limit')}:</div>
|
||||
<div className={'flex items-center gap-design-5'}>
|
||||
<SmartImage
|
||||
className={'w-design-35 h-design-35'}
|
||||
alt={'diamond'}
|
||||
src={diamond}
|
||||
<div className="relative z-20 flex h-[105px] w-design-360 items-center justify-center">
|
||||
<SmartBackground
|
||||
src={statusCenter}
|
||||
className="pointer-events-none absolute inset-0 bg-no-repeat bg-center bg-contain transition-opacity duration-500 ease-out"
|
||||
size="contain"
|
||||
style={{
|
||||
opacity: showWarningCountdown ? 0.18 : 1,
|
||||
transform: showWarningCountdown ? 'scale(0.985)' : 'scale(1)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 overflow-visible transition-all duration-500 ease-out"
|
||||
style={{
|
||||
opacity: showWarningCountdown ? 1 : 0,
|
||||
transform: showWarningCountdown
|
||||
? 'scale(1.1) translateY(calc(var(--design-unit)*1))'
|
||||
: 'scale(1.02) translateY(0)',
|
||||
}}
|
||||
>
|
||||
<LottiePlayer
|
||||
animationData={down5Animation}
|
||||
className="h-full w-full"
|
||||
loop
|
||||
autoplay
|
||||
/>
|
||||
<div>{limitLabel}</div>
|
||||
</div>
|
||||
<DesktopCountdown
|
||||
initialMs={countdownMs}
|
||||
onRemainingMsChange={setRemainingMs}
|
||||
className={countdownClassName}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid min-w-0 w-design-374 shrink-0 grid-cols-[minmax(0,0.78fr)_minmax(0,1.22fr)] items-center justify-items-stretch pl-design-6 pr-design-16">
|
||||
<div className="flex min-w-0 items-center justify-center gap-design-6">
|
||||
<span className="relative flex h-design-24 w-design-24 items-center justify-center">
|
||||
<motion.span
|
||||
aria-hidden="true"
|
||||
className="absolute h-design-24 w-design-24 rounded-full bg-[rgba(120,255,127,0.22)] blur-[calc(var(--design-unit)*3)]"
|
||||
animate={
|
||||
prefersReducedMotion
|
||||
? undefined
|
||||
: {
|
||||
opacity: [0.36, 0.88, 0.42],
|
||||
scale: [0.9, 1.28, 0.98],
|
||||
}
|
||||
}
|
||||
transition={
|
||||
prefersReducedMotion
|
||||
? undefined
|
||||
: {
|
||||
duration: 1.25,
|
||||
ease: 'easeInOut',
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<motion.span
|
||||
aria-hidden="true"
|
||||
className="relative h-design-14 w-design-14 rounded-full bg-[#78FF7F] shadow-[0_0_calc(var(--design-unit)*8)_rgba(120,255,127,0.78),0_0_calc(var(--design-unit)*16)_rgba(120,255,127,0.34)]"
|
||||
animate={
|
||||
prefersReducedMotion
|
||||
? undefined
|
||||
: { opacity: [0.78, 1, 0.86], scale: [0.96, 1.12, 1] }
|
||||
}
|
||||
transition={
|
||||
prefersReducedMotion
|
||||
? undefined
|
||||
: {
|
||||
duration: 1.25,
|
||||
ease: 'easeInOut',
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
className={cn(
|
||||
phaseToneClassName,
|
||||
'font-black tracking-[0.08em] [text-shadow:0_0_calc(var(--design-unit)*10)_rgba(120,255,127,0.44)]',
|
||||
)}
|
||||
>
|
||||
{phaseLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex min-w-0 items-baseline justify-center gap-design-5 font-bold leading-none">
|
||||
<span className="text-design-20 tracking-[0.06em] text-[#9FBAC0]">
|
||||
{t('gameDesktop.status.roundId')}:
|
||||
</span>
|
||||
<span className="min-w-0 truncate text-design-24 font-black tracking-[0.06em] text-[#E7FFFF] [text-shadow:0_0_calc(var(--design-unit)*9)_rgba(75,255,254,0.38)]">
|
||||
{roundId}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SmartBackground>
|
||||
</div>
|
||||
|
||||
<div className="relative z-20 flex h-[105px] w-design-360 items-center justify-center">
|
||||
<SmartBackground
|
||||
src={statusCenter}
|
||||
className="pointer-events-none absolute inset-0 bg-no-repeat bg-center bg-contain transition-opacity duration-500 ease-out"
|
||||
size="contain"
|
||||
style={{
|
||||
opacity: showWarningCountdown ? 0.18 : 1,
|
||||
transform: showWarningCountdown ? 'scale(0.985)' : 'scale(1)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 overflow-visible transition-all duration-500 ease-out"
|
||||
style={{
|
||||
opacity: showWarningCountdown ? 1 : 0,
|
||||
transform: showWarningCountdown
|
||||
? 'scale(1.1) translateY(calc(var(--design-unit)*1))'
|
||||
: 'scale(1.02) translateY(0)',
|
||||
}}
|
||||
>
|
||||
<LottiePlayer
|
||||
animationData={down5Animation}
|
||||
className="h-full w-full"
|
||||
loop
|
||||
autoplay
|
||||
/>
|
||||
</div>
|
||||
<DesktopCountdown
|
||||
initialMs={countdownMs}
|
||||
onRemainingMsChange={setRemainingMs}
|
||||
className={countdownClassName}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid min-w-0 flex-1 grid-cols-[repeat(3,minmax(0,1fr))] items-center justify-items-stretch pl-design-6 pr-design-16">
|
||||
<div className="flex min-w-0 items-center justify-center gap-design-6">
|
||||
<span className="relative flex h-design-24 w-design-24 items-center justify-center">
|
||||
<motion.span
|
||||
aria-hidden="true"
|
||||
className="absolute h-design-24 w-design-24 rounded-full bg-[rgba(120,255,127,0.22)] blur-[calc(var(--design-unit)*3)]"
|
||||
animate={
|
||||
prefersReducedMotion
|
||||
? undefined
|
||||
: { opacity: [0.36, 0.88, 0.42], scale: [0.9, 1.28, 0.98] }
|
||||
}
|
||||
transition={
|
||||
prefersReducedMotion
|
||||
? undefined
|
||||
: {
|
||||
duration: 1.25,
|
||||
ease: 'easeInOut',
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<motion.span
|
||||
aria-hidden="true"
|
||||
className="relative h-design-14 w-design-14 rounded-full bg-[#78FF7F] shadow-[0_0_calc(var(--design-unit)*8)_rgba(120,255,127,0.78),0_0_calc(var(--design-unit)*16)_rgba(120,255,127,0.34)]"
|
||||
animate={
|
||||
prefersReducedMotion
|
||||
? undefined
|
||||
: { opacity: [0.78, 1, 0.86], scale: [0.96, 1.12, 1] }
|
||||
}
|
||||
transition={
|
||||
prefersReducedMotion
|
||||
? undefined
|
||||
: {
|
||||
duration: 1.25,
|
||||
ease: 'easeInOut',
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
className={cn(
|
||||
phaseToneClassName,
|
||||
'font-black tracking-[0.08em] [text-shadow:0_0_calc(var(--design-unit)*10)_rgba(120,255,127,0.44)]',
|
||||
)}
|
||||
>
|
||||
{phaseLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex min-w-0 items-baseline justify-center gap-design-5 font-bold leading-none">
|
||||
<span className="text-design-20 tracking-[0.06em] text-[#9FBAC0]">
|
||||
{t('gameDesktop.status.roundId')}:
|
||||
</span>
|
||||
<span className="min-w-0 truncate text-design-24 font-black tracking-[0.06em] text-[#E7FFFF] [text-shadow:0_0_calc(var(--design-unit)*9)_rgba(75,255,254,0.38)]">
|
||||
{roundId}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex min-w-0 items-center justify-center">
|
||||
<JackpotPoolTicker
|
||||
variant="inline"
|
||||
className={cn(
|
||||
'!h-design-52 !w-full max-w-full justify-center !px-design-5 md:!px-design-6',
|
||||
'[&>div:first-child]:md:!mr-design-5 [&>div:first-child]:md:!h-design-20 [&>div:first-child]:md:!w-design-20',
|
||||
'[&>span:first-of-type]:md:!mr-[20px] [&>span:first-of-type]:md:!text-design-10',
|
||||
'[&>span:last-child]:!shrink-0 [&>span:last-child]:!text-design-9 md:[&>span:last-child]:!text-design-20',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SmartBackground>
|
||||
<JackpotPoolTicker className="mt-design-0" variant="hud" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user