Skip to content

Instantly share code, notes, and snippets.

@alferov

alferov/esnextbin.md

Last active March 30, 2016 03:05
Show Gist options
  • Save alferov/4774b8cdebb9206409ad3d6cb5f88b78 to your computer and use it in GitHub Desktop.
Save alferov/4774b8cdebb9206409ad3d6cb5f88b78 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
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>
Raw
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
)
);
Raw
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"
}
}
Raw
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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment