242 lines
9.9 KiB
TypeScript
242 lines
9.9 KiB
TypeScript
import { motion, useReducedMotion } from 'motion/react'
|
|
import { useMemo, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import streakBg from '@/assets/game/pc-streak.webp'
|
|
import down5Animation from '@/assets/lottie/down5.json'
|
|
import diamond from '@/assets/system/diamond.webp'
|
|
import fire from '@/assets/system/fire.webp'
|
|
import lock from '@/assets/system/lock.webp'
|
|
import statusCenter from '@/assets/system/status-center.webp'
|
|
import statusLine from '@/assets/system/status-line.webp'
|
|
import { JackpotPoolTicker } from '@/components/jackpot-pool-ticker.tsx'
|
|
import { LottiePlayer } from '@/components/lottie-player.tsx'
|
|
import { MessageBroadcast } from '@/components/message-broadcast.tsx'
|
|
import { SmartBackground } from '@/components/smart-background.tsx'
|
|
import { SmartImage } from '@/components/smart-image.tsx'
|
|
import { DesktopCountdown } from '@/features/game/components/desktop/desktop-countdown.tsx'
|
|
import { useGameStatusVm } from '@/hooks/use-game-status-vm.ts'
|
|
import { cn } from '@/lib/utils.ts'
|
|
|
|
const FORCE_DESKTOP_STREAK_EFFECT_PREVIEW = false
|
|
|
|
export function DesktopStatusLine() {
|
|
const { t } = useTranslation()
|
|
const prefersReducedMotion = useReducedMotion()
|
|
const {
|
|
countdownMs,
|
|
limitLabel,
|
|
oddsLabel,
|
|
phaseLabel,
|
|
phaseToneClassName,
|
|
roundId,
|
|
streakLabel,
|
|
streakValue,
|
|
} = useGameStatusVm()
|
|
const [remainingMs, setRemainingMs] = useState(countdownMs)
|
|
const showWarningCountdown = remainingMs <= 5000 && remainingMs > 0
|
|
const showStreakLimitOnly =
|
|
FORCE_DESKTOP_STREAK_EFFECT_PREVIEW ||
|
|
(typeof streakValue === 'number' && streakValue > 1)
|
|
const countdownClassName = useMemo(
|
|
() =>
|
|
showWarningCountdown
|
|
? 'text-design-64 scale-[1.2] text-[#FF5A5A] [text-shadow:0_0_calc(var(--design-unit)*10)_rgba(255,90,90,0.85),0_0_calc(var(--design-unit)*22)_rgba(255,90,90,0.32)]'
|
|
: 'text-design-64 scale-[1.2] text-[#4BFFFE] [text-shadow:0_0_calc(var(--design-unit)*10)_rgba(75,255,254,0.85),0_0_calc(var(--design-unit)*22)_rgba(75,255,254,0.32)]',
|
|
[showWarningCountdown],
|
|
)
|
|
|
|
return (
|
|
<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={
|
|
'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>
|
|
</>
|
|
)}
|
|
|
|
<div
|
|
className={
|
|
'relative z-20 flex shrink-0 items-center gap-design-5 whitespace-nowrap font-bold text-[#CBD3D5]'
|
|
}
|
|
>
|
|
<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>{limitLabel}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 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>
|
|
</SmartBackground>
|
|
</div>
|
|
<JackpotPoolTicker className="mt-design-0" variant="hud" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|