36-character-flower/src/features/game/components/desktop/desktop-status.tsx

import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
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 { LottiePlayer } from '@/components/lottie-player.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 { DesktopTitle } from '@/features/game/components/desktop/desktop-title.tsx'
import { useGameStatusVm } from '@/features/game/hooks/use-game-status-vm.ts'
export function DesktopStatusLine() {
  const { t } = useTranslation()
  const {
    countdownMs,
    limitLabel,
    oddsLabel,
    phaseDescription,
    phaseLabel,
    phaseToneClassName,
    roundId,
    streakLabel,
  } = useGameStatusVm()
  const [remainingMs, setRemainingMs] = useState(countdownMs)
  const showWarningCountdown = remainingMs <= 5000 && remainingMs > 0
  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 flex flex-col text-design-22'}>
      <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'
          }
        >
          {/*<div className={'flex-1 absolute z-10 -right-20 -top-6 w-full !h-design-105'} style={{*/}
          {/*    backgroundImage: `url(${streakBg})`,*/}
          {/*    backgroundSize: '100% 110%',*/}
          {/*    backgroundRepeat: 'no-repeat',*/}
          {/*}} >*/}
          {/*</div>*/}

          <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'
            }
          >
            <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={
              '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>{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 z-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 z-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={'flex-1 flex items-center justify-center gap-10'}>
          <div>
            {t('gameDesktop.status.roundId')}:{roundId}
          </div>
          <div className={'flex items-center gap-2'}>
            <div className={'flex items-center gap-2'}>
              <div
                className={'w-design-20 h-design-20 bg-[#78FF7F] rounded-[50%]'}
              ></div>
              <div className={phaseToneClassName}>{phaseLabel}</div>
            </div>
            <div>{phaseDescription}</div>
          </div>
        </div>
      </SmartBackground>
      <div
        className={
          'absolute top-design-75 left-1/2 -translate-x-1/2 -z-10 w-full px-design-16'
        }
      >
        <DesktopTitle />
      </div>
    </div>
  )
}