game_cocos_2c/assets/scripts/modules/lobby/ui/HomeView/HomeView.ts

import { _decorator, find, Label, Node, Prefab, Sprite, Toggle, UIOpacity } from 'cc';
import { AppKernel } from '@scripts/app/AppKernel';
import { UIView } from '@scripts/framework/ui/UIView';
import { UIViewID } from '@scripts/define/UIDefine';
import { addBtnClick, addTogClick, setAlpha } from '@scripts/utils/UIHelper';
import { formatVipLv } from '@scripts/utils/VipHelper';
import { CURRENCY_TYPE, CurrencyType, GAME_TABS } from '@scripts/define/Define';
import { UISwiper } from '@scripts/components/swiper/UISwiper';
import VirtualList from '@scripts/components/virtualList/VirtualList';
import { IGameInfo } from '@scripts/store/gameStore/data';
import { GameItem } from './GameItem';
import { RED_POINTS } from '@scripts/app/AppRedpoint';
import { formatGCNum, formatSCNum } from '@scripts/utils/Helper';

const { ccclass, property } = _decorator;

const GameTabValus = [
    GAME_TABS.Home,
    GAME_TABS.Hot,
    GAME_TABS.New,
    GAME_TABS.Recent,
    GAME_TABS.Favs,
]

@ccclass('HomeView')
export class HomeView extends UIView {
    readonly viewId = UIViewID.HomeView;

    @property(UISwiper)
    bannerNode: UISwiper;

    @property(Node)
    homeGamesNode: Node;

    @property(VirtualList)
    homeGamesScroll: VirtualList;

    @property(Node)
    tabGamesNode: Node;

    @property(VirtualList)
    tabGamesScroll: VirtualList;

    @property(Prefab)
    gamePrefab: Prefab;

    private userNode: UserNode;
    private gcModel: CoinModel;
    private scModel: CoinModel;

    private gameTabs: GameTab[] = [];
    private tabGameFlags: { [key: string]: Node } = {};

    private gameTabIndex = -1;
    private gameDatas: IGameInfo[] = [];

    private menuPopup: MenuPopup;
    private btnFirst: Node;

