Code

Support for Spin2Win Wheel - Spin It 2 Win It!

Support for Spin2Win Wheel - Spin It 2 Win It!

4.74 (43 ratings) 4.74 stars
Cart 1,760 sales
Recently Updated

chrisgannon supports this item

Supported

This author's response time can be up to 5 business days.

Popular questions for this item

How can I get help?

You can read the documentation here

You can tweet questions @spin2winwheel (please DM if you want to send wheel URLs).

Remember – this is NOT a Wordpress plugin.

Can I add Spin2Win Wheel to WordPress?

Yes although please note that Spin2Win Wheel is not a WordPress plugin.

One way is to host it on a server like a normal web page and use an iframe inside your WP post like this:

<iframe frameborder="0" height="800" src="https://yourhost.com/spin2win" width="100%"></iframe>

You can also add the code using a code block if you are using something like WPBakery or other similar plugin.

If you need it to be responsive you’ll need to remove the width and height attributes and style it using CSS instead.

If your editor has a Code Block then use that and add your iframe code there.

How can I call a URL after a win or send the current result to a URL?

Ensure you have assigned the onResult event to your own function. The onResult event fires at the end of every spin.

You code might look like this:


//your own function to capture the spin results on every spin - call your URL call here or capture whatever you like
function myResult(e) {
  //e is the result object
    console.log('Spin Count: ' + e.spinCount + ' - ' + 'Win: ' + e.win + ' - ' + 'Message: ' +  e.msg);
}

var myWheel = new Spin2WinWheel();

myWheel.init({data:jsonData, onResult:myResult}); 

Now you can evaluate if it’s a win (e.win == true) and call a URL or pass data from the event object to a script.

How can I add an image or logo in the center of the wheel?

The simplest solution is to add it using SVG’s <image> tag.

First of all create a square image for your logo in Illustrator or PhotoShop. Square is the best aspect but if your logo is not square, create a square image and drop your non-square logo into it with transparency. If your logo is tall you will have more space on either side. If your logo is wide then you will have more transparent space top and bottom.

Save it in the ‘media’ folder.

Open the HTML page and locate the line with valueContainer. It looks like this:
<g class="valueContainer" />

Now add the image tag below it – it should point to your image. Your code should look like this:

<g class="valueContainer" />
<image xlink:href="media/my_logo.svg" width="360" height="360" x="360" y="290" />

I suggest using an SVG because you can scale it up and down using the width and height attributes and you won’t lose quality. Just make sure both width and height are the same to maintain the square-ness.

You can also place the logo correctly using the X and Y attributes.

How can I set a segment to be a winning segment and then capture the result?

You can set the win/lose status in the JSON.

This is an example ‘segment’ entry in the ‘segmentValuesArray’ in the JSON:
{
"type": "image", 
"value": "images/mypic.jpg", 
"win": false, 
"resultText": "Sorry you lost this time!" 
}
If you want the segment to be a winning segment you set:
"win": true

When the wheel lands on that segment you can evaluate the result like this:

This is your own function to capture the spin results

