webclient/js/GUI/Screen/Game/Animation.js

import * as Card from GUI.Card;
import * as RiverCard from GUI.Card.RiverCard;
import * as TurnedCard from GUI.Card.TurnedCard;
import * as State from GUI.Screen.Game.State;
import * as Async from UnitJS.Async;
import * as Dom from UnitJS.Dom;

var queue = [];

return {
	animate: animate,
	catchUp: catchUp,
	delay: delay,
	getQueue: getQueue
};

function catchUp() {
  if(queue.length > 0) {
    var length = queue.length;
    Async.run.apply(null, queue.concat(
      Async.apply(function() {
        queue = queue.slice(length);
        catchUp();
      })
    ));
  }
}

function delay(animation) {
	queue.push(animation);
}

function getQueue() {
	return queue;
}

function animate(movement) {
  return Async.bind(
    Async.apply(cardMoves, movement),
    function(movingCards) {
      return Async.parallel.apply(null, movingCards);
    }
  )
}

function handleCaptures(movement, movingCards, side) {
  if(movement.captures != undefined) {
    var dest = State.sets[side];
    movingCards.push(moveCard('river', dest, Card.make(movement.captures)));
    return {card: Card.make(movement.played), dest: dest};
  } else {
    return {card: RiverCard.make(movement.played), dest: State.sets.river};
  }
}

function handleSource(movement, movingCards, side, cardLeft) {
  if(movement.source == 'Hand') {
    movingCards.push(moveCard(side, cardLeft.dest, cardLeft.card));
  } else {
    var cardSet = {};
    var name = cardLeft.card.value.name;
    cardSet[name] = State.globalState.turnedCard || TurnedCard.make(name);
    State.globalState.turnedCard = null;
    movingCards.push(
      moveCard({card: cardSet, dom: State.dom.deck}, cardLeft.dest, cardLeft.card)
    );
  }
}

function cardMoves(movement) {
  var card;
  var movingCards = [];
  var side = (State.globalState.playing) ? 'you' : 'them';
  var cardLeft = handleCaptures(movement, movingCards, side);
  handleSource(movement, movingCards, side, cardLeft);
  return movingCards;
}

function insertCard(toSet, card) {
  if(toSet.dom != undefined) {
    toSet.card[card.value.name] = card;
    toSet.dom.appendChild(card.dom);
  } else {
    insertCard(toSet[card.value.family.class], card);
  }
}

function getSource(fromSet, card) {
  var source, origin;
  if(fromSet == 'river') {
      source = State.sets.river;
  } else if(typeof fromSet == 'object') {
    source = fromSet;
  } else {
    source = State.sets[fromSet].hand;
    if(fromSet == 'them') {
      origin = source.dom.children[source.dom.children.length - 1];
    }
  }
  origin = origin || source.card[card.value.name].dom;
  delete source.card[card.value.name];
  return {dom: source.dom, origin: origin};
}

function offsetInPlaceOf(referenceCard, targetCard) {
  var from = referenceCard.getBoundingClientRect();
  var to = targetCard.getBoundingClientRect();
  targetCard.style.left = (from.left - to.left) + 'px';
  targetCard.style.top = (from.top - to.top) + 'px';
  targetCard.classList.add('moving');
  targetCard.style.visibility = null;
}

function resetPostion(card) {
  return function() {card.dom.style.left = 0; card.dom.style.top = 0;};
}

function cleanUpMove(source, card, slot) {
  return function() {
    source.dom.removeChild(slot);
    card.dom.classList.remove('moving');
  };
}

function moveCard(fromSet, toSet, card) {
  var source = getSource(fromSet, card);
  var slot = Dom.make('li', {class: ['card', 'slot']});
  source.dom.replaceChild(slot, source.origin);
  card.dom.style.visibility = 'hidden';
  insertCard(toSet, card);
  offsetInPlaceOf(slot, card.dom)
  return Async.sequence(
    Async.wait(10),
    Async.apply(resetPostion(card)),
    Async.wait(1000),
    Async.apply(cleanUpMove(source, card, slot))
  );
}