    protected onCreate(): void | Promise<void> {
        AppKernel.events.on('user:update', this.updateUserInfo, this);
        AppKernel.events.on('firstPack:update', this.onUpdateFirstPack, this);

        this.homeGamesScroll.renderEvent.target = this.node;
        this.homeGamesScroll.renderEvent.component = "HomeView";
        this.homeGamesScroll.renderEvent.handler = "onGameItemRender";
        this.tabGamesScroll.renderEvent.target = this.node;
        this.tabGamesScroll.renderEvent.component = "HomeView";
        this.tabGamesScroll.renderEvent.handler = "onGameItemRender";

        this.tabGameFlags = {
            [GAME_TABS.Hot]: find("tabGames/sptHot", this.node),
            [GAME_TABS.New]: find("tabGames/sptNew", this.node),
            [GAME_TABS.Recent]: find("tabGames/sptRecent", this.node),
            [GAME_TABS.Favs]: find("tabGames/sptFavs", this.node),
        }


        this.menuPopup = new MenuPopup(find("menuNode", this.node));
        this.userNode = new UserNode(find("topNode/userNode", this.node));
        this.gcModel = new CoinModel(find("topNode/coinModel/gcNode", this.node), "lblGC");
        this.scModel = new CoinModel(find("topNode/coinModel/scNode", this.node), "lblSC");
        addBtnClick(this.gcModel.node, this.onGCModelClick, this);
        addBtnClick(this.scModel.node, this.onSCModelClick, this);

        const homeTab = new GameTab(find("tabsNode/btnHome", this.node));
        const hotTab = new GameTab(find("tabsNode/btnHot", this.node));
        const newTab = new GameTab(find("tabsNode/btnNew", this.node));
        const recentTab = new GameTab(find("tabsNode/btnRecent", this.node));
        const favsTab = new GameTab(find("tabsNode/btnFavs", this.node));
        this.gameTabs = [homeTab, hotTab, newTab, recentTab, favsTab];
        addBtnClick(homeTab.node, this.onHomeTabClick, this);
        addBtnClick(hotTab.node, this.onHotTabClick, this);
        addBtnClick(newTab.node, this.onNewTabClick, this);
        addBtnClick(recentTab.node, this.onRecentTabClick, this);
        addBtnClick(favsTab.node, this.onFavsTabClick, this);

        const btnBuy = find("topNode/btnBuy", this.node);
        this.btnFirst = find("topNode/btnFirst", this.node);
        const btnInvite = find("topNode/btnInvite", this.node);
        const btnMail = find("topNode/btnMail", this.node);
        const btnService = find("topNode/btnService", this.node);
        const btnMenu = find("topNode/btnMenu", this.node);
        const btnTask = find("bottomNode/btnTask", this.node);
        const btnDaily = find("bottomNode/btnDaily", this.node);
        const btnRedeem = find("bottomNode/btnRedeem", this.node);
        const btnWeekly = find("bottomNode/btnWeekly", this.node);
        const btnVip = find("bottomNode/btnVip", this.node);

        addBtnClick(this.userNode.node, this.onUserNodeClick, this);
        addBtnClick(this.gcModel.node, this.onGCModelClick, this);
        addBtnClick(this.scModel.node, this.onSCModelClick, this);

        addBtnClick(btnBuy, this.onBtnBuyClick, this);
        addBtnClick(this.btnFirst, this.onBtnFirstClick, this);
        addBtnClick(btnInvite, this.onBtnInviteClick, this);
        addBtnClick(btnMail, this.onBtnMailClick, this);
        addBtnClick(btnService, this.onBtnServiceClick, this);
        addBtnClick(btnMenu, this.onBtnMenuClick, this);
        addBtnClick(btnTask, this.onBtnTaskClick, this);
        addBtnClick(btnDaily, this.onBtnDailyClick, this);
        addBtnClick(btnRedeem, this.onBtnRedeemClick, this);
        addBtnClick(btnWeekly, this.onBtnWeeklyClick, this);
        addBtnClick(btnVip, this.onBtnVipClick, this);

        const mailPoint = find("redPoint", btnMail);
        const taskPoint = find("redPoint", btnTask);
        const dailyPoint = find("redPoint", btnDaily);
        AppKernel.redpoint.on(RED_POINTS.Mail, mailPoint, this);
        AppKernel.redpoint.on(RED_POINTS.DailyTask, taskPoint, this);
        AppKernel.redpoint.on(RED_POINTS.DailyReward, dailyPoint, this);
    }

    protected onOpen(_params: unknown) {
        this.updateView();
    }

    private onUpdateFirstPack() {
        const payStore = AppKernel.stores.payStore;
        this.btnFirst.active = payStore.firstPackVisible;
    }

    private updateGameModel(type: CurrencyType) {
        const mainStore = AppKernel.stores.mainStore;
        mainStore.currencyKind = type;

        this.gcModel.setActive(type === CURRENCY_TYPE.GC);
        this.scModel.setActive(type === CURRENCY_TYPE.SC);
    }

    private updateGameTabs(index: number) {
        if (index === this.gameTabIndex) return;
        if (!GameTabValus[index]) return;

        this.gameTabIndex = index;
        this.gameTabs.forEach((tab, i) => {
            tab.setActive(index === i);
        });
    }

    private async getRecentGames(tabIdx = -1) {
        tabIdx = tabIdx === -1 ? this.gameTabIndex : tabIdx;
        if (tabIdx !== 3) return;

        const mainStore = AppKernel.stores.mainStore;
        const gameStore = AppKernel.stores.gameStore;
        const games = gameStore.getRecentGames(mainStore.currencyKind);
        if (!games) {
            AppKernel.ui.loading(true);
            await gameStore.reqRecentGames(mainStore.currencyKind);
            AppKernel.ui.loading(false);
        }
    }