function myResult(event) {
  //event is the result event object
    console.log('Your win result is: ' + event.win;
}
This is your Spin2Win Wheel instance with the onResult listener assigned to your own function myResult
var myWheel = new Spin2WinWheel();
myWheel.init({
   data:jsonData, 
   onResult:myResult
});

The Usage part of the documentation is here

How can I set the wheel to land on specific segments?

You can set the destinations in the JSON.

Open the JSON file and locate the ‘spinDestinationArray’. This is an array that you can populate with winning segments.

So if you want segments 3, 7, 8, 1 to win (in that order) then you would write:

"spinDestinationArray":[3, 7, 8, 1]

Note that because you have set four destinations the game will finish after those four spins.

See the JSON properties in the documentation here

How can I add a link to the result text popup?

In the JSON you can add an HREF link in the usual way. Below is an example entry in the segmentValuesArray:

{"type": "string", "value": "HOORAY!", "win": true, "resultText": "YOU WON A <a href="http://prize.com">PRIZE!</a>"}

Note: this FAQ field is replacing a single quote with a double quote around the URL. Use single quotes around your URL string or escape a double quote with a backslash \

Find the CSS where .toast has its pointer events set with pointer-events:none;. Now remove .toast from that declaration otherwise the result link won’t be clickable.

Your CSS block now looks like this:

.wheelOutline, .valueContainer,  .centerCircle{
  pointer-events:none;
}

How can I hide the peg/pin at the top?

The easiest way to do this is the open the HTML and inside the SVG you will find the line:
<g class="pegContainer" >
Set its opacity to zero like this:
<g class="pegContainer" opacity="0" >
If you don’t want the sound either you can open the JSON and set:
"hasSound":false

How can I assign a button to make it spin?

First of all you need to create something to click on. Give it an id (or class name) so you can refer to it. Here we’ll call it myNewButton

Next find the init(); function in the index.js and pass the button reference into the wheel’s init function.

function init() {
  loadJSON(function(response) {

    // Parse JSON string to an object
    var jsonData = JSON.parse(response);

    //if you want to spin it using your own button, then create a reference and pass it in as spinTrigger
    var mySpinBtn = document.querySelector('#myNewButton');

    //create a new instance of Spin2Win Wheel and pass in the vars object
    var myWheel = new Spin2WinWheel();

    //WITH your own button
    myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError, spinTrigger:mySpinBtn});

  });
}

If you want to reference your button elsewhere in your code then set the var outside the function like this:


var mySpinBtn;

function init() {
  loadJSON(function(response) {

    // Parse JSON string to an object
    var jsonData = JSON.parse(response);

    //if you want to spin it using your own button, then create a reference and pass it in as spinTrigger
    mySpinBtn = document.querySelector('#myNewButton');

    //create a new instance of Spin2Win Wheel and pass in the vars object
    var myWheel = new Spin2WinWheel();

    //WITH your own button
    myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError, spinTrigger:mySpinBtn});

  });
}

Important:

Don’t forget to set "clickToSpin":true in the JSON file.
https://snag.gy/6YHQmZ.jpg

Binding a click to the toast popup doesn’t work – why?

If you look in the CSS at around line 37 you will find this:
.wheelOutline, .valueContainer, .toast, .centerCircle{
  pointer-events:none;
}

Just remove the .toast entry and that will enable interactions.

How can I run Spin2Win Wheel offline

Here’s a gist of an offline version in its most simplest form. This would be the code in your index.js:

https://gist.github.com/chrisgannon/7d6e46b1b51dba305520dbd3a8ac1354

Spin2Win Wheel is populated by JSON data which must be served on a web server (over HTTP).

However you can convert the JSON data into a JavaScript object and pass that variable into the init(); function instead, like this:

var wheelDataObject = {
colorArray:[ "#364C62", "#F1C40F", "#E67E22", "#E74C3C", "#ECF0F1", "#95A5A6", "#16A085", "#27AE60", "#2980B9", "#8E44AD", "#2C3E50", "#F39C12", "#D35400", "#C0392B", "#BDC3C7","#1ABC9C", "#2ECC71", "#E87AC2", "#3498DB", "#9B59B6", "#7F8C8D"],

segmentValuesArray : [
  {type: "string", value : "HOLIDAY^FOR TWO", win : false, resultText : "YOU WON A HOLIDAY!"},
  {type: "image", value : "media/tip_star.svg", win : false, resultText : "A STAR"},
  {type: "image", value : "media/tip_sqr.svg", win : false, resultText : "A SQUARE"},
  {type: "image", value : "media/tip_oct.svg", win : false, resultText : "AN OCTAGON"},
  {type: "image", value : "media/tip_triangle.svg", win : true, resultText : "A TRIANGLE"},
  {type: "image", value : "media/tip_circle.svg", win : false, resultText : "A CIRCLE"},
  {type: "image", value : "media/tip_hex.svg", win : false, resultText : "A HEXAGON"}, 
  {type: "string", value : "LOSE ALL", win : false, resultText : "LOSE ALL"}
],

  svgWidth: 1024,
  svgHeight: 768,
  wheelStrokeColor: "#D0BD0C",
  wheelStrokeWidth: 18,
  wheelSize: 700,
  wheelTextOffsetY: 80,
  wheelTextColor: "#EDEDED",  
  wheelTextSize: "2.3em",
  wheelImageOffsetY: 40,
  wheelImageSize: 50,
  centerCircleSize: 360,
  centerCircleStrokeColor: "#F1DC15",
  centerCircleStrokeWidth: 12,
  centerCircleFillColor: "#EDEDED",
  segmentStrokeColor: "#E2E2E2",
  segmentStrokeWidth: 4,
  centerX: 512,
  centerY: 384,  
  hasShadows: false,
  numSpins: 2 ,
  spinDestinationArray:[],
  minSpinDuration:6,
  gameOverText:"THANK YOU FOR PLAYING SPIN2WIN WHEEL. COME AND PLAY AGAIN SOON!",
  invalidSpinText:"INVALID SPIN. PLEASE SPIN AGAIN.",
  introText:"YOU HAVE TO<br />SPIN IT <span style="color:#F282A9;">2</span> WIN IT!",
  hasSound:true,
  gameId:"9a0232ec06bc431114e2a7f3aea03bbe2164f1aa",
  clickToSpin:false
}

