You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.9 KiB
88 lines
2.9 KiB
|
1 month ago
|
import { useEffect, useState, useMemo } from 'react';
|
||
|
|
import useGameStore from '@/stores/gameStore';
|
||
|
|
import { GameMainTypesEnum, defaultHomeGameTabMenus, gameMainTypesMap } from '@/constants/game';
|
||
|
|
import { ThemeEnum } from '@/constants/theme';
|
||
|
|
import { forEach, cloneDeep, map, filter } from 'lodash-es';
|
||
|
|
import { useIsLoggedIn } from '@/stores/userStore';
|
||
|
|
import { useShallow } from 'zustand/react/shallow';
|
||
|
|
|
||
|
|
// 有子菜单的游戏类型
|
||
|
|
const hasSubGameMainTypes = [
|
||
|
|
GameMainTypesEnum.CHESS,
|
||
|
|
GameMainTypesEnum.ELECTRONIC,
|
||
|
|
GameMainTypesEnum.FISHING,
|
||
|
|
GameMainTypesEnum.BLOCK_THIRD,
|
||
|
|
];
|
||
|
|
|
||
|
|
export const useGameMainMenus = (theme: ThemeEnum) => {
|
||
|
|
// 在 hook 顶层调用 useIsLoggedIn
|
||
|
|
const isLogin = useIsLoggedIn();
|
||
|
|
|
||
|
|
// 从 store 获取必要的数据 - 直接获取,不使用 useShallow
|
||
|
|
const menuSort = useGameStore((state) => state.menuSort);
|
||
|
|
const gameBigClass = useGameStore((state) => state.gameBigClass);
|
||
|
|
|
||
|
|
if (__DEV__) {
|
||
|
|
console.log('🎮 useGameMainMenus - menuSort:', menuSort, 'length:', menuSort?.length);
|
||
|
|
}
|
||
|
|
// 使用 useMemo 缓存计算结果,避免每次都创建新对象
|
||
|
|
return useMemo(() => {
|
||
|
|
const defaultMenus = cloneDeep(defaultHomeGameTabMenus);
|
||
|
|
|
||
|
|
if (theme === ThemeEnum.DARK) {
|
||
|
|
forEach(defaultMenus, (item) => {
|
||
|
|
if (item.key === GameMainTypesEnum.RECENT) {
|
||
|
|
item.icon = 'clock-solid_dark';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
const gameMenu = map(menuSort, (item: Record<string, any>) => {
|
||
|
|
const typeName = gameMainTypesMap[item.type as GameMainTypesEnum];
|
||
|
|
|
||
|
|
const children = hasSubGameMainTypes.includes(item.type)
|
||
|
|
? map(gameBigClass?.[typeName], (it) => {
|
||
|
|
return {
|
||
|
|
name: it.play_cname,
|
||
|
|
key: `${it.play_id}`,
|
||
|
|
play_sort: it.play_sort,
|
||
|
|
darkImgSrc: `/images/game/${typeName}/dark_${it.play_id}.png`,
|
||
|
|
lightImgSrc: `/images/game/${typeName}/light_${it.play_id}.png`,
|
||
|
|
colorImgSrc: it.logo3_img_url || `/images/game/${typeName}/color_${it.play_id}.png`,
|
||
|
|
};
|
||
|
|
})
|
||
|
|
: [];
|
||
|
|
|
||
|
|
return {
|
||
|
|
name: item.play_name,
|
||
|
|
key: `${item.type}`,
|
||
|
|
icon: typeName,
|
||
|
|
logo: item.logo_url1,
|
||
|
|
children,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
if (__DEV__) {
|
||
|
|
console.log(gameMenu, 'gameMenu');
|
||
|
|
}
|
||
|
|
|
||
|
|
return map(
|
||
|
|
[
|
||
|
|
...filter(defaultMenus, (item) => [GameMainTypesEnum.RECOMMEND].includes(item.key)),
|
||
|
|
...(isLogin
|
||
|
|
? filter(gameMenu, (item) => Number(item.key) !== GameMainTypesEnum.TRIAL)
|
||
|
|
: gameMenu),
|
||
|
|
...filter(defaultMenus, (item) =>
|
||
|
|
[GameMainTypesEnum.COLLECT, GameMainTypesEnum.RECENT].includes(item.key)
|
||
|
|
),
|
||
|
|
],
|
||
|
|
(item) => ({
|
||
|
|
...item,
|
||
|
|
key: `${item.key}`,
|
||
|
|
})
|
||
|
|
);
|
||
|
|
}, [theme, isLogin, menuSort, gameBigClass]);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const useMenuDataLoaded = () => useGameStore((state) => state.menuSort?.length > 0);
|