Add a button to spin the wheel

while the button is pressed, it'll accumulate spin force, then loose it, then accumulate it, etc...
release the button to spin

.jshintrc

@@ -97,9 +97,11 @@
         "Particle"    : true,
         "Point"       : true,
         "Item"        : true,
+        "CircularButton": true,
         "world"       : true,
         "wheel"       : true,
         "arrow"       : true,
+        "pushButton"  : true,
         "ctx"         : true
     }        // additional predefined global variables
 }

index.html

@@ -17,9 +17,9 @@
       <input id="player_name" type="text" class="validate">
 
       <section id="wheel_config">
-        <label for="wheel_velocity">Wheel Velocity</label>
-        <input type="range" id="wheel_velocity" min="0" max="50" value="20">
-        <label class="range_number">20</label>
+        <label for="wheel_velocity">Minimum wheel velocity</label>
+        <input type="range" id="wheel_velocity" min="0" max="50" value="10">
+        <label class="range_number">10</label>
       </section>
     </section>
 
@@ -111,6 +111,7 @@
   <script src="js/models/Maths.js"></script>
   <script src="js/models/Particle.js"></script>
   <script src="js/models/Item.js"></script>
+  <script src="js/models/CircularButton.js"></script>
   <script src="js/models/Wheel.js"></script>
   <script src="js/script.js"></script>
 </body>

js/config.js

@@ -91,6 +91,13 @@
         image: 'images/rocket-arrow.png',
       },
 
+      pushButton: {
+        x: wheelX + wheelRadius,
+        y: wheelY - wheelRadius,
+        radius: wheelRadius / 5,
+        image: 'images/big-red-button.png',
+      },
+
       sounds: {
         wheelSpin: 'http://bramp.net/javascript/wheel.mp3',
         wheelFound: 'sounds/result.mp3',
@@ -113,5 +120,6 @@
   window.ctx = null;
   window.wheel = null;
   window.arrow = null;
+  window.pushButton = null;
   window.world = null;
 })();

js/models/CircularButton.js

@@ -0,0 +1,71 @@
+/////////////////////////////
+// Circular button with an image
+/////////////////////////////
+
+(function() {
+  'use strict';
+
+  function CircularButton(x, y, radius, image) {
+    Item.call(this, x, y, radius * 2, radius * 2, image);
+    this.radius = radius;
+    this.states.pressed = false;
+    this.createBody();
+  }
+
+  CircularButton.prototype = Object.create(Item.prototype);
+  CircularButton.prototype.constructor = CircularButton;
+
+  CircularButton.prototype.createBody = function() {
+    this.body = new p2.Body({
+      position: [this.x, config.physics.physicsHeight - this.y]
+    });
+
+    this.body.addShape(new p2.Circle(this.radius));
+
+    world.addBody(this.body);
+  };
+
+  CircularButton.prototype.updatePosition = function(x, y, radius) {
+    this.radius = radius;
+    Item.prototype.updatePosition(x, y, radius * 2, radius * 2);
+  };
+
+  CircularButton.prototype.draw = function() {
+    Item.prototype.draw.call(this);
+
+    if (this.states.pressed) {
+      var opacity = this.getPressForce() / 2 * 0.75;
+
+      ctx.save();
+
+      ctx.beginPath();
+      ctx.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')';
+      ctx.arc(this.pX, this.pY, this.radius * 0.83 * config.physics.ppm, 0, Math.PI * 2);
+      ctx.fill();
+
+      ctx.restore();
+    }
+  };
+
+  CircularButton.prototype.getPressForce = function() {
+    var time = (Date.now() - this.pressStartTime) / 1000;
+    var max = 4;
+    var normalizedTime = time % max;
+    if (normalizedTime > max / 2) {
+      normalizedTime = max - normalizedTime;
+    }
+    return normalizedTime;
+  };
+
+  CircularButton.prototype.press = function() {
+    this.states.pressed = true;
+    this.pressStartTime = Date.now();
+  };
+
+  CircularButton.prototype.release = function() {
+    this.states.pressed = false;
+    return this.getPressForce();
+  };
+
+  window.CircularButton = CircularButton;
+})();

js/models/Item.js

@@ -1,5 +1,5 @@
 /////////////////////////////