Here we’ve created a variable wheelDataObject which we can now pass into the Spin2WinWheel.init() function like this:

function init() {
  loadJSON(function(response) {
    var myWheel = new Spin2WinWheel();
    myWheel.init({data:wheelDataObject});
  });
}

How can I set the probability of winning?

This is an entry for a segment in the JSON:

{"type": "string", 
"value": "HOLIDAY^FOR TWO", 
"win": false, 
"resultText": "YOU WON A HOLIDAY!" 
}

Now imagine you have 10 entries in the JSON (so 10 segments on the wheel).

If you set 6 to win (win:true) and 4 to lose (win:false) the probability is 60-40 or 60% (AKA 6 in 10 or 3 in 5).

Similarly if you have 1 win and 9 loses it’s a 10% chance of winning (1 in 10).

In my opinion this method is the correct way to set probability and is more accurate than performing complex calculations on every spin.

Note: This WON’T work when gestures are used (i.e. clickToSpin: false)

How can I set a maximum spin duration?

Spin2Win Wheel comes with a minimum spin duration property which can be set in the JSON.

If you want to set a maximum spin duration you will need to add in a property to Spin2WinWheel.js as follows:

    createDraggable = function() {
      wheelDragger = Draggable.create(wheel, {
        type: 'rotation',
        bounds: {
          minRotation: -9999999999999999,
          maxRotation: 0
        },
        throwProps: true,
        ease: Back.easeOut.config(0.2),
        snap: (randomSpins) ?  getRandomSpinFunction(0) : [spinDestinationArray[spinCount]],
        throwResistance: 0,
        //minDuration: minSpinDuration,
        maxDuration:2,
        onThrowComplete: throwComplete,
        onPress: onWheelPress,
        onDrag: throwUpdate,
        onThrowUpdate: throwUpdate,
        overshootTolerance: 1,
        onDragEnd: onWheelDragEnd

      })
    }

Here we have added in maxDuration:1 meaning it will spin for no more than 2 seconds.

If you leave minDuration in AND it has a value greater than maxDuration then maxDuration will have no effect.

Therefore it is better to either hard code them both (with max higher than min) OR remove minDuration altogether.

How can I make the wheel spin automatically, just with code?

In index.js you create a button instance (no need to add it to the page), then pass it in as a reference for the spinTrigger and then call its onclick function like this:

function init() {
  loadJSON(function(response) {
    // Parse JSON string to an object
    var jsonData = JSON.parse(response);
    //creates an invisible button so its onclick can be called. Note it's not necessary to be added to the page.
    var mySpinBtn = document.createElement('button');
    //create a new instance of Spin2Win Wheel and pass in the vars object
    var myWheel = new Spin2WinWheel();

    //pass in the button instance as the spinTrigger
    myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError, spinTrigger:mySpinBtn});

    //immediately makes the wheel spin
    mySpinBtn.onclick();
  });
}

Note: In the JSON make sure you set "clickToSpin":true. This disables the ability to spin the wheel manually by throwing.

How can I change the URL of the peg sound?

There are two ways.

