Every time I attempt to call a function with the callbackFinished property inside the animation of winwheel, I encounter an error stating that the function is not defined, even though it is defined in the same class.
import React from 'react'
import Winwheel from 'winwheel'
import TweenMax from 'gsap'
const Roulette = ({ width, height, canvasId}) => {
let winWheel = null
const wheelData = {}
// The issue arises here as alertPrize() function cannot be accessed
const animation = {
'type': 'spinToStop',
'duration': 5,
'spins': 8,
'easing': 'Power2.easeInOut',
'callbackFinished': 'alertPrize()'
}
wheelData['animation'] = animation
function alertPrize()
{
createWheel()
let winningSegment = winWheel.getIndicatedSegment();
alert("You have won " + winningSegment.text + "!");
}
const startAnimation = () => {
winWheel = null
createWheel()
winWheel.startAnimation()
}
const createWheel = () => {
if (typeof window !== 'undefined' && winWheel == null) {
winWheel = new Winwheel(wheelData)
}
}
createWheel()
return (
<div>
<canvas id={canvasId} width={width} height={height} className='z-0'>
Canvas not supported
</canvas>
<button onClick={startAnimation} className='absolute w-full h-full top-0'></button>
</div>
)
}
Is there any way to resolve the issue and access the function on callbackFinished?