unit tests added

package.json

@@ -43,14 +43,16 @@
     "inert": "^3.2.0",
     "jsx-loader": "^0.13.2",
     "moment": "^2.10.6",
+    "on-build-webpack": "^0.1.0",
     "react": "^0.14.3",
-    "react-datepicker": "^0.17.0",
     "react-addons-css-transition-group": "^0.14.3",
+    "react-datepicker": "^0.17.0",
+    "react-dnd": "^2.1.2",
+    "react-dnd-html5-backend": "^2.1.2",
     "react-dom": "^0.14.3",
     "react-router": "^1.0.1",
     "react-static-container": "^1.0.0",
     "style-loader": "^0.13.0",
-    "on-build-webpack": "^0.1.0",
     "webpack": "^1.12.2"
   },
   "devDependencies": {

src/js/components/Board.jsx

@@ -0,0 +1,29 @@
+var React       = require('react');
+var Knight      = require('./Knight.jsx');
+var Square      = require('./Square.jsx');
+
+var DragDropContext = require('react-dnd').DragDropContext;
+var HTML5Backend = require('react-dnd-html5-backend');
+
+var Board = React.createClass({
+
+    render: function(){
+
+       return (
+          <div style={{
+            width:'100%',
+            height:'100%',
+            display: 'flex',
+            flexWrap: 'wrap'
+          }}>
+            {this.props.squares}
+          </div>
+       );
+
+  }
+
+})
+
+
+//module.exports = Board;
+module.exports = DragDropContext(HTML5Backend)(Board);

src/js/components/BoardSquare.jsx

@@ -0,0 +1,76 @@
+var React = require('react');
+var PropTypes = React.PropTypes;
+var Square = require('./Square.jsx');
+var Knight      = require('./Knight.jsx');
+var ItemTypes = require('./Constants.jsx');
+var DropTarget = require('react-dnd').DropTarget;
+
+
+var squareTarget = {
+  canDrop: function (props) {
+    var x = props.x;
+    var y = props.y;
+    return props.canMoveKnight(x, y);
+  },
+  drop: function (props, monitor) {
+    var x = props.x;
+    var y = props.y;
+    props.moveKnight(x, y);
+    return {};
+  }
+};
+
+function collect (connect, monitor){
+
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  };
+}
+
+var BoardSquare = React.createClass ({
+  // propTypes:{
+  //   x: PropTypes.number.isRequired,
+  //   y: PropTypes.number.isRequired
+  // },
+
+
+  render: function () {
+
+    var x = this.props.x;
+    var y = this.props.y;
+    var i = this.props.i;
+    var black = this.props.black;
+    var connectDropTarget = this.props.connectDropTarget;
+    var isOver = this.props.isOver;
+
+    return connectDropTarget (
+      <div style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%'
+      }} >
+          <Square key ={i}
+                  x={x}
+                  y={y}
+                  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);

src/js/components/Constants.jsx

@@ -0,0 +1,5 @@
+var ItemTypes = {
+  KNIGHT: 'knight'
+};
+
+module.exports = ItemTypes;

src/js/components/Knight.jsx

@@ -0,0 +1,43 @@
+var React = require('react');
+var PropTypes = React.PropTypes;
+var ItemTypes = require('./Constants.jsx');
+
+var DragSource = require('react-dnd').DragSource;
+
+var knightSource = {
+  beginDrag: function(props){
+
+    return {};
+  }
+};
+
+function collect (connect, monitor){
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  }
+};
+
+var Knight = React.createClass({
+  // propTypes: {
+  //   connectDragSource: PropTypes.func.isRequired,
+  //   isDragging: PropTypes.bool.isRequired
+  // },
+
+  render: function() {
+    var connectDragSource = this.props.connectDragSource;
+    var isDragging = this.props.isDragging;
+
+    var knightColour = (this.props.color === "black") ? "white" : "black";
+    var knightStyle = {
+         opacity: isDragging ? 0.5 : 1,
+          backgroundColor: knightColour,
+          fontSize: "3em",
+          cursor: 'move'
+        };
+    return connectDragSource( <span style={knightStyle}>♘</span> );
+  }
+});
+
+//module.exports = Knight;
+module.exports = DragSource(ItemTypes.KNIGHT, knightSource, collect)(Knight)

src/js/components/SmartComponent.jsx

