const React = require('react');
const { connect } = require('react-redux');

const { touchSquare } = require('../actions');
const { ANIMATION_EXPRESSION_TYPES, BOARD_TYPES, PARAMETERS } = require('../immutable/constants');
const { animations } = require('../immutable/animations');
const { isArrivedToDestination } = require('../state-models/bullet');
const { createEffectiveCoordinates } = require('../state-models/effect');
const { createNewPlacementState } = require('../state-models/placement');
const Board = require('../components/Board');
const SquareMatrix = require('../components/SquareMatrix');


class BattleBoard extends React.Component {
  render() {
    const handleTouchStartPad = (event, { coordinate }) => {
      const placement = createNewPlacementState(BOARD_TYPES.BATTLE_BOARD, coordinate);
      this.props.dispatch(touchSquare(placement));
    };

    return <Board
      rowLength={ PARAMETERS.BATTLE_BOARD_ROW_LENGTH }
      columnLength={ PARAMETERS.BATTLE_BOARD_COLUMN_LENGTH }
      additionalClassNames={ ['root__battle-board'] }
    >
      <SquareMatrix
        squareMatrix={ this.props.battleBoard.squareMatrix }
        cursorCoordinate={ this.props.cursorCoordinate }
        bullets={ this.props.bullets }
        squareBasedAnimations={ this.props.squareBasedAnimations }
        units={ this.props.enemiesInBattle }
        unitsOnSquares={ this.props.unitsOnSquares }
        handleTouchStartPad={ handleTouchStartPad }
      />
    </Board>;
  }
}

BattleBoard = connect(state => {
  const cursorCoordinate =
    state.cursor.placement.boardType === BOARD_TYPES.BATTLE_BOARD ? state.cursor.placement.coordinate : null;

  const squareBasedAnimations = state.bullets
    .filter(bullet => {
      const boardAnimation = animations[bullet.effect.animationId];

      return boardAnimation.expression.type === ANIMATION_EXPRESSION_TYPES.SQUARE_BASED &&
        isArrivedToDestination(bullet);
    })
    .map(bullet => {
      const boardAnimation = animations[bullet.effect.animationId];

      return {
        uid: bullet.effect.uid,
        coordinates: createEffectiveCoordinates(bullet.effect),
        duration: boardAnimation.duration,
        classNames: [
          ...boardAnimation.expression.classNames,
          boardAnimation.getAnimationDurationClassName(),
        ],
      };
    })
  ;

  const enemiesInBattle = state.enemies.filter(enemy => enemy.location);

  const unitsOnSquares =
    state.allies.filter(ally => ally.placement.boardType === state.battleBoard.boardType);

  return Object.assign({}, state, {
    cursorCoordinate,
    enemiesInBattle,
    unitsOnSquares,
    squareBasedAnimations,
  });
})(BattleBoard);


module.exports = BattleBoard;

@@ -127,39 +127,40 @@
 nst %7B ANIMATION_
-EXPRESS
+DESTINAT
 ION_TYPES, BOARD
@@ -1735,111 +1735,50 @@
     
-const boardAnimation = animations%5Bbullet.effect.animationId%5D;%0A%0A      return boardAnimation.expression.t
+return bullet.effect.animationDestinationT
 ype 
@@ -1795,15 +1795,16 @@
 ION_
-EXPRESS
+DESTINAT
 ION_
@@ -1819,14 +1819,8 @@
 UARE
-_BASED
  &&%0A
@@ -1899,22 +1899,17 @@
   const 
-boardA
+a
 nimation
@@ -2080,22 +2080,17 @@
 ration: 
-boardA
+a
 nimation
@@ -2135,22 +2135,17 @@
      ...
-boardA
+a
 nimation
@@ -2182,14 +2182,9 @@
     
-boardA
+a
 nima

Set destination of animation from `effect` state