feat: add jackpot animations and enhance currency handling across components

- Introduced new CSS animations for jackpot effects to improve visual engagement.
- Integrated CurrencySwitcher into PlayerPanel and HallScreen for better currency management.
- Updated various components to utilize active player currency for consistent display.
- Enhanced event handling for currency changes to ensure real-time updates across the application.

src/features/wallet/transfer-in-screen.tsx

@@ -1,31 +1,26 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { getWalletBalance } from "@/api/wallet";
 import { TransferInPage } from "@/features/wallet/wallet-transfer-forms";
 import { Skeleton } from "@/components/ui/skeleton";
-import { resolvePlayerCurrency } from "@/lib/player-currency";
-import { usePlayerSessionStore } from "@/stores/player-session-store";
+import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
+import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
 import type { WalletBalanceData } from "@/types/api/wallet-balance";
 
 /** 独立路由 `/wallet/transfer-in` */
 export function TransferInScreen() {
   const router = useRouter();
-  const profile = usePlayerSessionStore((s) => s.profile);
+  const { activeCurrency: currency } = useActivePlayerCurrency();
   const [balance, setBalance] = useState<WalletBalanceData | null>(null);
   const [loading, setLoading] = useState(true);
 
-  const currency = useMemo(
-    () => resolvePlayerCurrency(profile, balance),
-    [balance, profile],
-  );
-
   const load = useCallback(async () => {
-    const b = await getWalletBalance();
+    const b = await getWalletBalance({ currency });
     setBalance(b);
-  }, []);
+  }, [currency]);
 
   useEffect(() => {
     let c = false;
@@ -41,6 +36,12 @@ export function TransferInScreen() {
     };
   }, [load]);
 
+  useEffect(() => {
+    const onCurrencyChange = () => void load();
+    window.addEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onCurrencyChange);
+    return () => window.removeEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onCurrencyChange);
+  }, [load]);
+
   const onSuccess = useCallback(async () => {
     await load();
     router.push("/wallet");

src/features/wallet/transfer-out-screen.tsx

@@ -1,31 +1,26 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { getWalletBalance } from "@/api/wallet";
 import { TransferOutPage } from "@/features/wallet/wallet-transfer-forms";
 import { Skeleton } from "@/components/ui/skeleton";
-import { resolvePlayerCurrency } from "@/lib/player-currency";
-import { usePlayerSessionStore } from "@/stores/player-session-store";
+import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
+import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
 import type { WalletBalanceData } from "@/types/api/wallet-balance";
 
 /** 独立路由 `/wallet/transfer-out` */
 export function TransferOutScreen() {
   const router = useRouter();
-  const profile = usePlayerSessionStore((s) => s.profile);
+  const { activeCurrency: currency } = useActivePlayerCurrency();
   const [balance, setBalance] = useState<WalletBalanceData | null>(null);
   const [loading, setLoading] = useState(true);
 
-  const currency = useMemo(
-    () => resolvePlayerCurrency(profile, balance),
-    [balance, profile],
-  );
-
   const load = useCallback(async () => {
-    const b = await getWalletBalance();
+    const b = await getWalletBalance({ currency });
     setBalance(b);
-  }, []);
+  }, [currency]);
 
   useEffect(() => {
     let c = false;
@@ -41,6 +36,12 @@ export function TransferOutScreen() {
     };
   }, [load]);
 
+  useEffect(() => {
+    const onCurrencyChange = () => void load();
+    window.addEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onCurrencyChange);
+    return () => window.removeEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onCurrencyChange);
+  }, [load]);
+
   const onSuccess = useCallback(async () => {
     await load();
     router.push("/wallet");

src/features/wallet/wallet-logs-screen.tsx

@@ -7,15 +7,15 @@ import { getWalletLogs } from "@/api/wallet";
 import { Button } from "@/components/ui/button";
 import { PlayerPanel } from "@/components/layout/player-panel";
 import { WalletLogsBlock } from "@/features/wallet/wallet-logs-block";
-import { resolvePlayerCurrency } from "@/lib/player-currency";
+import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
+import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
 import { formatWalletClientError } from "@/lib/wallet-api-error";
-import { usePlayerSessionStore } from "@/stores/player-session-store";
 import { getWalletLogsLastPage, type WalletLogsData } from "@/types/api/wallet-logs";
 
 const WALLET_LOGS_PAGE_SIZE = 10;
 
 export function WalletLogsScreen() {
-  const profile = usePlayerSessionStore((s) => s.profile);
+  const { activeCurrency: currency } = useActivePlayerCurrency();
   const { t } = useTranslation("player");
   const [logs, setLogs] = useState<WalletLogsData | null>(null);
   const [filter, setFilter] = useState("");
@@ -25,10 +25,19 @@ export function WalletLogsScreen() {
   const [error, setError] = useState<string | null>(null);
   const loadMoreRef = useRef<HTMLDivElement | null>(null);
 
-  const currency = useMemo(
-    () => resolvePlayerCurrency(profile),
-    [profile],
-  );
+  const logsForCurrency = useMemo(() => {
+    if (!logs) return null;
+    const code = currency.toUpperCase();
+    return {
+      ...logs,
+      items: logs.items.filter(
+        (item) => (item.currency_code || code).toUpperCase() === code,
+      ),
+      pending_reconcile: logs.pending_reconcile.filter(
+        (item) => item.currency_code.toUpperCase() === code,
+      ),
+    };
+  }, [currency, logs]);
 
   const fetchPassRef = useRef(true);
 
@@ -69,6 +78,12 @@ export function WalletLogsScreen() {
     queueMicrotask(() => {
       void load(1, false);
     });
+  }, [currency, load]);
+
+  useEffect(() => {
+    const onCurrencyChange = () => void load(1, false);
+    window.addEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onCurrencyChange);
+    return () => window.removeEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onCurrencyChange);
   }, [load]);
 
   const hasMore = logs ? logs.page < getWalletLogsLastPage(logs) : false;
@@ -116,7 +131,7 @@ export function WalletLogsScreen() {
         ) : null}
 
         <WalletLogsBlock
