@wirelineio/shogiboardjsx/dist/es/Shogiboard/Piece.js

Shogiboardjsx is a shogiboard for React. Inspired by Chessboardjsx

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 _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); }

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; }

import React, { Component } from 'react';
import { DragSource } from 'react-dnd';
import PropTypes from 'prop-types';
import { getEmptyImage } from 'react-dnd-html5-backend';
import { ItemTypes } from './helpers';
/* eslint react/prop-types: 0 */

export var renderChessPiece = function renderChessPiece(_ref) {
  var dropTarget = _ref.dropTarget,
      square = _ref.square,
      targetSquare = _ref.targetSquare,
      waitForTransition = _ref.waitForTransition,
      getSquareCoordinates = _ref.getSquareCoordinates,
      piece = _ref.piece,
      width = _ref.width,
      pieces = _ref.pieces,
      transitionDuration = _ref.transitionDuration,
      isDragging = _ref.isDragging,
      sourceSquare = _ref.sourceSquare,
      onPieceClick = _ref.onPieceClick,
      allowDrag = _ref.allowDrag,
      _ref$customDragLayerS = _ref.customDragLayerStyles,
      customDragLayerStyles = _ref$customDragLayerS === void 0 ? {} : _ref$customDragLayerS,
      _ref$phantomPieceStyl = _ref.phantomPieceStyles,
      phantomPieceStyles = _ref$phantomPieceStyl === void 0 ? {} : _ref$phantomPieceStyl;
  var renderChessPieceArgs = {
    squareWidth: width / 9,
    isDragging: isDragging,
    droppedPiece: dropTarget && dropTarget.piece,
    targetSquare: dropTarget && dropTarget.target,
    sourceSquare: dropTarget && dropTarget.source
  };
  return React.createElement("div", {
    "data-testid": "".concat(piece, "-").concat(square),
    onClick: function onClick() {
      return onPieceClick(piece);
    },
    style: _objectSpread({}, pieceStyles({
      isDragging: isDragging,
      transitionDuration: transitionDuration,
      waitForTransition: waitForTransition,
      square: square,
      targetSquare: targetSquare,
      sourceSquare: sourceSquare,
      getSquareCoordinates: getSquareCoordinates,
      getTranslation: getTranslation,
      piece: piece,
      allowDrag: allowDrag
    }), {}, phantomPieceStyles, {}, customDragLayerStyles)
  }, typeof pieces[piece] === 'function' ? pieces[piece](renderChessPieceArgs) : React.createElement("svg", {
    viewBox: "1 1 42 50",
    width: width / 9,
    height: width / 9 - 2
  }, React.createElement("g", {
    transform: "scale(0.95) translate(2 2)"
  }, pieces[piece])));
};

var Piece =
/*#__PURE__*/
function (_Component) {
  _inherits(Piece, _Component);

  function Piece() {
    _classCallCheck(this, Piece);

    return _possibleConstructorReturn(this, _getPrototypeOf(Piece).apply(this, arguments));
  }

  _createClass(Piece, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps) {
      var shouldPieceUpdate = nextProps.dropTarget !== null || nextProps.isDragging || this.props.isDragging || // if the position comes from the position prop, check if it is a different position
      this.props.sourceSquare !== nextProps.sourceSquare || this.props.waitForTransition !== nextProps.waitForTransition || // if the screen size changes then update
      this.props.width !== nextProps.width;

      if (shouldPieceUpdate) {
        return true;
      }

      return false;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener('touchstart', this.props.setTouchState);
      this.props.connectDragPreview(getEmptyImage(), {
        captureDraggingState: true
      });
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener('touchstart', this.props.setTouchState);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          square = _this$props.square,
          targetSquare = _this$props.targetSquare,
          waitForTransition = _this$props.waitForTransition,
          getSquareCoordinates = _this$props.getSquareCoordinates,
          piece = _this$props.piece,
          width = _this$props.width,
          pieces = _this$props.pieces,
          transitionDuration = _this$props.transitionDuration,
          isDragging = _this$props.isDragging,
          connectDragSource = _this$props.connectDragSource,
          sourceSquare = _this$props.sourceSquare,
          dropTarget = _this$props.dropTarget,
          onPieceClick = _this$props.onPieceClick,
          allowDrag = _this$props.allowDrag;
      return connectDragSource(renderChessPiece({
        square: square,
        targetSquare: targetSquare,
        waitForTransition: waitForTransition,
        getSquareCoordinates: getSquareCoordinates,
        piece: piece,
        width: width,
        pieces: pieces,
        transitionDuration: transitionDuration,
        isDragging: isDragging,
        sourceSquare: sourceSquare,
        dropTarget: dropTarget,
        onPieceClick: onPieceClick,
        allowDrag: allowDrag
      }));
    }
  }]);

  return Piece;
}(Component);

