Permalink
Browse files

Implement standalone and multiuser wheel

  • Loading branch information...
1 parent 838b291 commit 5eab89f1e4599f0479a0e01291e5f3e54bee8bcc Irvin Ocanto committed May 12, 2013
Showing with 143 additions and 0 deletions.
  1. +18 −0 public/js/spin-wheel.js
  2. +11 −0 public/spin-wheel.html
  3. +114 −0 public/standalone-wheel.html
View
@@ -79,8 +79,25 @@ var SpinWheel = SpinWheel || {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 5 * 1000;
+ this.broadcastSpin( spinAngleStart, spinTimeTotal );
this.rotateWheel();
},
+ broadcastSpin: function ( spinAngleStart, spinTimeTotal ){
+ if ( typeof socket !== "undefined" ){
+ socket.emit('rotate', {
+ a : spinAngleStart,
+ b : spinTimeTotal
+ });
+ }
+ },
+
+ remoteSpin : function (remoteSpinAngleStart,remoteSpinTimeTotal) {
+ spinAngleStart = remoteSpinAngleStart;
+ spinTime = 0;
+ spinTimeTotal = remoteSpinTimeTotal;
+ this.rotateWheel();
+ },
+
rotateWheel: function () {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
@@ -117,6 +134,7 @@ var SpinWheel = SpinWheel || {
}
return true;
}
+
}
View
@@ -21,7 +21,18 @@
<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 src="/socket.io/socket.io.js"></script>
<script type="application/javascript">
+ var socket = io.connect('http://localhost');
+ socket.on('news', function (data) {
+ console.log(data);
+ });
+ socket.on('beginrotate', function (data) {
+ console.log(data);
+ SpinWheel.remoteSpin(data['a'], data['b'] )
+ });
+
+
$(document).ready(function (){
if ( SpinWheel.checkWebGLSupport() ){
SpinWheel.draw();
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+ <meta charset="utf-8">
+ <title>Standalone Spin Wheel!!</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le styles -->
+ <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+ <style type="text/css">
+ body {
+ padding-top: 20px;
+ padding-bottom: 40px;
+ }
+
+ /* Custom container */
+ .container-narrow {
+ margin: 0 auto;
+ max-width: 700px;
+ }
+ .container-narrow > hr {
+ margin: 30px 0;
+ }
+
+ /* Main marketing message and sign up button */
+ .jumbotron {
+ margin: 60px 0;
+ text-align: center;
+ }
+ .jumbotron h1 {
+ font-size: 72px;
+ line-height: 1;
+ }
+ .jumbotron .btn {
+ font-size: 21px;
+ padding: 14px 24px;
+ }
+
+ /* Supporting marketing content */
+ .marketing {
+ margin: 60px 0;
+ }
+ .marketing p + h4 {
+ margin-top: 28px;
+ }
+ </style>
+
+
+ <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="../assets/js/html5shiv.js"></script>
+ <![endif]-->
+
+ <!-- Fav and touch icons -->
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+ <link rel="shortcut icon" href="../assets/ico/favicon.png">
+ </head>
+
+ <body>
+
+ <div class="container-narrow">
+
+ <div class="masthead">
+ <ul class="nav nav-pills pull-right">
+ <li class="active"><a href="/">Home</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ <h3 class="muted">Spin Wheel!</h3>
+ </div>
+
+ <hr>
+ <div class="container-fluid">
+ <div class="span10">
+ <input type="button" value="spin" onclick="SpinWheel.spin();" style="float: left;"> </input>
+ <canvas id="wheelcanvas" width="500" height="500"></canvas>
+ </div>
+ <div class="span2">
+ Config section
+ </div>
+ </div>
+
+ <hr>
+
+ <div class="footer">
+ <p>© Company 2013</p>
+ </div>
+
+ </div> <!-- /container -->
+
+ <!--
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <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>
+
+
+
+</body>
+</html>
+
+

0 comments on commit 5eab89f

Please sign in to comment.