b23_zuma/assets/script/ui/TeamUI.ts

/** @format */
import {BaseUI} from './BaseUI'
import {Data, Mgr} from '../GameControl'
import {ccUtils} from '../utils/ccUtils'
import {list, node, observer, render} from '../mobx/observer'
import {msgCmd} from '../proto/msg_cmd'
import {i18nLabel} from '../uiutils/i18nLabel'
import List from '../uiutils/List'
import {UI} from '../enums/UI'
import {card} from '../proto/typedef'
import {GOODS, LANGUAGE_TYPE, PROFESSION} from '../enums/Enum'
import {ICard, ICardDebris, IRole} from '../interface/GlobalInterface'
import {SOUND} from '../enums/Sound'
import {RoleQualityConfig} from '../config/RoleQualityConfig'
import {RoleConfig} from '../config/RoleConfig'

const {ccclass, property} = cc._decorator

enum ToggleType {
    role = 0,
    card = 1,
}

@ccclass
@observer
export class TeamUI extends BaseUI {
    toggleIndex: ToggleType = ToggleType.role
    @list('roleList')
    roleList: List
    @list('cardList')
    cardList: List
    @node('touchSpine')
    touchSpine: cc.Node
    @node('touchCard')
    touchCard: cc.Node
    @node('guidePrevent')
    guidePrevent: cc.Node
    @node('guide')
    guide: cc.Node
    @node('levelGuide')
    levelGuide: cc.Node
    @node('cardGuide')
    cardGuide: cc.Node
    teamLock: boolean[] = []
    cardLock: boolean[] = []

    touchStart: boolean = false
    touchMoveStart: boolean = false
    touchStartPos: cc.Vec2
    roleNodes: cc.Node[] = []
    cardNodes: cc.Node[] = []
    curList: List
    curMoveIRole: IRole
    curMoveICard: ICard
    cardDebris: ICardDebris[] = []
    canMergeCardDebris: ICardDebris[] = []
    touchSkeleton: sp.Skeleton
    isUserGuide: boolean = false
    curProfessionChoose: PROFESSION = PROFESSION.all
    roles: IRole[] = []

    onLoad() {
        this.touchSkeleton = cc.find('spine', this.touchSpine).getComponent(sp.Skeleton)
    }

    onShow(args, fromUI: number) {
        Mgr.ui.showTop(this, [GOODS.coin, GOODS.diamond])
        Mgr.ui.showFoot(this)
        this.toggleIndex = ToggleType.role
        this.initToggle()
        this.touchNodeReset()
        this.onFreshRole()
        //this.onFreshCard()
        //一级引导，拖入上阵
        let showOneGuide = Mgr.global.tryShowUserGuide(['1_3'])
        //打完第一关后引导，第二个英雄图标
        this.levelGuide.active = false
        if (Data.user.roles.length >= 2) {
            this.scheduleOnce(() => {
                this.levelGuide.active = Mgr.global.tryShowUserGuide(['2_2'], () => {
                    Mgr.ui.show(UI.RoleUI, Data.user.roles[1])
                })
            })
        }
        //卡牌技能引导
        if (Data.user.cardDebris.length > 0 && Data.user.cardDebris[0].cfg.num <= Data.user.cardDebris[0].num) {
            this.cardGuide['cardDebris'] = Data.user.cardDebris[0]
            this.cardGuide.active = Mgr.global.tryShowUserGuide(['24_3', '24_4'])
        }
        this.isUserGuide = showOneGuide
        this.guidePrevent.active = showOneGuide
        this.guide.active = showOneGuide
        if (showOneGuide) {
            let finger = cc.find('guide_finger', this.guide)
            finger.stopAllActions()
            let startPos = cc.v2(381, 110)
            finger.setPosition(startPos)
            let endPos = cc.v2(startPos.x - 1000, startPos.y)
            let height = 50 // 抛物线高度
            let bezier = [startPos, cc.v2(startPos.x - 500, startPos.y + height), endPos]
            // 创建一个缓动动作
            cc.tween(finger)
                .then(cc.fadeIn(0.5))
                .then(cc.bezierTo(2, bezier))
                .then(cc.fadeOut(0.5))
                .delay(2)
                .call(() => {
                    finger.setPosition(startPos)
                })
                .union()
                .repeatForever()
                .start()
        }
        this.showBreakRed()
    }

