feat(game): 更新马来西亚手机号验证和游戏界面优化
- 修改认证模块手机号验证规则适配马来西亚号码格式 - 添加新的投注限制提示文本支持多语言 - 重命名结算阶段标签为Drawing统一显示 - 新增桌面版动物游戏遮罩组件分离功能 - 添加回合开始投注提醒弹窗组件 - 优化开奖动画流程和视觉效果 - 添加奖励动画显示和投注汇总展示 - 新增多种投注限制和状态提示信息
This commit is contained in:
JiaJun
@@ -90,7 +90,7 @@ export function DesktopGameHistory() {
|
||||
ref={parentRef}
|
||||
onScroll={handleScroll}
|
||||
className={
|
||||
'history-scroll-hidden z-10 flex min-h-0 flex-1 w-full flex-col gap-design-10 overflow-y-auto overflow-x-hidden px-design-20 py-design-20'
|
||||
'history-scroll-hidden z-10 flex min-h-0 flex-1 w-full flex-col gap-design-6 overflow-y-auto overflow-x-hidden px-design-14 py-design-14'
|
||||
}
|
||||
>
|
||||
{isInitialLoading ? (
|
||||
@@ -142,10 +142,10 @@ export function DesktopGameHistory() {
|
||||
: 'linear-gradient(180deg,rgba(31,111,54,0.38),rgba(6,28,20,0.92))'
|
||||
|
||||
return (
|
||||
<div key={item.id} className="w-full pb-design-12 last:pb-0">
|
||||
<div key={item.id} className="w-full pb-design-4 last:pb-0">
|
||||
<div
|
||||
className={
|
||||
'relative isolate flex w-full flex-col items-center overflow-hidden rounded-[calc(var(--design-unit)*14)] border bg-[linear-gradient(180deg,rgba(6,33,45,0.97),rgba(3,14,23,0.94))] text-[#FFE375] shadow-[0_0_calc(var(--design-unit)*16)_rgba(63,226,255,0.14),inset_0_1px_0_rgba(218,255,255,0.12)] transition-colors duration-200'
|
||||
'relative isolate flex w-full flex-col overflow-hidden rounded-[calc(var(--design-unit)*8)] border bg-[linear-gradient(180deg,rgba(6,33,45,0.95),rgba(3,14,23,0.92))] text-[#FFE375] shadow-[0_0_calc(var(--design-unit)*10)_rgba(63,226,255,0.1),inset_0_1px_0_rgba(218,255,255,0.1)] transition-colors duration-200'
|
||||
}
|
||||
style={{
|
||||
borderColor: statusBorderColor,
|
||||
@@ -153,28 +153,31 @@ export function DesktopGameHistory() {
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-x-design-10 top-0 h-px opacity-80"
|
||||
className="pointer-events-none absolute inset-x-design-8 top-0 h-px opacity-70"
|
||||
style={{
|
||||
background: `linear-gradient(90deg, transparent, ${statusColor}, transparent)`,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute -right-design-28 -top-design-30 h-design-90 w-design-90 rounded-full blur-[28px]"
|
||||
className="pointer-events-none absolute -right-design-24 -top-design-28 h-design-72 w-design-72 rounded-full blur-[24px]"
|
||||
style={{
|
||||
background: statusColor,
|
||||
opacity: isWin ? 0.14 : 0.08,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="relative z-10 flex min-h-design-42 w-full items-center justify-center border-b px-design-12 py-design-7"
|
||||
className="relative z-10 grid min-h-design-32 w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-design-8 border-b px-design-9 py-design-4"
|
||||
style={{
|
||||
background: statusBg,
|
||||
borderColor: statusBorderColor,
|
||||
}}
|
||||
>
|
||||
<span className="min-w-0 truncate text-design-12 font-medium text-[#8DBCC2]">
|
||||
{item.createdAtLabel}
|
||||
</span>
|
||||
<span
|
||||
className="inline-flex min-w-design-118 items-center justify-center gap-design-8 px-design-14 py-design-4 text-design-18 font-bold"
|
||||
className="inline-flex min-w-design-72 items-center justify-center gap-design-5 text-design-15 font-bold"
|
||||
style={{
|
||||
borderColor: statusBorderColor,
|
||||
color: statusColor,
|
||||
@@ -183,41 +186,33 @@ export function DesktopGameHistory() {
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="h-design-8 w-design-8 rounded-full shadow-[0_0_calc(var(--design-unit)*10)_currentColor]"
|
||||
className="h-design-6 w-design-6 rounded-full shadow-[0_0_calc(var(--design-unit)*8)_currentColor]"
|
||||
style={{ backgroundColor: statusColor }}
|
||||
/>
|
||||
{statusLabel}
|
||||
</span>
|
||||
<span className="min-w-0 truncate text-right text-design-12 font-medium text-[#C0E7EB]">
|
||||
{t('gameDesktop.history.roundId')}: {item.periodNo}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
'relative z-10 flex w-full flex-col gap-design-7 px-design-10 py-design-10 text-design-16'
|
||||
'relative z-10 flex w-full flex-col gap-design-5 px-design-8 py-design-7 text-design-13'
|
||||
}
|
||||
>
|
||||
<div className="flex min-h-design-34 items-center justify-between gap-design-10 rounded-[calc(var(--design-unit)*8)] border border-[rgba(94,212,230,0.14)] bg-[rgba(5,23,33,0.58)] px-design-10 py-design-6">
|
||||
<span className={'shrink-0 text-[#84A2A2]'}>
|
||||
{t('gameDesktop.history.roundId')}:{' '}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
'min-w-0 text-right text-design-15 font-medium text-[#C0E7EB]'
|
||||
}
|
||||
>
|
||||
{item.periodNo}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex min-h-design-42 items-start justify-between gap-design-10 rounded-[calc(var(--design-unit)*8)] border border-[rgba(94,212,230,0.14)] bg-[rgba(5,23,33,0.58)] px-design-10 py-design-6">
|
||||
<span className={'shrink-0 pt-design-7 text-[#84A2A2]'}>
|
||||
{t('gameDesktop.history.numbers')}:{' '}
|
||||
<div className="flex min-h-design-34 items-start justify-between gap-design-6 rounded-[calc(var(--design-unit)*6)] border border-[rgba(94,212,230,0.12)] bg-[rgba(5,23,33,0.52)] px-design-7 py-design-4">
|
||||
<span className={'shrink-0 pt-design-5 text-[#84A2A2]'}>
|
||||
{t('gameDesktop.history.numbers')}
|
||||
</span>
|
||||
{item.numbers.length === 0 ? (
|
||||
<span className="pt-design-7 text-right">
|
||||
<span className="pt-design-5 text-right">
|
||||
{item.numbersLabel}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex min-w-0 flex-1 flex-wrap items-center justify-end gap-design-5 align-middle">
|
||||
<span className="inline-flex min-w-0 flex-1 flex-wrap items-center justify-end gap-design-3 align-middle">
|
||||
{item.numbers.map((number) => (
|
||||
<HistoryRewardNumber
|
||||
className="!h-design-28 !min-w-design-28 !w-design-28 !p-0"
|
||||
key={`${item.id}-${number}`}
|
||||
number={number}
|
||||
/>
|
||||
@@ -225,36 +220,36 @@ export function DesktopGameHistory() {
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex min-h-design-34 items-center justify-between gap-design-10 rounded-[calc(var(--design-unit)*8)] border border-[rgba(255,227,117,0.16)] bg-[linear-gradient(90deg,rgba(5,23,33,0.58),rgba(84,57,8,0.16))] px-design-10 py-design-6">
|
||||
<span className={'shrink-0 text-[#84A2A2]'}>
|
||||
{t('gameDesktop.history.totalPoolAmount')}:{' '}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
'text-right text-design-17 font-bold text-[#FFE375] [text-shadow:0_0_calc(var(--design-unit)*10)_rgba(255,227,117,0.22)]'
|
||||
}
|
||||
>
|
||||
{item.amountLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex min-h-design-42 items-center justify-between gap-design-10 rounded-[calc(var(--design-unit)*8)] border border-[rgba(255,117,117,0.18)] bg-[linear-gradient(90deg,rgba(5,23,33,0.58),rgba(88,20,28,0.16))] px-design-10 py-design-6">
|
||||
<span className={'shrink-0 text-[#84A2A2]'}>
|
||||
{t('gameDesktop.history.winningResult')}:{' '}
|
||||
</span>
|
||||
{item.resultNumber === null ? (
|
||||
<span
|
||||
className={
|
||||
'text-right font-bold text-[#FF7575] [text-shadow:0_0_calc(var(--design-unit)*10)_rgba(255,117,117,0.28)]'
|
||||
}
|
||||
>
|
||||
{item.resultNumberLabel}
|
||||
<div className="grid grid-cols-[1fr_1fr] gap-design-5">
|
||||
<div className="flex min-h-design-28 items-center justify-between gap-design-6 rounded-[calc(var(--design-unit)*6)] border border-[rgba(255,227,117,0.14)] bg-[linear-gradient(90deg,rgba(5,23,33,0.54),rgba(84,57,8,0.14))] px-design-7 py-design-4">
|
||||
<span className="shrink-0 text-[#84A2A2]">
|
||||
{t('gameDesktop.history.payout')}
|
||||
</span>
|
||||
) : (
|
||||
<HistoryRewardNumber
|
||||
className="text-[#FF7575]"
|
||||
number={item.resultNumber}
|
||||
/>
|
||||
)}
|
||||
<span className="min-w-0 truncate text-right text-design-14 font-bold text-[#FFE375] [text-shadow:0_0_calc(var(--design-unit)*8)_rgba(255,227,117,0.2)]">
|
||||
{item.winAmountLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex min-h-design-28 items-center justify-between gap-design-6 rounded-[calc(var(--design-unit)*6)] border border-[rgba(255,117,117,0.16)] bg-[linear-gradient(90deg,rgba(5,23,33,0.54),rgba(88,20,28,0.14))] px-design-7 py-design-4">
|
||||
<span className={'shrink-0 text-[#84A2A2]'}>
|
||||
{t('gameDesktop.history.winningResult')}
|
||||
</span>
|
||||
<span className="flex min-w-0 items-center justify-end">
|
||||
{item.resultNumber === null ? (
|
||||
<span
|
||||
className={
|
||||
'text-right font-bold text-[#FF7575] [text-shadow:0_0_calc(var(--design-unit)*8)_rgba(255,117,117,0.24)]'
|
||||
}
|
||||
>
|
||||
{item.resultNumberLabel}
|
||||
</span>
|
||||
) : (
|
||||
<HistoryRewardNumber
|
||||
className="!h-design-28 !min-w-design-28 !w-design-28 !p-0 text-[#FF7575]"
|
||||
number={item.resultNumber}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user