takeaway-wheel-of-fortune/index.html at main · HontoNoRoger/takeaway-wheel-of-fortune · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="static/js/Winwheel.js"></script>
        <script src="config/config.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
        <link rel="stylesheet" href="static/css/style.css" />
        <title>Takeaway Wheel Of Fortune</title>
    </head>
    <body>
        <div align="center">
        <h1>Takeaway Wheel Of Fortune</h1>
        <p>Let's see what to order today ...</p>
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="438" height="582" class="the_wheel" align="center" valign="center">
                        <canvas id="canvas" width="434" height="434">
                            <p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
                        </canvas>
                    </td>
                </tr>
                <tr>
                    <td>
                        <br />
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="spin_action">
                            <img id="spin_button" src="static/images/spin_off.png" alt="Spin" onClick="startSpin();" />
                            <br /><br />
                            &nbsp;&nbsp;<a href="#" onClick="resetWheel(); return false;">Play Again</a><br />(reset)
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </body>
    <script>
        let segments = [];
        for (let meal in config.meals) {
            let fillStyle = ['eae56f', '89f26e', '7de6ef', 'e7706f'][meal % 4];
            segments.push ({
                'fillStyle' : '#' + fillStyle,
                'text' : config.meals[meal]
            })
        }

        // Create new wheel object specifying the parameters at creation time.
        let theWheel = new Winwheel({
            'numSegments'  : config.meals.length,  // Specify number of segments.
            'outerRadius'  : 212,                  // Set outer radius so wheel fits inside the background.
            'textFontSize' : 28,                   // Set font size as desired.
            'segments'     : segments,             // Define segments including colour and text.
            'animation' :                          // Specify the animation to use.
            {
                'type'     : 'spinToStop',
                'duration' : 5,     // Duration in seconds.
                'spins'    : 8,     // Number of complete spins.
                'callbackFinished' : alertPrize
            }
        });

        // Vars used by the code in this page to do power controls.
        let wheelSpinning = false;

        resetWheel()

        // -------------------------------------------------------
        // Click handler for spin button.
        // -------------------------------------------------------
        function startSpin()
        {
            // Ensure that spinning can't be clicked again while already running.
            if (wheelSpinning == false) {
                // Based on the power level selected adjust the number of spins for the wheel, the more times is has
                // to rotate with the duration of the animation the quicker the wheel spins.
                theWheel.animation.spins = Math.floor(Math.random() * 10) + 3;  // Random [3, 13)

                // Disable the spin button so can't click again while wheel is spinning.
                document.getElementById('spin_button').src       = "static/images/spin_off.png";
                document.getElementById('spin_button').className = "";

                // Begin the spin animation by calling startAnimation on the wheel object.
                theWheel.startAnimation();

                // Set to true so that power can't be changed and spin button re-enabled during
                // the current animation. The user will have to reset before spinning again.
                wheelSpinning = true;
            }
        }

        // -------------------------------------------------------
        // Function for reset button.
        // -------------------------------------------------------
        function resetWheel()
        {
            theWheel.stopAnimation(false);  // Stop the animation, false as param so does not call callback function.
            theWheel.rotationAngle = 0;     // Re-set the wheel angle to 0 degrees.
            theWheel.draw();                // Call draw to render changes to the wheel.

            wheelSpinning = false;          // Reset to false to power buttons and spin can be clicked again.

            // Light up the spin button by changing it's source image and adding a clickable class to it.
            document.getElementById('spin_button').src = "static/images/spin_on.png";
            document.getElementById('spin_button').className = "clickable";
        }

        // -------------------------------------------------------
        // Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters
        // note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this to inform the user of their prize.
        // -------------------------------------------------------
        function alertPrize(indicatedSegment)
        {
            // Do basic alert of the segment text. You would probably want to do something more interesting with this information.
            alert("Let's order " + indicatedSegment.text);
        }
    </script>
</html>