    onHide(): any {
        Mgr.event.removeAll(this)
    }

    onTop(preID: number, ...args) {
        this.showBreakRed()
    }

    initTeam() {
        //显示英雄
        this.teamLock.length = 0
        let roleNodes = cc.find('roles', this.node).children
        this.roleNodes = roleNodes
        for (let i = 0; i < roleNodes.length; i++) {
            let node = roleNodes[i]
            let lockLevel = Data.user.roleSlotLv
            let role = cc.find('role', node)
            let iRole = Data.user.teamRole[PROFESSION[node.name] - 1]
            role.active = iRole && iRole.hero.sid != ''
            let isLock = Data.user.level < lockLevel[i]
            let canAdd = !role.active && !isLock
            cc.find('lock', node).active = isLock
            cc.find('canAdd', node).active = canAdd
            if (isLock) {
                let lb = cc.find('lock/lb', node).getComponent(i18nLabel)
                lb.setParamByIndex(lockLevel[i].toString(), 0)
            }
            if (canAdd) {
                let addAni = cc.find('canAdd/add_1', node)
                addAni.stopAllActions()
                addAni.opacity = 255
                addAni.runAction(cc.sequence(cc.fadeTo(1, 100), cc.fadeTo(1, 255)).repeatForever())
            }
            this.teamLock.push(isLock)
            if (role.active) {
                //ccUtils.setLabel('lv.' + iRole.hero.lv, role, 'lv')
                Mgr.global.initRoleSpine(iRole, role, 'spine')
                //ccUtils.instantChildren(cc.find('stars/star', role), iRole.grade)
            }
            node['iRole'] = iRole
        }
        ccUtils.setLabel(Mgr.global.getPowerString(), this.node, 'power')
    }

    initTeamCard() {
        //显示技能
        this.cardLock.length = 0
        let cardsNodes = ccUtils.instantChildren(cc.find('skills/skill', this.node), Data.user.maxFightCardNum)
        this.cardNodes = cardsNodes
        for (let i = 0; i < Data.user.maxFightCardNum; i++) {
            let node = cardsNodes[i]
            let lockLevel = Data.user.cardSlotLv
            let card = cc.find('card', node)
            let iCard = Data.user.teamCard[i]
            card.active = iCard && +iCard.card.sid > 0
            let isLock = Data.user.level < lockLevel[i]
            cc.find('lock', node).active = isLock
            if (isLock) {
                let lb = cc.find('lock/lb', node).getComponent(i18nLabel)
                lb.setParamByIndex(lockLevel[i].toString(), 0)
            }
            if (card.active) Mgr.global.initCardItem(iCard, card, this)
            node['iCard'] = iCard
        }
        //grocery_buy
        ccUtils.setLabel(Mgr.global.getPowerString(), this.node, 'power')
    }

    initToggle() {
        ccUtils.setTogglesChecked(this.toggleIndex, this.node, 'toggles')
        ccUtils.setTogglesChecked(this.curProfessionChoose, this.roleList.node, 'toggles')
        this.roleList.node.active = this.toggleIndex == ToggleType.role
        this.cardList.node.active = this.toggleIndex == ToggleType.card
        this.curList = this.toggleIndex == ToggleType.role ? this.roleList : this.cardList
        //装备需要解锁才能开启
        let equipToggleNode = cc.find('toggles/toggle2', this.node)
        ccUtils.setTogglesInteract(false, equipToggleNode)
        cc.find('lock', equipToggleNode).active = true
    }

