Skip to content
Browse files

Refactor SpinWhell into an object\n Add WebGl support check

  • Loading branch information...
1 parent 02b24de commit b38175160f19f566a9ba6ca418da4e6afe7ab8a2 Irvin Ocanto committed
Showing with 121 additions and 106 deletions.
  1. +113 −105 public/js/spin-wheel.js
  2. +8 −1 public/spin-wheel.html
View
218 public/js/spin-wheel.js
@@ -1,114 +1,122 @@
- var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
+var SpinWheel = SpinWheel || {
+
+ colors : ["#B8D430", "#3AB745", "#029990", "#3501CB",
"#2E2C75", "#673A7E", "#CC0071", "#F80120",
- "#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
- var participants = ["Andrew", "Jason", "Urvi", "Manan",
- "Norwich", "Winston", "Andrian", "Ryan",
- "Kenny", "Justin", "Phil", "Michael"];
+ "#F35B20", "#FB9A00", "#FFCC00", "#FEF200"],
+
+
+ participants : ["Michael H.", "Sean", "Urvi", "Phil",
+ "CJ", "Winston", "Adrian", "Ryan",
+ "Kenny", "Justin", "Phil", "Krishna"],
+
+ startAngle : 0,
+ arc : Math.PI / 6,
+ spinTimeout : null,
+ spinArcStart : 10,
+ spinTime : 0,
+ spinTimeTotal : 0,
- var startAngle = 0;
- var arc = Math.PI / 6;
- var spinTimeout = null;
-
- var spinArcStart = 10;
- var spinTime = 0;
- var spinTimeTotal = 0;
-
- var ctx;
-
- function draw() {
- drawRouletteWheel();
- }
-
- function drawRouletteWheel() {
- var canvas = document.getElementById("wheelcanvas");
- if (canvas.getContext) {
- var outsideRadius = 200;
- var textRadius = 160;
- var insideRadius = 125;
-
- ctx = canvas.getContext("2d");
- ctx.clearRect(0,0,500,500);
-
+ ctx : null,
+
+ draw : function() {
+ this.drawRouletteWheel();
+ },
+
+ drawRouletteWheel: function () {
+ var canvas = document.getElementById("wheelcanvas");
+ if (canvas.getContext) {
+ var outsideRadius = 200;
+ var textRadius = 160;
+ var insideRadius = 125;
+
+ ctx = canvas.getContext("2d");
+ ctx.clearRect(0,0,500,500);
- ctx.strokeStyle = "black";
- ctx.lineWidth = 2;
+ ctx.strokeStyle = "black";
+ ctx.lineWidth = 2;
- ctx.font = 'bold 12px sans-serif';
+ ctx.font = 'bold 12px sans-serif';
- for(var i = 0; i < participants.length; i++) {
- var angle = startAngle + i * arc;
- ctx.fillStyle = colors[i];
-
- ctx.beginPath();
- ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
- ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
- ctx.stroke();
- ctx.fill();
+ for(var i = 0; i < this.participants.length; i++) {
+ var angle = this.startAngle + i * this.arc;
+ ctx.fillStyle = this.colors[i];
- ctx.save();
- ctx.shadowOffsetX = -1;
- ctx.shadowOffsetY = -1;
- ctx.shadowBlur = 0;
- ctx.shadowColor = "rgb(220,220,220)";
- ctx.fillStyle = "black";
- ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
- ctx.rotate(angle + arc / 2 + Math.PI / 2);
- var text = participants[i];
- ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
- ctx.restore();
- }
+ ctx.beginPath();
+ ctx.arc(250, 250, outsideRadius, angle, angle + this.arc, false);
+ ctx.arc(250, 250, insideRadius, angle + this.arc, angle, true);
+ ctx.stroke();
+ ctx.fill();
+
+ ctx.save();
+ ctx.shadowOffsetX = -1;
+ ctx.shadowOffsetY = -1;
+ ctx.shadowBlur = 0;
+ ctx.shadowColor = "rgb(220,220,220)";
+ ctx.fillStyle = "black";
+ ctx.translate(250 + Math.cos(angle + this.arc / 2) * textRadius, 250 + Math.sin(angle + this.arc / 2) * textRadius);
+ ctx.rotate(angle + this.arc / 2 + Math.PI / 2);
+ var text = this.participants[i];
+ ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
+ ctx.restore();
+ }
- //Arrow
- ctx.fillStyle = "black";
- ctx.beginPath();
- ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
- ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
- ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
- ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
- ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
- ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
- ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
- ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
- ctx.fill();
- }
- }
-
- function spin() {
- spinAngleStart = Math.random() * 10 + 10;
- spinTime = 0;
- spinTimeTotal = Math.random() * 3 + 4 * 1000;
- rotateWheel();
- }
-
- function rotateWheel() {
- spinTime += 30;
- if(spinTime >= spinTimeTotal) {
- stopRotateWheel();
- return;
- }
- var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
- startAngle += (spinAngle * Math.PI / 180);
- drawRouletteWheel();
- spinTimeout = setTimeout('rotateWheel()', 30);
- }
-
- function stopRotateWheel() {
- clearTimeout(spinTimeout);
- var degrees = startAngle * 180 / Math.PI + 90;
- var arcd = arc * 180 / Math.PI;
- var index = Math.floor((360 - degrees % 360) / arcd);
- ctx.save();
- ctx.font = 'bold 30px sans-serif';
- var text = participants[index]
- ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
- ctx.restore();
- }
-
- function easeOut(t, b, c, d) {
- var ts = (t/=d)*t;
- var tc = ts*t;
- return b+c*(tc + -3*ts + 3*t);
- }
+ //Arrow
+ ctx.fillStyle = "black";
+ ctx.beginPath();
+ ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
+ ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
+ ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
+ ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
+ ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
+ ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
+ ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
+ ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
+ ctx.fill();
+ }
+ },
+ spin : function () {
+ spinAngleStart = Math.random() * 10 + 10;
+ spinTime = 0;
+ spinTimeTotal = Math.random() * 3 + 5 * 1000;
+ this.rotateWheel();
+ },
+ rotateWheel: function () {
+ spinTime += 30;
+ if(spinTime >= spinTimeTotal) {
+ this.stopRotateWheel();
+ return;
+ }
+ var spinAngle = spinAngleStart - this.easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
+ this.startAngle += (spinAngle * Math.PI / 180);
+ this.drawRouletteWheel();
+ spinTimeout = setTimeout('SpinWheel.rotateWheel()', 30);
+ },
- draw();
+ stopRotateWheel: function () {
+ clearTimeout(spinTimeout);
+ var degrees = this.startAngle * 180 / Math.PI + 90;
+ var arcd = this.arc * 180 / Math.PI;
+ var index = Math.floor((360 - degrees % 360) / arcd);
+ ctx.save();
+ ctx.font = 'bold 30px sans-serif';
+ var text = this.participants[index]
+ ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
+ ctx.restore();
+ },
+ easeOut: function (t, b, c, d) {
+ var ts = (t/=d)*t;
+ var tc = ts*t;
+ return b+c*(tc + -3*ts + 3*t);
+ },
+
+ checkWebGLSupport: function () {
+ if (!window.WebGLRenderingContext) {
+ alert ("Get a real Browser !!");
+ return false;
+ }
+ return true;
+ }
+}
+
+
View
9 public/spin-wheel.html
@@ -10,7 +10,7 @@
<div class="container-fluid">
<div class="span10">
<h1>Spin Wheel!</h1>
- <input type="button" value="spin" onclick="spin();" style="float: left;"> </input>
+ <input type="button" value="spin" onclick="SpinWheel.spin();" style="float: left;"> </input>
<canvas id="wheelcanvas" width="500" height="500"></canvas>
</div>
<div class="span2">
@@ -21,6 +21,13 @@
<script type="application/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<script type="application/javascript" src="js/spin-wheel.js"> </script>
+ <script type="application/javascript">
+ $(document).ready(function (){
+ if ( SpinWheel.checkWebGLSupport() ){
+ SpinWheel.draw();
+ }
+ });
+ </script>
</html>

0 comments on commit b381751

Please sign in to comment.
Something went wrong with that request. Please try again.