Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to optimization on mobile? #127

Open
mayutheandev opened this issue Aug 24, 2023 · 0 comments
Open

How to optimization on mobile? #127

mayutheandev opened this issue Aug 24, 2023 · 0 comments

Comments

@mayutheandev
Copy link

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();

}`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant