Skip to content

Commit

Permalink
Tabs to spaces
Browse files Browse the repository at this point in the history
  • Loading branch information
@zarocknz
zarocknz committed Mar 4, 2016
1 parent 76161e1 commit f72ee61
Show file tree
Hide file tree
Showing 2 changed files with 190 additions and 190 deletions.
332 changes: 166 additions & 166 deletions examples/basic_code_wheel/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
<!--
Winhweel.js basic code wheel example by Douglas McKechie @ www.dougtesting.net
See website for tutorials and other documentation.
The MIT License (MIT)
Winhweel.js basic 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
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:
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 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.
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>HTML5 Canvas Winning Wheel</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<head>
<title>HTML5 Canvas Winning Wheel</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>
</head>
<body>
<div align="center">
<h1>Winwheel.js example wheel</h1>
<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>
<br />
<p>Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.</p>
<br />
<table cellpadding="0" cellspacing="0" border="0">
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
</head>
<body>
<div align="center">
<h1>Winwheel.js example wheel</h1>
<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>
<br />
<p>Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.</p>
<br />
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="power_controls">
Expand Down Expand Up @@ -71,137 +71,137 @@ <h1>Winwheel.js example wheel</h1>
</td>
</tr>
</table>
<script>
// Create new wheel object specifying the parameters at creation time.
var theWheel = new Winwheel({
'numSegments' : 8,
'outerRadius' : 212,
'textFontSize' : 28,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 5,
'spins' : 8,
'callbackFinished' : 'alertPrize()'
}
});
// Vars used by the code in this page to do power controls.
var wheelPower = 0;
var 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()
{
// 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.
// -------------------------------------------------------
function alertPrize()
{
// Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
var winningSegment = theWheel.getIndicatedSegment();
// Do basic alert of the segment text. You would probably want to do something more interesting with this information.
alert("You have won " + winningSegment.text);
}
</script>
</body>
<script>
// Create new wheel object specifying the parameters at creation time.
var theWheel = new Winwheel({
'numSegments' : 8,
'outerRadius' : 212,
'textFontSize' : 28,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 5,
'spins' : 8,
'callbackFinished' : 'alertPrize()'
}
});
// Vars used by the code in this page to do power controls.
var wheelPower = 0;
var 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()
{
// 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.
// -------------------------------------------------------
function alertPrize()
{
// Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
var winningSegment = theWheel.getIndicatedSegment();
// Do basic alert of the segment text. You would probably want to do something more interesting with this information.
alert("You have won " + winningSegment.text);
}
</script>
</body>
</html>
Loading

0 comments on commit f72ee61

Please sign in to comment.