slot_selfdev_client/assets/SubGame/slotMousebundle/script/MouseBetView.ts

import Global from "../../../SubGamePublic/PG_Public/src/GlobalScript";
import { MouseConst } from "./MouseConst";

const { ccclass, property } = cc._decorator;

class ItemObj {
    node: cc.Node;
    value: number;
    y: number;

    constructor(node: cc.Node, value: number, y: number) {
        this.node = node;
        this.value = value;
        this.y = y;
    }
}

@ccclass
export default class MouseBetView extends cc.Component {

    @property({ type: cc.Node, displayName: '预制node' })
    pre_item: cc.Node = null;

    @property({ type: cc.Label, displayName: '自己余额' })
    label_myBalance: cc.Label = null;
    @property({ type: cc.Label, displayName: '下注金额' })
    label_bet: cc.Label = null;

    @property({ type: cc.ScrollView, displayName: '底注' })
    scroll_diZhu: cc.ScrollView = null;
    @property({ type: cc.ScrollView, displayName: '翻倍等级' })
    scroll_multiple: cc.ScrollView = null;
    @property({ type: cc.ScrollView, displayName: '实际下注' })
    scroll_bet: cc.ScrollView = null;

    @property({ type: cc.Label, displayName: '基础等级' })
    label_multipleBase: cc.Label = null;

    @property({ type: cc.Label, displayName: '赢分' })
    label_winScore: cc.Label = null;

    @property(cc.Node)
    node_di: cc.Node = null;
    @property(cc.Node)
    node_bg: cc.Node = null;

    @property(cc.Node)
    node_mask: cc.Node = null;

    @property({ type: [cc.Button] })
    btn_bottom: cc.Button[] = [];

    /** 底注 */
    diZhuArr: number[] = [];
    diZhuObjArr: ItemObj[] = [];
    /** 翻倍等级 */
    multipleLevel: number = 0;
    multipleLevelObjArr: ItemObj[] = [];
    /** 实际下注  */
    betArr: number[] = [];
    betObjArr: ItemObj[] = [];
    /** 基础翻倍 */
    multipleBase: number = 0;

    /** 当前底注 */
    curDiZhu: number = 0;
    /** 当前翻倍等级 */
    curMultipleLevel: number = 1;
    /** 当前选择的实际下注 */
    curBottomBet: number = 0;
    /** 当前底注下标 */
    curDiZhuIdx: number = 0;

    cb: Function = null;

    startY: number = 0;
    endY: number = 0;

    readonly AnimaTime: number = 0.2;

    /**
     * 初始化
     * @param betArr 实际下注额
     * @param diZhu 底注
     * @param multipleLevel 翻倍等级
     * @param multipleBase 基础翻倍
     */
    initBetView(diZhu: number[], multipleLevel: number, multipleBase: number) {
        // 解决适配
        let widget = this.node_di.getComponent(cc.Widget);
        widget.updateAlignment();
        this.startY = this.node_di.y - this.node_di.height;
        this.endY = this.node_di.y;
        widget.enabled = false;

        this.diZhuArr = diZhu;
        this.multipleLevel = multipleLevel;
        this.multipleBase = multipleBase;
        this.label_multipleBase.string = `${this.multipleBase}`;
        this.scroll_bet.node.on('scroll-ended', this.scrollBetEnd, this);
        this.scroll_diZhu.node.on('scroll-ended', this.scrollDiZhuEnd, this);
        this.scroll_multiple.node.on('scroll-ended', this.scrollMultipleEnd, this);

        this.scroll_bet.node.on(cc.Node.EventType.MOUSE_WHEEL, this.onMouseWheeL, this);
        this.scroll_diZhu.node.on(cc.Node.EventType.MOUSE_WHEEL, this.onMouseWheeL, this);
        this.scroll_multiple.node.on(cc.Node.EventType.MOUSE_WHEEL, this.onMouseWheeL, this);

        this.scroll_bet.node.on('scroll-began', this.scrollViewBegin, this);
        this.scroll_diZhu.node.on('scroll-began', this.scrollViewBegin, this);
        this.scroll_multiple.node.on('scroll-began', this.scrollViewBegin, this);

        let diZhuParent = this.scroll_diZhu.content;
        this.initNodeComp(2, diZhuParent, false, null, false, null, '', true);
        this.initNodeComp(this.diZhuArr.length, diZhuParent, false, this.diZhuArr, true, this.diZhuObjArr, 'scrollDiZhuEnd', false, true);
        this.initNodeComp(2, diZhuParent, false, null, false, null, '', false);

        let t_arr = [];
        for (let i = 0; i < this.multipleLevel; i++) { t_arr.push(i + 1); }
        let multipleParent = this.scroll_multiple.content;
        this.initNodeComp(2, multipleParent, false, null, false, null, '', true);
        this.initNodeComp(this.multipleLevel, multipleParent, false, t_arr, true, this.multipleLevelObjArr, 'scrollMultipleEnd', false);
        this.initNodeComp(2, multipleParent, false, null, false, null, '', false);

        this.initNodeComp(2, this.scroll_bet.content, true, null, false, null, '', true);
        this.initBetNode();
        this.initNodeComp(2, this.scroll_bet.content, true, null, false, null, '', false);
    }