-          logs={logs}
+          logs={logsForCurrency}
           logsLoading={loading || logsLoading}
           loadingMore={loadingMore}
           hasMore={hasMore}

src/features/wallet/wallet-screen.tsx

@@ -14,17 +14,17 @@ import {
   TransferOutDialog,
 } from "@/features/wallet/wallet-transfer-dialogs";
 import { WalletLogsBlock } from "@/features/wallet/wallet-logs-block";
+import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
 import { formatMinorAsCurrency } from "@/lib/money";
-import { resolvePlayerCurrency } from "@/lib/player-currency";
+import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
 import { formatWalletClientError } from "@/lib/wallet-api-error";
-import { usePlayerSessionStore } from "@/stores/player-session-store";
 import type { WalletBalanceData } from "@/types/api/wallet-balance";
 import { getWalletLogsLastPage, type WalletLogsData } from "@/types/api/wallet-logs";
 
 const WALLET_LOGS_PAGE_SIZE = 10;
 
 export function WalletScreen() {
-  const profile = usePlayerSessionStore((s) => s.profile);
+  const { activeCurrency: currency } = useActivePlayerCurrency();
   const { t } = useTranslation("player");
   const [balance, setBalance] = useState<WalletBalanceData | null>(null);
   const [logs, setLogs] = useState<WalletLogsData | null>(null);
@@ -35,11 +35,6 @@ export function WalletScreen() {
   const [error, setError] = useState<string | null>(null);
   const loadMoreRef = useRef<HTMLDivElement | null>(null);
 
-  const currency = useMemo(
-    () => resolvePlayerCurrency(profile, balance),
-    [balance, profile],
-  );
-
   const fetchPassRef = useRef(true);
 
   const loadLogs = useCallback(async (targetPage = 1, append = false) => {
@@ -68,7 +63,7 @@ export function WalletScreen() {
         setLogsLoading(true);
       }
       try {
-        const b = await getWalletBalance();
+        const b = await getWalletBalance({ currency });
         if (cancelled) return;
         setBalance(b);
         const nextLogs = await loadLogs(1, false);
@@ -89,13 +84,13 @@ export function WalletScreen() {
     return () => {
       cancelled = true;
     };
-  }, [loadLogs, t]);
+  }, [currency, loadLogs, t]);
 
   const refreshAll = useCallback(async () => {
     setError(null);
     setLogsLoading(true);
     try {
-      const b = await getWalletBalance();
+      const b = await getWalletBalance({ currency });
       setBalance(b);
       await loadLogs(1, false);
     } catch (e) {
@@ -104,7 +99,27 @@ export function WalletScreen() {
       setLogsLoading(false);
       setLoading(false);
     }
-  }, [loadLogs, t]);
+  }, [currency, loadLogs, t]);
+
+  useEffect(() => {
+    const onCurrencyChange = () => void refreshAll();
+    window.addEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onCurrencyChange);
+    return () => window.removeEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onCurrencyChange);
+  }, [refreshAll]);
+
+  const logsForCurrency = useMemo(() => {
+    if (!logs) return null;
+    const code = currency.toUpperCase();
+    return {
+      ...logs,
+      items: logs.items.filter(
+        (item) => (item.currency_code || code).toUpperCase() === code,
+      ),
+      pending_reconcile: logs.pending_reconcile.filter(
+        (item) => item.currency_code.toUpperCase() === code,
+      ),
+    };
+  }, [currency, logs]);
 
   const hasMore = logs ? logs.page < getWalletLogsLastPage(logs) : false;
 
@@ -207,7 +222,7 @@ export function WalletScreen() {
         </div>
 
         <WalletLogsBlock
-          logs={logs}
+          logs={logsForCurrency}
           logsLoading={loading || logsLoading}
           loadingMore={loadingMore}
           hasMore={hasMore}