refactor: 重构多语言和走马灯
- 删除 src/locales/en-US/common.ts 文件中的所有国际化文案 - 删除 src/locales/id-ID/common.ts 文件中的所有国际化文案 - 移除与游戏、认证、UI组件相关的多语言配置项 - 清理导航、游戏大厅、语言选择等界面的翻译内容 - 移除登录注册表单、验证规则等认证相关文案 - 删除支付、提款、钱包记录等财务功能翻译项
This commit is contained in:
JiaJun
@@ -16,8 +16,8 @@ import { useGameRoundStore } from '@/store/game'
|
||||
const SETTLEMENT_REVEAL_RANDOM_DURATION_MS = 3_200
|
||||
const SETTLEMENT_REVEAL_SETTLE_DURATION_MS = 800
|
||||
const SETTLEMENT_REVEAL_RESULT_HOLD_MS = 1_000
|
||||
const SETTLEMENT_REVEAL_MIN_STEP_MS = 90
|
||||
const SETTLEMENT_REVEAL_MAX_STEP_MS = 480
|
||||
const SETTLEMENT_REVEAL_MIN_STEP_MS = 180
|
||||
const SETTLEMENT_REVEAL_MAX_STEP_MS = 960
|
||||
|
||||
function getRandomAnimalId(ids: number[], currentId: number | null) {
|
||||
if (ids.length === 0) {
|
||||
@@ -436,12 +436,12 @@ export function DesktopAnimal({
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
'pointer-events-none absolute z-40 transition-[height,transform,width]',
|
||||
'pointer-events-none absolute z-40 transform-gpu transition-[height,transform,width]',
|
||||
prefersReducedMotion
|
||||
? 'duration-0'
|
||||
: isRevealSettlingResult
|
||||
? 'duration-[800ms] ease-[cubic-bezier(0.16,1,0.3,1)]'
|
||||
: 'duration-75 ease-linear',
|
||||
: 'duration-[160ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
|
||||
)}
|
||||
style={{
|
||||
height: revealFrame.height,
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
import AutoScroll from 'embla-carousel-auto-scroll'
|
||||
import useEmblaCarousel from 'embla-carousel-react'
|
||||
import { useEffect, useMemo } from 'react'
|
||||
import broadcast from '@/assets/system/broadcast.webp'
|
||||
import { SmartImage } from '@/components/smart-image.tsx'
|
||||
import { useGameSessionStore } from '@/store/game'
|
||||
@@ -5,6 +8,21 @@ import { useGameSessionStore } from '@/store/game'
|
||||
const winAmountFormatter = new Intl.NumberFormat('en-US', {
|
||||
maximumFractionDigits: 6,
|
||||
})
|
||||
function getDesktopTitleCarouselCycleCount(titleCount: number) {
|
||||
if (titleCount >= 8) {
|
||||
return 2
|
||||
}
|
||||
|
||||
if (titleCount >= 5) {
|
||||
return 3
|
||||
}
|
||||
|
||||
if (titleCount >= 3) {
|
||||
return 5
|
||||
}
|
||||
|
||||
return 8
|
||||
}
|
||||
|
||||
function formatWinAmount(value: string) {
|
||||
const amount = Number(value)
|
||||
@@ -16,22 +34,77 @@ export function DesktopTitle() {
|
||||
const jackpotBroadcasts = useGameSessionStore(
|
||||
(state) => state.jackpotBroadcasts,
|
||||
)
|
||||
const titles =
|
||||
jackpotBroadcasts.length > 0
|
||||
? jackpotBroadcasts.map((broadcast) => ({
|
||||
id: broadcast.id,
|
||||
message: `Player ${broadcast.nickname} won ${formatWinAmount(
|
||||
broadcast.totalWin,
|
||||
)}`,
|
||||
}))
|
||||
: [{ id: 'empty', message: '' }]
|
||||
const marqueeTitles =
|
||||
jackpotBroadcasts.length > 0
|
||||
? [
|
||||
...titles.map((title) => ({ ...title, id: `${title.id}:first` })),
|
||||
...titles.map((title) => ({ ...title, id: `${title.id}:second` })),
|
||||
]
|
||||
: titles
|
||||
const hasBroadcasts = jackpotBroadcasts.length > 0
|
||||
const titles = useMemo(
|
||||
() =>
|
||||
hasBroadcasts
|
||||
? jackpotBroadcasts.map((broadcast) => ({
|
||||
id: broadcast.id,
|
||||
message: `Player ${broadcast.nickname} won ${formatWinAmount(
|
||||
broadcast.totalWin,
|
||||
)}`,
|
||||
}))
|
||||
: [{ id: 'empty', message: '' }],
|
||||
[hasBroadcasts, jackpotBroadcasts],
|
||||
)
|
||||
const carouselTitles = useMemo(
|
||||
() =>
|
||||
hasBroadcasts
|
||||
? Array.from(
|
||||
{ length: getDesktopTitleCarouselCycleCount(titles.length) },
|
||||
(_, cycleIndex) =>
|
||||
titles.map((title) => ({
|
||||
...title,
|
||||
cycleIndex,
|
||||
id: `${title.id}:cycle-${cycleIndex}`,
|
||||
})),
|
||||
).flat()
|
||||
: titles.map((title) => ({ ...title, cycleIndex: 0 })),
|
||||
[hasBroadcasts, titles],
|
||||
)
|
||||
const carouselTitleCount = carouselTitles.length
|
||||
const autoScrollPlugin = useMemo(
|
||||
() =>
|
||||
AutoScroll({
|
||||
playOnInit: hasBroadcasts,
|
||||
speed: 0.7,
|
||||
startDelay: 0,
|
||||
stopOnFocusIn: false,
|
||||
stopOnInteraction: false,
|
||||
stopOnMouseEnter: false,
|
||||
}),
|
||||
[hasBroadcasts],
|
||||
)
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel(
|
||||
{
|
||||
align: 'start',
|
||||
dragFree: true,
|
||||
loop: hasBroadcasts,
|
||||
watchDrag: false,
|
||||
},
|
||||
[autoScrollPlugin],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) {
|
||||
return
|
||||
}
|
||||
|
||||
if (carouselTitleCount === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
emblaApi.reInit()
|
||||
const autoScroll = emblaApi.plugins().autoScroll
|
||||
|
||||
if (!hasBroadcasts) {
|
||||
autoScroll?.stop()
|
||||
return
|
||||
}
|
||||
|
||||
autoScroll?.reset()
|
||||
autoScroll?.play()
|
||||
}, [emblaApi, hasBroadcasts, carouselTitleCount])
|
||||
|
||||
return (
|
||||
<section className="common-neon-inset text-design-16 w-full flex h-design-65 items-center gap-design-10 !px-design-20 overflow-hidden">
|
||||
@@ -41,21 +114,18 @@ export function DesktopTitle() {
|
||||
src={broadcast}
|
||||
/>
|
||||
<div className="relative h-design-28 min-w-0 flex-1 overflow-hidden">
|
||||
<div
|
||||
className={
|
||||
jackpotBroadcasts.length > 0
|
||||
? 'desktop-title-horizontal-marquee'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{marqueeTitles.map((title) => (
|
||||
<div
|
||||
className="flex h-design-28 shrink-0 items-center whitespace-nowrap !text-[#FF970F]"
|
||||
key={title.id}
|
||||
>
|
||||
{title.message}
|
||||
</div>
|
||||
))}
|
||||
<div className="h-full overflow-hidden" ref={emblaRef}>
|
||||
<div className="flex h-full items-center gap-design-80">
|
||||
{carouselTitles.map((title) => (
|
||||
<div
|
||||
aria-hidden={title.cycleIndex > 0}
|
||||
className="flex h-design-28 min-w-0 shrink-0 items-center whitespace-nowrap !text-[#FF970F]"
|
||||
key={title.id}
|
||||
>
|
||||
{title.message}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user