“Lucky Wheel Code Explain” Documentation by “Hung Nguyen” v1.0

---

“Lucky Wheel Code Explain”

---

Table of Contents

1. Installation
2. HTML Structure
3. CSS Files and Structure
4. JavaScript
5. PSD Files
6. Sources and Credits

---

A) Installation - top

Please click here to go help file to see how to install purchased package.

---

B) HTML Structure - top

After click "Export" button from admin page (The zip file name with "wheel_of_fortune.zip") which you have been extracted and hosted it on your own host) you will receive another zip file name with "LuckyWheel.zip". Goto extract it and you will see a folder name with "LucyWheel" and all needed assets inside it. So below is the code in file wheel.html

If you have more actions to do after the wheel completely the animation you can continue develop more from the line code 34. We have receive reward value from the wheel at line code 34. Feel free to contact me by email ([email protected]) to get support.

	
    /***************** CLICK AND RECEIVE REWARD EVENTS *****************/
    var playTimes = 0;
    var popupCondition = 0;

    function loadEvents() {

        // Load reward
        loadRewardBag();

        // Spin tap
        _globalVars.elms.spin.click(function() {

            if (!_globalVars.isProcessing) {


                spin(function(data) {

                    // Spin complete animation and receive reward
                    console.log(data);

                    // Save reward into reward bag
                    saveReward(data);

                    // Your continue code if have
                    
                    // Check if the player win twice
                    playTimes++;

                    if(playTimes >= popupCondition) {

                        showPopup();

                    }

                });

            }

        });

        // Redeem listener
        document.addEventListener('onRedeemCompleted', function(data) {

            // data.rewardValue => The reward value of user after finish spin the wheel.
            console.log(data.rewardValue);

        }, false);

        // Burger Menu tap
        var burgerMenu = document.querySelector('.burger-menu');
        burgerMenu.addEventListener('click', function(event) {
            burgerMenu.children[0].classList.toggle('active');
            burgerMenu.children[0].classList.toggle('cross');
            burgerMenu.children[1].classList.toggle('active');
            burgerMenu.children[1].classList.toggle('cross');
            burgerMenu.children[2].classList.toggle('hide');

            // Show or hide reward list
            document.querySelector('.reward-list').classList.toggle('show');
        });

        // Affiliate link click
        if(document.querySelector('.affiliate-link') !== null) {
            document.querySelector('.affiliate-link, .popup-container').addEventListener("click",function(e) {

                if(e.target.className.indexOf('popup-container') > -1 
                    || e.target.className.indexOf('btn-continue') > -1
                    || e.target.className === '') {
                    document.querySelector('#daily-lucky').classList.add('hide');
                }

               // Reset play times
               playTimes = 0;

            },false);
        }
    }

    function showPopup() {

        if(document.querySelector('.affiliate-link') !== null) {
            try {

                var rewards = JSON.parse(localStorage.getItem("ghfjghdsjhf"));
                var totalPrice = 0;

                for(var i=0; i< rewards.length; i++) {
                    if(rewards[i].redeem === false) {
                        totalPrice = totalPrice + parseInt(rewards[i].price.split('$')[0]);
                    }
                }

                document.querySelector('#number-coin-luckydraw strong').innerHTML = totalPrice + '$';

            } catch(ex) {}        
            document.querySelector('#daily-lucky').classList.remove('hide');
        }
    }
    /***************** //CLICK AND RECEIVE REWARD EVENTS *****************/

---

C) CSS Files and Structure - top

You will need to include the css file from assets/css/global.css to make the wheel responsive design better. There is nothing to change needed from this file because almost thing can be done in the admin page before

---

D) JavaScript - top

There is only two Javascript files needed to operation this wheel (client side).

1. assets/js/svg.min.js
2. assets/js/layout.js

1. SVG is a Javascript library to animate element and draw shapes and lines.
2. Layout.js is to be used to draw the wheel and animation the wheel based on SVG core.

---

E) PSD Files - top

We don't have those files since the wheel completely drawn by coding.

---

F) Sources and Credits - top

I've used the following images, icons or other files as listed.

For Admin Page

• Bootstrap CSS Saver => https://getbootstrap.com/docs/3.4/css/
• Jquery JS => https://jquery.com/
• Spectrum JS Saver => https://bgrins.github.io/spectrum/
• SVG JS => https://svgjs.com/
• JSZip JS => https://stuk.github.io/jszip/
• Filesaver JS => https://github.com/eligrey/FileSaver.js/
• Params.js => Code by Gafami (Hung Nguyen)
• Layout.js => Code by Gafami (Hung Nguyen)

For Client Wheel

• SVG.min.js => https://svgjs.com/
• Layout.js => Code by Gafami (Hung Nguyen)

---

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this html5 game. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Hung Nguyen (Gafami)

Go To Table of Contents

---