You can either look in Spin2WinWheel.js and find the line
pegSnd = new Audio('media/wheel_tick.mp3'),

Change the URL to whatever you want. Next you can either minify that file and rename it to Spin2WinWheel.min.js or use Spin2WinWheel.js in your HTML (currently it’s probably loading the minified version without the change applied).

Or

Open Spin2WinWheel.min.js and do a Find and Replace on ‘media/wheel_tick.mp3’ and replace it with your absolute URL for the new sound.

How can I populate Spin2Win Wheel using PHP?

I have created PHP code that does just that.

You can find it here.

Here’s the load code:

function loadJSON(callback) {

  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', './wheel_data.php', true); 
  xobj.onreadystatechange = function() {
    if (xobj.readyState == 4 && xobj.status == "200") {
      //Call the anonymous function (callback) passing in the response
      callback(xobj.responseText);
    }
  };
  xobj.send(null);
}

How can I set the number of segments?

A segment is an entry in segmentValuesArray .

An entry looks like this: {"type": "string", "value": "HOLIDAY^FOR TWO", "win": false, "resultText": "YOU WON A HOLIDAY!"},

The number of segments depends on the number of entries in segmentValuesArray in the JSON.

If you want more then copy an entry and change its properties.

type can be ‘string’ or ‘image’. If you use ‘image’ then ‘value’ must be an image URL.

I double clicked the index.html and the project is blank – HALP!

When you double click index.html it runs the project in the file system.

Spin2Win Wheel is populated using JSON data which will only load over HTTP. This means you must run the project on a web server.

Can I use an image as the background to Spin2Win Wheel?

Yes!

In the SVG in the HTML locate the group tag with class wheel.

Now remove the self closing angle bracket and add in an image tag as your background image like this:

https://snag.gy/cK06DU.jpg
  <g class="mainContainer">   
    <g class="wheel">
      <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wheel_image.png" x="0%" y="0%" height="100%" width="100%"></image>
    </g> 

Now in your JSON find the colorArray and remove all entries except one transparent one like this:

https://snag.gy/i4XcH5.jpg
"colorArray":[ "rgba(0,0,0,0)"],

How can I place the wheel at the top of the page?

In the attributes for the SVG tag in the HTML change the preserveAspectRatio to preserveAspectRatio="xMidYMin meet"

Notice the YMid is now YMin

https://snag.gy/gloyMr.jpg

Be aware that you will have to change the CSS for the popup to match the new position of the wheel with media queries as it’s currently designed to be in the centre of the page.

How can I change the amount/speed Spin2Win Wheel spins?

You need to open the Spin2WinWheel.js (and make sure your HTML page is loading it, otherwise you won’t see any changes).

Find the variable numRevsPerDestination. Currently it looks like this:
numRevsPerDestination = 3 * 360
https://snag.gy/VUoaRb.jpg

This means it rotates at least 3 times before stopping.

If you want it to rotate 10 times before stopping change it to 10 like this:

numRevsPerDestination = 10 * 360
https://snag.gy/L7XKOJ.jpg


Warning: Don’t change the 360 value – this is a full revolution and MUST stay as this value.

Can I add Spin2Win Wheel to a Blogger post?

Yes but with caveats. You will need to host your spin2win folder online somewhere – there are lots of free hosting sites like http://000webhost.com for example.

Upload your folder to your hosting and make a note of the URL for it. It might be something like https://yoursite.000webhostapp.com/spin2win/

Now create a new post in Blogger and click the HTML pane (next to the Compose button).

Now assuming the URL above is the right one, paste this into your HTML pane:

<iframe frameborder="0" height="800" src="https://yoursite.000webhostapp.com/spin2win/" width="100%"></iframe>

When you preview it, it won’t appear to be clickable – it will only work once you publish it.

Can I make the segment text vertical?

Yes try adding this to the index.js after the myWheel.init() call:

TweenMax.set('.wheelText', {
  rotation:90,
  transformOrigin:'50% 50%'
})

If the positioning isn’t right try doing:

TweenMax.set('.wheelText', {
  rotation:90,
  transformOrigin:'50% 50%',
  x:'-=20',
  y:'+=10'
})

