kang
0cd85ae287
- Added styles for player-side toast notifications to improve user feedback. - Adjusted padding and spacing in various components for a more cohesive layout. - Updated card and dialog components to streamline visual hierarchy and enhance readability. - Refactored player panel and navigation elements for better alignment and user experience.
83 lines
3.1 KiB
TypeScript
83 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { Bell } from "lucide-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { LanguageSwitcher } from "@/components/language-switcher";
|
|
import { HallBettingGrid } from "@/features/hall/hall-betting-grid";
|
|
import { HallDrawPanel } from "@/features/hall/hall-draw-panel";
|
|
import { HallWalletStrip } from "@/features/hall/hall-wallet-strip";
|
|
import { JackpotBurstOverlay } from "@/features/hall/jackpot-burst-overlay";
|
|
import { useHallDrawLive } from "@/features/hall/use-hall-draw-live";
|
|
import { useJackpotBurstLive } from "@/features/hall/use-jackpot-burst-live";
|
|
import { playerHeaderControl, playerPageInset } from "@/lib/player-spacing";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* 下注大厅：钱包条 §4 + 当期期号 §4.2（封盘置灰 / 倒计时错误色 / WS+轮询）；玩法目录 §12.3；下注表格 §13.3。
|
|
*/
|
|
export function HallScreen() {
|
|
const { t } = useTranslation("common");
|
|
const { t: tp } = useTranslation("player");
|
|
const drawLive = useHallDrawLive();
|
|
const { burstEvent, clearBurstEvent } = useJackpotBurstLive(tp);
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-[480px]">
|
|
<section className={cn("overflow-hidden bg-white text-slate-900", playerPageInset)}>
|
|
<header className="mb-2 flex min-h-9 items-center gap-2">
|
|
<div className="flex min-w-0 flex-1 items-center">
|
|
<Image
|
|
src="/logo.png"
|
|
alt="Nlotto"
|
|
width={243}
|
|
height={84}
|
|
className="h-8 w-auto max-w-[min(100%,200px)] object-contain object-left"
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-1">
|
|
<LanguageSwitcher
|
|
variant="minimal"
|
|
showFlag={false}
|
|
className={cn(
|
|
playerHeaderControl,
|
|
"rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs",
|
|
)}
|
|
/>
|
|
<Link
|
|
href="/rules"
|
|
className={cn(
|
|
playerHeaderControl,
|
|
"rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]",
|
|
)}
|
|
>
|
|
{tp("nav.rules")}
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
playerHeaderControl,
|
|
"relative size-8 rounded-full text-[#1d57b7] hover:bg-[#f4f7fb]",
|
|
)}
|
|
aria-label={t("navigation.notifications")}
|
|
>
|
|
<Bell className="size-4" aria-hidden />
|
|
<span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-[#ff143d]" />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<HallDrawPanel drawLive={drawLive} />
|
|
|
|
<HallWalletStrip />
|
|
|
|
<HallBettingGrid drawLive={drawLive} />
|
|
</section>
|
|
<JackpotBurstOverlay event={burstEvent} onClose={clearBurstEvent} />
|
|
</div>
|
|
);
|
|
}
|