@wirelineio/shogiboardjsx
Version:
Shogiboardjsx is a shogiboard for React. Inspired by Chessboardjsx
211 lines (179 loc) • 9.27 kB
JavaScript
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { DropTarget } from 'react-dnd';
import { ItemTypes } from './helpers';
var Square =
/*#__PURE__*/
function (_Component) {
_inherits(Square, _Component);
function Square() {
var _getPrototypeOf2;
var _temp, _this;
_classCallCheck(this, Square);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _possibleConstructorReturn(_this, (_temp = _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Square)).call.apply(_getPrototypeOf2, [this].concat(args))), _this.onClick = function () {
_this.props.wasSquareClicked(true);
_this.props.onSquareClick(_this.props.square);
}, _temp));
}
_createClass(Square, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this$props = this.props,
square = _this$props.square,
setSquareCoordinates = _this$props.setSquareCoordinates,
width = _this$props.width,
roughSquare = _this$props.roughSquare;
roughSquare({
squareElement: this.roughSquareSvg,
squareWidth: width / 9
});
var _this$square$getBound = this[square].getBoundingClientRect(),
x = _this$square$getBound.x,
y = _this$square$getBound.y;
setSquareCoordinates(x, y, square);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props2 = this.props,
screenWidth = _this$props2.screenWidth,
screenHeight = _this$props2.screenHeight,
square = _this$props2.square,
setSquareCoordinates = _this$props2.setSquareCoordinates;
var didScreenSizeChange = prevProps.screenWidth !== screenWidth || prevProps.screenHeight !== screenHeight;
if (didScreenSizeChange) {
var _this$square$getBound2 = this[square].getBoundingClientRect(),
x = _this$square$getBound2.x,
y = _this$square$getBound2.y;
setSquareCoordinates(x, y, square);
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props3 = this.props,
connectDropTarget = _this$props3.connectDropTarget,
width = _this$props3.width,
squareColor = _this$props3.squareColor,
children = _this$props3.children,
square = _this$props3.square,
roughSquare = _this$props3.roughSquare,
onMouseOverSquare = _this$props3.onMouseOverSquare,
onMouseOutSquare = _this$props3.onMouseOutSquare,
squareStyles = _this$props3.squareStyles,
onDragOverSquare = _this$props3.onDragOverSquare,
onSquareRightClick = _this$props3.onSquareRightClick;
return connectDropTarget(React.createElement("div", {
"data-testid": "".concat(squareColor, "-square"),
"data-squareid": square,
ref: function ref(_ref2) {
return _this2[square] = _ref2;
},
style: defaultSquareStyle(this.props),
onMouseOver: function onMouseOver() {
return onMouseOverSquare(square);
},
onMouseOut: function onMouseOut() {
return onMouseOutSquare(square);
},
onDragEnter: function onDragEnter() {
return onDragOverSquare(square);
},
onClick: function onClick() {
return _this2.onClick();
},
onContextMenu: function onContextMenu(e) {
e.preventDefault();
onSquareRightClick(square);
}
}, React.createElement("div", {
style: _objectSpread({}, size(width), {}, center, {}, squareStyles[square] && squareStyles[square])
}, roughSquare.length ? React.createElement("div", {
style: center
}, children, React.createElement("svg", {
style: _objectSpread({}, size(width), {
position: 'absolute',
display: 'block'
}),
ref: function ref(_ref) {
return _this2.roughSquareSvg = _ref;
}
})) : children)));
}
}]);
return Square;
}(Component);
Square.propTypes = {
connectDropTarget: PropTypes.func,
width: PropTypes.number,
squareColor: PropTypes.oneOf(['white', 'black']),
children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
isOver: PropTypes.bool,
square: PropTypes.string,
setSquareCoordinates: PropTypes.func,
lightSquareStyle: PropTypes.object,
darkSquareStyle: PropTypes.object,
roughSquare: PropTypes.func,
onMouseOverSquare: PropTypes.func,
onMouseOutSquare: PropTypes.func,
dropSquareStyle: PropTypes.object,
screenWidth: PropTypes.number,
screenHeight: PropTypes.number,
squareStyles: PropTypes.object,
onDragOverSquare: PropTypes.func,
onSquareClick: PropTypes.func,
wasSquareClicked: PropTypes.func,
onSquareRightClick: PropTypes.func
};
var squareTarget = {
drop: function drop(props, monitor) {
return {
target: props.square,
board: props.id,
piece: monitor.getItem().piece,
source: monitor.getItem().source
};
}
};
function collect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver()
};
}
export default DropTarget(ItemTypes.PIECE, squareTarget, collect)(Square);
var defaultSquareStyle = function defaultSquareStyle(props) {
var width = props.width,
squareColor = props.squareColor,
isOver = props.isOver,
darkSquareStyle = props.darkSquareStyle,
lightSquareStyle = props.lightSquareStyle,
dropSquareStyle = props.dropSquareStyle;
return _objectSpread({}, _objectSpread({}, size(width), {}, center, {}, squareColor === 'black' ? darkSquareStyle : lightSquareStyle, {}, isOver && dropSquareStyle));
};
var center = {
display: 'flex',
justifyContent: 'center'
};
var size = function size(width) {
return {
width: width / 9,
height: width / 9
};
};