forked from zarocknz/javascript-winwheel
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
237 lines (212 loc) · 12 KB
/
index.html
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!--
Winhweel.js hollow (doughnut) code wheel example by Douglas McKechie @ www.dougtesting.net
See website for tutorials and other documentation.
The MIT License (MIT)
Copyright (c) 2016 Douglas McKechie
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<html>
<head>
<title>PwnWheel</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="Winwheel.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="power_controls">
<br />
<br />
<table class="power" cellpadding="10" cellspacing="0">
<tr>
<th align="center">Power</th>
</tr>
<tr>
<td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
</tr>
<tr>
<td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
</tr>
<tr>
<td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
</tr>
</table>
<br />
<img id="spin_button" src="spin_off.png" alt="Spin" onClick="startSpin();" />
<br /><br />
<a href="#" onClick="resetWheel(); return false;">Play Again</a><br /> (reset)
</div>
</td>
<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>
</table>
</div>
<script>
// Create new wheel object specifying the parameters at creation time.
let theWheel = new Winwheel({
'numSegments' : 16, // Specify number of segments.
'outerRadius' : 215, // Set radius to so wheel fits the background.
'innerRadius' : 70, // Set inner radius to make wheel hollow.
'textFontSize' : 16, // Set font size accordingly.
'textMargin' : 0, // Take out default margin.
'segments' : // Define segments including colour and text.
[
{'fillStyle' : '#2B00FF', 'text' : '5min hands off', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#FF0000', 'text' : 'Sing or else...', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#FF0000', 'text' : 'Service break', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#FF0000', 'text' : 'Change PW', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#B7B7B7', 'text' : 'No action'},
{'fillStyle' : '#FF0000', 'text' : 'Lose GUI', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#FF0000', 'text' : 'No FW', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#FF0000', 'text' : 'RM rand bin', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#B7B7B7', 'text' : 'Reee-spin'},
{'fillStyle' : '#FF0000', 'text' : 'Push-ups or else...', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#FF0000', 'text' : 'Logout all', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#FF0000', 'text' : 'Deface site', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#B7B7B7', 'text' : 'No action'},
{'fillStyle' : '#FF0000', 'text' : 'Flood shells', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#FF0000', 'text' : 'Isayno', 'textFillStyle' : '#FFFFFF'},
{'fillStyle' : '#FF0000', 'text' : 'Delete config', 'textFillStyle' : '#FFFFFF'}
],
'animation' : // Define spin to stop animation.
{
'type' : 'spinToStop',
'duration' : 5,
'spins' : 8,
'callbackFinished' : alertPrize,
},
'pins' : // Turn pins on.
{
'number' : 16,
'fillStyle' : 'silver',
'outerRadius': 4,
}
});
// Loads the tick and airhorn audio sound in to an audio object.
let audio = new Audio('waiting.mp3')
let audio2 = new Audio('airhorn.mp3');
function playSound()
{
audio.pause();
audio.currentTime = 0;
audio.play()
}
//This function plays the airhorn
function playSound2()
{
audio.pause();
audio2.pause();
audio2.currentTime = 0;
audio2.play();
}
// Vars used by the code in this page to do power controls.
let wheelPower = 0;
let wheelSpinning = false;
// -------------------------------------------------------
// Function to handle the onClick on the power buttons.
// -------------------------------------------------------
function powerSelected(powerLevel)
{
// Ensure that power can't be changed while wheel is spinning.
if (wheelSpinning == false) {
// Reset all to grey incase this is not the first time the user has selected the power.
document.getElementById('pw1').className = "";
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";
// Now light up all cells below-and-including the one selected by changing the class.
if (powerLevel >= 1) {
document.getElementById('pw1').className = "pw1";
}
if (powerLevel >= 2) {
document.getElementById('pw2').className = "pw2";
}
if (powerLevel >= 3) {
document.getElementById('pw3').className = "pw3";
}
// Set wheelPower var used when spin button is clicked.
wheelPower = powerLevel;
// Light up the spin button by changing it's source image and adding a clickable class to it.
document.getElementById('spin_button').src = "spin_on.png";
document.getElementById('spin_button').className = "clickable";
}
}
// -------------------------------------------------------
// Click handler for spin button.
// -------------------------------------------------------
function startSpin()
{
playSound()
// 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.
if (wheelPower == 1) {
theWheel.animation.spins = 3;
} else if (wheelPower == 2) {
theWheel.animation.spins = 8;
} else if (wheelPower == 3) {
theWheel.animation.spins = 15;
}
// Disable the spin button so can't click again while wheel is spinning.
document.getElementById('spin_button').src = "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.
document.getElementById('pw1').className = ""; // Remove all colours from the power level indicators.
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";
wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
}
// -------------------------------------------------------
// 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)
{
playSound2();
// Do basic alert of the segment text. You would probably want to do something more interesting with this information.
//alert("You'll be attacked by:\n " + indicatedSegment.text);
console.log("test");
//toastr.success("You'll be attacked by:\n " + indicatedSegment.text);
toastr.success("test")
}
</script>
</body>
</html>