airpg-front/assets/scripts/OptionsCtr.ts

import { _decorator, color, Color, Component, Label, Node, Sprite, tween, UIOpacity, Vec3 } from "cc"
import { processCtr } from "./socket/processCtr"
const { ccclass, property } = _decorator

@ccclass("OptionsCtr")
export class OptionsCtr extends Component {
    // 直接引用四个子节点
    @property({ type: Node })
    public optionNodes: Node[] = []

    selectedColor: Color = new Color(180, 173, 121) // B4AD79

    @property({ type: Sprite })
    selectedSprite: Sprite = null // 设置你想要的选中背景图

    @property({ type: Sprite })
    notSelectedSprite: Sprite = null // 设置你想要的选中背景图

    private votesOrgPos_x: number = -894
    private votesWidth = 890
    start() {}
    resetVotes() {
        for (let i = 0; i < 4; i++) {
            const vote: Node = this.optionNodes[i].getChildByName("votes").getChildByName("toupiaojindu")
            vote.active = false
            vote.getChildByName("votePannel_particle").active = false
            vote.setPosition(this.votesOrgPos_x, 0, 0)
        }
    }

    showVotes(num: number[], processCtr: processCtr) {
        let index = 0

        //获取投票范围,修改合适步长
        let scope: number = 10

        const maxValue = Math.max(...num)
        if (maxValue > 10 && maxValue < 100) {
            scope = 100
        } else if (maxValue > 99) {
            scope = 1000
        }

        for (let i = 0; i < 4; i++) {
            const vote: Node = this.optionNodes[i].getChildByName("votes").getChildByName("toupiaojindu")
            if (!vote.active || !vote.getChildByName("votePannel_particle").active) {
                vote.active = true
                vote.getChildByName("votePannel_particle").active = true
            }
            tween(vote)
                .to(1, {
                    position: new Vec3(this.votesOrgPos_x + (this.votesWidth / scope) * num[i], 0, 0)
                })
                .call(() => {
                    if (index === 3) {
                        processCtr.doneProcessing()
                    }
                    index++
                })
                .start()
        }
    }

    setOptions(options: string[]) {
        if (options.length !== 4) {
            console.warn("Expected 4 options!")
            return
        }

        //显示前先制空lebel
        for (let i = 0; i < 4; i++) {
            const nodeLabel = this.optionNodes[i].getChildByName("text_option").getComponent(Label)
            nodeLabel.string = ""
            this.optionNodes[i].getComponent(UIOpacity).opacity = 255
        }

        tween(this.node.getComponent(UIOpacity))
            .to(1, { opacity: 255 })
            .call(() => {
                for (let i = 0; i < 4; i++) {
                    this.setOptionText(this.optionNodes[i], options[i])
                }
            })
            .start()
    }

    setOptionText(node: Node, text: string) {
        const labelComponent = node.getChildByName("text_option").getComponent(Label)
        const uiOpacity = labelComponent.node.getComponent(UIOpacity) || labelComponent.node.addComponent(UIOpacity)
        uiOpacity.opacity = 0 // 初始设置为透明
        labelComponent.string = text

        // 使用tween实现淡出效果
        tween(uiOpacity)
            .to(1, { opacity: 255 }) // 1秒内淡入到完全不透明
            .start()
    }

    selectOption(index: number) {
        if (index < 1 || index > 4) {
            console.warn("Invalid option index!")
            return
        }

        // 重置所有选项的背景和颜色
        for (let i = 0; i < 4; i++) {
            const optionNode = this.optionNodes[i]
            const labelComponent = optionNode.getChildByName("text_option").getComponent(Label)

            if (i === index - 1) {
                // 这是被选中的选项
                labelComponent.color = this.selectedColor

                // 设置选中背景图
                const spriteComponent = optionNode.getComponent(Sprite)
                if (spriteComponent) {
                    spriteComponent.spriteFrame = this.selectedSprite.spriteFrame
                }

                this.selectedAction(optionNode)
            } else {
                // 这是未被选中的选项
                labelComponent.color = Color.WHITE // 假设默认颜色为白色，你可以根据需要更改

                // 移除选中背景图
                const spriteComponent = optionNode.getComponent(Sprite)
                if (spriteComponent) {
                    spriteComponent.spriteFrame = this.notSelectedSprite.spriteFrame
                }
            }
        }
    }

    selectedAction(optionNode: Node) {
        tween(optionNode)
            .to(0.1, { scale: new Vec3(1.1, 1.1, 1.1) }) // 放大到原始大小的110%
            .by(0.1, { position: new Vec3(5, 0, 0) }) // 向右移动5个单位
            .by(0.1, { position: new Vec3(-10, 0, 0) }) // 向左移动10个单位
            .by(0.1, { position: new Vec3(10, 0, 0) }) // 向右移动10个单位
            .by(0.1, { position: new Vec3(-10, 0, 0) }) // 向左移动10个单位
            .by(0.1, { position: new Vec3(5, 0, 0) }) // 向右移动5个单位回到原位置
            .to(0.1, { scale: new Vec3(1, 1, 1) }) // 缩小回原始大小
            .start()
    }

    private scaleUp(node: Node) {
        return tween(node).to(0.1, { scale: new Vec3(1.1, 1.1, 1.1) }) // 放大到原始大小的110%
    }

    private scaleDown(node: Node) {
        return tween(node).to(0.1, { scale: new Vec3(1, 1, 1) }) // 缩小回原始大小
    }

    private shake(node: Node) {
        return tween(node)
            .by(0.05, { position: new Vec3(5, 0, 0) }) // 向右移动5个单位
            .by(0.05, { position: new Vec3(-10, 0, 0) }) // 向左移动10个单位
            .by(0.05, { position: new Vec3(10, 0, 0) }) // 向右移动10个单位
            .by(0.05, { position: new Vec3(-10, 0, 0) }) // 向左移动10个单位
            .by(0.05, { position: new Vec3(5, 0, 0) }) // 向右移动5个单位回到原位置
    }

    update(deltaTime: number) {}
}