@@ -0,0 +1,90 @@
+var React       = require('react');
+var Board       = require('./Board.jsx');
+var BoardSquare = require('./BoardSquare.jsx');
+var Knight      = require('./Knight.jsx');
+
+// var DragDropContext = require('react-dnd').DragDropContext;
+// var HTML5Backend = require('react-dnd-html5-backend');
+
+
+var SmartComponent = React.createClass({
+
+  getInitialState: function () {
+    return {knightPosition: [4,6]}
+  },
+
+  canMoveKnight: function(toX, toY){
+
+    const xCurrent = this.state.knightPosition[0];
+    const yCurrent = this.state.knightPosition[1];
+    const xMove = Math.abs(toX - xCurrent);
+    const yMove = Math.abs(toY - yCurrent);
+
+    if ((xMove === 2 && yMove === 1) ||
+    (xMove === 1 && yMove === 2)){
+      return true;
+    }
+  },
+
+  moveKnight: function(toX, toY){
+    this.setState({
+      knightPosition: [toX, toY]
+    });
+  },
+
+
+  renderPiece: function (x, y, black) {
+    if(x === this.state.knightPosition[0] && y === this.state.knightPosition[1]) {
+      return <Knight color={black} /> ;
+    }
+  },
+
+
+  renderSquare: function (i){
+    const x = i % 8;
+    const y = Math.floor(i / 8);
+    const black = ((x + y) % 2 === 1) ? "black" : "white";
+
+    const[knightX, knightY] = this.state.knightPosition;
+
+
+    return (
+
+    <div key ={i}>
+      <BoardSquare x={x}
+                   y={y}
+                   knightX={knightX}
+                   knightY={knightY}
+                   black={black}
+                   i={i}
+                   moveKnight={this.moveKnight}
+                   canMoveKnight={this.canMoveKnight}>
+      {this.renderPiece(x,y, black)}
+      </BoardSquare>
+    </div>
+    )
+  },
+
+  render: function(){
+
+    var counter = 0;
+    var squaresArray = [];
+
+    while (counter < 64){
+      var pushObject = this.renderSquare(counter);
+      squaresArray.push(pushObject);
+      counter ++;
+    };
+
+    //moveKnight={this.moveKnight(this.state.knightPosition[0], this.state.knightPosition[1])}
+    return (
+      <div>
+        <Board knightPosition={this.state.knightPosition} squares={squaresArray} />
+      </div>
+    )
+  }
+
+})
+
+module.exports = SmartComponent;
+//module.exports = DragDropContext(HTML5Backend)(SmartComponent);

src/js/components/Square.jsx

@@ -0,0 +1,32 @@
+var React = require('react');
+var Component = require('react').Component;
+var PropTypes = require('react').PropTypes;
+//import React {Component, PropTypes} from 'react'; Needs sorted  OUT!!!
+
+var Square = React.createClass({
+
+  render: function(){
+
+    var squareStyle = {
+      backgroundColor: this.props.black,
+       color: this.props.black,
+       width: '6em',
+       height: '6em'
+    };
+
+    return (
+      <div style={squareStyle}> {this.props.children} </div>
+    );
+
+  }
+
+});
+
+
+module.exports = Square;
+// module.exports = {
+//  Square,
+//   Components:{
+//     Square
+//   }
+// }

src/js/main.jsx

@@ -1,7 +1,13 @@
-import React, { Component } from 'react';
+'use strict';
 
-export default class Knight extends Component {
-  render(){
-    return <span>♘</span>;
-  }
-}
+var React       = require('react');
+var ReactDOM    = require('react-dom');
+var rootElement = document.getElementById('react-content');
+var SmartComponent = require('./components/SmartComponent.jsx');
+
+
+  ReactDOM.render(
+
+  <SmartComponent />,
+    rootElement
+  )

test/index.jsx

@@ -1,2 +1,4 @@
-require('./square.test.jsx');
 require('./hapi-test.js');
+require('./square.test.jsx');
+require('./smartComp.test.jsx');
+//require('./knight.test.jsx');

test/knight.test.jsx

@@ -0,0 +1,23 @@
+import test from 'tape';
+import ReactTestUtils from 'react-addons-test-utils';
+import React from 'react';
+
+let shallowRenderer = ReactTestUtils.createRenderer();
+
+import Knight from '../src/js/components/Knight.jsx';
+
+var KnightDecorated = Knight.DecoratedComponent;
+
+var identity = function (el) { return el; };
+
+
+shallowRenderer.render(<Knight />);
+let knightRender = shallowRenderer.getRenderOutput();
+
+
+// test('Square exists', t => {
+//   t.ok(knightRender, 'knightRender render object exists');
+//   // t.equal(Object.keys(squareRender.props)[0], 'style', 'server loads ok');
+//   // t.equal(squareRender.type, 'div', 'server loads ok');
+//   t.end();
+// });

test/smartComp.test.jsx

@@ -0,0 +1,17 @@
+import test from 'tape';
+import ReactTestUtils from 'react-addons-test-utils';
+import React from 'react';
+
+let shallowRenderer = ReactTestUtils.createRenderer();
+
+import SmartComponent from '../src/js/components/SmartComponent.jsx';
+
+shallowRenderer.render(<SmartComponent />);
+
+let smartComponentRender = shallowRenderer.getRenderOutput();
+
+test('SmartComponent exists', t => {
+  t.ok(smartComponentRender, 'smartComponentRender render object exists');
+  t.equal(smartComponentRender.type, 'div', 'smartComponentRender type ok');
+  t.end();
+});