alferov/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNext Bin Sketch</title>
  <!-- put additional styles and scripts here -->
  <link href="https://fonts.googleapis.com/css?family=Glass+Antiqua" rel="stylesheet" type="text/css">
  <!-- CSS Reset -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">

  <!-- Milligram CSS minified -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css">

  <style>
    body {
      color: white;
      background-color: #575A65;
      font-family: 'Glass Antiqua', cursive;
    }
    #app {
      padding: 20px;
      text-align: center;
    }
    .name {
      font-size: 1.7em;
    }
  </style>
</head>
<body>
  <div id="app"></div>
</body>
</html>

## index.js
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

let knightPosition = [1, 7];
let observer = null;

var emitChange = function () {
  observer(knightPosition);
};

var observe = function (o) {
  if (observer) {
    throw new Error('Multiple observers not implemented.');
  }

  observer = o;
  emitChange();
};

var moveKnight = function (toX, toY) {
  knightPosition = [toX, toY];
  emitChange();
};

var canMoveKnight = function (toX, toY) {
  const [x, y] = knightPosition;
  const dx = toX - x;
  const dy = toY - y;

  return (Math.abs(dx) === 2 && Math.abs(dy) === 1) ||
         (Math.abs(dx) === 1 && Math.abs(dy) === 2);
}

class Knight extends Component {
  render() {
    return <span>♘</span>;
  }
}

class Square extends Component {
  render() {
    const { black } = this.props;
    const fill = black ? 'black' : 'white';
    const stroke = black ? 'white' : 'black';

    return (
      <div style={{
        backgroundColor: fill,
        color: stroke,
        width: '100%',
        height: '100%'
      }}>
        {this.props.children}
      </div>
    );
  }
}

Square.propTypes = {
  black: PropTypes.bool
};

class Board extends Component {
  renderSquare(i) {
    const x = i % 8;
    const y = Math.floor(i / 8);
    const black = (x + y) % 2 === 1;

    const [knightX, knightY] = this.props.knightPosition;
    const piece = (x === knightX && y === knightY) ?
      <Knight /> :
      null;

    return (
      <div key={i}
          style={{ width: '12.5%', height: '12.5%' }}
          onClick={() => this.handleSquareClick(x, y)}>
        <Square black={black}>
          &nbsp;
          {piece}
        </Square>
      </div>
    );
  }

  handleSquareClick(toX, toY) {
    if (canMoveKnight(toX, toY)) {
      moveKnight(toX, toY);
    }
  }

  render() {
    const squares = [];
    for (let i = 0; i < 64; i++) {
      squares.push(this.renderSquare(i));
    }

    return (
      <div style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexWrap: 'wrap'
      }}>
        {squares}
      </div>
    );
  }
}

Board.propTypes = {
  knightPosition: PropTypes.arrayOf(
    PropTypes.number.isRequired
  ).isRequired
};

const rootEl = document.getElementById('app');

observe(knightPosition =>
  ReactDOM.render(
    <Board knightPosition={knightPosition} />,
    rootEl
  )
);

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "0.14.7",
    "react-dom": "0.14.7",
    "react-dnd": "2.1.3",
    "react-dnd-html5-backend": "2.1.2",
    "babel-runtime": "6.6.1"
  }
}

## transpiled.js
'use strict';

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactDnd = require('react-dnd');

var _reactDndHtml5Backend = require('react-dnd-html5-backend');

var _reactDndHtml5Backend2 = _interopRequireDefault(_reactDndHtml5Backend);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var knightPosition = [1, 7];
var observer = null;

var emitChange = function emitChange() {
  observer(knightPosition);
};

var observe = function observe(o) {
  if (observer) {
    throw new Error('Multiple observers not implemented.');
  }

  observer = o;
  emitChange();
};

var moveKnight = function moveKnight(toX, toY) {
  knightPosition = [toX, toY];
  emitChange();
};

