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

import { AppKernel } from '@scripts/app/AppKernel';
import { IGameInfo } from '@scripts/store/gameStore/data';
import { setSpriteFrame } from '@scripts/utils/ResHelper';
import { addBtnClick, removeBtnClick, setAlpha } from '@scripts/utils/UIHelper';
import { _decorator, Button, Color, Component, Label, Node, Size, Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('GameItem')
export class GameItem extends Component {
    @property(Sprite)
    gameIcon: Sprite;

    @property(Node)
    btnFavo: Node;

    @property(Sprite)
    favoFlag: Sprite;

    @property(Label)
    lblGameName: Label;

    private _data: IGameInfo;
    private _dataIdx: number;


    protected onLoad(): void {
        addBtnClick(this.node, this.onClick, this);
        addBtnClick(this.btnFavo, this.onBtnFavoClick, this);
    }

    protected onDestroy(): void {
        removeBtnClick(this.node, this.onClick, this);
        removeBtnClick(this.btnFavo, this.onBtnFavoClick, this);
    }

    public updateItem(data: IGameInfo, index: number) {
        this._data = data;
        this._dataIdx = index;
        if (!this.node.active) this.node.active = true;
        if (this.lblGameName) this.lblGameName.string = data.gameName;
        setAlpha(this.favoFlag, data.isFavorite);

        setSpriteFrame(this.gameIcon, "https://cdn.usgamestatic.com/24680/game/lw/bankersbreachcollisionways@1x.webp");
    }

    private onClick() {
        // AppKernel.appLobby.openGame(this._gameConfig.id);
    }

    private async onBtnFavoClick() {
        const gameStore = AppKernel.stores.gameStore;
        if (gameStore.favoriting) return;

        const index = this._dataIdx;
        const data = this._data;
        const isFavorite = data.isFavorite;
        const game = isFavorite ? await gameStore.reqFavoRemove(data.gameID)
            : await gameStore.reqFavoAdd(data.gameID);

        if (!!game && this._dataIdx === index) {
            this.updateItem(game, index);
        }
    }
}