var React = require('react');
var PropTypes = React.PropTypes;
var Square = require('./Square');
var canMoveKnight = require('./Game').canMoveKnight;
var moveKnight = require('./Game').moveKnight;
var ItemTypes = require('./Constants').ItemTypes;
var DropTarget = require('react-dnd').DropTarget;

var squareTarget = {
  drop: function (props, monitor) {
    moveKnight(props.x, props.y);
  }
};

function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  };
}

var BoardSquare = React.createClass({
  propTypes: {
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired,
    isOver: PropTypes.bool.isRequired,
    connectDropTarget: PropTypes.bool.isRequired
  },

  render: function () {
    var {x, y} = this.props;
    var connectDropTarget = this.props.connectDropTarget;
    var isOver = this.props.isOver;
    var black = (x + y) % 2 === 1;

    return connectDropTarget(
      <div style={{
        position: 'relative',
        width: '100%',
        height: '100%'
      }}>
        <Square black={black}>
          {this.props.children}
        </Square>
        {isOver &&
          <div style={{
            position: 'absolute',
            top: 0,
            left: 0,
            height: '100%',
            width: '100%',
            zIndex: 1,
            opacity: 0.5,
            backgroundColor: 'yellow'
          }} />
        }
      </div>
    );
  }
});

module.exports = DropTarget(ItemTypes.KNIGHT, squareTarget, collect)(BoardSquare);

@@ -312,16 +312,95 @@
 get = %7B%0A
+  canDrop: function (props) %7B%0A    return canMoveKnight(props.x, props.y);%0A  %7D,%0A
   drop: 
@@ -423,24 +423,24 @@
  monitor) %7B%0A
-
     moveKnig
@@ -590,16 +590,48 @@
 isOver()
+,%0A    canDrop: monitor.canDrop()
 %0A  %7D;%0A%7D%0A
@@ -791,24 +791,64 @@
 isRequired,%0A
+    canDrop: PropTypes.bool.isRequired,%0A
     connectD
@@ -1037,16 +1037,54 @@
 isOver;%0A
+    var canDrop = this.props.canDrop;%0A
     var 
@@ -1346,21 +1346,251 @@
 sOver &&
-%0A    
+ !canDrop && this.renderOverlay('red')%7D%0A        %7B!isOver && canDrop && this.renderOverlay('yellow')%7D%0A        %7BisOver && canDrop && this.renderOverlay('green')%7D%0A      %3C/div%3E%0A    );%0A  %7D,%0A%0A  renderOverlay: function (color) %7B%0A    return (%0A
       %3Cd
@@ -1597,28 +1597,24 @@
 iv style=%7B%7B%0A
-    
         posi
@@ -1643,20 +1643,16 @@
     
-    
 top: 0,%0A
     
@@ -1643,28 +1643,24 @@
     top: 0,%0A
-    
         left
@@ -1668,28 +1668,24 @@
  0,%0A        
- 
-   
 height: '100
@@ -1692,28 +1692,24 @@
 %25',%0A        
-    
 width: '100%25
@@ -1719,20 +1719,16 @@
         
-  
-  
 zIndex: 
@@ -1730,20 +1730,16 @@
 dex: 1,%0A
-    
         
@@ -1760,20 +1760,16 @@
         
-   
- 
 backgrou
@@ -1781,54 +1781,24 @@
 or: 
-'yellow'%0A          %7D%7D /%3E%0A        %7D%0A      %3C/div
+color%0A      %7D%7D /
 %3E%0A  

Implement canDrop and Highlighting