    private async updateGameList() {
        const currency = AppKernel.stores.mainStore.currencyKind;
        const tag = GameTabValus[this.gameTabIndex];
        if (tag === GAME_TABS.Recent) {
            await this.getRecentGames();
        }

        const isHome = tag === GAME_TABS.Home;
        const gameStore = AppKernel.stores.gameStore;
        const games = gameStore.filterGames(tag, currency);
        this.homeGamesNode.active = isHome;
        this.tabGamesNode.active = !isHome;
        this.gameDatas = games;
        const scrollView = isHome ? this.homeGamesScroll : this.tabGamesScroll;
        scrollView.numItems = games.length;
        scrollView.scrollTo(0, 0.2);

        if (!isHome) {
            for (const key in this.tabGameFlags) {
                const flag = this.tabGameFlags[key];
                flag.active = key === tag;
            }
        }
    }

    onGameItemRender(item: Node, index: number) {
        const data = this.gameDatas[index];
        if (!item["_gameItem"]) {
            item["_gameItem"] = item.getComponent(GameItem);
        }

        const gameItem = item['_gameItem'] as GameItem;
        gameItem.updateItem(data, index);
    }

    private onHomeTabClick() {
        this.updateGameTabs(0);
        this.updateGameList();
    }

    private onHotTabClick() {
        this.updateGameTabs(1);
        this.updateGameList();
    }

    private onNewTabClick() {
        this.updateGameTabs(2);
        this.updateGameList();
    }

    private onRecentTabClick() {
        this.updateGameTabs(3);
        this.updateGameList();
    }

    private onFavsTabClick() {
        this.updateGameTabs(4);
        this.updateGameList();
    }

    private onBtnDailyClick() {

    }

    private onBtnTaskClick() {

    }

    private onBtnRedeemClick() {
        const coinModel = AppKernel.stores.mainStore.currencyKind;
        if (coinModel !== CURRENCY_TYPE.SC) {
            AppKernel.ui.toast("Redeem is only available in SC mode.");
            return;
        }

        AppKernel.ui.open(UIViewID.UIWithdraw);
    }

    private onBtnWeeklyClick() {

    }

    private onBtnVipClick() {

    }

    private onBtnMenuClick() {
        this.menuPopup.open();
    }

    private onBtnServiceClick() {

    }

    private onBtnInviteClick() {
        AppKernel.ui.open(UIViewID.UIInvite);
    }

    private onBtnFirstClick() {
        AppKernel.ui.open(UIViewID.UIFirstPack);
    }

    private onBtnBuyClick() {
        AppKernel.ui.open(UIViewID.StoreView);
    }

    private onUserNodeClick() {

    }

    private onGCModelClick() {
        const coinModel = AppKernel.stores.mainStore.currencyKind;
        if (coinModel === CURRENCY_TYPE.GC) return;
        this.updateGameModel(CURRENCY_TYPE.GC);
        this.updateGameList();
    }

    private onSCModelClick() {
        const coinModel = AppKernel.stores.mainStore.currencyKind;
        if (coinModel === CURRENCY_TYPE.SC) return;
        this.updateGameModel(CURRENCY_TYPE.SC);
        this.updateGameList();
    }

    private updateUserInfo() {
        const mainStore = AppKernel.stores.mainStore;
        const userInfo = mainStore.userInfo;
        this.userNode.lblVip.string = formatVipLv(userInfo.vip);
        this.scModel.lblValue.string = formatSCNum(mainStore.scScore);
        this.gcModel.lblValue.string = formatGCNum(mainStore.gcScore);
    }

    private updateView() {
        const mainStore = AppKernel.stores.mainStore;
        this.updateUserInfo();
        this.updateGameTabs(0);
        this.updateGameModel(mainStore.currencyKind);
        this.updateGameList();
        this.bannerNode.init(5);
        this.onUpdateFirstPack();
    }

    private onBtnMailClick() {
        AppKernel.ui.open(UIViewID.MailView);
    }
}

class UserNode {
    lblVip: Label;
    sptAvatar: Sprite;
    constructor(readonly node: Node) {
        this.lblVip = find("lblLv", node).getComponent(Label);
        this.sptAvatar = find("sptAvatar", node).getComponent(Sprite);
    }
}

