Getting a new rndInt on each click

Ask the community
,
11

@simen Hi Simen, I really appreciated the effort you are going to putting together this code for me. At the moment, I cannot get the wheel to spin at all.

When you refer to #NameOfTheThingTheUserClicks, do I have to create one of those links for every image I would like overlayed onto the top of the spinning wheel?

For reference, the spinning wheel is called #henwheel and the 2 overlays I have created for testing purposes are #weddingspeech and #heybaby.

Please could you take a look at the code and see where I have made a mistake?

import { timeline } from 'wix-animations'

// ID: 7106D147D53400B9BB5AFFADBF985D6D


function randomIntFromInterval(min, max) { // min and max included 

  return Math.floor(Math.random() * (max - min + 1) + min)

}

function getImage(number){
  if(number < 1101){
  return $w("#weddingspeech").url
  //for image you need to return the url for the image you want to display
  }
  if(number < 1441){
      return $w("#heybaby").url
  }
  //and so on
}


$w.onReady(function () {
  let spinnable = true;

    const pink = $w('#henwheel')

    
    //When the image/text is clicked, the image/text is hidden and the user can spin again
    $w("#weddingspeech").onClick(()=>{
      $w("#weddingspeech").hide()
      spinnable = true
    })

    pink.onClick(() =>{ 
      if(!spinnable)
      return  //If a spin has happened and the user tries to spin again before clicking your image, it won't spin

        const tl = timeline()

        .add(pink, { duration: 4000, rotate: rndInt, easing:  "easeOutCirc"})
        let rndInt = randomIntFromInterval(1080, 1440)
        spinnable = false;
        
        setInterval(() => {
          //for image:
          $w("#weddingspeech").url = getImage(rndInt)

          $w("#weddingspeech").show()

          
          
      }, 4010); //4010 because the duration of the animation is 1000
    })

});