    onShow(curBet: number, winScore: string, cb: Function) {
        this.node_bg.opacity = 0;
        // this.label_myBalance.string = `R$${(Global.instance.balanceTotal * my.ICON_MUTIPLE).toFixed(2)}`;
        this.label_myBalance.string = MouseConst.formatAmount(Global.instance.balanceTotal);
        this.curBottomBet = curBet;
        this.cb = cb;
        this.node_mask.opacity = 255;
        this.node_mask.active = true;
        this.node_di.y = this.startY;
        this.label_winScore.string = winScore;

        this.node.active = true;
        for (let i = 0; i < this.betObjArr.length; i++) {
            if (this.curBottomBet == this.betObjArr[i].value) {
                // 下一帧更新，当前帧更新不生效
                this.scheduleOnce(() => this.scroll_bet.content.y = this.betObjArr[i].y);
                break;
            }
        }
        this.updateDiZhuAndMultipleScroll();

        cc.tween(this.node_bg).to(this.AnimaTime, { opacity: 180 }).start();
        cc.tween(this.node_di)
            .to(this.AnimaTime, { y: this.endY })
            .call(() => {
                cc.tween(this.node_mask)
                    .to(0.2, { opacity: 0 })
                    .call(() => this.node_mask.active = false)
                    .start();
            })
            .start();
    }

    /**
     * 
     * @param length 长度
     * @param parent 父节点
     * @param isColor 更改颜色
     * @param value 值
     * @param isPush 放入对象数组
     * @param itemObj 对象数组
     * @param handler btn 回调方法
     * @param is__ 是否是杠
     */
    initNodeComp(length: number, parent: cc.Node, isColor: boolean, value: number[], isPush: boolean, itemObj: ItemObj[], handler: string, is__: boolean, isDiZhu: boolean = false) {
        let t_color = cc.color(255, 200, 36, 255);
        for (let i = 0; i < length; i++) {
            let t_node = cc.instantiate(this.pre_item);
            parent.addChild(t_node);
            let child = t_node.getChildByName('label');
            let l = child.getComponent(cc.Label);
            if (isColor) child.color = t_color;
            if (value) {
                if (isDiZhu) {
                    // l.string = `R$${(value[i] * 0.01).toFixed(2)}`;
                    l.string = MouseConst.formatAmount(value[i]);
                } else {
                    l.string = `${value[i]}`;
                }
            } else {
                if (is__) {
                    l.string = i == 0 ? '' : '-';
                } else {
                    l.string = i == 0 ? '-' : '';
                }
            }
            t_node.active = true;
            if (isPush) {
                itemObj.push(new ItemObj(t_node, value[i], i * this.pre_item.height));
                let clickEventHandler = new cc.Component.EventHandler();
                clickEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
                clickEventHandler.component = "MouseBetView";// 这个是代码文件名
                clickEventHandler.handler = handler;
                clickEventHandler.customEventData = `${i}`;
                let button = t_node.getComponent(cc.Button);
                button.clickEvents.push(clickEventHandler);
            }
        }
    }