class CoinModel {
    lblValue: Label;
    private sptIcon: Sprite;
    private sptActive: Sprite;
    constructor(readonly node: Node, lblName: string) {
        this.lblValue = find(lblName, node.parent).getComponent(Label);
        this.sptActive = find("sptActive", node).getComponent(Sprite);
        this.sptIcon = find("sptIcon", node).getComponent(Sprite);
    }

    setActive(active) {
        setAlpha(this.sptActive, active ? 1 : 0);
        setAlpha(this.lblValue, active ? 1 : 0.54);
        setAlpha(this.sptIcon, active ? 1 : 0.54);
    }
}

class GameTab {
    private sptActive: UIOpacity;
    constructor(readonly node: Node) {
        this.sptActive = find("sptActive", node).getComponent(UIOpacity);
    }

    setActive(active: boolean) {
        this.sptActive.opacity = active ? 255 : 0;
    }
}

class MenuPopup {
    private togSound: Toggle;
    private togMusic: Toggle;

    constructor(readonly node: Node) {
        node.active = false;
        this.togSound = find("content/togSound", node).getComponent(Toggle);
        this.togMusic = find("content/togMusic", node).getComponent(Toggle);
        this.togSound.isChecked = AppKernel.sound.soundEnabled;
        this.togMusic.isChecked = AppKernel.sound.musicEnabled;
        addTogClick(this.togSound, this.onTogSoundClick, this);
        addTogClick(this.togMusic, this.onTogMusicClick, this)

        const btnFAQ = find("content/btnFAQ", node);
        const btnPhone = find("content/btnPhone", node);
        const btnEmail = find("content/btnEmail", node);
        const btnVerify = find("content/btnVerify", node);
        const btnSafe = find("content/btnSafe", node);
        const btnHistory = find("content/btnHistory", node);
        const btnInfo = find("content/btnInfo", node);
        const btnLogout = find("content/btnLogout", node);

        addBtnClick(btnFAQ, this.onBtnFAQClick, this);
        addBtnClick(btnPhone, this.onBtnPhoneClick, this);
        addBtnClick(btnEmail, this.onBtnEmailClick, this);
        addBtnClick(btnVerify, this.onBtnVerifyClick, this);
        addBtnClick(btnSafe, this.onBtnSafeClick, this);
        addBtnClick(btnHistory, this.onBtnHistoryClick, this);
        addBtnClick(btnInfo, this.onBtnInfoClick, this);
        addBtnClick(btnLogout, this.onBtnLogoutClick, this);

        const mask = find("mask", node);
        mask.on(Node.EventType.TOUCH_END, this.onMaskClick, this);
    }

    private onTogSoundClick(tog: Toggle) {
        if (AppKernel.sound.soundEnabled !== tog.isChecked) {
            AppKernel.sound.soundEnabled = tog.isChecked;
        }
    }

    private onTogMusicClick(tog: Toggle) {
        if (AppKernel.sound.musicEnabled !== tog.isChecked) {
            AppKernel.sound.musicEnabled = tog.isChecked;
        }
    }

    private onMaskClick() {
        this.node.active = false;
    }

    private onBtnFAQClick() {

    }

    private onBtnPhoneClick() {

    }

    private onBtnEmailClick() {

    }

    private onBtnVerifyClick() {

    }

    private onBtnSafeClick() {

    }

    private onBtnHistoryClick() {
        AppKernel.ui.open(UIViewID.PlayHistory);
    }

    private onBtnInfoClick() {
        AppKernel.ui.open(UIViewID.GamePolicyView);
    }

    private onBtnLogoutClick() {
        AppKernel.ui.dialog({
            message: AppKernel.i18n.t("home.logout.content"),
            title: AppKernel.i18n.t("home.logout.title"),
            showClose: true,
            callBack: async (res) => {
                if (res) {
                    this.node.active = false;
                    AppKernel.appLobby.logOut();
                }
                return true;
            }
        })
    }

    open() {
        this.node.active = true;
        this.togMusic.isChecked = true;
        this.togSound.isChecked = true;
    }
}