-// arrow on top of the wheel of fortune
+// Generic item with an image
 /////////////////////////////
 
 (function() {
@@ -9,6 +9,7 @@
     this.updatePosition(x, y, w, h);
     this.image = new Image();
     this.image.src = image;
+    this.states = {};
   }
 
   Item.prototype.updatePosition = function(x, y, w, h) {
@@ -22,8 +23,8 @@
   };
 
   Item.prototype.draw = function() {
-    var width = this.w || this.image.width;
-    var height = this.h || this.image.height;
+    var width = this.w * config.physics.ppm || this.image.width;
+    var height = this.h * config.physics.ppm || this.image.height;
 
     ctx.save();
     ctx.drawImage(this.image, this.pX - width * 0.5, this.pY - height * 0.5, width, height);

js/script.js

@@ -17,9 +17,8 @@
   var mouseBody = null;
   var mouseConstraint = null;
   var playerName = null;
-
-  //adapt angularVelocity to tend toward 20
-  var targetSpeed = 20;
+  var minVelocity = 10;
+  var maxVelocity = 25;
 
   function getPhysicsCoord(e) {
     var rect = drawingCanvas.getBoundingClientRect();
@@ -40,7 +39,16 @@
   }
 
   function checkStartDrag() {
-
+    if (world.hitTest(mouseBody.position, [pushButton.body])[0]) {
+      if (wheelSpinning === true) {
+        wheel.body.angularVelocity = 0;
+        wheelSpinning = false;
+        wheelStopped = true;
+        wheel.sound.pause();
+      }
+      statusLabel.innerHTML = '';
+      pushButton.press();
+    }
     if (world.hitTest(mouseBody.position, [wheel.body])[0]) {
       if (wheelSpinning === true) {
         wheelSpinning = false;
@@ -58,7 +66,10 @@
   }
 
   function checkEndDrag() {
-    if (!mouseConstraint) {
+    if (pushButton.states.pressed) {
+      var pressForce = pushButton.release();
+      wheel.body.angularVelocity = minVelocity + pressForce * (maxVelocity - minVelocity);
+    } else if (!mouseConstraint) {
       return;
     }
 
@@ -71,14 +82,21 @@
       return;
     }
 
-    var velocity = wheel.body.angularVelocity;
+    var velocity = Math.abs(wheel.body.angularVelocity);
+    var direction = Math.sign(wheel.body.angularVelocity);
 
-    if (Math.abs(velocity) <= 5) {
+    if (velocity <= 5) {
       return;
     }
+    if (velocity < minVelocity) {
+      velocity = minVelocity;
+    }
+    if (velocity > maxVelocity) {
+      velocity = maxVelocity;
+    }
 
-    wheel.body.angularVelocity = (velocity > 0 ? targetSpeed : -targetSpeed);
-    console.log('initial velocity : ' + velocity + ' adapted to ' + wheel.body.angularVelocity);
+    console.log('initial velocity : ' + wheel.body.angularVelocity + ' adapted to ' + velocity * direction);
+    wheel.body.angularVelocity = velocity * direction;
 
     wheelSpinning = true;
     wheelStopped = false;
@@ -119,6 +137,7 @@
     drawingCanvas.height = canvas.viewHeight;
 
     arrow.updatePosition(config.arrow.x, config.arrow.y, config.arrow.w, config.arrow.h);
+    pushButton.updatePosition(config.pushButton.x, config.pushButton.y, config.pushButton.radius);
     wheel.updatePosition(config.wheel.x, config.wheel.y, config.wheel.radius);
   }
 
@@ -171,6 +190,7 @@
 
     wheel.draw();
     arrow.draw();
+    pushButton.draw();
 
     var particlesLength = particles.length;
 
@@ -228,6 +248,7 @@
     wheel.initAssets();
 
     arrow = new Item(config.arrow.x, config.arrow.y, config.arrow.w, config.arrow.h, config.arrow.image);
+    pushButton = new CircularButton(config.pushButton.x, config.pushButton.y, config.pushButton.radius, config.pushButton.image);
     mouseBody = new p2.Body();
 
     world.addBody(mouseBody);
@@ -297,7 +318,7 @@
     }
 
     var ranges = [{
-      input: '#wheel_velocity', onchange: function(e) { targetSpeed = parseInt(e.target.value); }
+      input: '#wheel_velocity', onchange: function(e) { minVelocity = parseInt(e.target.value); }
     }, {
       input: '.bribe input', onchange: function(e) {
         var planetIndex = e.target.getAttribute('data-planet');