    initRoleListItem(node: cc.Node, index: number) {
        let iRole = this.roles[index]
        this.loadTexImg(`TeamUI/card_bottom_${iRole.cfg.quality}`, node, 'card_bottom')
        ccUtils.setLabel(iRole.cfg.name, node, 'name')
        Mgr.global.initRoleSpine(iRole, node, 'spine')
        let icon_battle = cc.find('icon_battle', node)
        icon_battle.active = Mgr.goods.roleIsUp(iRole)
        //升级需要资源
        cc.find('red_dot', node).active = icon_battle.active && Mgr.goods.checkRoleLevelUpNeed(iRole).canUp
        node['iRole'] = iRole
        this.initNodeUpTouch(node)
        let nextRoleConfig = RoleConfig[iRole.cfg.ID + 1]
        ccUtils.setLabel(nextRoleConfig ? `${iRole.hero.num}/${nextRoleConfig.consume}` : 'MAX', node, 'numPb/num')
        ccUtils.setProgress(nextRoleConfig ? iRole.hero.num / nextRoleConfig.consume : 1, node, 'numPb/pb')
        ccUtils.setLabel(`${iRole.hero.lv}`, node, 'lv')
        cc.find('arrow_1', node).active = Mgr.goods.checkRoleBreakNeed(iRole).canUp
        cc.tween(cc.find('arrow_1', node))
            .then(cc.tween().to(1, {y: -93}).to(1, {y: -103}))
            .repeatForever()
            .start()
    }

    initCardListItem(node: cc.Node, index: number) {
        let isDebris = false
        let iCard = null
        let cardDebris = null
        if (index < this.canMergeCardDebris.length) {
            cardDebris = this.canMergeCardDebris[index]
            isDebris = true
        } else if (
            index >= this.canMergeCardDebris.length &&
            index < Data.user.cards.length + this.canMergeCardDebris.length
        ) {
            iCard = Data.user.cards[index - this.canMergeCardDebris.length]
            isDebris = false
        } else if (index >= Data.user.cards.length + this.canMergeCardDebris.length) {
            cardDebris = this.cardDebris[index - Data.user.cards.length - this.canMergeCardDebris.length]
            isDebris = true
        }
        let itemParent = cc.find('itemParent', node)
        let debris = cc.find('debris', node)
        debris.active = isDebris
        if (isDebris) {
            let cardDebrisNode = Mgr.global.initCardDebrisItem(cardDebris, itemParent, this)
            cc.find('debris', cardDebrisNode).active = false
            let isMax = cardDebris.num >= cardDebris.cfg.num
            let conflate = cc.find('conflate', debris)
            conflate.active = isMax
            conflate.stopAllActions()
            conflate.opacity = 0
            cc.tween(conflate)
                .then(cc.sequence(cc.fadeIn(0.5), cc.fadeOut(0.5)))
                .repeatForever()
                .start()
            cc.find('pb_all', debris).active = isMax
            cc.find('pb', debris).active = !isMax
            ccUtils.setLabel(`${cardDebris.num} / ${cardDebris.cfg.num}`, debris, 'num')
            ccUtils.setProgress(cardDebris.num / cardDebris.cfg.num, debris, 'pb')
        } else {
            Mgr.global.initCardItem(iCard, itemParent, this)
        }
        let icon_battle = cc.find('icon_battle', node)
        icon_battle.active = !isDebris && Mgr.goods.cardIsUp(iCard)
        //升级需要资源
        cc.find('red_dot', node).active =
            icon_battle.active &&
            iCard &&
            (Mgr.goods.checkCardLevelUpNeed(iCard).canUp || Mgr.goods.checkCardBreakNeed(iCard).canUp)
        node['iCard'] = iCard
        node['cardDebris'] = cardDebris
        node['isDebris'] = isDebris
        this.initNodeUpTouch(node, isDebris)
    }

