0

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Brentdb
  • 1
  • 1
  • Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. – halfer Jan 29 '18 at 11:20
  • This is because your index.html file is not able to find this.wheel parameter. Include same code this.wheel=new Winwheel(){ ... } and it will work fine. – Sheena Singla Feb 20 '18 at 05:26

0 Answers0