1833 lines
64 KiB
TypeScript
1833 lines
64 KiB
TypeScript
"use client";
|
|
|
|
import { Lock, Ticket, Trash2 } from "lucide-react";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { toast } from "sonner";
|
|
|
|
import { getBetProviders } from "@/api/bet-providers";
|
|
import { getPlayEffective } from "@/api/play";
|
|
import { getWalletBalance } from "@/api/wallet";
|
|
import { postTicketPlace, postTicketPreview } from "@/api/ticket";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { isHallSealedCountdownUi } from "@/features/draw/draw-status-meta";
|
|
import { useIsMobile } from "@/hooks/use-mobile";
|
|
import { HallBetPreviewDialog } from "@/features/hall/hall-bet-preview-dialog";
|
|
import { HallBetResultDialog } from "@/features/hall/hall-bet-result-dialog";
|
|
import { mapTicketBetError } from "@/features/hall/hall-bet-errors";
|
|
import { HallBettingTable } from "@/features/hall/hall-betting-table";
|
|
import { HallMobileQuickFill } from "@/features/hall/hall-mobile-quick-fill";
|
|
import { HallPlaySummaryGrid } from "@/features/hall/hall-play-summary-grid";
|
|
import { HallSelectionConfirmDialog } from "@/features/hall/hall-selection-confirm-dialog";
|
|
import {
|
|
FALLBACK_BET_PROVIDERS,
|
|
cellRiskState,
|
|
digitSlotOptions,
|
|
numberMaxCharsForCategory,
|
|
playCategory,
|
|
playColumnHeaderLabel,
|
|
sanitizeNumber,
|
|
type DraftRow,
|
|
type HallCategory,
|
|
type PlayColumn,
|
|
type PlayHallCategory,
|
|
} from "@/features/hall/hall-betting-grid-model";
|
|
import {
|
|
HallDesktopReviewPanel,
|
|
HallDesktopWorkflowBar,
|
|
type HallDesktopReviewModel,
|
|
} from "@/features/hall/hall-desktop-workspace";
|
|
import {
|
|
draftLineIssueReason,
|
|
playNeedsDigitSlot,
|
|
playNeedsDimension,
|
|
ticketNumberSpec,
|
|
type DraftLineIssueReason,
|
|
} from "@/features/hall/hall-bet-rules";
|
|
import {
|
|
isFullCoverAmountDivisible,
|
|
isHighCostSelectionType,
|
|
resolveSelectionTotalBet,
|
|
selectionCombinationCount,
|
|
selectionTypesForCategory,
|
|
type SelectionType,
|
|
} from "@/features/hall/selection-type";
|
|
import type { HallDrawLiveSnapshot } from "@/features/hall/use-hall-draw-live";
|
|
import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
|
|
import { useAsyncEffect } from "@/hooks/use-async-effect";
|
|
import { triggerWalletPollingAfterBet } from "@/hooks/use-wallet-polling";
|
|
import { usePlayerSessionStore } from "@/stores/player-session-store";
|
|
import { getLotteryEcho } from "@/lib/lottery-echo";
|
|
import {
|
|
formatMinorAmount,
|
|
formatMinorAsCurrency,
|
|
parseDecimalInputToMinor,
|
|
} from "@/lib/money";
|
|
import { playLabel } from "@/lib/play-labels";
|
|
import { playerViewportFixedBarClass } from "@/lib/player-viewport";
|
|
import {
|
|
PLAY_CATALOG_REFRESH_EVENT,
|
|
type PlayCatalogRefreshSource,
|
|
} from "@/lib/play-catalog-events";
|
|
|
|
import { isCreditFundingPlayer } from "@/lib/player-funding-mode";
|
|
import { cn } from "@/lib/utils";
|
|
import { LotteryApiBizError } from "@/types/api/errors";
|
|
import type { PlayEffectivePayload, PlayEffectivePlayRow } from "@/types/api/play-effective";
|
|
import type { TicketLineInput, TicketPlaceData, TicketPreviewData } from "@/types/api/ticket";
|
|
import type { BetProviderRow } from "@/types/api/bet-provider";
|
|
|
|
const TRADITIONAL_PLAY_CODES: Record<PlayHallCategory, readonly string[]> = {
|
|
D4: ["big", "small", "pos_4a", "pos_4b", "pos_4c", "pos_4d", "pos_4e", "four_any", "four_top", "four_lower", "five_d", "six_d"],
|
|
D3: ["pos_3a", "pos_3lower", "pos_3b", "pos_3c", "pos_3d", "pos_3e"],
|
|
D2: ["pos_2a", "pos_2b", "pos_2c", "pos_2d", "pos_2e", "pos_2any"],
|
|
};
|
|
|
|
type PendingSelectionChange =
|
|
| { mode: "row"; rowId: string; next: SelectionType; prev: SelectionType }
|
|
| { mode: "all"; next: SelectionType };
|
|
|
|
type DraftEntry = {
|
|
rowId: string;
|
|
rowNo: number;
|
|
amountKey: string;
|
|
play: PlayEffectivePlayRow;
|
|
digitSlot?: number;
|
|
number: string;
|
|
amountMinor: number;
|
|
line: TicketLineInput;
|
|
};
|
|
|
|
type DraftLineIssue = {
|
|
rowNo: number;
|
|
playCode: string;
|
|
reason: DraftLineIssueReason;
|
|
};
|
|
|
|
type ClosedPlayCleanupData = {
|
|
cleanup_hint?: string;
|
|
cleanup_lines?: Array<{ client_line_no?: number; play_code?: string }>;
|
|
};
|
|
|
|
type TicketPreviewSubmissionSnapshot = {
|
|
drawId: string;
|
|
currencyCode: string;
|
|
clientTraceId: string;
|
|
lines: TicketLineInput[];
|
|
expectedConfigVersions: TicketPreviewData["config_versions"];
|
|
};
|
|
|
|
type PlayToggleWsEvent = {
|
|
play_code?: string;
|
|
enabled?: boolean;
|
|
action?: string;
|
|
};
|
|
|
|
type OddsUpdateWsEvent = {
|
|
message?: string;
|
|
};
|
|
|
|
type RiskSoldOutWsEvent = {
|
|
draw_id?: number;
|
|
draw_no?: string;
|
|
normalized_number?: string;
|
|
};
|
|
|
|
type RiskWarningWsEvent = {
|
|
draw_id?: number;
|
|
draw_no?: string;
|
|
normalized_number?: string;
|
|
usage_ratio?: number;
|
|
usage_percent?: number;
|
|
};
|
|
|
|
type QuickFillState = Record<HallCategory, { favorites: string[]; history: string[] }>;
|
|
const DEFAULT_PROVIDER_CODE = "SG";
|
|
|
|
const categoryTabs: { value: PlayHallCategory; label: string }[] = [
|
|
{ value: "D4", label: "4D" },
|
|
{ value: "D3", label: "3D" },
|
|
{ value: "D2", label: "2D" },
|
|
];
|
|
|
|
const D2_PLAY_ORDER = ["pos_2a", "pos_2b", "pos_2c", "pos_2abc"] as const;
|
|
const D3_PLAY_ORDER = ["pos_3a", "pos_3b", "pos_3c", "pos_3abc"] as const;
|
|
const D4_PLAY_ORDER = [
|
|
"big",
|
|
"small",
|
|
"pos_4a",
|
|
"pos_4b",
|
|
"pos_4c",
|
|
"pos_4d",
|
|
"pos_4e",
|
|
"box",
|
|
"ibox",
|
|
"mbox",
|
|
"roll",
|
|
"straight",
|
|
"head",
|
|
"tail",
|
|
"odd",
|
|
"even",
|
|
"digit_big",
|
|
"digit_small",
|
|
] as const;
|
|
/** 按大厅 Tab 对应的投注列顺序。 */
|
|
const PLAY_ORDER_BY_CATEGORY: Record<PlayHallCategory, readonly string[]> = {
|
|
D2: D2_PLAY_ORDER,
|
|
D3: D3_PLAY_ORDER,
|
|
D4: D4_PLAY_ORDER,
|
|
};
|
|
const CATEGORY_ORDER: readonly PlayHallCategory[] = ["D4", "D3", "D2"];
|
|
const SUMMARY_PLAY_ORDER = CATEGORY_ORDER.flatMap(
|
|
(category) => PLAY_ORDER_BY_CATEGORY[category],
|
|
);
|
|
const DEFAULT_DRAFT_ROW_COUNT = 20;
|
|
|
|
function playOrderForActiveCategory(activeCategory: PlayHallCategory): readonly string[] {
|
|
const rest = CATEGORY_ORDER.filter((category) => category !== activeCategory);
|
|
return [
|
|
...PLAY_ORDER_BY_CATEGORY[activeCategory],
|
|
...rest.flatMap((category) => PLAY_ORDER_BY_CATEGORY[category]),
|
|
];
|
|
}
|
|
|
|
function newDraftRows(count = DEFAULT_DRAFT_ROW_COUNT): DraftRow[] {
|
|
return Array.from({ length: count }, newDraftRow);
|
|
}
|
|
|
|
function newDraftRow(): DraftRow {
|
|
const id =
|
|
typeof crypto !== "undefined" && crypto.randomUUID
|
|
? crypto.randomUUID()
|
|
: `row-${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
|
return { id, number: "", amounts: {}, providerCodes: [DEFAULT_PROVIDER_CODE], selectionType: "straight" };
|
|
}
|
|
|
|
function isPlayOpenForPlayer(row: PlayEffectivePlayRow): boolean {
|
|
return Boolean(row.master_enabled && row.config?.is_enabled);
|
|
}
|
|
|
|
function amountKeyForPlay(playCode: string, digitSlot?: number): string {
|
|
return digitSlot === undefined ? playCode : `${playCode}@${digitSlot}`;
|
|
}
|
|
|
|
function playColumnsForCategory(
|
|
plays: PlayEffectivePlayRow[],
|
|
category: PlayHallCategory,
|
|
): PlayColumn[] {
|
|
return plays.flatMap((play) => {
|
|
if (!playNeedsDigitSlot(play.play_code)) {
|
|
return [{ key: amountKeyForPlay(play.play_code), play }];
|
|
}
|
|
|
|
return digitSlotOptions(category).map((digitSlot) => ({
|
|
key: amountKeyForPlay(play.play_code, digitSlot),
|
|
play,
|
|
digitSlot,
|
|
}));
|
|
});
|
|
}
|
|
|
|
function sanitizeAmount(raw: string): string {
|
|
return raw.replace(/[^\d.]/g, "").replace(/(\..*)\./g, "$1").slice(0, 12);
|
|
}
|
|
|
|
function parseRebateRate(rate: string | undefined): number {
|
|
const n = Number(rate ?? 0);
|
|
if (!Number.isFinite(n) || n <= 0) return 0;
|
|
return n > 1 ? n / 100 : n;
|
|
}
|
|
|
|
function normalizeNumberForPlay(number: string, playCode: string): string {
|
|
if (playCode.startsWith("pos_2")) return number.slice(-2);
|
|
if (playCode.startsWith("pos_3")) return number.slice(-3);
|
|
if (
|
|
playCode === "head" ||
|
|
playCode === "tail" ||
|
|
playCode === "odd" ||
|
|
playCode === "even" ||
|
|
playCode === "digit_big" ||
|
|
playCode === "digit_small"
|
|
) {
|
|
return number.slice(-1);
|
|
}
|
|
return number;
|
|
}
|
|
|
|
function lineForPlay(
|
|
play: PlayEffectivePlayRow,
|
|
displayNumber: string,
|
|
amountMinor: number,
|
|
digitSlot?: number,
|
|
selectionType: SelectionType = "straight",
|
|
): TicketLineInput | null {
|
|
const number = normalizeNumberForPlay(displayNumber, play.play_code);
|
|
if (draftLineIssueReason(play.play_code, displayNumber, digitSlot) !== null) {
|
|
return null;
|
|
}
|
|
const spec = ticketNumberSpec(play.play_code);
|
|
if (number.length !== spec.maxChars) {
|
|
return null;
|
|
}
|
|
|
|
const line: TicketLineInput = {
|
|
number,
|
|
play_code: play.play_code,
|
|
amount: amountMinor,
|
|
selection_type: selectionType,
|
|
};
|
|
|
|
if (playNeedsDimension(play.play_code)) {
|
|
line.dimension = playCategory(play.play_code);
|
|
}
|
|
if (playNeedsDigitSlot(play.play_code)) {
|
|
if (digitSlot === undefined) return null;
|
|
line.digit_slot = digitSlot;
|
|
}
|
|
|
|
return line;
|
|
}
|
|
|
|
function sortByPlayOrder(plays: PlayEffectivePlayRow[], order: readonly string[]): PlayEffectivePlayRow[] {
|
|
const orderMap = new Map(order.map((code, idx) => [code, idx]));
|
|
return [...plays].sort((a, b) => {
|
|
const ai = orderMap.get(a.play_code) ?? 999;
|
|
const bi = orderMap.get(b.play_code) ?? 999;
|
|
return ai - bi || a.sort_order - b.sort_order || a.play_code.localeCompare(b.play_code);
|
|
});
|
|
}
|
|
|
|
function loadStringArray(key: string): string[] {
|
|
if (typeof window === "undefined") return [];
|
|
try {
|
|
const raw = window.localStorage.getItem(key);
|
|
if (!raw) return [];
|
|
const parsed = JSON.parse(raw);
|
|
if (!Array.isArray(parsed)) return [];
|
|
return parsed.filter((v): v is string => typeof v === "string");
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function saveStringArray(key: string, values: string[]): void {
|
|
if (typeof window === "undefined") return;
|
|
window.localStorage.setItem(key, JSON.stringify(values));
|
|
}
|
|
|
|
function loadQuickFillState(): QuickFillState {
|
|
return {
|
|
D2: {
|
|
favorites: loadStringArray(quickFillKeys("D2").favorites),
|
|
history: loadStringArray(quickFillKeys("D2").history),
|
|
},
|
|
D3: {
|
|
favorites: loadStringArray(quickFillKeys("D3").favorites),
|
|
history: loadStringArray(quickFillKeys("D3").history),
|
|
},
|
|
D4: {
|
|
favorites: loadStringArray(quickFillKeys("D4").favorites),
|
|
history: loadStringArray(quickFillKeys("D4").history),
|
|
},
|
|
JACKPOT: {
|
|
favorites: [],
|
|
history: [],
|
|
},
|
|
};
|
|
}
|
|
|
|
function appendUnique(values: string[], value: string, limit = 20): string[] {
|
|
const trimmed = value.trim();
|
|
if (!trimmed) return values;
|
|
const next = [trimmed, ...values.filter((v) => v !== trimmed)];
|
|
return next.slice(0, limit);
|
|
}
|
|
|
|
function quickFillKeys(category: HallCategory): { favorites: string; history: string } {
|
|
return {
|
|
favorites: `lottery.hall.quickfill.favorites.${category}`,
|
|
history: `lottery.hall.quickfill.history.${category}`,
|
|
};
|
|
}
|
|
|
|
export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }) {
|
|
const { display, isBettable, reload: reloadDraw } = drawLive;
|
|
const { t } = useTranslation("player");
|
|
const { activeCurrency: currencyParam } = useActivePlayerCurrency();
|
|
const creditMode = isCreditFundingPlayer(usePlayerSessionStore((state) => state.profile));
|
|
const isMobile = useIsMobile();
|
|
|
|
const [rows, setRows] = useState<DraftRow[]>(() => newDraftRows());
|
|
const [activeRowId, setActiveRowId] = useState<string | null>(null);
|
|
const [catalogState, setCatalogState] = useState<
|
|
| { kind: "loading" }
|
|
| { kind: "ok"; data: PlayEffectivePayload }
|
|
| { kind: "error"; message: string }
|
|
>({ kind: "loading" });
|
|
const [availableMinor, setAvailableMinor] = useState<number>(0);
|
|
const [previewOpen, setPreviewOpen] = useState(false);
|
|
const [previewData, setPreviewData] = useState<TicketPreviewData | null>(null);
|
|
const [previewLoading, setPreviewLoading] = useState(false);
|
|
const [placeLoading, setPlaceLoading] = useState(false);
|
|
const [resultOpen, setResultOpen] = useState(false);
|
|
const [resultData, setResultData] = useState<TicketPlaceData | null>(null);
|
|
const [activeCategory, setActiveCategory] = useState<PlayHallCategory>("D4");
|
|
const [betProviders, setBetProviders] = useState<BetProviderRow[]>(FALLBACK_BET_PROVIDERS);
|
|
const [syncAmountColumns, setSyncAmountColumns] = useState<Record<string, boolean>>({});
|
|
const [quickFillState, setQuickFillState] = useState<QuickFillState>(() => loadQuickFillState());
|
|
const [quickFillExpanded, setQuickFillExpanded] = useState(false);
|
|
const [liveSoldOutNumbers, setLiveSoldOutNumbers] = useState<Set<string>>(() => new Set());
|
|
const [liveWarningNumbers, setLiveWarningNumbers] = useState<Set<string>>(() => new Set());
|
|
const [debouncedSummary, setDebouncedSummary] = useState({ bet: 0, rebate: 0, actual: 0 });
|
|
const [pendingSelectionChange, setPendingSelectionChange] = useState<PendingSelectionChange | null>(
|
|
null,
|
|
);
|
|
/** 单次预览→确认共用，重试 place 复用，避免重复扣款 */
|
|
const placeTraceIdRef = useRef<string | null>(null);
|
|
const previewRequestSeqRef = useRef(0);
|
|
const previewSubmissionRef = useRef<TicketPreviewSubmissionSnapshot | null>(null);
|
|
const newPlaceTraceId = (): string =>
|
|
typeof crypto !== "undefined" && crypto.randomUUID
|
|
? crypto.randomUUID()
|
|
: `pl-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
|
|
|
|
const clearPlaceTraceId = useCallback(() => {
|
|
placeTraceIdRef.current = null;
|
|
}, []);
|
|
const invalidatePreview = useCallback(() => {
|
|
previewRequestSeqRef.current += 1;
|
|
previewSubmissionRef.current = null;
|
|
setPreviewOpen(false);
|
|
setPreviewData(null);
|
|
clearPlaceTraceId();
|
|
}, [clearPlaceTraceId]);
|
|
const catalogSeqRef = useRef(0);
|
|
const walletSeqRef = useRef(0);
|
|
const selectedCatalogProviderCode =
|
|
betProviders.find((provider) => provider.is_default)?.code ??
|
|
betProviders[0]?.code;
|
|
|
|
const loadCatalog = useCallback(async () => {
|
|
const seq = ++catalogSeqRef.current;
|
|
setCatalogState({ kind: "loading" });
|
|
try {
|
|
const data = await getPlayEffective({
|
|
currency: currencyParam,
|
|
provider_code: selectedCatalogProviderCode,
|
|
});
|
|
if (seq !== catalogSeqRef.current) return;
|
|
setCatalogState({ kind: "ok", data });
|
|
} catch (e) {
|
|
if (seq !== catalogSeqRef.current) return;
|
|
const msg = e instanceof LotteryApiBizError ? e.message : t("hall.loadingError");
|
|
setCatalogState({ kind: "error", message: msg });
|
|
}
|
|
}, [currencyParam, selectedCatalogProviderCode, t]);
|
|
|
|
const refreshWallet = useCallback(async () => {
|
|
const seq = ++walletSeqRef.current;
|
|
try {
|
|
const wallet = await getWalletBalance({ currency: currencyParam });
|
|
if (seq !== walletSeqRef.current) return;
|
|
setAvailableMinor(Number(wallet.available_balance ?? 0));
|
|
} catch {
|
|
// 保留上次可用余额，避免短暂失败导致误报余额不足
|
|
}
|
|
}, [currencyParam]);
|
|
|
|
useAsyncEffect(() => {
|
|
void loadCatalog();
|
|
void refreshWallet();
|
|
}, [loadCatalog, refreshWallet]);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
void getBetProviders()
|
|
.then((data) => {
|
|
if (cancelled) return;
|
|
const items = data.items.length > 0 ? data.items : FALLBACK_BET_PROVIDERS;
|
|
setBetProviders(items);
|
|
setRows((current) => {
|
|
const available = new Set(items.map((item) => item.code));
|
|
const fallback = items.find((item) => item.is_default)?.code ?? items[0]?.code;
|
|
return current.map((row) => {
|
|
const selected = row.providerCodes.filter((code) => available.has(code));
|
|
const wasInitialDefault = row.providerCodes.length === 1 && row.providerCodes[0] === DEFAULT_PROVIDER_CODE;
|
|
return selected.length === 0 && wasInitialDefault && fallback
|
|
? { ...row, providerCodes: [fallback] }
|
|
: { ...row, providerCodes: selected };
|
|
});
|
|
});
|
|
})
|
|
.catch(() => {
|
|
if (cancelled) return;
|
|
setBetProviders(FALLBACK_BET_PROVIDERS);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const onCatalogRefresh = (ev: Event) => {
|
|
void loadCatalog();
|
|
const source = (ev as CustomEvent<{ source?: PlayCatalogRefreshSource }>).detail
|
|
?.source;
|
|
if (source !== undefined) {
|
|
invalidatePreview();
|
|
toast.message(t("hall.playConfig.updated"));
|
|
}
|
|
};
|
|
window.addEventListener(PLAY_CATALOG_REFRESH_EVENT, onCatalogRefresh);
|
|
return () => window.removeEventListener(PLAY_CATALOG_REFRESH_EVENT, onCatalogRefresh);
|
|
}, [invalidatePreview, loadCatalog, t]);
|
|
|
|
const openPlays = useMemo(() => {
|
|
if (catalogState.kind !== "ok") return [];
|
|
// 投注表格列以当前 Tab 玩法为先；顶部汇总另用稳定的全玩法顺序。
|
|
const order = playOrderForActiveCategory(activeCategory);
|
|
const orderSet = new Set(order);
|
|
return sortByPlayOrder(
|
|
catalogState.data.plays
|
|
.filter(isPlayOpenForPlayer)
|
|
.filter((p) => orderSet.has(p.play_code)),
|
|
order,
|
|
);
|
|
}, [activeCategory, catalogState]);
|
|
|
|
const activeCategoryPlays = useMemo(
|
|
() => openPlays.filter((play) => TRADITIONAL_PLAY_CODES[activeCategory].includes(play.play_code)),
|
|
[activeCategory, openPlays],
|
|
);
|
|
const availableCategories = useMemo(
|
|
() => new Set(openPlays.map((play) => playCategory(play.play_code))),
|
|
[openPlays],
|
|
);
|
|
|
|
const currencyCode =
|
|
catalogState.kind === "ok" ? catalogState.data.currency_code : currencyParam;
|
|
|
|
const allPlayColumns = useMemo<PlayColumn[]>(() => {
|
|
return openPlays.flatMap((play) => {
|
|
const category = playCategory(play.play_code);
|
|
if (!playNeedsDigitSlot(play.play_code)) {
|
|
return [{ key: amountKeyForPlay(play.play_code), play }];
|
|
}
|
|
return digitSlotOptions(category).map((digitSlot) => ({
|
|
key: amountKeyForPlay(play.play_code, digitSlot),
|
|
play,
|
|
digitSlot,
|
|
}));
|
|
});
|
|
}, [openPlays]);
|
|
|
|
const summaryPlayColumns = useMemo<PlayColumn[]>(() => {
|
|
return sortByPlayOrder(openPlays, SUMMARY_PLAY_ORDER).flatMap((play) => {
|
|
const category = playCategory(play.play_code);
|
|
if (!playNeedsDigitSlot(play.play_code)) {
|
|
return [{ key: amountKeyForPlay(play.play_code), play }];
|
|
}
|
|
return digitSlotOptions(category).map((digitSlot) => ({
|
|
key: amountKeyForPlay(play.play_code, digitSlot),
|
|
play,
|
|
digitSlot,
|
|
}));
|
|
});
|
|
}, [openPlays]);
|
|
|
|
const playColumns = useMemo(() => {
|
|
return playColumnsForCategory(activeCategoryPlays, activeCategory);
|
|
}, [activeCategory, activeCategoryPlays]);
|
|
|
|
const mobileIndexColClass = "w-[1.75rem] min-w-[1.75rem]";
|
|
const mobileNumberColClass = "w-[4.25rem] min-w-[4.25rem]";
|
|
const mobileSelectionTypeColClass = "w-[4rem] min-w-[4rem]";
|
|
const desktopIndexColClass = "w-9 min-w-9";
|
|
const desktopNumberColClass = "w-[5.25rem] min-w-[5.25rem]";
|
|
const desktopSelectionTypeColClass = "w-[4.5rem] min-w-[4.5rem]";
|
|
const indexColClass = isMobile ? mobileIndexColClass : desktopIndexColClass;
|
|
const numberColClass = isMobile ? mobileNumberColClass : desktopNumberColClass;
|
|
const selectionTypeColClass = isMobile ? mobileSelectionTypeColClass : desktopSelectionTypeColClass;
|
|
const showSelectionTypeColumn = activeCategory !== "D2";
|
|
const stickyNumberLeftClass = isMobile ? "left-[1.75rem]" : "left-9";
|
|
const amountColClass = !isMobile
|
|
? "w-14 min-w-14"
|
|
: "w-[4rem] min-w-[4rem]";
|
|
const providerColClass = !isMobile
|
|
? "w-11 min-w-11"
|
|
: "w-[2.7rem] min-w-[2.7rem]";
|
|
const rowTotalColClass = !isMobile
|
|
? "w-20 min-w-20"
|
|
: "w-[5rem] min-w-[5rem]";
|
|
|
|
const tableWidthPx = useMemo(() => {
|
|
const indexCol = !isMobile ? 36 : 28;
|
|
const numberCol = !isMobile ? 84 : 68;
|
|
const selectionTypeCol = !isMobile ? 72 : 64;
|
|
const providerCol = !isMobile ? 44 : 43;
|
|
const rowTotalCol = !isMobile ? 80 : 80;
|
|
const amountCol = !isMobile ? 56 : 64;
|
|
return indexCol + numberCol + (showSelectionTypeColumn ? selectionTypeCol : 0) + betProviders.length * providerCol + rowTotalCol + playColumns.length * amountCol;
|
|
}, [betProviders.length, isMobile, playColumns.length, showSelectionTypeColumn]);
|
|
|
|
const showWideTableHint = isMobile && playColumns.length > 8;
|
|
|
|
const activeRow = useMemo(
|
|
() => rows.find((row) => row.id === activeRowId) ?? rows[0] ?? null,
|
|
[activeRowId, rows],
|
|
);
|
|
|
|
const drawNo = display?.draw_no ?? null;
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
queueMicrotask(() => {
|
|
if (cancelled) return;
|
|
setLiveSoldOutNumbers(new Set());
|
|
setLiveWarningNumbers(new Set());
|
|
invalidatePreview();
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [currencyCode, drawNo, invalidatePreview]);
|
|
|
|
const alertRows = useMemo(
|
|
() => display?.risk_pool_alerts ?? [],
|
|
[display?.risk_pool_alerts],
|
|
);
|
|
const jackpot = display?.jackpot;
|
|
const currentQuickFill = quickFillState[activeCategory] ?? { favorites: [], history: [] };
|
|
const favorites = currentQuickFill.favorites;
|
|
const historyNumbers = currentQuickFill.history;
|
|
const tableDisabled = !isBettable || catalogState.kind !== "ok";
|
|
const sealedBetUi = Boolean(display && isHallSealedCountdownUi(display.status));
|
|
const numberPlaceholder =
|
|
activeCategory === "D2" ? "00" : activeCategory === "D3" ? "000" : "0000";
|
|
const numberMaxChars = numberMaxCharsForCategory(activeCategory);
|
|
|
|
const updateRowNumber = useCallback((id: string, value: string) => {
|
|
setRows((current) =>
|
|
current.map((row) =>
|
|
row.id === id ? { ...row, number: sanitizeNumber(value, activeCategory) } : row,
|
|
),
|
|
);
|
|
setActiveRowId(id);
|
|
}, [activeCategory]);
|
|
|
|
const applyRowSelectionType = useCallback((id: string, selectionType: SelectionType) => {
|
|
setRows((current) => current.map((row) => (row.id === id ? { ...row, selectionType } : row)));
|
|
}, []);
|
|
|
|
const applyAllSelectionTypes = useCallback((selectionType: SelectionType) => {
|
|
setRows((current) => current.map((row) => ({ ...row, selectionType })));
|
|
}, []);
|
|
|
|
const requestRowSelectionType = useCallback(
|
|
(id: string, selectionType: SelectionType) => {
|
|
const row = rows.find((item) => item.id === id);
|
|
if (!row || row.selectionType === selectionType) return;
|
|
if (isHighCostSelectionType(selectionType) && !isHighCostSelectionType(row.selectionType)) {
|
|
setPendingSelectionChange({
|
|
mode: "row",
|
|
rowId: id,
|
|
next: selectionType,
|
|
prev: row.selectionType,
|
|
});
|
|
return;
|
|
}
|
|
applyRowSelectionType(id, selectionType);
|
|
},
|
|
[applyRowSelectionType, rows],
|
|
);
|
|
|
|
const requestAllSelectionTypes = useCallback(
|
|
(selectionType: SelectionType) => {
|
|
if (isHighCostSelectionType(selectionType)) {
|
|
setPendingSelectionChange({ mode: "all", next: selectionType });
|
|
return;
|
|
}
|
|
applyAllSelectionTypes(selectionType);
|
|
},
|
|
[applyAllSelectionTypes],
|
|
);
|
|
|
|
const confirmPendingSelectionChange = useCallback(() => {
|
|
if (!pendingSelectionChange) return;
|
|
if (pendingSelectionChange.mode === "row") {
|
|
applyRowSelectionType(pendingSelectionChange.rowId, pendingSelectionChange.next);
|
|
} else {
|
|
applyAllSelectionTypes(pendingSelectionChange.next);
|
|
}
|
|
setPendingSelectionChange(null);
|
|
}, [applyAllSelectionTypes, applyRowSelectionType, pendingSelectionChange]);
|
|
|
|
const cancelPendingSelectionChange = useCallback(() => {
|
|
setPendingSelectionChange(null);
|
|
}, []);
|
|
|
|
const updateAmount = useCallback((rowId: string, playCode: string, value: string) => {
|
|
const amount = sanitizeAmount(value);
|
|
const column = allPlayColumns.find((item) => item.key === playCode);
|
|
const syncColumn = syncAmountColumns[playCode] === true && column !== undefined;
|
|
|
|
setRows((current) => current.map((row) => {
|
|
if (!syncColumn) {
|
|
return row.id === rowId
|
|
? { ...row, amounts: { ...row.amounts, [playCode]: amount } }
|
|
: row;
|
|
}
|
|
|
|
const validNumber = draftLineIssueReason(column.play.play_code, row.number, column.digitSlot) === null;
|
|
const status = cellRiskState(
|
|
column.play,
|
|
row.number,
|
|
playCategory(column.play.play_code),
|
|
alertRows,
|
|
liveSoldOutNumbers,
|
|
liveWarningNumbers,
|
|
column.digitSlot,
|
|
);
|
|
if (!validNumber || status === "sold_out" || (column.play.config !== null && !column.play.config.is_enabled)) {
|
|
return row;
|
|
}
|
|
|
|
return { ...row, amounts: { ...row.amounts, [playCode]: amount } };
|
|
}));
|
|
setActiveRowId(rowId);
|
|
}, [alertRows, allPlayColumns, liveSoldOutNumbers, liveWarningNumbers, syncAmountColumns]);
|
|
|
|
const toggleSyncAmountColumn = useCallback((column: PlayColumn, checked: boolean) => {
|
|
setSyncAmountColumns((current) => ({
|
|
...current,
|
|
[column.key]: checked,
|
|
}));
|
|
|
|
setRows((current) => {
|
|
if (!checked) {
|
|
return current.map((row) => ({
|
|
...row,
|
|
amounts: { ...row.amounts, [column.key]: "" },
|
|
}));
|
|
}
|
|
|
|
const sourceAmount = current.find((row) => {
|
|
const amount = row.amounts[column.key];
|
|
return Boolean(
|
|
amount &&
|
|
draftLineIssueReason(
|
|
column.play.play_code,
|
|
row.number,
|
|
column.digitSlot,
|
|
) === null,
|
|
);
|
|
})?.amounts[column.key];
|
|
|
|
if (!sourceAmount) return current;
|
|
|
|
return current.map((row) => {
|
|
const validNumber =
|
|
draftLineIssueReason(
|
|
column.play.play_code,
|
|
row.number,
|
|
column.digitSlot,
|
|
) === null;
|
|
const status = cellRiskState(
|
|
column.play,
|
|
row.number,
|
|
playCategory(column.play.play_code),
|
|
alertRows,
|
|
liveSoldOutNumbers,
|
|
liveWarningNumbers,
|
|
column.digitSlot,
|
|
);
|
|
if (
|
|
!validNumber ||
|
|
status === "sold_out" ||
|
|
(column.play.config !== null && !column.play.config.is_enabled)
|
|
) {
|
|
return row;
|
|
}
|
|
|
|
return {
|
|
...row,
|
|
amounts: { ...row.amounts, [column.key]: sourceAmount },
|
|
};
|
|
});
|
|
});
|
|
}, [alertRows, liveSoldOutNumbers, liveWarningNumbers]);
|
|
|
|
const clearAllRows = () => {
|
|
if (tableDisabled) return;
|
|
setRows((current) =>
|
|
current.map((row) => ({
|
|
...row,
|
|
number: "",
|
|
amounts: {},
|
|
})),
|
|
);
|
|
setActiveRowId((current) => current ?? rows[0]?.id ?? null);
|
|
};
|
|
|
|
const clearActiveRowAmounts = useCallback(() => {
|
|
const targetId = activeRowId ?? rows[0]?.id;
|
|
if (!targetId || tableDisabled) return;
|
|
setRows((current) =>
|
|
current.map((row) => {
|
|
if (row.id !== targetId) return row;
|
|
const nextAmounts = { ...row.amounts };
|
|
playColumns.forEach((column) => {
|
|
nextAmounts[column.key] = "";
|
|
});
|
|
return { ...row, amounts: nextAmounts };
|
|
}),
|
|
);
|
|
}, [activeRowId, playColumns, rows, tableDisabled]);
|
|
|
|
const fillCurrentRow = (number: string) => {
|
|
if (tableDisabled) return;
|
|
const targetId = activeRowId ?? rows[0]?.id;
|
|
if (!targetId) return;
|
|
updateRowNumber(targetId, number);
|
|
};
|
|
|
|
const applyQuickAmountToActiveRow = useCallback(
|
|
(amount: string) => {
|
|
const targetId = activeRowId ?? rows[0]?.id;
|
|
if (!targetId || tableDisabled) return;
|
|
setRows((current) =>
|
|
current.map((row) => {
|
|
if (row.id !== targetId) return row;
|
|
if (
|
|
row.number.trim().length === 0 ||
|
|
playColumns.every(
|
|
(column) =>
|
|
draftLineIssueReason(column.play.play_code, row.number, column.digitSlot) !== null,
|
|
)
|
|
) {
|
|
return row;
|
|
}
|
|
|
|
const nextAmounts = { ...row.amounts };
|
|
playColumns.forEach((column) => {
|
|
const isInputValid =
|
|
draftLineIssueReason(column.play.play_code, row.number, column.digitSlot) === null;
|
|
const status = cellRiskState(
|
|
column.play,
|
|
row.number,
|
|
playCategory(column.play.play_code),
|
|
alertRows,
|
|
liveSoldOutNumbers,
|
|
liveWarningNumbers,
|
|
column.digitSlot,
|
|
);
|
|
if (!isInputValid || status === "sold_out") return;
|
|
nextAmounts[column.key] = amount;
|
|
});
|
|
return { ...row, amounts: nextAmounts };
|
|
}),
|
|
);
|
|
},
|
|
[
|
|
activeRowId,
|
|
alertRows,
|
|
liveSoldOutNumbers,
|
|
liveWarningNumbers,
|
|
playColumns,
|
|
rows,
|
|
tableDisabled,
|
|
],
|
|
);
|
|
|
|
const copyPreviousRowToActiveRow = useCallback(() => {
|
|
const targetId = activeRowId ?? rows[0]?.id;
|
|
if (!targetId || tableDisabled) return;
|
|
const targetIndex = rows.findIndex((row) => row.id === targetId);
|
|
if (targetIndex <= 0) return;
|
|
const previousRow = rows[targetIndex - 1];
|
|
if (!previousRow) return;
|
|
|
|
setRows((current) =>
|
|
current.map((row, index) => {
|
|
if (index !== targetIndex) return row;
|
|
const nextAmounts = { ...row.amounts };
|
|
playColumns.forEach((column) => {
|
|
nextAmounts[column.key] = previousRow.amounts[column.key] ?? "";
|
|
});
|
|
return {
|
|
...row,
|
|
number: previousRow.number,
|
|
amounts: nextAmounts,
|
|
providerCodes: previousRow.providerCodes,
|
|
};
|
|
}),
|
|
);
|
|
}, [activeRowId, playColumns, rows, tableDisabled]);
|
|
|
|
const toggleFavoriteNumber = (number: string) => {
|
|
const keys = quickFillKeys(activeCategory);
|
|
setQuickFillState((current) => {
|
|
const currentFavorites = current[activeCategory]?.favorites ?? [];
|
|
const exists = currentFavorites.includes(number);
|
|
const next = exists
|
|
? currentFavorites.filter((n) => n !== number)
|
|
: [number, ...currentFavorites].slice(0, 20);
|
|
saveStringArray(keys.favorites, next);
|
|
return {
|
|
...current,
|
|
[activeCategory]: {
|
|
...(current[activeCategory] ?? { favorites: [], history: [] }),
|
|
favorites: next,
|
|
},
|
|
};
|
|
});
|
|
};
|
|
|
|
const pushHistory = (number: string) => {
|
|
const keys = quickFillKeys(activeCategory);
|
|
setQuickFillState((current) => {
|
|
const currentHistory = current[activeCategory]?.history ?? [];
|
|
const next = appendUnique(currentHistory, number, 20);
|
|
saveStringArray(keys.history, next);
|
|
return {
|
|
...current,
|
|
[activeCategory]: {
|
|
...(current[activeCategory] ?? { favorites: [], history: [] }),
|
|
history: next,
|
|
},
|
|
};
|
|
});
|
|
};
|
|
|
|
const toggleRowProvider = useCallback((rowId: string, code: string) => {
|
|
setRows((current) => current.map((row) => {
|
|
if (row.id !== rowId) return row;
|
|
return row.providerCodes.includes(code)
|
|
? { ...row, providerCodes: row.providerCodes.filter((item) => item !== code) }
|
|
: { ...row, providerCodes: [...row.providerCodes, code] };
|
|
}));
|
|
}, []);
|
|
|
|
const toggleProviderColumn = useCallback((code: string, checked: boolean) => {
|
|
setRows((current) => current.map((row) => {
|
|
const hasCode = row.providerCodes.includes(code);
|
|
if (checked && !hasCode) return { ...row, providerCodes: [...row.providerCodes, code] };
|
|
if (!checked && hasCode) return { ...row, providerCodes: row.providerCodes.filter((item) => item !== code) };
|
|
return row;
|
|
}));
|
|
}, []);
|
|
|
|
const hasAmountsForPlay = useCallback(
|
|
(playCode: string): boolean =>
|
|
rows.some((row) =>
|
|
Object.entries(row.amounts).some(
|
|
([amountKey, amountValue]) =>
|
|
amountKey.split("@")[0] === playCode && Boolean(amountValue?.trim()),
|
|
),
|
|
),
|
|
[rows],
|
|
);
|
|
|
|
const clearAmountsForPlay = useCallback((playCode: string) => {
|
|
setRows((current) =>
|
|
current.map((row) => {
|
|
const nextAmounts = { ...row.amounts };
|
|
let changed = false;
|
|
Object.keys(nextAmounts).forEach((amountKey) => {
|
|
const keyPlayCode = amountKey.split("@")[0];
|
|
if (keyPlayCode !== playCode || !nextAmounts[amountKey]) return;
|
|
nextAmounts[amountKey] = "";
|
|
changed = true;
|
|
});
|
|
return changed ? { ...row, amounts: nextAmounts } : row;
|
|
}),
|
|
);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const echo = getLotteryEcho();
|
|
if (!echo) return;
|
|
|
|
const channel = echo.channel("lottery-hall");
|
|
|
|
const onPlayToggle = (evt: PlayToggleWsEvent) => {
|
|
if (evt.enabled === false && typeof evt.play_code === "string") {
|
|
const removed = hasAmountsForPlay(evt.play_code);
|
|
clearAmountsForPlay(evt.play_code);
|
|
invalidatePreview();
|
|
toast.warning(
|
|
removed
|
|
? t("hall.playConfig.playClosedDraftCleared", {
|
|
playCode: evt.play_code,
|
|
})
|
|
: t("hall.playConfig.playClosed", {
|
|
playCode: evt.play_code,
|
|
}),
|
|
);
|
|
}
|
|
};
|
|
|
|
const onOddsUpdate = (evt: OddsUpdateWsEvent) => {
|
|
invalidatePreview();
|
|
toast.message(evt.message ?? t("hall.playConfig.oddsUpdated"));
|
|
};
|
|
|
|
const onRiskSoldOut = (evt: RiskSoldOutWsEvent) => {
|
|
const normalized = evt.normalized_number?.trim().toUpperCase();
|
|
if (!normalized) return;
|
|
if (drawNo !== null && evt.draw_no !== undefined && evt.draw_no !== drawNo) {
|
|
return;
|
|
}
|
|
setLiveSoldOutNumbers((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(normalized);
|
|
return next;
|
|
});
|
|
setLiveWarningNumbers((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(normalized);
|
|
return next;
|
|
});
|
|
invalidatePreview();
|
|
void reloadDraw();
|
|
};
|
|
|
|
const onRiskWarning = (evt: RiskWarningWsEvent) => {
|
|
const normalized = evt.normalized_number?.trim().toUpperCase();
|
|
if (!normalized) return;
|
|
if (drawNo !== null && evt.draw_no !== undefined && evt.draw_no !== drawNo) {
|
|
return;
|
|
}
|
|
setLiveWarningNumbers((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(normalized);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
channel.listen(".play.toggle", onPlayToggle);
|
|
channel.listen(".odds.update", onOddsUpdate);
|
|
channel.listen(".risk.sold_out", onRiskSoldOut);
|
|
channel.listen(".risk.warning", onRiskWarning);
|
|
|
|
return () => {
|
|
channel.stopListening(".play.toggle");
|
|
channel.stopListening(".odds.update");
|
|
channel.stopListening(".risk.sold_out");
|
|
channel.stopListening(".risk.warning");
|
|
};
|
|
}, [clearAmountsForPlay, drawNo, hasAmountsForPlay, invalidatePreview, reloadDraw, t]);
|
|
|
|
const collectDraftLineIssues = useCallback((): DraftLineIssue[] => {
|
|
const issues: DraftLineIssue[] = [];
|
|
rows.forEach((row, rowIndex) => {
|
|
allPlayColumns.forEach((column) => {
|
|
const amount = parseDecimalInputToMinor(row.amounts[column.key] ?? "", currencyCode);
|
|
if (amount === null || amount <= 0) return;
|
|
const reason = draftLineIssueReason(column.play.play_code, row.number, column.digitSlot);
|
|
if (reason !== null) {
|
|
issues.push({
|
|
rowNo: rowIndex + 1,
|
|
playCode: column.play.play_code,
|
|
reason,
|
|
});
|
|
return;
|
|
}
|
|
const comboCount = selectionCombinationCount(row.number, row.selectionType);
|
|
if (
|
|
row.selectionType === "full_cover"
|
|
&& !isFullCoverAmountDivisible(amount, comboCount)
|
|
) {
|
|
issues.push({
|
|
rowNo: rowIndex + 1,
|
|
playCode: column.play.play_code,
|
|
reason: "full_cover_amount_not_divisible",
|
|
});
|
|
}
|
|
});
|
|
});
|
|
return issues;
|
|
}, [allPlayColumns, currencyCode, rows]);
|
|
|
|
const providerMissingRow = useCallback((): number | null => {
|
|
for (const [index, row] of rows.entries()) {
|
|
const hasAmount = Object.values(row.amounts).some((value) => {
|
|
const amount = parseDecimalInputToMinor(value, currencyCode);
|
|
return amount !== null && amount > 0;
|
|
});
|
|
if (hasAmount && row.providerCodes.length === 0) return index + 1;
|
|
}
|
|
return null;
|
|
}, [currencyCode, rows]);
|
|
|
|
const formatDraftLineIssue = useCallback(
|
|
(issue: DraftLineIssue): string => {
|
|
const label = playLabel(issue.playCode, t);
|
|
return t(`hall.lineIssue.${issue.reason}`, { row: issue.rowNo, play: label });
|
|
},
|
|
[t],
|
|
);
|
|
|
|
const collectEntries = useCallback((): DraftEntry[] => {
|
|
const entries: DraftEntry[] = [];
|
|
rows.forEach((row, rowIndex) => {
|
|
allPlayColumns.forEach((column) => {
|
|
const amount = parseDecimalInputToMinor(row.amounts[column.key] ?? "", currencyCode);
|
|
if (amount === null || amount <= 0) return;
|
|
const line = lineForPlay(column.play, row.number, amount, column.digitSlot, row.selectionType);
|
|
if (!line) return;
|
|
line.provider_codes = row.providerCodes;
|
|
entries.push({
|
|
rowId: row.id,
|
|
rowNo: rowIndex + 1,
|
|
amountKey: column.key,
|
|
play: column.play,
|
|
digitSlot: column.digitSlot,
|
|
number: row.number,
|
|
amountMinor: amount,
|
|
line,
|
|
});
|
|
});
|
|
});
|
|
return entries;
|
|
}, [allPlayColumns, currencyCode, rows]);
|
|
|
|
const draftEntries = collectEntries();
|
|
const draftSummary = useMemo(() => {
|
|
return draftEntries.reduce(
|
|
(acc, entry) => {
|
|
const selectionType = entry.line.selection_type ?? "straight";
|
|
const comboCount = selectionCombinationCount(entry.number, selectionType);
|
|
const totalBet = resolveSelectionTotalBet(entry.amountMinor, selectionType, comboCount);
|
|
const rebateRate = parseRebateRate(entry.play.odds?.rebate_rate);
|
|
const rebate = Math.round(totalBet * rebateRate);
|
|
const providerCount = entry.line.provider_codes?.length ?? 0;
|
|
acc.bet += totalBet * providerCount;
|
|
acc.rebate += rebate * providerCount;
|
|
acc.actual += Math.max(0, totalBet - rebate) * providerCount;
|
|
return acc;
|
|
},
|
|
{ bet: 0, rebate: 0, actual: 0 },
|
|
);
|
|
}, [draftEntries]);
|
|
|
|
const selectionTypeOptions = useMemo(
|
|
() => selectionTypesForCategory(activeCategory),
|
|
[activeCategory],
|
|
);
|
|
|
|
const pendingSelectionPreview = useMemo(() => {
|
|
if (!pendingSelectionChange) return null;
|
|
const next = pendingSelectionChange.next;
|
|
|
|
const rowStake = (
|
|
row: DraftRow,
|
|
selectionType: SelectionType,
|
|
mode: "resolved" | "raw",
|
|
): number => {
|
|
const comboCount = selectionCombinationCount(row.number, selectionType);
|
|
const providerCount = Math.max(1, row.providerCodes.length);
|
|
const stake = playColumns.reduce((total, column) => {
|
|
if (draftLineIssueReason(column.play.play_code, row.number, column.digitSlot) !== null) {
|
|
return total;
|
|
}
|
|
const amount = parseDecimalInputToMinor(row.amounts[column.key] ?? "", currencyCode) ?? 0;
|
|
if (amount <= 0) return total;
|
|
if (mode === "raw") return total + amount;
|
|
return total + resolveSelectionTotalBet(amount, selectionType, comboCount);
|
|
}, 0);
|
|
return stake * providerCount;
|
|
};
|
|
|
|
if (pendingSelectionChange.mode === "row") {
|
|
const row = rows.find((item) => item.id === pendingSelectionChange.rowId);
|
|
if (!row) return null;
|
|
const comboCount = selectionCombinationCount(row.number, next);
|
|
const fromMinor = rowStake(row, pendingSelectionChange.prev, "resolved");
|
|
const toMinor =
|
|
next === "full_cover" ? rowStake(row, next, "raw") : rowStake(row, next, "resolved");
|
|
return {
|
|
next,
|
|
comboCount,
|
|
number: row.number,
|
|
fromMinor,
|
|
toMinor,
|
|
scope: "row" as const,
|
|
};
|
|
}
|
|
|
|
let fromMinor = 0;
|
|
let toMinor = 0;
|
|
let maxCombo = 1;
|
|
rows.forEach((row) => {
|
|
maxCombo = Math.max(maxCombo, selectionCombinationCount(row.number, next));
|
|
fromMinor += rowStake(row, row.selectionType, "resolved");
|
|
toMinor += next === "full_cover" ? rowStake(row, next, "raw") : rowStake(row, next, "resolved");
|
|
});
|
|
return {
|
|
next,
|
|
comboCount: maxCombo,
|
|
number: "",
|
|
fromMinor,
|
|
toMinor,
|
|
scope: "all" as const,
|
|
};
|
|
}, [currencyCode, pendingSelectionChange, playColumns, rows]);
|
|
|
|
useEffect(() => {
|
|
const id = window.setTimeout(() => {
|
|
setDebouncedSummary(draftSummary);
|
|
}, 300);
|
|
return () => window.clearTimeout(id);
|
|
}, [draftSummary]);
|
|
|
|
const buildLines = (): TicketLineInput[] => collectEntries().map((entry) => entry.line);
|
|
|
|
const applyClosedPlayCleanup = (data: unknown): boolean => {
|
|
const payload = data as ClosedPlayCleanupData | null;
|
|
const cleanupLines = Array.isArray(payload?.cleanup_lines) ? payload.cleanup_lines : [];
|
|
if (cleanupLines.length === 0) return false;
|
|
|
|
const entries = collectEntries();
|
|
const cleanupPairs = new Set<string>();
|
|
cleanupLines.forEach((item) => {
|
|
const clientLineNo = Number(item?.client_line_no ?? 0);
|
|
const playCode = String(item?.play_code ?? "");
|
|
if (!Number.isInteger(clientLineNo) || clientLineNo <= 0 || playCode.trim() === "") return;
|
|
const entry = entries[clientLineNo - 1];
|
|
if (!entry || entry.play.play_code !== playCode) return;
|
|
cleanupPairs.add(`${entry.rowId}::${entry.amountKey}`);
|
|
});
|
|
|
|
if (cleanupPairs.size === 0) return false;
|
|
|
|
setRows((current) =>
|
|
current.map((row) => {
|
|
const nextAmounts = { ...row.amounts };
|
|
let changed = false;
|
|
Object.keys(nextAmounts).forEach((amountKey) => {
|
|
if (!cleanupPairs.has(`${row.id}::${amountKey}`)) return;
|
|
nextAmounts[amountKey] = "";
|
|
changed = true;
|
|
});
|
|
return changed ? { ...row, amounts: nextAmounts } : row;
|
|
}),
|
|
);
|
|
|
|
return true;
|
|
};
|
|
|
|
const handlePreview = async () => {
|
|
if (!display) {
|
|
toast.error(t("hall.noDraw"));
|
|
return;
|
|
}
|
|
if (!isBettable) {
|
|
toast.error(t("hall.notBettable"));
|
|
return;
|
|
}
|
|
if (catalogState.kind !== "ok") {
|
|
toast.error(t("hall.catalogNotReady"));
|
|
return;
|
|
}
|
|
|
|
const lineIssues = collectDraftLineIssues();
|
|
const missingProviderAt = providerMissingRow();
|
|
if (missingProviderAt !== null) {
|
|
toast.error(t("hall.providers.rowRequired", { row: missingProviderAt, defaultValue: `第 ${missingProviderAt} 行请选择至少一个开注商` }));
|
|
return;
|
|
}
|
|
if (lineIssues.length > 0) {
|
|
toast.error(formatDraftLineIssue(lineIssues[0]));
|
|
return;
|
|
}
|
|
|
|
const lines = buildLines();
|
|
if (lines.length === 0) {
|
|
toast.error(t("hall.emptyLines"));
|
|
return;
|
|
}
|
|
|
|
if (previewLoading || placeLoading) {
|
|
return;
|
|
}
|
|
|
|
setPreviewLoading(true);
|
|
const requestSeq = ++previewRequestSeqRef.current;
|
|
const traceId = newPlaceTraceId();
|
|
const drawId = display.draw_no;
|
|
const previewCurrencyCode = currencyCode;
|
|
const frozenLines = lines.map((line) => ({
|
|
...line,
|
|
provider_codes: line.provider_codes ? [...line.provider_codes] : undefined,
|
|
}));
|
|
placeTraceIdRef.current = traceId;
|
|
try {
|
|
const data = await postTicketPreview({
|
|
draw_id: drawId,
|
|
currency_code: previewCurrencyCode,
|
|
client_trace_id: traceId,
|
|
lines: frozenLines,
|
|
});
|
|
if (requestSeq !== previewRequestSeqRef.current) return;
|
|
previewSubmissionRef.current = {
|
|
drawId: data.draw.draw_id.trim() || drawId,
|
|
currencyCode: previewCurrencyCode,
|
|
clientTraceId: traceId,
|
|
lines: frozenLines,
|
|
expectedConfigVersions: data.config_versions,
|
|
};
|
|
setPreviewData(data);
|
|
setPreviewOpen(true);
|
|
rows.forEach((row) => {
|
|
if (row.number.trim()) pushHistory(row.number.trim());
|
|
});
|
|
} catch (e) {
|
|
const code = e instanceof LotteryApiBizError ? e.code : 0;
|
|
const msg = e instanceof LotteryApiBizError ? e.message : t("hall.previewFailed");
|
|
if (e instanceof LotteryApiBizError && code === 2002 && applyClosedPlayCleanup(e.data)) {
|
|
const payload = e.data as ClosedPlayCleanupData;
|
|
toast.error(payload.cleanup_hint ?? t("hall.ticketError.2002"));
|
|
return;
|
|
}
|
|
if (e instanceof LotteryApiBizError && code === 2008) {
|
|
invalidatePreview();
|
|
}
|
|
if (e instanceof LotteryApiBizError && (code === 2001 || code === 2006)) {
|
|
void reloadDraw();
|
|
}
|
|
toast.error(mapTicketBetError(code, msg, t));
|
|
} finally {
|
|
setPreviewLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePlace = async () => {
|
|
if (!previewData) return;
|
|
if (placeLoading) {
|
|
return;
|
|
}
|
|
if (!isBettable) {
|
|
toast.error(t("hall.closedSubmit"));
|
|
return;
|
|
}
|
|
|
|
const snapshot = previewSubmissionRef.current;
|
|
if (snapshot === null) {
|
|
toast.error(t("hall.changedBeforeSubmit"));
|
|
return;
|
|
}
|
|
|
|
if (snapshot.drawId === "") {
|
|
toast.error(t("hall.notBettable"));
|
|
return;
|
|
}
|
|
|
|
setPlaceLoading(true);
|
|
try {
|
|
const data = await postTicketPlace({
|
|
draw_id: snapshot.drawId,
|
|
currency_code: snapshot.currencyCode,
|
|
client_trace_id: snapshot.clientTraceId,
|
|
lines: snapshot.lines,
|
|
expected_config_versions: snapshot.expectedConfigVersions,
|
|
});
|
|
previewSubmissionRef.current = null;
|
|
clearPlaceTraceId();
|
|
setPreviewOpen(false);
|
|
setPreviewData(null);
|
|
setResultData(data);
|
|
setResultOpen(true);
|
|
setRows(newDraftRows());
|
|
setActiveRowId(null);
|
|
triggerWalletPollingAfterBet();
|
|
void refreshWallet();
|
|
void reloadDraw();
|
|
const failureCount = data.summary.failure_count ?? 0;
|
|
const successCount = data.summary.success_count ?? 0;
|
|
if (failureCount > 0 && successCount === 0) {
|
|
toast.error(
|
|
t("hall.placeAllFailed", {
|
|
failed: failureCount,
|
|
}),
|
|
);
|
|
} else if (failureCount > 0) {
|
|
toast.warning(
|
|
t("hall.placePartialFailed", {
|
|
success: successCount,
|
|
failed: failureCount,
|
|
}),
|
|
);
|
|
} else {
|
|
toast.success(
|
|
t("hall.placeSuccess", {
|
|
orderNo: data.order_no,
|
|
amount: formatMinorAsCurrency(data.summary.total_actual_deduct, currencyCode),
|
|
}),
|
|
);
|
|
}
|
|
} catch (e) {
|
|
const code = e instanceof LotteryApiBizError ? e.code : 0;
|
|
const msg = e instanceof LotteryApiBizError ? e.message : t("hall.placeFailed");
|
|
if (e instanceof LotteryApiBizError && code === 2002 && applyClosedPlayCleanup(e.data)) {
|
|
const payload = e.data as ClosedPlayCleanupData;
|
|
toast.error(payload.cleanup_hint ?? t("hall.ticketError.2002"));
|
|
invalidatePreview();
|
|
return;
|
|
}
|
|
if (e instanceof LotteryApiBizError && (code === 2008 || code === 2009)) {
|
|
invalidatePreview();
|
|
}
|
|
if (e instanceof LotteryApiBizError && (code === 2001 || code === 2006)) {
|
|
void reloadDraw();
|
|
}
|
|
toast.error(mapTicketBetError(code, msg, t));
|
|
} finally {
|
|
setPlaceLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const onRefresh = () => void refreshWallet();
|
|
window.addEventListener("lottery-wallet-refresh", onRefresh);
|
|
return () => window.removeEventListener("lottery-wallet-refresh", onRefresh);
|
|
}, [refreshWallet]);
|
|
|
|
if (catalogState.kind === "loading") {
|
|
return (
|
|
<section
|
|
className={cn("space-y-3", isMobile && "pb-44")}
|
|
aria-label={t("hall.aria")}
|
|
>
|
|
<Skeleton className="h-12 rounded-xl" />
|
|
<Skeleton className="h-72 rounded-xl" />
|
|
<Skeleton className="h-14 rounded-xl" />
|
|
</section>
|
|
);
|
|
}
|
|
|
|
if (catalogState.kind === "error") {
|
|
return (
|
|
<section className="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
|
|
<p>{catalogState.message}</p>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="outline"
|
|
className="mt-3 border-red-200 bg-white text-red-700 hover:bg-red-50"
|
|
onClick={() => void loadCatalog()}
|
|
>
|
|
{t("actions.retry")}
|
|
</Button>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
const submitActualMinor =
|
|
previewData?.summary.total_actual_deduct ?? debouncedSummary.actual;
|
|
const activeDraftRowIds = new Set(draftEntries.map((entry) => entry.rowId));
|
|
const selectedProviderCount = new Set(
|
|
rows
|
|
.filter((row) => activeDraftRowIds.has(row.id))
|
|
.flatMap((row) => row.providerCodes),
|
|
).size;
|
|
const warningRowCount = rows.filter(
|
|
(row) =>
|
|
row.number.trim().length > 0 &&
|
|
playColumns.some(
|
|
(column) =>
|
|
cellRiskState(
|
|
column.play,
|
|
row.number,
|
|
playCategory(column.play.play_code),
|
|
alertRows,
|
|
liveSoldOutNumbers,
|
|
liveWarningNumbers,
|
|
column.digitSlot,
|
|
) === "warning",
|
|
),
|
|
).length;
|
|
const canSubmit =
|
|
!tableDisabled && draftEntries.length > 0 && providerMissingRow() === null && availableMinor >= submitActualMinor;
|
|
const favoriteChips = favorites.slice(0, 10);
|
|
const historyChips = historyNumbers.slice(0, 20);
|
|
const summaryItems = [
|
|
{
|
|
key: "total",
|
|
label: t("hall.table.total", { defaultValue: "共" }),
|
|
totalMinor: submitActualMinor,
|
|
},
|
|
...summaryPlayColumns.map((column) => ({
|
|
key: column.key,
|
|
label: playColumnHeaderLabel(
|
|
column.play,
|
|
playCategory(column.play.play_code),
|
|
column.digitSlot,
|
|
t,
|
|
),
|
|
totalMinor: rows.reduce((sum, row) => {
|
|
const amount = row.amounts[column.key];
|
|
if (
|
|
!amount ||
|
|
row.number.trim().length === 0 ||
|
|
draftLineIssueReason(
|
|
column.play.play_code,
|
|
row.number,
|
|
column.digitSlot,
|
|
) !== null
|
|
) {
|
|
return sum;
|
|
}
|
|
return sum + (parseDecimalInputToMinor(amount, currencyCode) ?? 0);
|
|
}, 0),
|
|
})),
|
|
];
|
|
const desktopReviewModel: HallDesktopReviewModel = {
|
|
lineCount: draftEntries.length,
|
|
providerCount: selectedProviderCount,
|
|
actualAmount: formatMinorAmount(submitActualMinor),
|
|
availableCredit: formatMinorAmount(availableMinor),
|
|
remainingCredit: formatMinorAmount(Math.max(0, availableMinor - submitActualMinor)),
|
|
warningCount: warningRowCount,
|
|
creditSufficient: availableMinor >= submitActualMinor,
|
|
};
|
|
return (
|
|
<>
|
|
<section className="space-y-3" aria-label={t("hall.aria")}>
|
|
|
|
{jackpot?.enabled ? (
|
|
<div className="relative overflow-hidden rounded-xl border border-[#d6b74e]/70 bg-[linear-gradient(115deg,#06183c_0%,#0a3a89_50%,#071f50_100%)] px-3 py-3 text-white shadow-[0_10px_28px_rgba(7,46,112,0.2)] sm:px-4">
|
|
<div className="pointer-events-none absolute -left-10 top-1/2 size-28 -translate-y-1/2 rounded-full bg-[#2d79ff]/25 blur-2xl motion-safe:animate-[jackpot-amount-row-glow_2.8s_ease-in-out_infinite]" />
|
|
<div className="pointer-events-none absolute -right-5 -top-16 size-36 rounded-full bg-[#f4ca54]/20 blur-2xl motion-safe:animate-[jackpot-amount-row-glow_3.2s_ease-in-out_infinite]" />
|
|
<div className="pointer-events-none absolute -inset-y-10 -left-1/3 w-1/3 rotate-12 bg-gradient-to-r from-transparent via-white/20 to-transparent blur-sm motion-safe:animate-[jackpot-strip-sweep_4s_ease-in-out_infinite]" />
|
|
|
|
<div className="relative flex flex-wrap items-center justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<p className="w-fit bg-gradient-to-r from-[#fff1ad] via-white to-[#e2bd45] bg-[length:200%_auto] bg-clip-text text-[11px] font-black uppercase tracking-[0.16em] text-transparent motion-safe:animate-[jackpot-shimmer_3s_linear_infinite]">
|
|
{t("results.jackpotLabel", { defaultValue: "Jackpot" })}
|
|
</p>
|
|
<p className="mt-0.5 truncate font-mono text-xl font-black tabular-nums text-white drop-shadow-[0_0_12px_rgba(245,216,122,0.35)] sm:text-2xl motion-safe:animate-[jackpot-amount-glow_2.4s_ease-in-out_infinite]">
|
|
{formatMinorAmount(jackpot.current_amount_minor)}
|
|
</p>
|
|
</div>
|
|
{jackpot.draws_since_last_burst !== null ? (
|
|
<p className="ml-auto rounded-full border border-[#f4d66f]/35 bg-white/10 px-3 py-1.5 text-xs font-bold text-[#ffe8a0] shadow-[inset_0_1px_0_rgba(255,255,255,0.12)] backdrop-blur-sm">
|
|
{t("results.jackpotGap", {
|
|
count: jackpot.draws_since_last_burst,
|
|
})}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<HallPlaySummaryGrid items={summaryItems} className="hidden lg:grid" />
|
|
|
|
<HallDesktopWorkflowBar
|
|
stepGame={t("hall.desktop.stepGame", { defaultValue: "选择玩法" })}
|
|
stepFill={t("hall.desktop.stepFill", { defaultValue: "填写号码和金额" })}
|
|
stepReview={t("hall.desktop.stepReview", { defaultValue: "核对并提交" })}
|
|
gameControls={(
|
|
<div className="inline-flex max-w-full items-center gap-1 rounded-lg bg-[#f3f6fb] p-1">
|
|
{categoryTabs.map((tab) => {
|
|
const hasPlays = openPlays.some(
|
|
(play) => playCategory(play.play_code) === tab.value,
|
|
);
|
|
const active = activeCategory === tab.value;
|
|
|
|
return (
|
|
<button
|
|
key={`desktop-${tab.value}`}
|
|
type="button"
|
|
disabled={!hasPlays}
|
|
onClick={() => setActiveCategory(tab.value)}
|
|
className={cn(
|
|
"inline-flex min-w-14 items-center justify-center rounded-lg px-2 py-2 text-sm font-bold transition-colors xl:min-w-[4.5rem] xl:px-3.5",
|
|
active
|
|
? "bg-[#2d63e2] text-white shadow-[0_4px_12px_rgba(45,99,226,0.24)]"
|
|
: "text-[#5b7fbf] hover:bg-white hover:text-[#2d63e2]",
|
|
!hasPlays && "cursor-not-allowed opacity-40",
|
|
)}
|
|
aria-pressed={active}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
fillControls={(
|
|
<div className="flex min-h-9 min-w-0 flex-wrap items-center gap-1.5">
|
|
{favoriteChips.length > 0 ? (
|
|
<>
|
|
<span className="mr-0.5 text-xs font-bold text-[#d81435]">
|
|
{t("hall.quickFill.favorites")}
|
|
</span>
|
|
{favoriteChips.slice(0, 5).map((number) => (
|
|
<button
|
|
key={`desktop-fav-${number}`}
|
|
type="button"
|
|
className="inline-flex h-8 items-center rounded-full border border-[#ffd7db] bg-[#fff3f5] px-3 text-xs font-bold text-[#d81435] transition-colors hover:bg-[#ffe9ed]"
|
|
onClick={() => fillCurrentRow(number)}
|
|
>
|
|
{number}
|
|
</button>
|
|
))}
|
|
</>
|
|
) : null}
|
|
<span className="ml-1 mr-0.5 text-xs font-bold text-slate-400">
|
|
{t("hall.quickFill.history")}
|
|
</span>
|
|
{historyChips.length > 0 ? (
|
|
historyChips.slice(0, 6).map((number) => (
|
|
<button
|
|
key={`desktop-his-${number}`}
|
|
type="button"
|
|
className="inline-flex h-8 min-w-10 items-center justify-center rounded-full border border-[#d7e5f8] bg-[#f8fbff] px-3 text-xs font-bold text-[#07459f] transition-colors hover:border-[#b9d0f3] hover:bg-[#eef6ff]"
|
|
onClick={() => fillCurrentRow(number)}
|
|
>
|
|
{number}
|
|
</button>
|
|
))
|
|
) : (
|
|
<span className="inline-flex h-8 items-center rounded-full border border-dashed border-slate-200 bg-slate-50 px-3 text-xs text-slate-400">
|
|
{t("hall.quickFill.emptyHistory")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
reviewControls={(
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className="h-9 flex-1 justify-center rounded-lg border-[#dfe6f0] bg-white text-sm font-bold text-slate-600"
|
|
onClick={clearAllRows}
|
|
>
|
|
<Trash2 className="size-4" aria-hidden />
|
|
{t("hall.quickFill.clearAll")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
/>
|
|
|
|
<HallPlaySummaryGrid items={summaryItems} className="lg:hidden" />
|
|
|
|
{isMobile ? (
|
|
<HallMobileQuickFill
|
|
activeNumber={activeRow?.number ?? ""}
|
|
favorites={favoriteChips}
|
|
history={historyChips}
|
|
expanded={quickFillExpanded}
|
|
tableDisabled={tableDisabled}
|
|
activeCategory={activeCategory}
|
|
availableCategories={availableCategories}
|
|
onExpandedChange={setQuickFillExpanded}
|
|
onCategoryChange={setActiveCategory}
|
|
onFillNumber={fillCurrentRow}
|
|
onToggleFavorite={toggleFavoriteNumber}
|
|
onClearAll={clearAllRows}
|
|
onApplyQuickAmount={applyQuickAmountToActiveRow}
|
|
onCopyPreviousRow={copyPreviousRowToActiveRow}
|
|
onClearActiveRowAmounts={clearActiveRowAmounts}
|
|
t={t}
|
|
/>
|
|
) : null}
|
|
|
|
{activeCategoryPlays.length === 0 ? (
|
|
<div
|
|
className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2.5 text-center text-xs text-amber-950"
|
|
role="status"
|
|
>
|
|
{t("hall.table.noPlaysInCategory")}
|
|
</div>
|
|
) : null}
|
|
|
|
<div
|
|
className={cn(
|
|
"min-w-0",
|
|
!isMobile &&
|
|
"flex flex-col items-stretch gap-3 min-[1500px]:flex-row min-[1500px]:items-start",
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"min-w-0 flex-1 overflow-hidden border border-[#e6edf8] bg-white transition-opacity",
|
|
isMobile ? "rounded-lg" : "rounded-xl shadow-[0_8px_24px_rgba(15,23,42,0.05)]",
|
|
tableDisabled && "opacity-55",
|
|
showWideTableHint && "player-table-scroll-wrap",
|
|
)}
|
|
>
|
|
<HallBettingTable
|
|
rows={rows}
|
|
activeRowId={activeRowId}
|
|
tableDisabled={tableDisabled}
|
|
tableWidthPx={tableWidthPx}
|
|
isMobile={isMobile}
|
|
indexColClass={indexColClass}
|
|
numberColClass={numberColClass}
|
|
stickyNumberLeftClass={stickyNumberLeftClass}
|
|
numberPlaceholder={numberPlaceholder}
|
|
numberMaxChars={numberMaxChars}
|
|
activeCategory={activeCategory}
|
|
playColumns={playColumns}
|
|
amountColClass={amountColClass}
|
|
syncAmountColumns={syncAmountColumns}
|
|
selectionTypeColClass={selectionTypeColClass}
|
|
showSelectionTypeColumn={showSelectionTypeColumn}
|
|
selectionTypeOptions={selectionTypeOptions}
|
|
betProviders={betProviders}
|
|
providerColClass={providerColClass}
|
|
rowTotalColClass={rowTotalColClass}
|
|
alertRows={alertRows}
|
|
liveSoldOutNumbers={liveSoldOutNumbers}
|
|
liveWarningNumbers={liveWarningNumbers}
|
|
currencyCode={currencyCode}
|
|
onToggleSyncAmountColumn={toggleSyncAmountColumn}
|
|
onSetAllSelectionTypes={requestAllSelectionTypes}
|
|
onToggleProviderColumn={toggleProviderColumn}
|
|
onUpdateRowNumber={updateRowNumber}
|
|
onUpdateRowSelectionType={requestRowSelectionType}
|
|
onUpdateAmount={updateAmount}
|
|
onToggleRowProvider={toggleRowProvider}
|
|
onSetActiveRowId={setActiveRowId}
|
|
t={t}
|
|
/>
|
|
|
|
</div>
|
|
|
|
{!isMobile ? (
|
|
<HallDesktopReviewPanel
|
|
model={desktopReviewModel}
|
|
disabled={!canSubmit}
|
|
loading={previewLoading}
|
|
isBettable={isBettable}
|
|
onSubmit={() => void handlePreview()}
|
|
labels={{
|
|
title: t("hall.desktop.reviewTitle", { defaultValue: "核对与提交" }),
|
|
lineCount: t("hall.table.lineCount"),
|
|
providerCount: t("hall.table.providerCount"),
|
|
actualTotal: t("hall.table.actualTotal"),
|
|
availableCredit: t("hall.desktop.availableCredit", { defaultValue: "可用信用" }),
|
|
remainingCredit: t("hall.desktop.remainingCredit", { defaultValue: "下注后可用" }),
|
|
noWarnings: t("hall.desktop.noWarnings", { defaultValue: "暂无风险提醒" }),
|
|
warningCount: t("hall.desktop.warningCount", {
|
|
defaultValue: "{{count}} 行接近售罄",
|
|
count: warningRowCount,
|
|
}),
|
|
creditEnough: t("hall.desktop.creditEnough", { defaultValue: "可用信用充足" }),
|
|
creditInsufficient: t("hall.desktop.creditInsufficient", { defaultValue: "可用信用不足" }),
|
|
submit: previewLoading
|
|
? t("hall.table.previewing")
|
|
: !isBettable
|
|
? t("hall.closed.title")
|
|
: availableMinor < submitActualMinor
|
|
? t("hall.table.insufficientBalance")
|
|
: t("hall.table.submitBet"),
|
|
}}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
|
|
{sealedBetUi ? (
|
|
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600">
|
|
{t("hall.table.sealedHint")}
|
|
</p>
|
|
) : null}
|
|
|
|
</section>
|
|
|
|
{isMobile ? (
|
|
<div
|
|
className={cn(
|
|
playerViewportFixedBarClass,
|
|
"bottom-[calc(3.25rem+env(safe-area-inset-bottom,0px))] z-40",
|
|
)}
|
|
>
|
|
<div className="mx-auto w-full border-t border-[#dfe7f3] bg-white">
|
|
<div className="flex items-center gap-2 px-3 pt-2 pb-2.5">
|
|
<div className="min-w-0 flex flex-1 items-center justify-between gap-2">
|
|
<p className="shrink-0 text-[11px] font-semibold text-slate-500">
|
|
{t("hall.table.draftTotal")}
|
|
</p>
|
|
<p className="truncate text-[19px] font-black tabular-nums text-[#0b3f96]">
|
|
{formatMinorAsCurrency(debouncedSummary.actual, currencyCode)}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
disabled={!canSubmit || previewLoading}
|
|
onClick={() => void handlePreview()}
|
|
className={cn(
|
|
"h-9 min-w-[7.2rem] shrink-0 gap-1.5 rounded-lg border-0 px-3.5 text-[14px] font-bold text-white",
|
|
!isBettable
|
|
? "bg-slate-500 shadow-none hover:bg-slate-500 disabled:opacity-100"
|
|
: "bg-[#e5002c] shadow-none hover:bg-[#d10028]",
|
|
)}
|
|
>
|
|
{!isBettable ? (
|
|
<Lock className="size-4.5 shrink-0" aria-hidden />
|
|
) : (
|
|
<Ticket className="size-4.5 shrink-0" aria-hidden />
|
|
)}
|
|
{previewLoading
|
|
? t("hall.table.previewing")
|
|
: !isBettable
|
|
? t("hall.closed.title")
|
|
: availableMinor < submitActualMinor
|
|
? t("hall.table.insufficientBalance")
|
|
: t("hall.table.submitBet")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<HallBetPreviewDialog
|
|
open={previewOpen}
|
|
onOpenChange={(open) => {
|
|
setPreviewOpen(open);
|
|
if (!open) {
|
|
setPreviewData(null);
|
|
if (!placeLoading) {
|
|
previewRequestSeqRef.current += 1;
|
|
previewSubmissionRef.current = null;
|
|
clearPlaceTraceId();
|
|
}
|
|
}
|
|
}}
|
|
currencyCode={currencyCode}
|
|
data={previewData}
|
|
placing={placeLoading}
|
|
jackpotEnabled={Boolean(jackpot?.enabled)}
|
|
allowSubmit={isBettable && availableMinor >= submitActualMinor}
|
|
onConfirmPlace={() => void handlePlace()}
|
|
/>
|
|
|
|
<HallBetResultDialog
|
|
open={resultOpen}
|
|
onOpenChange={(open) => {
|
|
setResultOpen(open);
|
|
if (!open) setResultData(null);
|
|
}}
|
|
currencyCode={currencyCode}
|
|
data={resultData}
|
|
jackpotEnabled={Boolean(jackpot?.enabled)}
|
|
creditMode={creditMode}
|
|
/>
|
|
|
|
<HallSelectionConfirmDialog
|
|
open={pendingSelectionChange !== null}
|
|
preview={pendingSelectionPreview}
|
|
currencyCode={currencyCode}
|
|
onCancel={cancelPendingSelectionChange}
|
|
onConfirm={confirmPendingSelectionChange}
|
|
t={t}
|
|
/>
|
|
</>
|
|
);
|
|
}
|