- {isEmpty ? (
+ {isInitialLoading ? (
+
+ {loadingText}
+
+ ) : isEmpty ? (
) : (
- items.map((item) => {
- return (
-
+
+ {virtualizer.getVirtualItems().map((virtualRow) => {
+ const item = items[virtualRow.index]
+
+ return (
- {item.statusLabel}
+ {item ? (
+
+
+ {item.statusLabel}
+
+
+
+
+ {t('gameDesktop.history.orderNo')}:{' '}
+
+
+ {item.orderNo}
+
+
+
+
+ {t('gameDesktop.history.roundId')}:{' '}
+
+
+ {item.periodNo}
+
+
+
+
+ {t('gameDesktop.history.numbers')}:{' '}
+
+ {item.numbersLabel}
+
+
+
+ {t('gameDesktop.history.settledAt')}:{' '}
+
+ {item.createdAtLabel}
+
+
+
+ {t('gameDesktop.history.totalPoolAmount')}:{' '}
+
+
+ {item.amountLabel}
+
+
+
+
+ {t('gameDesktop.history.winningResult')}:{' '}
+
+
+ {item.resultNumberLabel}
+
+
+
+
+ {t('gameDesktop.history.payout')}:{' '}
+
+ {item.winAmountLabel}
+
+
+
+ ) : (
+
+ {isFetchingNextPage ? loadingText : endText}
+
+ )}
-
-
- Round ID:
- {item.roundId}
-
-
- Settled At:
- {item.settledAtLabel}
-
-
-
- Total Pool Amount:{' '}
-
-
- {item.totalPoolAmountLabel}
-
-
-
- Winning Result:
-
- {item.winningCellIdLabel}
-
-
-
- Payout:
- {item.payoutMultiplierLabel}
-
-
-
- )
- })
+ )
+ })}
+
)}
diff --git a/src/features/game/components/desktop/desktop-header.tsx b/src/features/game/components/desktop/desktop-header.tsx
index fe02dab..b483b90 100644
--- a/src/features/game/components/desktop/desktop-header.tsx
+++ b/src/features/game/components/desktop/desktop-header.tsx
@@ -1,10 +1,260 @@
-import { CircleAlert, Mail, Volume2 } from 'lucide-react'
+import { CircleAlert, Mail, Maximize, Minimize, Volume2 } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
import avatar from '@/assets/system/avatar.webp'
+import diamond from '@/assets/system/diamond.webp'
import logo from '@/assets/system/logo.webp'
-import wifi from '@/assets/system/wifi.webp'
import { SmartImage } from '@/components/smart-image.tsx'
+import {
+ isDesktopFullscreen,
+ subscribeDesktopFullscreenChange,
+ toggleDesktopFullscreen,
+} from '@/lib/utils'
+import { useAuthStore, useGameSessionStore, useModalStore } from '@/store'
+
+type BrowserNetworkInformation = {
+ addEventListener?: (type: 'change', listener: () => void) => void
+ downlink?: number
+ effectiveType?: string
+ removeEventListener?: (type: 'change', listener: () => void) => void
+ rtt?: number
+}
+
+type SignalPresentation = {
+ activeBars: number
+ latencyLabel: string
+ toneClassName: string
+}
+
+function formatTimezoneOffset(date: Date) {
+ const offsetMinutes = -date.getTimezoneOffset()
+ const sign = offsetMinutes >= 0 ? '+' : '-'
+ const absoluteMinutes = Math.abs(offsetMinutes)
+ const hours = String(Math.floor(absoluteMinutes / 60)).padStart(2, '0')
+ const minutes = String(absoluteMinutes % 60).padStart(2, '0')
+
+ return `GMT${sign}${hours}${minutes === '00' ? '' : `:${minutes}`}`
+}
+
+function formatHeaderTime(date: Date) {
+ const hours = String(date.getHours()).padStart(2, '0')
+ const minutes = String(date.getMinutes()).padStart(2, '0')
+ const seconds = String(date.getSeconds()).padStart(2, '0')
+
+ return `${hours}:${minutes}:${seconds} ${formatTimezoneOffset(date)}`
+}
+
+function getBrowserNetworkInformation() {
+ if (typeof navigator === 'undefined') {
+ return null
+ }
+
+ return (navigator as Navigator & { connection?: BrowserNetworkInformation })
+ .connection
+}
+
+function resolveSignalPresentation(input: {
+ isOnline: boolean
+ latencyMs: number | null
+ status: string
+}) {
+ if (!input.isOnline || input.status === 'disconnected') {
+ return {
+ activeBars: 0,
+ latencyLabel: '--',
+ toneClassName: 'text-[#FF6B6B]',
+ } satisfies SignalPresentation
+ }
+
+ if (input.latencyMs === null) {
+ return {
+ activeBars: input.status === 'connected' ? 2 : 1,
+ latencyLabel: '--',
+ toneClassName: 'text-[#7F8EA3]',
+ } satisfies SignalPresentation
+ }
+
+ if (input.latencyMs <= 80) {
+ return {
+ activeBars: 4,
+ latencyLabel: String(input.latencyMs),
+ toneClassName: 'text-[#74FF69]',
+ } satisfies SignalPresentation
+ }
+
+ if (input.latencyMs <= 150) {
+ return {
+ activeBars: 3,
+ latencyLabel: String(input.latencyMs),
+ toneClassName: 'text-[#B7FF6A]',
+ } satisfies SignalPresentation
+ }
+
+ if (input.latencyMs <= 300) {
+ return {
+ activeBars: 2,
+ latencyLabel: String(input.latencyMs),
+ toneClassName: 'text-[#FFD76A]',
+ } satisfies SignalPresentation
+ }
+
+ return {
+ activeBars: 1,
+ latencyLabel: String(input.latencyMs),
+ toneClassName: 'text-[#FF8A6A]',
+ } satisfies SignalPresentation
+}
+
+function SignalBars({
+ activeBars,
+ toneClassName,
+}: {
+ activeBars: number
+ toneClassName: string
+}) {
+ const barHeights = ['h-[6px]', 'h-[10px]', 'h-[14px]', 'h-[18px]'] as const
+
+ return (
+
+ {barHeights.map((heightClassName, index) => {
+ const isActive = index < activeBars
+
+ return (
+
+ )
+ })}
+
+ )
+}
export function DesktopHeader() {
+ const { t } = useTranslation()
+ const [isFullscreen, setIsFullscreen] = useState(false)
+ const [clockNow, setClockNow] = useState(() => Date.now())
+ const [isOnline, setIsOnline] = useState(() =>
+ typeof navigator === 'undefined' ? true : navigator.onLine,
+ )
+ const [browserNetworkRttMs, setBrowserNetworkRttMs] = useState
(
+ () => {
+ const rtt = getBrowserNetworkInformation()?.rtt
+
+ return typeof rtt === 'number' && Number.isFinite(rtt) && rtt > 0
+ ? rtt
+ : null
+ },
+ )
+ const currentUser = useAuthStore((state) => state.currentUser)
+ const authStatus = useAuthStore((state) => state.status)
+ const connection = useGameSessionStore((state) => state.connection)
+ const setModalOpen = useModalStore((state) => state.setModalOpen)
+
+ const serverClockOffsetMs = useMemo(() => {
+ if (
+ connection.status !== 'connected' ||
+ connection.transport !== 'websocket' ||
+ !connection.lastMessageAt
+ ) {
+ return null
+ }
+
+ const serverTimestamp = Date.parse(connection.lastMessageAt)
+
+ if (Number.isNaN(serverTimestamp)) {
+ return null
+ }
+
+ return serverTimestamp - Date.now()
+ }, [connection.lastMessageAt, connection.status, connection.transport])
+
+ const systemTimeLabel = useMemo(() => {
+ const activeTimestamp =
+ serverClockOffsetMs === null ? clockNow : clockNow + serverClockOffsetMs
+
+ return formatHeaderTime(new Date(activeTimestamp))
+ }, [clockNow, serverClockOffsetMs])
+
+ const signalLatencyMs = useMemo(() => {
+ if (
+ typeof connection.latencyMs === 'number' &&
+ Number.isFinite(connection.latencyMs) &&
+ connection.latencyMs >= 0
+ ) {
+ return connection.latencyMs
+ }
+
+ return browserNetworkRttMs
+ }, [browserNetworkRttMs, connection.latencyMs])
+
+ const signalPresentation = useMemo(
+ () =>
+ resolveSignalPresentation({
+ isOnline,
+ latencyMs: signalLatencyMs,
+ status: connection.status,
+ }),
+ [connection.status, isOnline, signalLatencyMs],
+ )
+
+ useEffect(() => {
+ const syncFullscreenState = () => {
+ setIsFullscreen(isDesktopFullscreen())
+ }
+ syncFullscreenState()
+ return subscribeDesktopFullscreenChange(syncFullscreenState)
+ }, [])
+
+ useEffect(() => {
+ const timer = window.setInterval(() => {
+ setClockNow(Date.now())
+ }, 1000)
+
+ return () => {
+ window.clearInterval(timer)
+ }
+ }, [])
+
+ useEffect(() => {
+ const syncBrowserNetworkState = () => {
+ setIsOnline(navigator.onLine)
+
+ const rtt = getBrowserNetworkInformation()?.rtt
+
+ setBrowserNetworkRttMs(
+ typeof rtt === 'number' && Number.isFinite(rtt) && rtt > 0 ? rtt : null,
+ )
+ }
+
+ const networkInformation = getBrowserNetworkInformation()
+
+ syncBrowserNetworkState()
+ window.addEventListener('online', syncBrowserNetworkState)
+ window.addEventListener('offline', syncBrowserNetworkState)
+ networkInformation?.addEventListener?.('change', syncBrowserNetworkState)
+
+ return () => {
+ window.removeEventListener('online', syncBrowserNetworkState)
+ window.removeEventListener('offline', syncBrowserNetworkState)
+ networkInformation?.removeEventListener?.(
+ 'change',
+ syncBrowserNetworkState,
+ )
+ }
+ }, [])
+
+ const handleFullscreenToggle = async () => {
+ await toggleDesktopFullscreen()
+ }
+
return (