I have not come across another js plugin for a lucky spinning wheel better than this one yet. I'm having an issue with the getIndicatedSegment property when calling the alert prize(); function in an Ionic 3/Angular 2 application. I've followed this issue how to use winwheel.js callback in angular2 and have gotten it to work with the app and spinning quite well.
When the alert prize function is called, I get this error:
TypeError: Cannot read property 'getIndicatedSegment' of undefined
at alertPrize (http://localhost:8100/?ionicplatform=ios:51:41)
at eval (eval at winwheelStopAnimation
I've followed the advice in that answer and added the prize function in my index.html file in order to get access to the Prize callback that is in my page.ts file and show the alert on the basic example to alert the prize. However, when I am trying to access the getIndicatedSegment variable, I get this issue.
Here is the code in my LuckySpinPage.ts file:
export class LuckySpinPage {
constructor(public navCtrl: NavController) { }
wheel;
wheelSpinning = false;
ngAfterViewInit() {
this.initWheel();
}
initWheel() {
this.wheel = new Winwheel({
'numSegments': 10, // Specify number of segments.
'outerRadius': 150, // Set radius to so wheel fits the background.
'innerRadius': 30, // Set inner radius to make wheel hollow.
'pointerAngle': 0,
'pointerGuide': false, // Turn pointer guide on.
'drawMode' : 'segmentImage',
'segments': [
{'image' : '../../assets/images/segment-winner.png'},
{'image' : '../../assets/images/segment-1.png'},
{'image' : '../../assets/images/segment-2.png'},
{'image' : '../../assets/images/segment-3.png'},
{'image' : '../../assets/images/segment-5.png'},
{'image' : '../../assets/images/segment-6.png'},
{'image' : '../../assets/images/segment-7.png'},
{'image' : '../../assets/images/segment-8.png'},
{'image' : '../../assets/images/segment-9.png'},
{'image' : '../../assets/images/segment-10.png'}
],
'animation': // Define spin to stop animation.
{
'type': 'spinToStop',
'duration': 5,
'spins': 10,
'callbackFinished': 'alertPrize()'
}
});
}
// -------------------------------------------------------
// Click handler for spin button.
// -------------------------------------------------------
startSpin() {
// Ensure that spinning can't be clicked again while already running.
if (this.wheelSpinning === false) {
this.wheel.startAnimation();
this.wheelSpinning = true;
}
}
}
The code in the index.html file:
<script>
// This function called after the spin animation has stopped.
function alertPrize(){
// Call getIndicatedSegment() function to return pointer to the segment
pointed to on wheel.
var winningSegment = this.wheel.getIndicatedSegment();
// Basic alert of the segment text which is the prize name.
alert("You have won " + winningSegment.text + "!");
}
</script>
My aim is to get the prize on a specific segment e.g alert you've won, when it lands on segment 4, or alert not prize won when landing on any other segment.