var canMoveKnight = function canMoveKnight(toX, toY) {
  var _knightPosition = knightPosition;

  var _knightPosition2 = (0, _slicedToArray3.default)(_knightPosition, 2);

  var x = _knightPosition2[0];
  var y = _knightPosition2[1];

  var dx = toX - x;
  var dy = toY - y;

  return Math.abs(dx) === 2 && Math.abs(dy) === 1 || Math.abs(dx) === 1 && Math.abs(dy) === 2;
};

var Knight = (function (_Component) {
  (0, _inherits3.default)(Knight, _Component);

  function Knight() {
    (0, _classCallCheck3.default)(this, Knight);
    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Knight).apply(this, arguments));
  }

  (0, _createClass3.default)(Knight, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'span',
        null,
        '♘'
      );
    }
  }]);
  return Knight;
})(_react.Component);

var Square = (function (_Component2) {
  (0, _inherits3.default)(Square, _Component2);

  function Square() {
    (0, _classCallCheck3.default)(this, Square);
    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Square).apply(this, arguments));
  }

  (0, _createClass3.default)(Square, [{
    key: 'render',
    value: function render() {
      var black = this.props.black;

      var fill = black ? 'black' : 'white';
      var stroke = black ? 'white' : 'black';

      return _react2.default.createElement(
        'div',
        { style: {
            backgroundColor: fill,
            color: stroke,
            width: '100%',
            height: '100%'
          } },
        this.props.children
      );
    }
  }]);
  return Square;
})(_react.Component);

Square.propTypes = {
  black: _react.PropTypes.bool
};

var Board = (function (_Component3) {
  (0, _inherits3.default)(Board, _Component3);

  function Board() {
    (0, _classCallCheck3.default)(this, Board);
    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Board).apply(this, arguments));
  }

  (0, _createClass3.default)(Board, [{
    key: 'renderSquare',
    value: function renderSquare(i) {
      var _this4 = this;

      var x = i % 8;
      var y = Math.floor(i / 8);
      var black = (x + y) % 2 === 1;

      var _props$knightPosition = (0, _slicedToArray3.default)(this.props.knightPosition, 2);

      var knightX = _props$knightPosition[0];
      var knightY = _props$knightPosition[1];

      var piece = x === knightX && y === knightY ? _react2.default.createElement(Knight, null) : null;

      return _react2.default.createElement(
        'div',
        { key: i,
          style: { width: '12.5%', height: '12.5%' },
          onClick: function onClick() {
            return _this4.handleSquareClick(x, y);
          } },
        _react2.default.createElement(
          Square,
          { black: black },
          ' ',
          piece
        )
      );
    }
  }, {
    key: 'handleSquareClick',
    value: function handleSquareClick(toX, toY) {
      if (canMoveKnight(toX, toY)) {
        moveKnight(toX, toY);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var squares = [];
      for (var i = 0; i < 64; i++) {
        squares.push(this.renderSquare(i));
      }

      return _react2.default.createElement(
        'div',
        { style: {
            width: '100%',
            height: '100%',
            display: 'flex',
            flexWrap: 'wrap'
          } },
        squares
      );
    }
  }]);
  return Board;
})(_react.Component);

Board.propTypes = {
  knightPosition: _react.PropTypes.arrayOf(_react.PropTypes.number.isRequired).isRequired
};

var rootEl = document.getElementById('app');

