diff --git a/src/assets/system/jackpot-bg.png b/src/assets/system/jackpot-bg.png new file mode 100644 index 0000000..aee51ae Binary files /dev/null and b/src/assets/system/jackpot-bg.png differ diff --git a/src/assets/system/jackpot-title.png b/src/assets/system/jackpot-title.png new file mode 100644 index 0000000..80282cb Binary files /dev/null and b/src/assets/system/jackpot-title.png differ diff --git a/src/components/jackpot-pool-ticker.tsx b/src/components/jackpot-pool-ticker.tsx index fed9e25..51e4a73 100644 --- a/src/components/jackpot-pool-ticker.tsx +++ b/src/components/jackpot-pool-ticker.tsx @@ -1,11 +1,14 @@ import { useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import diamond from '@/assets/system/diamond.webp' +import jackpotBg from '@/assets/system/jackpot-bg.png' +import jackpotTitle from '@/assets/system/jackpot-title.png' import { SmartImage } from '@/components/smart-image.tsx' import { cn } from '@/lib/utils.ts' import { useGameSessionStore } from '@/store/game' const JACKPOT_POOL_TICK_MS = 1000 +const DEFAULT_JACKPOT_POOL_AMOUNT = 1_000_000 const jackpotPoolFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2, minimumFractionDigits: 2, @@ -13,7 +16,7 @@ const jackpotPoolFormatter = new Intl.NumberFormat('en-US', { type JackpotPoolTickerProps = { className?: string - variant?: 'inline' | 'standalone' + variant?: 'hud' | 'inline' | 'standalone' } export function JackpotPoolTicker({ @@ -24,7 +27,7 @@ export function JackpotPoolTicker({ const jackpotPool = useGameSessionStore( (state) => state.dashboard.jackpotPool, ) - const poolCurrent = jackpotPool?.current ?? null + const poolCurrent = jackpotPool?.current ?? DEFAULT_JACKPOT_POOL_AMOUNT const poolSpeedPerSecond = jackpotPool?.speedPerSecond ?? 0 const poolUpdatedAt = jackpotPool?.updatedAt ?? null const [nowMs, setNowMs] = useState(() => Date.now()) @@ -32,7 +35,7 @@ export function JackpotPoolTicker({ useEffect(() => { setNowMs(Date.now()) - if (poolCurrent === null || poolSpeedPerSecond <= 0) { + if (poolSpeedPerSecond <= 0) { return } @@ -43,13 +46,9 @@ export function JackpotPoolTicker({ return () => { window.clearInterval(timerId) } - }, [poolCurrent, poolSpeedPerSecond]) + }, [poolSpeedPerSecond]) const displayAmount = useMemo(() => { - if (poolCurrent === null) { - return null - } - const updatedAtMs = poolUpdatedAt ? Date.parse(poolUpdatedAt) : Number.NaN const baseTimeMs = Number.isFinite(updatedAtMs) ? updatedAtMs : nowMs const elapsedSeconds = Math.max(0, (nowMs - baseTimeMs) / 1000) @@ -57,11 +56,8 @@ export function JackpotPoolTicker({ return poolCurrent + elapsedSeconds * poolSpeedPerSecond }, [nowMs, poolCurrent, poolSpeedPerSecond, poolUpdatedAt]) - if (displayAmount === null) { - return null - } - const amountLabel = jackpotPoolFormatter.format(displayAmount) + const isHud = variant === 'hud' const isInline = variant === 'inline' const amountCharacterCounts = new Map() const amountCharacterItems = Array.from(amountLabel).map((character) => { @@ -75,6 +71,96 @@ export function JackpotPoolTicker({ } }) + if (isHud) { + return ( +
+
+ ) + } + return (
-
- -
- - {/* 状态栏左侧 */} -
- {showStreakLimitOnly && ( +
+
+
+
+ +
+ + {/* 状态栏左侧 */}
- )} + className={ + 'relative flex h-full w-design-760 shrink-0 items-center justify-center gap-design-64 overflow-visible' + } + > + {showStreakLimitOnly && ( +
+ )} + + {!showStreakLimitOnly && ( + <> +
+ {t('gameDesktop.status.odds')}:{' '} + {oddsLabel} +
+
+ +
+ {t('gameDesktop.status.streak')}:{' '} + + {streakLabel} + +
+
+ + )} - {!showStreakLimitOnly && ( - <> -
- {t('gameDesktop.status.odds')}:{' '} - {oddsLabel} -
-
- {t('gameDesktop.status.streak')}:{' '} - - {streakLabel} - +
+
{t('gameDesktop.status.limit')}:
+
+ +
{limitLabel}
+
- - )} +
-
- -
-
{t('gameDesktop.status.limit')}:
-
- + +
+ -
{limitLabel}
+
+ +
+
+
+ + +
+ {phaseLabel} +
+
+ +
+ + {t('gameDesktop.status.roundId')}: + + + {roundId} +
-
+
- -
- -
- -
- -
-
-
- - -
- {phaseLabel} -
-
- -
- - {t('gameDesktop.status.roundId')}: - - - {roundId} - -
- -
- 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', - )} - /> -
-
- + +
) } diff --git a/src/features/game/components/mobile/mobile-status.tsx b/src/features/game/components/mobile/mobile-status.tsx index 8c0c29f..d08663d 100644 --- a/src/features/game/components/mobile/mobile-status.tsx +++ b/src/features/game/components/mobile/mobile-status.tsx @@ -166,28 +166,26 @@ export function MobileStatusMetrics() { {showStreakLimitOnly ? (
) : ( <> -
+
{t('gameDesktop.status.odds')}: - {oddsLabel} + {oddsLabel}
-
+
@@ -198,11 +196,11 @@ export function MobileStatusMetrics() {
)} -
- +
+ {t('gameDesktop.status.limit')}: diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts index 310acae..d25973d 100644 --- a/src/locales/en-US.ts +++ b/src/locales/en-US.ts @@ -182,6 +182,8 @@ export default { ariaLabel: 'Current jackpot pool {{amount}}', iconAlt: 'Jackpot pool', label: 'Jackpot', + promoLine1: 'Streak Win 10 Rounds', + promoLine2: 'And Hit The Super', }, actions: { unifiedBetHint: 'Unified bet', diff --git a/src/locales/id-ID.ts b/src/locales/id-ID.ts index 76a03c1..a920692 100644 --- a/src/locales/id-ID.ts +++ b/src/locales/id-ID.ts @@ -181,6 +181,8 @@ export default { ariaLabel: 'Pool jackpot saat ini {{amount}}', iconAlt: 'Pool jackpot', label: 'Jackpot', + promoLine1: 'Menang 10 Ronde Beruntun', + promoLine2: 'Dan Raih Super Jackpot', }, actions: { unifiedBetHint: 'Bet seragam', diff --git a/src/locales/ms-MY.ts b/src/locales/ms-MY.ts index 91cb9d2..b651815 100644 --- a/src/locales/ms-MY.ts +++ b/src/locales/ms-MY.ts @@ -184,6 +184,8 @@ export default { ariaLabel: 'Dana jackpot semasa {{amount}}', iconAlt: 'Dana jackpot', label: 'Jackpot', + promoLine1: '10 Kemenangan Berturut', + promoLine2: 'Dan Raih Super Jackpot', }, actions: { unifiedBetHint: 'Taruhan seragam', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index fe3ac98..a4a17c5 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -179,6 +179,8 @@ export default { ariaLabel: '彩金池当前金额 {{amount}}', iconAlt: '彩金池', label: '彩金池', + promoLine1: '连胜 10 局', + promoLine2: '并触发超级大奖', }, actions: { unifiedBetHint: '统一下注额', diff --git a/src/main/mobile-entry.tsx b/src/main/mobile-entry.tsx index f21b0f8..b3a5d7a 100644 --- a/src/main/mobile-entry.tsx +++ b/src/main/mobile-entry.tsx @@ -1,3 +1,4 @@ +import { JackpotPoolTicker } from '@/components/jackpot-pool-ticker.tsx' import { MessageBroadcast } from '@/components/message-broadcast.tsx' import { MobileAnimal } from '@/features/game/components/mobile/mobile-animal.tsx' import { MobileBettingStartAlert } from '@/features/game/components/mobile/mobile-betting-start-alert.tsx' @@ -12,11 +13,12 @@ export function MobileEntry() { return ( <> -
- -
-
- +
+
+ + +
+