Piece.propTypes = {
  piece: PropTypes.string,
  square: PropTypes.string,
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  width: PropTypes.number,
  connectDragSource: PropTypes.func,
  isDragging: PropTypes.bool,
  connectDragPreview: PropTypes.func,
  dropOffBoard: PropTypes.string,
  getSquareCoordinates: PropTypes.func,
  onDrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
  transitionDuration: PropTypes.number,
  pieces: PropTypes.object,
  sourceSquare: PropTypes.string,
  targetSquare: PropTypes.string,
  waitForTransition: PropTypes.bool,
  setTouchState: PropTypes.func,
  onPieceClick: PropTypes.func,
  wasSquareClicked: PropTypes.func,
  allowDrag: PropTypes.func
};
var pieceSource = {
  canDrag: function canDrag(props) {
    return props.draggable && props.allowDrag({
      piece: props.piece,
      sourceSquare: props.square
    });
  },
  beginDrag: function beginDrag(props) {
    return {
      piece: props.piece,
      source: props.square,
      board: props.id
    };
  },
  endDrag: function endDrag(props, monitor) {
    var setPosition = props.setPosition,
        dropOffBoard = props.dropOffBoard,
        piece = props.piece,
        square = props.square,
        onDrop = props.onDrop,
        wasManuallyDropped = props.wasManuallyDropped,
        wasSquareClicked = props.wasSquareClicked;
    var dropResults = monitor.getDropResult();
    var didDrop = monitor.didDrop(); // trash piece when dropped off board

    if (!didDrop && dropOffBoard === 'trash') {
      return setPosition({
        sourceSquare: square,
        piece: piece
      });
    }

    var board = monitor.getItem().board;
    var dropBoard = dropResults && dropResults.board; // check if target board is source board

    if (board === dropBoard && didDrop) {
      if (onDrop.length) {
        wasManuallyDropped(true);

        if (square !== 'spare') {
          wasSquareClicked(false);
        } // execute user's logic


        return onDrop({
          sourceSquare: square,
          targetSquare: dropResults.target,
          piece: piece
        });
      } // set new position


      setPosition({
        sourceSquare: square,
        targetSquare: dropResults.target,
        piece: piece
      });
    }
  }
};

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging(),
    dropTarget: monitor.getDropResult()
  };
}

export default DragSource(ItemTypes.PIECE, pieceSource, collect)(Piece);

var isActivePiece = function isActivePiece(square, targetSquare) {
  return targetSquare && targetSquare === square;
};

var getTransitionCoordinates = function getTransitionCoordinates(_ref2) {
  var getSquareCoordinates = _ref2.getSquareCoordinates,
      sourceSq = _ref2.sourceSq,
      targetSq = _ref2.targetSq;
  var transitionCoordinates = getSquareCoordinates(sourceSq, targetSq);
  var sourceSquare = transitionCoordinates.sourceSquare,
      targetSquare = transitionCoordinates.targetSquare;
  return "translate(".concat(sourceSquare.x - targetSquare.x, "px, ").concat(sourceSquare.y - targetSquare.y, "px)");
};

var getTranslation = function getTranslation(_ref3) {
  var waitForTransition = _ref3.waitForTransition,
      square = _ref3.square,
      targetSquare = _ref3.targetSquare,
      sourceSquare = _ref3.sourceSquare,
      getSquareCoordinates = _ref3.getSquareCoordinates;
  return isActivePiece(square, targetSquare) && waitForTransition && getTransitionCoordinates({
    getSquareCoordinates: getSquareCoordinates,
    sourceSq: sourceSquare,
    targetSq: targetSquare
  });
};

var pieceStyles = function pieceStyles(_ref4) {
  var isDragging = _ref4.isDragging,
      transitionDuration = _ref4.transitionDuration,
      waitForTransition = _ref4.waitForTransition,
      square = _ref4.square,
      targetSquare = _ref4.targetSquare,
      sourceSquare = _ref4.sourceSquare,
      getSquareCoordinates = _ref4.getSquareCoordinates,
      getTranslation = _ref4.getTranslation,
      piece = _ref4.piece,
      allowDrag = _ref4.allowDrag;
  return {
    opacity: isDragging ? 0 : 1,
    transform: getTranslation({
      waitForTransition: waitForTransition,
      square: square,
      targetSquare: targetSquare,
      sourceSquare: sourceSquare,
      getSquareCoordinates: getSquareCoordinates
    }),
    transition: "transform ".concat(transitionDuration, "ms"),
    zIndex: 5,
    cursor: isDragging ? '-webkit-grabbing' : allowDrag({
      piece: piece,
      sourceSquare: square
    }) ? '-webkit-grab' : 'not-allowed'
  };
};