Bear in mind the SVG text is in a tspan and its currently set to text-anchor:middle; (the CSS equivalent is text-align:center;) so you might need to add this to your CSS file:

.wheelText tspan{
  text-anchor: start;
}

Remember the wheel must be loaded before this will work.

Can I put the peg on the right instead of at the top?

Yes, the simplest way is to rotate the entire wheel. Add the following to the main index.js:

TweenMax.set('.wheelSVG', {
  rotation:90,
  transformOrigin:'50% 50%'
})

How can I have a key trigger a spin?

First off make sure you have a button triggering the spin – pop over to this FAQ to find out how to use a button as a trigger..

In index.js you will be referencing the button outside the init(); function so make sure you set the var outside it (the second example in that FAQ).

Once you have a button you can hide it if you like as you won’t be needing it visually. Place it off the page or set its CSS to visibility: hidden; – however you want.

Still in index.js, just after the main init() call add this code. It captures key presses and, in this example, if it’s the spacebar (keycode 32) then it triggers the mySpinBtn’s click function:


document.body.onkeyup = function(evt){
  switch(evt.keyCode){
    //Spacebar is keycode 32
    case 32:
    mySpinBtn.click();
    break;
  }
}

Your final code should look something like this:

var mySpinBtn;

function init() {
  loadJSON(function(response) {
    // Parse JSON string to an object
    var jsonData = JSON.parse(response);
    //if you want to spin it using your own button, then create a reference and pass it in as spinTrigger
    mySpinBtn = document.querySelector('.mySpinBtn');
    //create a new instance of Spin2Win Wheel and pass in the vars object
    var myWheel = new Spin2WinWheel();

    //WITH your own button
    myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError, spinTrigger:mySpinBtn});

    //WITHOUT your own button
    //myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError});

    document.body.onkeyup = function(evt){
      switch(evt.keyCode){
        //Spacebar is keycode 32
        case 32:
        mySpinBtn.click();
        break;
      }
    }

  });

}

//And finally call it
init();

Here’s a screenshot too:

Does Spin2Win Wheel prevent cheating by code injection via the dev console?

We have purposely left out the prevention of dev console injection but you can very easily add it yourself.

Open Spin2WinWheel.js and add the following code as the very last function at the bottom (but inside the last curly brace):


  window.console.log = function(){
    console.error('Sorry , developers tools are blocked here....');
    window.console.log = function() {
        return false;
    }
  }

Read more about a more involved solution here.

The end of your code block would look something like this:

Be aware that this code also prevents ALL console logging so you won’t be able to debug your work with console.log();

Why is the FAQ cut off?

Because Envato ’s FAQ scrolling is broken

How can I change the font?

First off the font is a Google font called Fjalla and is loaded in the HTML at the top:

https://snag.gy/SzMqWJ.jpg

Remove this or change this to point to your own font.

Secondly open the CSS file and change any references to Fjalla to refernce your font.

https://snag.gy/HAGKf0.jpg

How can I refresh the page at the end of a game

Make sure you have the onGameEnd event assigned to a function like this:

myWheel.init({data:jsonData, onGameEnd:myGameEnd});

And in the myGameEnd function set a time out using GreenSock like this:

function myGameEnd(e){
  //e is gameResultsArray
  TweenMax.delayedCall(5, function(){
    location.reload();
  })

}

I’m getting an error in IE10 – Object doesn’t support property or method ‘overrideMimeType’

In index.js replace your loadJSON() call with this:

function loadJSON(callback) {
  var xobj = new XMLHttpRequest();
  if (xobj.overrideMimeType) {
      xobj.overrideMimeType("application/json");
  }  

  xobj.open('GET', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/wheel_data_008.json', true); 
  xobj.onreadystatechange = function() {
    if (xobj.readyState == 4 && xobj.status == "200") {
      //Call the anonymous function (callback) passing in the response
      callback(xobj.responseText);
    }
  };
  xobj.send(null);
}

Note the addition of the if (xobj.overrideMimeType)... statement.

Don’t forget to change back to your own JSON URL! :)

How can I make the popup text selectable?

Open style.css and find the first .toast p line (around line 74).

Remove the user-select:none code.

https://snag.gy/hI7mqD.jpg

