squidGame/tgx-games-client/assets/module_arean/ui_hero_details/UIHero.ts

429 lines
16 KiB
TypeScript
Raw Normal View History

2025-02-07 10:49:34 +08:00
/************************************************************************************
* FileName : UIHero.ts
* Description : 英雄详情界面
* Version : v1.0.0
* CreateTime : 2024-10-24 15:53:48
* Author :
* Copyright (c) since 2024
* ==============================================================
* Method Description:
*
* ==============================================================
************************************************************************************/
import {_decorator, instantiate, Node, Sprite, SpriteFrame, UITransform, v3, view, Label, v2, Button} from 'cc';
import {tgx_class} from "db://assets/core_tgx/base/ModuleContext";
import {ModuleDef} from "db://assets/scripts/ModuleDef";
import {tgxUIController, tgxUIMgr} from "db://assets/core_tgx/tgx";
import {GameUILayers} from "db://assets/scripts/GameUILayers";
import {Layout_UIHero} from "db://assets/module_arean/ui_hero_details/Layout_UIHero";
import {resLoader} from "db://assets/core_tgx/base/utils/ResLoader";
import {UserMgr} from "db://assets/module_basic/scripts/UserMgr";
import {HeroScrollCell} from "db://assets/module_arean/ui_hero_details/HeroScrollCell";
import {areanMgr} from "db://assets/module_arean/scripts/AreanManager";
import {UITotalScore} from "db://assets/module_arean/ui_hero_details/UITotalScore";
import {UITagDetails} from "db://assets/module_arean/ui_hero_details/UITagDetails";
import {UISkillDetails} from "db://assets/module_arean/ui_hero_details/UISkillDetails";
import {CommonFun} from "db://assets/module_arean/scripts/CommonFun";
import {UICurrencyTips} from "db://assets/module_arean/scripts/UICurrencyTips";
import {UserInfo} from "db://assets/module_basic/shared/types/UserInfo";
import { IHeroCfg } from '../../module_basic/shared/configs/interface/IHeroCfg';
import { ISkinCfg } from '../../module_basic/shared/configs/interface/ISkinCfg';
const { ccclass, property } = _decorator;
@tgx_class(ModuleDef.Arean)
export class UIHero extends tgxUIController {
// 当前打开的是英雄还是皮肤1英雄2皮肤
private _curOpenType : number = null;
// 当前打开界面时英雄ID
private _curHeroId : number = null;
// 当前打开界面时英雄ID
private _curHeroData : IHeroCfg = null;
// 当前选择的皮肤Id
private _curSkinId : number = 0;
private _curSkinIndex : number = null;
// 是否正在全屏
private _isFullScreen : boolean = false;
private _userInfo : UserInfo = null;
// 此英雄的所有皮肤信息(本地)
private _totalLocalSkinData : ISkinCfg[] = [];
constructor() {
super("ui_hero_details/ui_hero_details", GameUILayers.POPUP,Layout_UIHero)
}
protected async onCreated(params: any): Promise<void> {
console.log("UIHero.onCreated", params);
this._curOpenType = params.openType;
this._curHeroId = this._curOpenType === 2 ? areanMgr.cfgMgr.SkinData.getData(params.heroId).id : params.heroId;
if(this._curOpenType === 2) this._curSkinId = params.heroId;
this._userInfo = await UserMgr.inst.rpc_GetUserInfo(UserMgr.inst.userId);
let layout: Layout_UIHero = this.layout as Layout_UIHero;
// 关闭界面
this.onButtonEvent(layout.btnClose, () => {
this.close();
})
// 晶石介绍
this.onButtonEvent(layout.btnCrystal, () => {
this._openCurrency("crystal");
})
// 点券介绍
this.onButtonEvent(layout.btnQuan, () => {
this._openCurrency("quan");
})
// 充值界面
this.onButtonEvent(layout.btnRecharge, () => {
this._openRechargeLayer();
})
// 展示海报
this.onButtonEvent(layout.btnHaiBao, () => {
this._showHaiBao();
})
// 全屏展示
this.onButtonEvent(layout.btnFullScreen, () => {
this._updateFullScreen(true);
})
// 总评分
this.onButtonEvent(layout.btnTotalScore, () => {
this._openTotalScore();
})
// 关闭全屏
this.onButtonEvent(layout.btnMask, () => {
this._updateFullScreen(false);
})
// 更新pageView
this.onButtonEvent(layout.btnLeftArrow, () => {
this._updateHeroView("left");
})
// 更新pageView
this.onButtonEvent(layout.btnRightArrow, () => {
this._updateHeroView("right");
})
// 晶石购买英雄
this.onButtonEvent(layout.btnCrystalBuy, () => {
this._buyHero("crystal");
})
// 点券购买英雄
this.onButtonEvent(layout.btnQuanBuy, () => {
this._buyHero("quan");
})
let heroNode1 = layout.heroIntroduceType1;
for (let i = 1; i < 4; i++) {
let btn = heroNode1.getChildByName("attrNode").getChildByName("attr_" + i);
this.onButtonEvent(btn, (event: any) => {
// const node = event.target as Node;
// const button = node.getComponent(Button);
// console.log("button ============== ",button.clickEvents[0][`$args$`])
this._openTagDetails(i);
},null,"45646")
}
for (let i = 1; i < 6; i++) {
let btn = heroNode1.getChildByName("skillNode").getChildByName("skill_" + i);
this.onButtonEvent(btn, (event: any) => {
// const node = event.target as Node;
// const button = node.getComponent(Button);
// console.log("button ============== ",button.clickEvents[0][`$args$`])
this._openSkillDetails(i);
},null,"45646")
}
this._init();
}
// 标签详情界面
private _openTagDetails(index : number) : void{
tgxUIMgr.inst.showUI(UITagDetails,null,null,index);
}
// 标签详情界面
private _openSkillDetails(index : number) : void{
tgxUIMgr.inst.showUI(UISkillDetails,null,null,index);
}
// 初始化
private _init() : void{
this._curHeroData = areanMgr.cfgMgr.HeroDatas.getData(this._curHeroId);
this._totalLocalSkinData = CommonFun.getInstance().getChooseHeroAllSkin(this._curHeroId,areanMgr.cfgMgr.SkinData.getAllData());
if(this._totalLocalSkinData.length > 0){
if(this._curOpenType === 1) this._curSkinId = this._totalLocalSkinData.find(v => v.isDefault === 1).id;
}
this._initScrollView();
this._updateSkinNameAndHeroName();
this._updateHeroIcon();
this._updatePrice();
this.updateCrystal();
this.updateDianQuan();
this._updateHeroIntroduceTypeActive()
}
/**
*
* @private
*/
private _openTotalScore() : void{
tgxUIMgr.inst.showUI(UITotalScore,null,null,{});
}
// 货币介绍
private _openCurrency(currency: string) {
let layout: Layout_UIHero = this.layout as Layout_UIHero;
let _pos = layout.btnCrystal.node.getComponent(UITransform).convertToWorldSpaceAR(v3(0,0,0));
let t = layout.btnCrystal.node.position
let _pos2 = layout.btnCrystal.node.getComponent(UITransform).convertToWorldSpaceAR(v3(t.x,t.y,0));
// console.log("_pos ==== ",_pos,_pos2);
let vis = view.getVisibleSize();
let data = {
currencyId : 1,
pos : v3(_pos.x - vis.width/2, _pos.y - vis.height/2, 0),
}
tgxUIMgr.inst.showUI(UICurrencyTips,null,null,data);
}
// 更新水晶数量
public updateCrystal() : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
layout.crystalCount.string = `${this._userInfo.coin}`;
}
// 更新水晶数量
public updateDianQuan() : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
layout.quanCount.string = `${this._userInfo.coin}`;
}
// 打开充值界面
private _openRechargeLayer() : void{
}
// 展示海报
private _showHaiBao() : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
}
// 全屏展示
private _updateFullScreen(isFullScreen : boolean) : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
if (this._isFullScreen === isFullScreen) return;
this._isFullScreen = isFullScreen;
layout.topNode.active = !isFullScreen;
layout.midNode.getChildByName("smallCurrency2").active = !isFullScreen;
layout.midNode.getChildByName("btnNode").active = !isFullScreen;
layout.bottomNode.active = !isFullScreen;
let sc : number = isFullScreen ? 1.5 : 1;
layout.midNode.getChildByName("heroIcon").scale = v3(sc, sc, sc);
}
// 更新皮肤名称和英雄名称
private _updateSkinNameAndHeroName() : void{
let skinData : ISkinCfg = areanMgr.cfgMgr.SkinData.getData(this._curSkinId);
let layout: Layout_UIHero = this.layout as Layout_UIHero;
layout.skinName.string = skinData.name;
layout.heroName.string = this._curHeroData.name;
}
// 更新英雄信息
private _updateHeroIcon() : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
let sp : SpriteFrame = resLoader.getSpriteFrame(`res/Image/SkinIcon/skinIcon_${this._curSkinId}`,ModuleDef.Arean);
if(sp) layout.heroIcon.getComponent(Sprite).spriteFrame = sp;
}
// 更新pageView
private _updateHeroView(arrow : string) : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
let heroData : IHeroCfg[] = areanMgr.cfgMgr.HeroDatas.getAllData();
let len : number = heroData.length;
let getHeroIndex = ()=>{
for(let i = 0; i < len; i++){
if(heroData[i].id == this._curHeroId) return i;
}
return 0;
}
let tmpIndex : number = getHeroIndex();
if(arrow == "left"){
tmpIndex--;
if(tmpIndex < 0) tmpIndex = len - 1;
}else{
tmpIndex++;
if(tmpIndex > len - 1) tmpIndex = 0;
}
this._curHeroId = heroData[tmpIndex].id;
this._init();
// this._curHeroData = heroData[tmpIndex];
// if(this._totalLocalSkinData.length > 0){
// this._curSkinId = this._totalLocalSkinData.find(v => v.isDefault === 1).id;
// }
// this._updateSkinNameAndHeroName()
// this._updateHeroIcon();
// this._initScrollView();
// this._clickSkinCallBack(skinData[tmpIndex].id);
// layout.skinScrollView.scrollToOffset(v2(tmpIndex * 200, 0), 0.5, true);
}
// 购买英雄
private _buyHero(currency : string) : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
}
private _updatePrice() : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
// @ts-ignore
let showPrice = this._userInfo.skin.includes(this._curSkinId);
let skinData : ISkinCfg = areanMgr.cfgMgr.SkinData.getData(this._curSkinId);
if(skinData.isDefault){
// @ts-ignore
let haveHero = this._userInfo.hero.includes(this._curHeroId);
layout.midNode.getChildByName("smallCurrency2").active = !haveHero;
if(!haveHero){
let heroData : IHeroCfg = areanMgr.cfgMgr.HeroDatas.getData(this._curHeroId);
// TODO 测试数据
this.updateCrystalPrice(1);
this.updateDianQuanPrice(2);
}
}else{
// @ts-ignore
let haveSkin = this._userInfo.skin.includes(this._curSkinId);
layout.midNode.getChildByName("smallCurrency2").active = !haveSkin;
if(!haveSkin){
let skinData : ISkinCfg = areanMgr.cfgMgr.SkinData.getData(this._curSkinId);
this.updateCrystalPrice(skinData.crystalPrice);
this.updateDianQuanPrice(skinData.ticketingPrice);
}
}
}
// 更新晶石价格
public updateCrystalPrice(value : number) : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
if(value && value > 0){
layout.crystalCountBuy.string = `${value}`;
}else{
layout.crystalCountBuy.node.active = false;
}
}
// 更新点券价格
public updateDianQuanPrice(value : number) : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
if(value && value > 0){
layout.quanCountBuy.string = `${value}`;
}else{
layout.quanCountBuy.node.active = false;
}
}
// 更新英雄介绍类型显示
private _updateHeroIntroduceTypeActive() : void{
let skinData : ISkinCfg = areanMgr.cfgMgr.SkinData.getData(this._curSkinId);
let layout: Layout_UIHero = this.layout as Layout_UIHero;
// @ts-ignore
this._isHaveCurSkin = this._userInfo.skin.includes(this._curSkinId);
let defaultHero = skinData.isDefault === 1;
layout.heroIntroduceType1.active = defaultHero;
layout.heroIntroduceType2.active = !defaultHero;
if(defaultHero){
this._updateHeroIntroduceType1();
}else{
this._updateHeroIntroduceType2();
}
this._updateHeroIcon();
}
// 更新英雄介绍内容
private _updateHeroIntroduceType1() : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
let node : Node = layout.heroIntroduceType1;
}
// 更新英雄介绍内容
private _updateHeroIntroduceType2() : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
let node : Node = layout.heroIntroduceType2;
let des = ["语音表现","音效表现","特效彩蛋"];
let skinData = areanMgr.cfgMgr.SkinData.getData(this._curSkinId);
for(let i = 1; i < 4; i++){
let element : Node = node.getChildByName("attrNode").getChildByName(`attr_${i}`).getChildByName("node");
let icon : Node = element.getChildByName("icon");
let sp: SpriteFrame = resLoader.getSpriteFrame(`res/Image/SkinIcon/skinIcon_${i}`, ModuleDef.Arean);
if (sp) icon.getComponent(Sprite).spriteFrame = sp;
let label : Label = element.getChildByName("lab").getComponent(Label);
label.string = des[i - 1];
}
node.getChildByName("heroAtrrLabel").getComponent(Label).string = skinData.desc;
node.getChildByName("collectionNode").getChildByName("count").getComponent(Label).string = `${skinData.collectionScore}`;
}
// 初始化pageView
private _initScrollView() : void{
let layout: Layout_UIHero = this.layout as Layout_UIHero;
layout.skinScrollView.content.destroyAllChildren();
let skinData : ISkinCfg[] = this._totalLocalSkinData;
let count : number = skinData.length;
for (let i = 0; i < count; i++) {
let element : Node = instantiate(layout.cell);
let data = skinData[i];
element.active = true;
layout.skinScrollView.content.addChild(element);
// @ts-ignore
let isHave = this._userInfo.skin.includes(data.id);
element.getComponent(HeroScrollCell).setData(data,isHave,this._clickSkinCallBack.bind(this));
}
}
// 英雄列表点击回调
private _clickSkinCallBack(heroId : number) : void{
console.log("点击的皮肤id === ",heroId);
this._curSkinId = heroId;
let _skinIndex = this._checkCurSkinIndex();
if(this._curSkinIndex == _skinIndex) return;
this._curSkinIndex = _skinIndex;
let children : Node[] = this.layout.skinScrollView.content.children;
let len : number = children.length;
for (let i = 0; i < len; i++) {
// if(i === 0) continue;
let sc = children[i].getComponent(HeroScrollCell);
sc.updateChooseActive(sc.data.id == heroId);
}
this._updateHeroIntroduceTypeActive();
this._updatePrice();
this._updateSkinNameAndHeroName();
}
// 计算当前的索引
private _checkCurSkinIndex() : number{
let skinData = areanMgr.cfgMgr.SkinData.getAllData();
let len : number = skinData.length;
for (let i = 0; i < len; i++) {
let element = skinData[i];
if(element.id == this._curSkinId){
return i;
}
}
return null;
}
}