pinball/assets/_Game/Scripts/Gacha/LuckyWheel.ts

import {
    _decorator,
    CCInteger,
    CCString,
    Component,
    game,
    Node,
    random,
    randomRangeInt,
    RealCurve,
    sp,
    Sprite,
} from 'cc';
import GachaBase from '../Base/GachaBase';
import SpineAnimationHandler from '../Base/SpineAnimationHandler';
import GachaManager, { RewardConfig } from '../Manager/GachaManager';

const { ccclass, property } = _decorator;

class RewardCard {
    public node: Node;
    public reward: RewardConfig;

    constructor(node: Node, reward: RewardConfig) {
        this.node = node;
        this.reward = reward;
    }

    public setActive(value: boolean) {
        this.node.setActive(value);
    }
}

@ccclass('LuckyWheel')
export default class LuckyWheel extends GachaBase {
    @property(SpineAnimationHandler)
    private animationHandler: SpineAnimationHandler;
    @property(Node)
    private spineRoot: Node;
    @property(CCString)
    private wheelBoneName: string = '';
    @property(CCInteger)
    private speed: number = 1;
    @property(RealCurve)
    private spinCurve: RealCurve = new RealCurve();
    @property(Sprite)
    private sprites: Sprite[] = [];

    private _wheel: sp.spine.Bone;
    private _targetAngle: number = 0;
    private _spinning: boolean = false;
    private _timer: number = 0;
    private _timeSpin: number = 0;
    private _maxAngle: number = 0;
    private _allCards: RewardCard[];
    private _random: number;

    protected onLoad(): void {
        this._wheel = this.animationHandler.findBone(this.wheelBoneName);
    }

    protected onEnable(): void {
        this.setReward();
        this.spineRoot.setActive(false);
        this._wheel.rotation = 0;
        this._wheel.update();
    }

    protected update(): void {
        if (this._spinning) {
            this._timer += game.deltaTime * this.speed;
            const angle = this._maxAngle * this.spinCurve.evaluate(this._timer / this._timeSpin);
            this._wheel.rotation = this._targetAngle + angle;
            this._wheel.update();
            if (this._timer >= this._timeSpin) {
                this._spinning = false;
                GachaManager.instance.showFloatingText(
                    this._allCards[this._random].reward.quantity.toString(),
                    this.node.worldPosition,
                    this._allCards[this._random].reward.icon,
                );
                GachaManager.instance.setReward(this._allCards[this._random].reward.id);
            }
        }
    }

    private setReward() {
        this._allCards = this.sprites.map((card) => {
            const rw = GachaManager.instance.getRandomReward([60, 35, 5]);
            card.spriteFrame = rw.icon;
            return new RewardCard(card.node, rw);
        });
    }

    public async show(): Promise<void> {
        for (let i = 0; i < GachaManager.instance.rewards.length; i++) {
            this.sprites[i].spriteFrame = GachaManager.instance.rewards[i].icon;
        }
        this.spineRoot.setActive(true);
        await this.animationHandler.setAnimationAsync('appear');

        this.animationHandler.addAnimation('idle', { loop: true });
    }

    public async spin() {
        if (this._spinning) return;
        this._spinning = true;
        this._random = this._allCards.getRandomIndex();
        if (this._random) {
            this.animationHandler.clearTrack(0);
            this._targetAngle = -36 * this._random;
            this._timer = 0;
            this._timeSpin = randomRangeInt(10, 15);
            this._maxAngle = 360 * this._timeSpin;

            return;
        }

        this._spinning = true;
        GachaManager.instance.setReward(this._allCards[this._random].reward.id);
    }
}