<h2>Mouse Component in Crafty - Detecting Buttons</h2>
<div id="crafty-game"></div>

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato';
  margin: 20px auto;
  width: 600px;
  text-align: center;
}

h2 {
  margin: 20px 0;
}

#crafty-game {
  background: #efefef;
}

var stageWidth = 600;
var stageHeight = 400;
var gameScore = 0;

Crafty.init(600, 400, document.getElementById('crafty-game'));

var eventText = Crafty.e('2D, DOM, Text')
  .attr({
    x: 20,
    y: 15
  })
  .textFont({
    size: '20px'
  });

var Box = Crafty.e("2D, Canvas, Color, Mouse")
  .attr({
    x: 200,
    y: 100,
    w: 200,
    h: 200
  })
  .color("black")
  .origin("center")
  .bind('MouseDown', function(evt) {
    if( evt.mouseButton == Crafty.mouseButtons.RIGHT ) {
       eventText.text("Right");
       this.x += 10;
    }
    if( evt.mouseButton == Crafty.mouseButtons.LEFT ) {
       eventText.text("Left");
       this.x -= 10;
    }
  });