    initBetNode() {
        let idx = 0;
        let betArray = [];
        for (let i = 0; i < this.diZhuObjArr.length; i++) {
            for (let j = 0; j < this.multipleLevelObjArr.length; j++) {
                let bet = this.diZhuObjArr[i].value * this.multipleLevelObjArr[j].value * this.multipleBase;
                betArray.push(bet);
            }
        }
        this.betArr = Array.from(new Set(betArray));
        this.betArr.sort((a, b) => {
            return a - b;
        });
        this.betArr.forEach((bet, index) => {
            let t_node = cc.instantiate(this.pre_item);
            this.scroll_bet.content.addChild(t_node);
            let child = t_node.getChildByName('label');
            child.color = cc.color(255, 200, 36, 255);
            let l = child.getComponent(cc.Label);
            // l.string = `R$${(bet * 0.01).toFixed(2)}`;
            l.string = MouseConst.formatAmount(bet);
            this.betArr.push(bet);
            this.betObjArr.push(new ItemObj(t_node, bet, idx * this.pre_item.height));
            t_node.active = true;

            let clickEventHandler = new cc.Component.EventHandler();
            clickEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
            clickEventHandler.component = "MouseBetView";// 这个是代码文件名
            clickEventHandler.handler = "scrollBetEnd";
            clickEventHandler.customEventData = `${idx}`;
            let button = t_node.getComponent(cc.Button);
            button.clickEvents.push(clickEventHandler);

            idx++;
        });
    }

    /** 触摸开始 */
    scrollViewBegin() {
        this.btn_bottom.forEach((v, i) => v.interactable = false);
    }

    /**
     *  点击和滚动都进
     *  t_idx有就是点击进的
     */
    scrollBetEnd(e, t_idx) {
        cc.Tween.stopAllByTarget(this.scroll_bet.content);
        if (t_idx) this.btn_bottom.forEach((v, i) => v.interactable = false);
        let idx = t_idx ? t_idx : Math.round(this.scroll_bet.content.y / this.pre_item.height);

        cc.tween(this.scroll_bet.content)
            .to(0.1, { y: this.betObjArr[idx].y })
            .call(() => {
                this.curBottomBet = this.betObjArr[idx].value;
                this.updateDiZhuAndMultipleScroll();
                this.btn_bottom.forEach((v, i) => v.interactable = true);
            })
            .start();
    }

    scrollDiZhuEnd(e, t_idx) {
        cc.Tween.stopAllByTarget(this.scroll_diZhu.content);
        if (t_idx) this.btn_bottom.forEach((v, i) => v.interactable = false);
        let idx = t_idx ? t_idx : Math.round(this.scroll_diZhu.content.y / this.pre_item.height);
        cc.tween(this.scroll_diZhu.content)
            .to(0.1, { y: this.diZhuObjArr[idx].y })
            .call(() => {
                this.curDiZhu = this.diZhuObjArr[idx].value;
                this.curDiZhuIdx = idx;
                this.updateBottomBet();
                this.btn_bottom.forEach((v, i) => v.interactable = true);
            })
            .start();
    }

    scrollMultipleEnd(e, t_idx) {
        cc.Tween.stopAllByTarget(this.scroll_multiple.content);
        if (t_idx) this.btn_bottom.forEach((v, i) => v.interactable = false);
        let idx = t_idx ? t_idx : Math.round(this.scroll_multiple.content.y / this.pre_item.height);
        cc.tween(this.scroll_multiple.content)
            .to(0.1, { y: this.multipleLevelObjArr[idx].y })
            .call(() => {
                this.curMultipleLevel = this.multipleLevelObjArr[idx].value;
                this.updateBottomBet();
                this.btn_bottom.forEach((v, i) => v.interactable = true);
            })
            .start();
    }

    /** 更新底注和翻倍等级 */
    updateDiZhuAndMultipleScroll() {
        let v = this.curBottomBet / this.multipleBase;
        for (let i = 0; i < this.multipleLevelObjArr.length; i++) {
            for (let j = 0; j < this.diZhuArr.length; j++) {
                if (this.multipleLevelObjArr[i].value * this.diZhuArr[j] == v) {
                    cc.Tween.stopAllByTarget(this.scroll_multiple.content);
                    cc.Tween.stopAllByTarget(this.scroll_diZhu.content);
                    cc.tween(this.scroll_multiple.content)
                        .to(0.1, { y: this.multipleLevelObjArr[i].y })
                        .call(() => this.curMultipleLevel = this.multipleLevelObjArr[i].value)
                        .start();
                    cc.tween(this.scroll_diZhu.content)
                        .to(0.1, { y: this.diZhuObjArr[j].y })
                        .call(() => {
                            this.curDiZhu = this.diZhuObjArr[j].value;
                            this.curDiZhuIdx = j;
                        })
                        .start();
                    this.scheduleOnce(() => {
                        // this.label_bet.string = `R$${(this.curDiZhu * this.multipleBase * this.curMultipleLevel * my.ICON_MUTIPLE).toFixed(2)}`
                        this.label_bet.string = MouseConst.formatAmount(this.curDiZhu * this.multipleBase * this.curMultipleLevel);
                    }, 0.11);
                    return;
                }
            }
        }
    }

