Skip to content

Commit f72ee61

Browse files
zarocknzzarocknz
committed
Tabs to spaces
1 parent 76161e1 commit f72ee61

File tree

2 files changed

+190
-190
lines changed

2 files changed

+190
-190
lines changed

‎examples/basic_code_wheel/index.html‎

Lines changed: 166 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,44 @@
11
<!--
2-
Winhweel.js basic code wheel example by Douglas McKechie @ www.dougtesting.net
3-
See website for tutorials and other documentation.
4-
5-
The MIT License (MIT)
2+
Winhweel.js basic code wheel example by Douglas McKechie @ www.dougtesting.net
3+
See website for tutorials and other documentation.
4+
5+
The MIT License (MIT)
66
7-
Copyright (c) 2016 Douglas McKechie
7+
Copyright (c) 2016 Douglas McKechie
88
9-
Permission is hereby granted, free of charge, to any person obtaining a copy
10-
of this software and associated documentation files (the "Software"), to deal
11-
in the Software without restriction, including without limitation the rights
12-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13-
copies of the Software, and to permit persons to whom the Software is
14-
furnished to do so, subject to the following conditions:
9+
Permission is hereby granted, free of charge, to any person obtaining a copy
10+
of this software and associated documentation files (the "Software"), to deal
11+
in the Software without restriction, including without limitation the rights
12+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13+
copies of the Software, and to permit persons to whom the Software is
14+
furnished to do so, subject to the following conditions:
1515
16-
The above copyright notice and this permission notice shall be included in all
17-
copies or substantial portions of the Software.
16+
The above copyright notice and this permission notice shall be included in all
17+
copies or substantial portions of the Software.
1818
19-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25-
SOFTWARE.
19+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25+
SOFTWARE.
2626
-->
2727
<html>
28-
<head>
29-
<title>HTML5 Canvas Winning Wheel</title>
30-
<link rel="stylesheet" href="main.css" type="text/css" />
28+
<head>
29+
<title>HTML5 Canvas Winning Wheel</title>
30+
<link rel="stylesheet" href="main.css" type="text/css" />
3131
<script type="text/javascript" src="../../Winwheel.js"></script>
32-
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
33-
</head>
34-
<body>
35-
<div align="center">
36-
<h1>Winwheel.js example wheel</h1>
37-
<p>Here is an example of a basic code drawn wheel which spins to a stop with the prize won alerted to the user.</p>
38-
<br />
39-
<p>Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.</p>
40-
<br />
41-
<table cellpadding="0" cellspacing="0" border="0">
32+
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
33+
</head>
34+
<body>
35+
<div align="center">
36+
<h1>Winwheel.js example wheel</h1>
37+
<p>Here is an example of a basic code drawn wheel which spins to a stop with the prize won alerted to the user.</p>
38+
<br />
39+
<p>Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.</p>
40+
<br />
41+
<table cellpadding="0" cellspacing="0" border="0">
4242
<tr>
4343
<td>
4444
<div class="power_controls">
@@ -71,137 +71,137 @@ <h1>Winwheel.js example wheel</h1>
7171
</td>
7272
</tr>
7373
</table>
74-
<script>
75-
// Create new wheel object specifying the parameters at creation time.
76-
var theWheel = new Winwheel({
77-
'numSegments' : 8,
78-
'outerRadius' : 212,
79-
'textFontSize' : 28,
80-
'segments' :
81-
[
82-
{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
83-
{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
84-
{'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
85-
{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
86-
{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
87-
{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
88-
{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
89-
{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
90-
],
91-
'animation' :
92-
{
93-
'type' : 'spinToStop',
94-
'duration' : 5,
95-
'spins' : 8,
96-
'callbackFinished' : 'alertPrize()'
97-
}
98-
});
99-
100-
// Vars used by the code in this page to do power controls.
101-
var wheelPower = 0;
102-
var wheelSpinning = false;
103-
104-
// -------------------------------------------------------
105-
// Function to handle the onClick on the power buttons.
106-
// -------------------------------------------------------
107-
function powerSelected(powerLevel)
108-
{
109-
// Ensure that power can't be changed while wheel is spinning.
110-
if (wheelSpinning == false)
111-
{
112-
// Reset all to grey incase this is not the first time the user has selected the power.
113-
document.getElementById('pw1').className = "";
114-
document.getElementById('pw2').className = "";
115-
document.getElementById('pw3').className = "";
116-
117-
// Now light up all cells below-and-including the one selected by changing the class.
118-
if (powerLevel >= 1)
119-
{
120-
document.getElementById('pw1').className = "pw1";
121-
}
122-
123-
if (powerLevel >= 2)
124-
{
125-
document.getElementById('pw2').className = "pw2";
126-
}
127-
128-
if (powerLevel >= 3)
129-
{
130-
document.getElementById('pw3').className = "pw3";
131-
}
132-
133-
// Set wheelPower var used when spin button is clicked.
134-
wheelPower = powerLevel;
135-
136-
// Light up the spin button by changing it's source image and adding a clickable class to it.
137-
document.getElementById('spin_button').src = "spin_on.png";
138-
document.getElementById('spin_button').className = "clickable";
139-
}
140-
}
141-
142-
// -------------------------------------------------------
143-
// Click handler for spin button.
144-
// -------------------------------------------------------
145-
function startSpin()
146-
{
147-
// Ensure that spinning can't be clicked again while already running.
148-
if (wheelSpinning == false)
149-
{
150-
// Based on the power level selected adjust the number of spins for the wheel, the more times is has
151-
// to rotate with the duration of the animation the quicker the wheel spins.
152-
if (wheelPower == 1)
153-
{
154-
theWheel.animation.spins = 3;
155-
}
156-
else if (wheelPower == 2)
157-
{
158-
theWheel.animation.spins = 8;
159-
}
160-
else if (wheelPower == 3)
161-
{
162-
theWheel.animation.spins = 15;
163-
}
164-
165-
// Disable the spin button so can't click again while wheel is spinning.
166-
document.getElementById('spin_button').src = "spin_off.png";
167-
document.getElementById('spin_button').className = "";
168-
169-
// Begin the spin animation by calling startAnimation on the wheel object.
170-
theWheel.startAnimation();
171-
172-
// Set to true so that power can't be changed and spin button re-enabled during
173-
// the current animation. The user will have to reset before spinning again.
174-
wheelSpinning = true;
175-
}
176-
}
177-
178-
// -------------------------------------------------------
179-
// Function for reset button.
180-
// -------------------------------------------------------
181-
function resetWheel()
182-
{
183-
theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
184-
theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
185-
theWheel.draw(); // Call draw to render changes to the wheel.
186-
187-
document.getElementById('pw1').className = ""; // Remove all colours from the power level indicators.
188-
document.getElementById('pw2').className = "";
189-
document.getElementById('pw3').className = "";
190-
191-
wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
192-
}
193-
194-
// -------------------------------------------------------
195-
// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters.
196-
// -------------------------------------------------------
197-
function alertPrize()
198-
{
199-
// Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
200-
var winningSegment = theWheel.getIndicatedSegment();
201-
202-
// Do basic alert of the segment text. You would probably want to do something more interesting with this information.
203-
alert("You have won " + winningSegment.text);
204-
}
205-
</script>
206-
</body>
74+
<script>
75+
// Create new wheel object specifying the parameters at creation time.
76+
var theWheel = new Winwheel({
77+
'numSegments' : 8,
78+
'outerRadius' : 212,
79+
'textFontSize' : 28,
80+
'segments' :
81+
[
82+
{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
83+
{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
84+
{'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
85+
{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
86+
{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
87+
{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
88+
{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
89+
{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
90+
],
91+
'animation' :
92+
{
93+
'type' : 'spinToStop',
94+
'duration' : 5,
95+
'spins' : 8,
96+
'callbackFinished' : 'alertPrize()'
97+
}
98+
});
99+
100+
// Vars used by the code in this page to do power controls.
101+
var wheelPower = 0;
102+
var wheelSpinning = false;
103+
104+
// -------------------------------------------------------
105+
// Function to handle the onClick on the power buttons.
106+
// -------------------------------------------------------
107+
function powerSelected(powerLevel)
108+
{
109+
// Ensure that power can't be changed while wheel is spinning.
110+
if (wheelSpinning == false)
111+
{
112+
// Reset all to grey incase this is not the first time the user has selected the power.
113+
document.getElementById('pw1').className = "";
114+
document.getElementById('pw2').className = "";
115+
document.getElementById('pw3').className = "";
116+
117+
// Now light up all cells below-and-including the one selected by changing the class.
118+
if (powerLevel >= 1)
119+
{
120+
document.getElementById('pw1').className = "pw1";
121+
}
122+
123+
if (powerLevel >= 2)
124+
{
125+
document.getElementById('pw2').className = "pw2";
126+
}
127+
128+
if (powerLevel >= 3)
129+
{
130+
document.getElementById('pw3').className = "pw3";
131+
}
132+
133+
// Set wheelPower var used when spin button is clicked.
134+
wheelPower = powerLevel;
135+
136+
// Light up the spin button by changing it's source image and adding a clickable class to it.
137+
document.getElementById('spin_button').src = "spin_on.png";
138+
document.getElementById('spin_button').className = "clickable";
139+
}
140+
}
141+
142+
// -------------------------------------------------------
143+
// Click handler for spin button.
144+
// -------------------------------------------------------
145+
function startSpin()
146+
{
147+
// Ensure that spinning can't be clicked again while already running.
148+
if (wheelSpinning == false)
149+
{
150+
// Based on the power level selected adjust the number of spins for the wheel, the more times is has
151+
// to rotate with the duration of the animation the quicker the wheel spins.
152+
if (wheelPower == 1)
153+
{
154+
theWheel.animation.spins = 3;
155+
}
156+
else if (wheelPower == 2)
157+
{
158+
theWheel.animation.spins = 8;
159+
}
160+
else if (wheelPower == 3)
161+
{
162+
theWheel.animation.spins = 15;
163+
}
164+
165+
// Disable the spin button so can't click again while wheel is spinning.
166+
document.getElementById('spin_button').src = "spin_off.png";
167+
document.getElementById('spin_button').className = "";
168+
169+
// Begin the spin animation by calling startAnimation on the wheel object.
170+
theWheel.startAnimation();
171+
172+
// Set to true so that power can't be changed and spin button re-enabled during
173+
// the current animation. The user will have to reset before spinning again.
174+
wheelSpinning = true;
175+
}
176+
}
177+
178+
// -------------------------------------------------------
179+
// Function for reset button.
180+
// -------------------------------------------------------
181+
function resetWheel()
182+
{
183+
theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
184+
theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
185+
theWheel.draw(); // Call draw to render changes to the wheel.
186+
187+
document.getElementById('pw1').className = ""; // Remove all colours from the power level indicators.
188+
document.getElementById('pw2').className = "";
189+
document.getElementById('pw3').className = "";
190+
191+
wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
192+
}
193+
194+
// -------------------------------------------------------
195+
// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters.
196+
// -------------------------------------------------------
197+
function alertPrize()
198+
{
199+
// Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
200+
var winningSegment = theWheel.getIndicatedSegment();
201+
202+
// Do basic alert of the segment text. You would probably want to do something more interesting with this information.
203+
alert("You have won " + winningSegment.text);
204+
}
205+
</script>
206+
</body>
207207
</html>

0 commit comments

Comments
 (0)