observe(function (knightPosition) {
  return _reactDom2.default.render(_react2.default.createElement(Board, { knightPosition: knightPosition }), rootEl);
});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNext Bin Sketch</title>
	<!-- put additional styles and scripts here -->
	<link href="https://fonts.googleapis.com/css?family=Glass+Antiqua" rel="stylesheet" type="text/css">
	<!-- CSS Reset -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">

	<!-- Milligram CSS minified -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css">

	<style>
	body {
	color: white;
	background-color: #575A65;
	font-family: 'Glass Antiqua', cursive;
	}
	#app {
	padding: 20px;
	text-align: center;
	}
	.name {
	font-size: 1.7em;
	}
	</style>
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>
	import React, { Component, PropTypes } from 'react';
	import ReactDOM from 'react-dom';
	import { DragDropContext } from 'react-dnd';
	import HTML5Backend from 'react-dnd-html5-backend';

	let knightPosition = [1, 7];
	let observer = null;

	var emitChange = function () {
	observer(knightPosition);
	};

	var observe = function (o) {
	if (observer) {
	throw new Error('Multiple observers not implemented.');
	}

	observer = o;
	emitChange();
	};

	var moveKnight = function (toX, toY) {
	knightPosition = [toX, toY];
	emitChange();
	};

	var canMoveKnight = function (toX, toY) {
	const [x, y] = knightPosition;
	const dx = toX - x;
	const dy = toY - y;

	return (Math.abs(dx) === 2 && Math.abs(dy) === 1) \|\|
	(Math.abs(dx) === 1 && Math.abs(dy) === 2);
	}

	class Knight extends Component {
	render() {
	return <span>♘</span>;
	}
	}

	class Square extends Component {
	render() {
	const { black } = this.props;
	const fill = black ? 'black' : 'white';
	const stroke = black ? 'white' : 'black';

	return (
	<div style={{
	backgroundColor: fill,
	color: stroke,
	width: '100%',
	height: '100%'
	}}>
	{this.props.children}
	</div>
	);
	}
	}

	Square.propTypes = {
	black: PropTypes.bool
	};

	class Board extends Component {
	renderSquare(i) {
	const x = i % 8;
	const y = Math.floor(i / 8);
	const black = (x + y) % 2 === 1;

	const [knightX, knightY] = this.props.knightPosition;
	const piece = (x === knightX && y === knightY) ?
	<Knight /> :
	null;

	return (
	<div key={i}
	style={{ width: '12.5%', height: '12.5%' }}
	onClick={() => this.handleSquareClick(x, y)}>
	<Square black={black}>

	{piece}
	</Square>
	</div>
	);
	}

	handleSquareClick(toX, toY) {
	if (canMoveKnight(toX, toY)) {
	moveKnight(toX, toY);
	}
	}

	render() {
	const squares = [];
	for (let i = 0; i < 64; i++) {
	squares.push(this.renderSquare(i));
	}

	return (
	<div style={{
	width: '100%',
	height: '100%',
	display: 'flex',
	flexWrap: 'wrap'
	}}>
	{squares}
	</div>
	);
	}
	}

	Board.propTypes = {
	knightPosition: PropTypes.arrayOf(
	PropTypes.number.isRequired
	).isRequired
	};

	const rootEl = document.getElementById('app');

	observe(knightPosition =>
	ReactDOM.render(
	<Board knightPosition={knightPosition} />,
	rootEl
	)
	);
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "0.14.7",
	"react-dom": "0.14.7",
	"react-dnd": "2.1.3",
	"react-dnd-html5-backend": "2.1.2",
	"babel-runtime": "6.6.1"
	}
	}
	'use strict';

	var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

	var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

	var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

	var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

	var _createClass2 = require('babel-runtime/helpers/createClass');

	var _createClass3 = _interopRequireDefault(_createClass2);

	var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

	var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

	var _inherits2 = require('babel-runtime/helpers/inherits');

	var _inherits3 = _interopRequireDefault(_inherits2);

	var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

	var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

	var _react = require('react');

	var _react2 = _interopRequireDefault(_react);

	var _reactDom = require('react-dom');

	var _reactDom2 = _interopRequireDefault(_reactDom);

	var _reactDnd = require('react-dnd');

	var _reactDndHtml5Backend = require('react-dnd-html5-backend');

	var _reactDndHtml5Backend2 = _interopRequireDefault(_reactDndHtml5Backend);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var knightPosition = [1, 7];
	var observer = null;

	var emitChange = function emitChange() {
	observer(knightPosition);
	};

	var observe = function observe(o) {
	if (observer) {
	throw new Error('Multiple observers not implemented.');
	}

	observer = o;
	emitChange();
	};

	var moveKnight = function moveKnight(toX, toY) {
	knightPosition = [toX, toY];
	emitChange();
	};

	var canMoveKnight = function canMoveKnight(toX, toY) {
	var _knightPosition = knightPosition;

	var _knightPosition2 = (0, _slicedToArray3.default)(_knightPosition, 2);

	var x = _knightPosition2[0];
	var y = _knightPosition2[1];

	var dx = toX - x;
	var dy = toY - y;

	return Math.abs(dx) === 2 && Math.abs(dy) === 1 \|\| Math.abs(dx) === 1 && Math.abs(dy) === 2;
	};

	var Knight = (function (_Component) {
	(0, _inherits3.default)(Knight, _Component);

	function Knight() {
	(0, _classCallCheck3.default)(this, Knight);
	return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Knight).apply(this, arguments));
	}

	(0, _createClass3.default)(Knight, [{
	key: 'render',
	value: function render() {
	return _react2.default.createElement(
	'span',
	null,
	'♘'
	);
	}
	}]);
	return Knight;
	})(_react.Component);

	var Square = (function (_Component2) {
	(0, _inherits3.default)(Square, _Component2);

	function Square() {
	(0, _classCallCheck3.default)(this, Square);
	return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Square).apply(this, arguments));
	}

	(0, _createClass3.default)(Square, [{
	key: 'render',
	value: function render() {
	var black = this.props.black;

	var fill = black ? 'black' : 'white';
	var stroke = black ? 'white' : 'black';

	return _react2.default.createElement(
	'div',
	{ style: {
	backgroundColor: fill,
	color: stroke,
	width: '100%',
	height: '100%'
	} },
	this.props.children
	);
	}
	}]);
	return Square;
	})(_react.Component);

	Square.propTypes = {
	black: _react.PropTypes.bool
	};

	var Board = (function (_Component3) {
	(0, _inherits3.default)(Board, _Component3);

	function Board() {
	(0, _classCallCheck3.default)(this, Board);
	return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Board).apply(this, arguments));
	}

	(0, _createClass3.default)(Board, [{
	key: 'renderSquare',
	value: function renderSquare(i) {
	var _this4 = this;

	var x = i % 8;
	var y = Math.floor(i / 8);
	var black = (x + y) % 2 === 1;

	var _props$knightPosition = (0, _slicedToArray3.default)(this.props.knightPosition, 2);

	var knightX = _props$knightPosition[0];
	var knightY = _props$knightPosition[1];

	var piece = x === knightX && y === knightY ? _react2.default.createElement(Knight, null) : null;

	return _react2.default.createElement(
	'div',
	{ key: i,
	style: { width: '12.5%', height: '12.5%' },
	onClick: function onClick() {
	return _this4.handleSquareClick(x, y);
	} },
	_react2.default.createElement(
	Square,
	{ black: black },
	' ',
	piece
	)
	);
	}
	}, {
	key: 'handleSquareClick',
	value: function handleSquareClick(toX, toY) {
	if (canMoveKnight(toX, toY)) {
	moveKnight(toX, toY);
	}
	}
	}, {
	key: 'render',
	value: function render() {
	var squares = [];
	for (var i = 0; i < 64; i++) {
	squares.push(this.renderSquare(i));
	}

	return _react2.default.createElement(
	'div',
	{ style: {
	width: '100%',
	height: '100%',
	display: 'flex',
	flexWrap: 'wrap'
	} },
	squares
	);
	}
	}]);
	return Board;
	})(_react.Component);

	Board.propTypes = {
	knightPosition: _react.PropTypes.arrayOf(_react.PropTypes.number.isRequired).isRequired
	};

	var rootEl = document.getElementById('app');

	observe(function (knightPosition) {
	return _reactDom2.default.render(_react2.default.createElement(Board, { knightPosition: knightPosition }), rootEl);
	});