import { _decorator, Component, Node, Animation } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('MenuBtn')
export class MenuBtn extends Component {

    @property({ type: Node })
    public out: Node | null = null;
    @property({ type: Node })
    public in: Node | null = null;

    @property({ type: Node })
    public btnIn: Node | null = null;
    @property({ type: Node })
    public btnOut: Node | null = null;
    @property({ type: Node })
    public outBuild: Node | null = null;

    @property({ type: Node })
    public mask: Node | null = null;



    onBtnInClicked() {
        this.mask.setPosition(this.btnIn.getPosition());
        this.mask.getChildByName("mask").active = true;
        this.mask.getChildByName("MaskAnim").getComponent(Animation).play("mask2");
        setTimeout(() => {
            this.mask.getChildByName("MaskAnim").getComponent(Animation).play("mask");
            this.out.active = false;
            this.in.active = true;
            this.btnIn.active = false;
            this.btnOut.active = true;
            this.mask.getChildByName("mask").active = false;
        }, 800);
    }

    
    onBtnInClicked2() {
        this.mask.setPosition(0,0,0);
        this.mask.getChildByName("mask").active = true;
        this.mask.getChildByName("MaskAnim").getComponent(Animation).play("mask2");
        setTimeout(() => {
            this.mask.getChildByName("MaskAnim").getComponent(Animation).play("mask");
            this.out.active = false;
            this.in.active = true;
            this.btnIn.active = false;
            this.btnOut.active = true;
            this.mask.getChildByName("mask").active = false;
        }, 800);
    }

    onBtnOutClicked() {
        this.mask.setPosition(this.btnOut.getPosition());
        this.mask.getChildByName("mask").active = true;
        this.mask.getChildByName("MaskAnim").getComponent(Animation).play("mask2");
        setTimeout(() => {
            this.mask.getChildByName("MaskAnim").getComponent(Animation).play("mask");
            this.in.active = false;
            this.out.active = true;
            this.btnOut.active = false;
            this.btnIn.active = true;
            this.mask.getChildByName("mask").active = false;
        }, 800);
    }

    onBtnOutClicked2() {
        this.mask.setPosition(this.outBuild.getPosition());
        this.mask.getChildByName("mask").active = true;
        this.mask.getChildByName("MaskAnim").getComponent(Animation).play("mask2");
        setTimeout(() => {
            this.mask.getChildByName("MaskAnim").getComponent(Animation).play("mask");
            this.in.active = false;
            this.out.active = true;
            this.btnOut.active = false;
            this.btnIn.active = true;
            this.mask.getChildByName("mask").active = false;
        }, 800);
    }





}