    /** 更新实际下注额 */
    updateBottomBet() {
        let v = this.curDiZhu * this.curMultipleLevel * this.multipleBase;
        for (let i = 0; i < this.betObjArr.length; i++) {
            if (this.betObjArr[i].value == v) {
                cc.Tween.stopAllByTarget(this.scroll_bet.content);
                cc.tween(this.scroll_bet.content)
                    .to(0.1, { y: this.betObjArr[i].y })
                    .call(() => {
                        this.curBottomBet = this.betObjArr[i].value;
                        // this.label_bet.string = `R$${(this.curDiZhu * this.multipleBase * this.curMultipleLevel * my.ICON_MUTIPLE).toFixed(2)}`;
                        this.label_bet.string = MouseConst.formatAmount(this.curDiZhu * this.multipleBase * this.curMultipleLevel);
                    })
                    .start();
                break;
            }
        }
    }

    onClickBtn(e, isSure) {
        cc.tween(this.node_di)
            .to(this.AnimaTime, { y: this.startY })
            .call(() => {
                cc.tween(this.node_bg)
                    .to(this.AnimaTime, { opacity: 0 })
                    .call(() => {
                        this.node.active = false;
                        if (isSure) this.cb?.(this.curBottomBet, this.curDiZhuIdx, this.curMultipleLevel - 1);
                    })
                    .start();
            })
            .start();
    }

    onCancel() {
        cc.tween(this.node_di)
            .to(this.AnimaTime, { y: this.startY })
            .call(() => {
                cc.tween(this.node_bg)
                    .to(this.AnimaTime, { opacity: 0 })
                    .call(() => {
                        this.node.active = false;
                    })
                    .start();
            })
            .start();
    }

    /** 最大下注 */
    onClickMaxBet() {
        this.btn_bottom.forEach((v, i) => v.interactable = false);
        this.curBottomBet = this.betObjArr[this.betObjArr.length - 1].value;
        this.updateDiZhuAndMultipleScroll();
        for (let i = 0; i < this.betObjArr.length; i++) {
            if (this.curBottomBet == this.betObjArr[i].value) {
                cc.Tween.stopAllByTarget(this.scroll_bet.content);
                cc.tween(this.scroll_bet.content)
                    .to(0.1, { y: this.betObjArr[i].y })
                    .call(() => this.btn_bottom.forEach((v, i) => v.interactable = true))
                    .start();
                break;
            }
        }
    }

    /** 鼠标滚轮监听 */
    onMouseWheeL() {
        this.btn_bottom.forEach((v, i) => v.interactable = false);
    }

    protected onDestroy(): void {
        // this.scroll_bet.node.off('scroll-ended', this.scrollBetEnd, this);
        // this.scroll_diZhu.node.off('scroll-ended', this.scrollDiZhuEnd, this);
        // this.scroll_multiple.node.off('scroll-ended', this.scrollMultipleEnd, this);
        // this.scroll_bet.node.off('scroll-began', this.scrollViewBegin, this);
        // this.scroll_diZhu.node.off('scroll-began', this.scrollViewBegin, this);
        // this.scroll_multiple.node.off('scroll-began', this.scrollViewBegin, this);
        // this.scroll_bet.node.off(cc.Node.EventType.MOUSE_WHEEL, this.onMouseWheeL, this);
        // this.scroll_diZhu.node.off(cc.Node.EventType.MOUSE_WHEEL, this.onMouseWheeL, this);
        // this.scroll_multiple.node.off(cc.Node.EventType.MOUSE_WHEEL, this.onMouseWheeL, this);
    }
}