Winwheel.js getIndicatedSegment undefined

brentdb commented 6 years ago

Hi, Thanks for the awesome job you've done on this plugin. 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 https://stackoverflow.com/questions/44306571/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:

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:

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.

zarocknz commented 6 years ago

Hi @brentdb, can you please clarify if you are using the latest version (2.7.0) of Winwheel.js, downloaded from here on Github? or have you installed it using NPM?

The version of Winwheel.js on NPM was not added by me, nor has it been updated for some time, so the change mentioned in that stackoverflow will not be present in the library.

As my career has taken the back-end development path, unfortunately I am unable to offer any assistance on trying to use Winwheel.js with modern JS frameworks such as Angular, React etc.

brentdb commented 6 years ago

Hi @zarocknz,

Thank you for the response.

This was the NPM version of the plugin. Eventually, we used the Github version. My boss wrote a bit of angular to declared and initialized it in Angular and then used JS to create the wheel.

ShubhamHatagale commented 3 years ago

thank you

zarocknz / javascript-winwheel

Winwheel.js getIndicatedSegment undefined #39