zarocknz/javascript-winwheel

Add Description Segment?

s3bbie opened this issue · 1 comments

Hi All,
Is it possible to add a description segment to the each of the colours? What I'm trying to do is when the wheel lands on the colour and a pop-up appears saying "you have won, red" I would like a description to follow this for each of the colours.

My knowledge of coding isn't really good however, I'm willing to learn if someone could guide me on this.

Any help would be appreciated.
Thanks.

Hi Seb,

Yes this is possible, you can add any additional parameters to the segments of a wheel that you like. So if you need a description property then simply specify one when creating a wheel, then read it at the end when alerting details of the winning prize.

Example code/config when creating the wheel...

// Create new wheel object specifying the parameters at creation time.
let theWheel = new Winwheel({
    'numSegments'  : 4,     // Specify number of segments.
    'outerRadius'  : 212,   // Set outer radius so wheel fits inside the background.
    'textFontSize' : 28,    // Set font size as desired.
    'segments'     :        // Define segments including colour and text AND any custom parameters
    [
       {'fillStyle' : '#eae56f', 'text' : 'Prize 1', 'description' : 'Prize one description here'},
       {'fillStyle' : '#89f26e', 'text' : 'Prize 2', 'description' : 'Prize two description here'},
       {'fillStyle' : '#7de6ef', 'text' : 'Prize 3', 'description' : 'Prize three description here'},
       {'fillStyle' : '#e7706f', 'text' : 'Prize 4', 'description' : 'Prize four description here'}
    ],
    'animation' :           // Specify the animation to use.
    {
        'type'     : 'spinToStop',
        'duration' : 5,     // Duration in seconds.
        'spins'    : 8,     // Number of complete spins.
        'callbackFinished' : alertPrize
    }
});

Reading the description in the alertPrize function...

function alertPrize(indicatedSegment)
{
    // Do basic alert of the segment text. You would probably want to do something more interesting with this information.
    alert("You have won " + indicatedSegment.text + "\n" + indicatedSegment.description);
}

Examples above are from modified basic_code_wheel example.

Kind regards,
DouG.