How do I add Spin2Win Wheel to Joomla?

1) Create a HIDDEN menu item and select IFrame Wrapper as the Menu Item Type *

2) Write an alias of what I want the website page to be called. E.g. “spin2win”

3. Upload the contents of the ZIP to a directory on your site via FTP. Let’s say the directory you uploaded it to is called ‘wheel’.

4) Select the full URL of point 3 (E.g. http://yoursite.com/wheel) – this is what will be displayed at http://yoursite.com/spin2win

Is Safari for Windows supported?

No – Safari for Windows was killed in 2012 (the last version updated in 2012). Browsers older than 3 versions back are not supported either.

Can I add an image and text to the popups after each spin?

Yes you can add a normal HTML image tag to the entry for that segment in the "segmentValuesArray" in the JSON like this:

https://snag.gy/DA4fXs.jpg

Can I add a URL to the popups after each spin?

Yes you can add a normal HTML HREF tag to the entry for that segment in the "segmentValuesArray" in the JSON like this:

https://snag.gy/YLwSOu.jpg

How can I reduce the amount of time it spins for (when clicked)?

Locate the variable spinMultiplier at line 56 of Spin2WinWheel.js and change it to 1. This will halve the spin duration.

https://snag.gy/zVkNKZ.jpg

Alternatively you can speed the ENTIRE wheel (ALL animations) by adding this to the index.js:

TweenMax.globalTimeScale(2);

This will play everything back at twice the speed.

How can I do multiline text in a segment?

SVG doesn’t support multiline text – however you can specify a new line by adding the caret ^ symbol like this:

WIN A^HOLIDAY

This will look like this:

WIN A

HOLIDAY

Use Ctrl (or CMD on MacOS) + 6 to type it.

Can I make it look like a pie chart?

Although it wasn’t designed for that yes actually you can!

If you want to make your wheel look like this:

https://snag.gy/G5YwES.jpg

...you can edit the JSON as follows:

1. Choose a dominant color, say gray. Choose a color for the single segment, say pink. 2. Set all segments gray apart from the single segment which would be pink. 3. Set the segmentStrokeColor to gray. 4. Set the centerCircleSize to 0. 5. Set all string values in segmentValuesArray to an empty string (””) apart from the pink segment and one other. In the image above the middle segment has the value “10% off” and the last colored value is “90% off”. 6. Set the probability of the pink segment to be a low number (like 1), set all others to be 0 apart from the “10% off” which should be high (like 100).

Here’s a JSON example:

https://gist.github.com/chrisgannon/ac99d84871fd5f25221f215e6635823f

Why is there a margin around my wheel?

Make your wheel square so that it fills the viewBox like this:

https://snag.gy/52S6G8.jpg

How do I change the volume of the ticker sound?

To set the ticker volume, in Spin2WinWheel.js look for setInitData(); function and inside it add:

pegSnd.volume = 0.5; //half the volume

How do I change the probability after X clicks?

You will need to have the JSOn data as a JavaScript object instead.

Copy the JSON text and paste it into the index.js as a JavaScript object like this: https://snag.gy/idXmla.jpg

Pay special attention to the changes in code, indicated in red.

Now, after X spins you can call Spin2WinWheel.reset(); (using the onGameEnd event or the onResult event to count the clicks) and change the probability of a segment using the syntax:

wheel_data.segmentValuesArray[0].probability = 0

In this example the first segment’s probability is set to 0.

How can I change the spin time when throwing the wheel with a gesture?

The default behaviour of Draggable is to set maxDuration:2 as a default – this means if you don’t explicitly set maxDuration to something else, your minDuration will be limited by maxDuration.

The author of GreenSock is going to fix this in an upcoming release of Draggable.

In the meantime you can open up Spin2WinWheel.js in your JS folder, find line 539 and add in a maxDuration property here like this:

https://snag.gy/v7UEID.jpg

Here’s the code to cut and paste:

maxDuration: minSpinDuration,


Now you can increase the value of minSpinDuration in your JSON and it will extend the spin time.

Please not this only works when using gestures. It will not work when triggering the spin with a button click.

To ensure the button is not used, do the following:

1. Set clickToSpin:false in the JSON

2. Do not send spinTrigger in the init() in index.js.

3. Remove all probability settings from segmentValuesArray

How can I display text and an image inside the segment?

The best way to do this is to pass in a .svg file in the segment’s data like this:

{"probability":5, "type": "image", "value": "media/textAndImage.svg", "win": true, "resultText": "A SMILEY WINS!"},

...where textAndImage.svg is an SVG file that contains a text node and a base64 encoded image that looks something like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 180">
<title>Text and image</title>
<text fill="#fff" x="50%" y="80" style="text-anchor: middle;">Text and image time!</text>
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAAE/UlEQVR4Ae2bTYwMQRTHn8lEfFuLiAO2E0cbNnEjGeK2h0WcHFjLRUIEF4mDxUHi4CNC4mQ/HJxkl4ObrEk4W1lHyQwiIhtj1rfNRORf+7r1TPVHVXXN1878Epqq7up6/3nvdVV19QKqEaWCs42IOohoV8wdnxFRMd2Zm5RqqkDVBGCD9xFRRsHoMCBGlojGqyWIVQFKBaeLiI4QUT8RdUknJCNPRCNENJzuzOVtNWpFADZ8kI2vBcNEdMmGEIkEKBUcxPSNGhpeCYQ4k+7MFaUaRVKmF5YKzmkiytXReOJ757gvRmh7AP/qYwkSW7UYJ6IBXW/QEoAz+1gVEpwtkBP26zwxlEOgVHDwSJtoYOOJ+zbBfVVCyQNKBQexNiRVNDYIh+G4HsYKwGqOSRXNAcJhPKqnkQJwzE/wELYZQULcHZUTQgXgbP+ywWNeBSTGnrCnQ1QSHJoHxhPbEJq/AgXggYVyJvUz+uA7rXHeUrozJ474fz3bYfaFDZakEGDXz5nEPTp59MS0VH7vzlo6fHCZVB6GrXYqQAg4laEQJMCQyfC2OPOXNm97L46VdKxM0ZvJDeJYq3ZCwExywF9V1pJvOqsNfrWgTrviqLqwrXZCOMI2elRKORh8XTyPnvyIPCeuXvU81XYiKLPRCwFWJhd+XTRIVnGUCk7MGfbaicFx1xL8HlDPaW2t8Wz1C9A/783+j2erEICHvPNh0KNKF9vseYDRoKfJETa7AmSS2pLZuUgq06m33Y7KrfCXK0Di5a29vUulMp162+0oIGxewLHwMmlrTTISrKQnZWuuj05dv7JaKgcoV+20rXYU6UjZXN3FRAUTFreTOJpMYGy1o8AuhMDFJEPgJueSVX9qRtoCSCUtRlsAqaTFaAvA21CMyL74Xd/eMwmWyZ6leLVUm7fvSpR93hgCTE79kcoUKaaiXhtFsWljmrIvfkWcUTtMPRG2uznAKAzgAfCEeoL7G/ZB2OwKkJWqFdjavZBGki1TJ+by1S+iHwYIm10BIl8hh5HZsYhu3Z2pmxfgvvgBMjsWS3UKCJuFAJwHtLec9R9cLubtZ89/lupqwdGT09wP7Vli3s19/nHAiHRaDHC9ro1pevTkJ926+zX6ZMtcvloUOQhLZEjImni2+gWI3U4SxDVevIAXJHxtpQzug9gHF86tMmnCs9UTgN+UaIuwt3eJ+APwRrfaIsDT3DfHp46vEHlIk7KttmVvh01fjyEPbM98oDwnQ8TkNcvLV7jHsRPTItyIw+/p4/Um93D8ApRdbeoF6MTD++u8ziAzQxBb3oB2sFDqGi+WyG6vNTFe2mgdtD/AeIPEq6lZ2tP3sWxFF0kScdrXu0Srw+6rcDxm877HLNqD2AbPfrUNEvR/i8wNqUKx4wcOfQqcJyBj45mNzkOMrVvmjrjm1evZuePUrHgFjmPQ9X5P0wSbqm9WXhIoAIswluSVGZIVMnXQ+r4u7lJ5glVhfHCxXyqNESDxNjkYDyFGH3wrc2NV4O6njq8UhidIqJHb5EIFIMsbJedc+6eYQeLfQZ4hwqJ7oQgTPFoNx/h+zDdKujT5VlkYHznTjfUr3ms7IFU0PgNxxgPl7wXYE4aaYN9wkY1XmuG2P5iQSiLghntM1w+qzDhne60lPuOvxniwNNgAIVHkT+ikQY4KLf/ZXPvDSakkAS376WwQLfnxdBQN+fk8Ef0DpFA5EE1w0wUAAAAASUVORK5CYII=" width="60" height="60" x="60"/></svg>

Pay careful attention to the namespace attribute xmlns:xlink="http://www.w3.org/1999/xlink" that must be there.

Your base64 image must have a width and height attribute.

Also note you will probably need to tweak the "wheelImageSize" in your JSON. This is a square image format so "wheelImageSize": 180 means a 180×180 image.

You can encode your image here:

https://www.base64-image.de/

How can I display a custom message after each spin or at the end of the game?

After a spin

In index.js find the myResult function.

You can set the custom message there like this:

function myResult(e) {

    //e is the result object - you can check what you need here to decide which message to use
    console.log('Spin Count: ' + e.spinCount + ' - ' + 'Win: ' + e.win + ' - ' + 'Message: ' +  e.msg);

    document.querySelector('.toast p').innerHTML = "My Custom Message";
}
At the end of the game

In the myGameEnd function you can set the text there like this:

function myGameEnd(e) {

  //e is gameResultsArray
  document.querySelector('.toast p').innerHTML = "My Custom Game Over Message";
}

Can I use a gradient in the wheel segment

Yes! In your HTML, find the <defs> tag in the SVG and paste this in.

      <linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="303.5" y1="185" x2="303.5" y2="1000">
                    <stop offset="0" style="stop-color:red" />
                    <stop offset="1" style="stop-color:blue" />
                </linearGradient>

Now you can assign this gradient to a segment by adding it to the colorArray like this:

colorArray: [
    'url(#grad)'   
  ]

Your HTML should look a bit like this:

https://snipboard.io/tlD45h.jpg

You may have to play around with the gradient’s x1, x2, y1 and y2 properties to get it looking the way you want but it’s perfectly possible.

How can I fill a segment with an image?

You can do this by assigning a pattern to the segment (instead of a color).

It involves a few steps.

1. Place your image in the media folder (say, ‘img1.png’).

2. Open index.html and add the following code inside the defs tag inside your SVG code.

<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="media/img1.png" x="0" y="0" width="100" height="100" />
</pattern>
https://snipboard.io/FS1joc.jpg

3. Ensure you give it a meaningful ID. Here the ID is ‘img1’

4. Now open wheel_data.json and replace the color values with references to the pattern.

"colorArray":[ "url(#img1)"],
https://snipboard.io/YZNqn6.jpg

You can add in as many as you like. So if you had another image called img2.png you must repeat steps 1 – 4 — just remember to add in the pattern reference in colorArray in the JSON.

Also, you may have to play around with the width and height of the image AND the pattern to make sure it matches your image. So if you don’t want the pattern to repeat, make sure the pattern width and height and image tag width and height match the dimensions of the actual image itself.

Some experimentation maybe required!

How can I increase the time the end message stays on-screen (or remove it completely)?

Open Spin2WinWheel.js and find the endGame function (around line 754).

To increase the time:

Change the delay to a bigger number for a longer delay (or remove this code altogether):

      TweenMax.to(toastText, 1, {
        text: gameOverText,
        ease: Linear.easeNone,
        delay: 2
      })

To remove the last message:

Remove this call completely:

      /*
TweenMax.to(toastText, 1, {
        text: gameOverText,
        ease: Linear.easeNone,
        delay: 2
      })
*/

Show more

Contact the author

This author provides limited support for this item through this item's comments.

Item support includes:

  • Availability of the author to answer questions
  • Answering technical questions about item’s features
  • Assistance with reported bugs and issues
  • Help with included 3rd party assets

However, item support does not include:

  • Customization services
  • Installation services

View the item support policy

by
by
by
by
by
by