After landing on a segment, remove ability to land on it again (by spin level) about javascript-winwheel HOT 2 CLOSED

Hi Chris,

Thanks for getting in touch and including a screenshot as well as some details about your project, it really helps to understand what you are trying to create - looks interesting by the way!

My first thought would be to do something with SessionStorage or LocalStorage which is an easy way to store information in the user's browser and read it back. I found this tutorial that seems like a good intro https://alligator.io/js/introduction-localstorage-sessionstorage/

Using this you could store a couple of things: the spin level, and also an array of the segment information for each of the levels. In the tutorial above see the section called "Storing Json Objects" to see how you can store an array of information like the segments.

I imagine the logic of the code could work something like this...

1. User loads the page
2. Check if local storage exists
3. IF yes then get the spin level from local storage
4. Get the segment information for that level
5. Create the Winwheel using the normal config but passing the segments information retrieved from local storage (remember to JSON.parse it to turn it back in to a json object first)
6. User spins the wheel (you might want to pre-determine the result, more on this later)
7. Use the getIndicatedSegmentNumber to know what segment the user landed on
8. Update the segments information in the local storage to swap to the grayed image and also perhaps set a flag or something to indicate the segment has already been landed on.
9. Check if all segments have been visited for this level, and if so increment the spin level and update the local storage

If at step 2 the local storage does not exist then add the spin level and segment information in its initial state to the local storage.

Now there is still the issue of preventing the user from landing on a segment already visited, I would probably work out before the spinning what segment the user will stop on by checking which segments had not already been visited and randomly (or not so randomly) picking one.

You may have already seen this when looking at the Winwheel.js documentation but http://dougtesting.net/winwheel/docs/tut14_setting_the_prize shows how to specify what segment the user will land on - in particular note the let stopAt = theWheel.getRandomForSegment(segmentNumber); in one of the examples.

Hope this helps.

Cheers,
DouG.

from javascript-winwheel.

Thanks, DouG! Really appreciate the insights. I'll dive in over the next few weeks and see what I come up with. Will show you an update when it gets further along!

from javascript-winwheel.