    initNodeUpTouch(node, noTouch?: boolean) {
        node.off(cc.Node.EventType.TOUCH_START, this.onTouchUpStart, this)
        node.off(cc.Node.EventType.TOUCH_MOVE, this.onTouchUpMove, this)
        node.off(cc.Node.EventType.TOUCH_END, this.onTouchUpEnd, this)
        node.off(cc.Node.EventType.TOUCH_CANCEL, this.onTouchUpCancel, this)
        node.on(cc.Node.EventType.TOUCH_START, this.onTouchUpStart, this)
        node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchUpMove, this)
        node.on(cc.Node.EventType.TOUCH_END, this.onTouchUpEnd, this)
        node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchUpCancel, this)
    }

    touchNodeReset() {
        this.touchStart = false
        this.touchMoveStart = false
        this.touchSpine.y = -1500
        this.touchCard.y = -1500
        this.curList.scrollView.enabled = true
    }

    showBreakRed() {
        //有英雄突破
        cc.find('btn_break/red_dot', this.node).active = Data.user.roles.some(
            role => Mgr.goods.checkRoleBreakNeed(role).canUp,
        )
    }

    //触发事件=======================================
    @render
    onFreshRole() {
        let rolesDirty = Data.user.rolesDirty
        this.initTeam()
        this.roles = Data.user.roles.filter(
            role => role.cfg.profession == this.curProfessionChoose || !this.curProfessionChoose,
        )
        this.roleList.numItems = this.roles.length
        cc.find('roleList/lb', this.node).active = Data.user.roles.length == 0
    }

    @render
    onFreshCard() {
        return
        let cardsDirty = Data.user.cardsDirty
        this.initTeamCard()
        this.cardDebris.length = 0
        this.canMergeCardDebris.length = 0
        Data.user.cardDebris.forEach(item => {
            if (!Data.user.cards.find(card => card.cfg.ID - card.cfg.quality + 1 == item.cfg.card)) {
                if (item.num >= item.cfg.num) {
                    this.canMergeCardDebris.push(item)
                } else {
                    this.cardDebris.push(item)
                }
            }
        })
        Mgr.goods.sortCardDebris(this.cardDebris)
        Mgr.goods.sortCardDebris(this.canMergeCardDebris)
        cc.find('cardList/lb', this.node).active = Data.user.cards.length + Data.user.cardDebris.length == 0
        this.cardList.numItems = Data.user.cards.length + this.cardDebris.length + this.canMergeCardDebris.length
    }

    // 点击事件=======================================
    onToggleClick(e) {
        Mgr.audio.playSFX(SOUND.toggleClick)
        this.toggleIndex = e.target.parent.children.indexOf(e.target)
        this.initToggle()
    }

    onProfessionToggleClick(e) {
        Mgr.audio.playSFX(SOUND.toggleClick)
        this.curProfessionChoose = PROFESSION[e.target.name as string]
        this.onFreshRole()
    }

    onBreakClick() {
        Mgr.ui.show(UI.RoleBreakUI)
    }

    onTeamRoleClick(e) {
        if (e.target['iRole']) {
            Mgr.ui.show(UI.RoleUI, e.target['iRole'])
        }
    }

    onCardMergeClick(e) {
        this.cardGuide.active = false
        if (e.target['cardDebris']) {
            let cardDebris: ICardDebris = e.target['cardDebris']
            if (cardDebris.num >= cardDebris.cfg.num) {
                Mgr.net.send(msgCmd.cmd_debris_merge, {id: cardDebris.cfg.ID})
            }
        }
    }

    onTouchUpStart(e) {
        let node = e.target
        if (this.levelGuide.active) {
            return
        }
        if (this.touchMoveStart) return
        this.touchStart = true
        if (this.toggleIndex) {
            if (!node['isDebris']) {
                Mgr.global.initCardItem(node['iCard'], this.touchCard, this)
                this.curMoveICard = node['iCard']
            }
        } else {
            this.curMoveIRole = node['iRole']
        }
        this.touchStartPos = ccUtils.convertWorldPosToNode(this.node, ccUtils.convertTouchPosToWorld(e))
    }

    onTouchUpMove(e) {
        if (this.touchStart) {
            let node = e.target
            let pos = ccUtils.convertWorldPosToNode(this.node, ccUtils.convertTouchPosToWorld(e))
            if (pos.y > this.touchStartPos.y + e.target.height / 2 && !this.touchMoveStart) {
                this.curList.scrollView.enabled = false
                this.touchMoveStart = true
            }
            if (this.touchMoveStart) {
                if (this.toggleIndex) {
                    if (!node['isDebris']) {
                        this.touchCard.setPosition(cc.v3(pos))
                    }
                } else {
                    this.touchSpine.setPosition(cc.v3(pos))
                    if (
                        !this.touchSkeleton.skeletonData ||
                        this.touchSkeleton.skeletonData.name != node['iRole'].cfg.url
                    ) {
                        this.touchSkeleton.skeletonData = Data.main.roleSpineMap.get(node['iRole'].cfg.url)
                    }
                }
            }
        }
    }

    onTouchUpEnd(e) {
        if (!this.touchStart) return
        if (this.isUserGuide) return
        if (!this.touchMoveStart) {
            let pos = ccUtils.convertWorldPosToNode(this.node, ccUtils.convertTouchPosToWorld(e))
            if (pos.sub(this.touchStartPos).len() < 1) {
                if (this.toggleIndex) {
                    if (e.target['isDebris']) {
                        let cardDebris: ICardDebris = e.target['cardDebris']
                        if (cardDebris.num >= cardDebris.cfg.num) {
                            Mgr.net.send(msgCmd.cmd_debris_merge, {id: cardDebris.cfg.ID})
                        }
                    } else {
                    }
                } else {
                    Mgr.ui.show(UI.RoleUI, e.target['iRole'])
                }
            }
        }
        this.touchNodeReset()
    }

    onTouchUpCancel(e) {
        if (!this.touchStart) return
        if (this.toggleIndex && e.target['isDebris']) return
        this.touchNodeReset()
        let nodes = this.toggleIndex == ToggleType.role ? this.roleNodes : this.cardNodes
        for (let i = 0; i < nodes.length; i++) {
            if (ccUtils.containsP(nodes[i], ccUtils.convertTouchPosToWorld(e))) {
                console.log('上阵', i)
                if (this.isUserGuide) {
                    if (i != 0) {
                        return
                    } else {
                        this.guidePrevent.active = false
                        this.guide.active = false
                        //一级引导，回退主界面
                        Mgr.global.tryShowUserGuide(['1_4'])
                    }
                }
                if (cc.find('lock', nodes[i]).active) {
                    Mgr.ui.tip(LANGUAGE_TYPE.slotLock)
                    return
                }
                if (this.toggleIndex == ToggleType.role) {
                    if (Data.user.teamRole.find(v => v && v.hero.sid == this.curMoveIRole.hero.sid)) {
                        Mgr.ui.tip(LANGUAGE_TYPE.samePos)
                        return
                    }
                    if (PROFESSION[nodes[i].name] != this.curMoveIRole.cfg.profession) {
                        Mgr.ui.tip(LANGUAGE_TYPE.professionError)
                        return
                    }
                } else {
                    if (Data.user.teamCard.find(v => v && v.card.sid == this.curMoveICard.card.sid)) {
                        Mgr.ui.tip(LANGUAGE_TYPE.samePos)
                        return
                    }
                }

                Mgr.net.send(msgCmd.cmd_embattle_battle, {
                    sid: this.toggleIndex == ToggleType.role ? this.curMoveIRole.hero.sid : this.curMoveICard.card.sid,
                    pos: PROFESSION[nodes[i].name],
                    skill: this.toggleIndex == ToggleType.card,
                })
                break
            }
        }
    }
}