zarocknz/javascript-winwheel

How to optimization on mobile?

Opened this issue · 0 comments

When playing on mobile it doesn't run smoothly. I created a manual start and stop button using the TweenMax.min.js library too.
My code:
`var url = '{{getSpinSound()}}'
const getRandomDaily = "{{getRandomDaily()}}"
const getSegment = @JSON(getSegmentList());
const listSegments = [];
getSegment.forEach((item) => {
const obj = {
segmentId: item.id,
fillStyle: item.bg_color,
textFillStyle: item.text_color,
text: item.name,
cash: item.cash,
point: item.point,
shirt: item.shirt,
perfume: item.perfume,
percentage: item.percentage,
type: item.type
};
listSegments.push(obj);
});
let theWheel = new Winwheel({
'outerRadius' : 212,
'textFontSize' : 20,
'responsive' : true,
'numSegments' : getSegment.length,
'segments': listSegments,
'animation' : {
'type' : 'spinOngoing',
'duration' : 6,
'spins' : 4,
'easing' : 'linear',
'direction' : 'clockwise',
'repeat' : -1,,
'callbackAfter' : 10

    },
});

let wheelSpinning = false
function startSpin()
{  
    if (wheelSpinning == false) {
        spinBtn = document.getElementById('spin_button')
        spinBtn.innerHTML = "Stop";
        spinBtn.setAttribute("onclick","stopWheel()")
        
        theWheel.startAnimation()
        wheelSpinning = true
    }
}

function stopWheel()
{
const desiredKey = getRandomDaily;
    const desiredSegment = theWheel.segments.find(
        (segment) => segment && segment.text === desiredKey
    );

    if (desiredSegment) {
        // Calculate the stopping angle based on the desired segment's index
        const desiredSegmentIndex = theWheel.segments.indexOf(desiredSegment);
        const stoppingAngle = theWheel.getRandomForSegment(desiredSegmentIndex);

        // Stop the animation at the desired segment
        theWheel.animation.stopAngle = stoppingAngle;
        theWheel.stopAnimation(false);
        // Finish the animation
        theWheel.draw();
    } else {
        console.error(`Segment with key "${desiredKey}" not found.`);
    }
    theWheel.animation.type = 'spinToStop';
    theWheel.animation.repeat = 0;
    // theWheel.animation.easing = 'power1.out';
    theWheel.animation.easing = 'slow(0.7, 0.7, false)';
    theWheel.animation.duration = 11;
    spinBtn = document.getElementById('spin_button')   
    spinBtn.innerHTML = "Stop"
    spinBtn.setAttribute('disabled', '')
    theWheel.startAnimation();

}`