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 animate(movement) {
  return Async.bind(
    Async.apply(function() {
      var card;
      var movingCards = [];
      var side = (State.state.playing) ? 'you' : 'them';
      var dest = State.sets.river;
      if(movement.captures != undefined) {
        card = Card.make(movement.played);
        dest = State.sets[side];
        movingCards.push([State.sets.river, dest, Card.make(movement.captures)]);
      } else {
        card = RiverCard.make(movement.played);
      }
      if(movement.source == 'Hand') {
        movingCards.push([State.sets[side].hand, dest, card]);
      } else {
        var cardSet = {};
        cardSet[card.value.name] = State.state.turnedCard || TurnedCard.make(card.value.name);
        State.state.turnedCard = null;
        movingCards.push([{card: cardSet, dom: State.dom.deck}, dest, card]);
      }
      return movingCards;
    }),
    function(movingCards) {
      return Async.parallel.apply(null,
        movingCards.map(function(args) { return moveCard.apply(null, args); })
      );
    }
  );
}

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 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 moveCard(fromSet, toSet, card) {
  var from, originalCard;
  var slot = Dom.make('li', {class: ['card', 'slot']});
  if (fromSet.card[card.value.name] != undefined) {
    originalCard = fromSet.card[card.value.name].dom;
    delete fromSet.card[card.value.name];
  } else {
    originalCard = fromSet.dom.children[fromSet.dom.children.length - 1];
  }
  from = originalCard.getBoundingClientRect();
  fromSet.dom.replaceChild(slot, originalCard);
  card.dom.style.visibility = 'hidden';
  insertCard(toSet, card);
  var to = card.dom.getBoundingClientRect();
  card.dom.style.left = (from.left - to.left) + 'px';
  card.dom.style.top = (from.top - to.top) + 'px';
  card.dom.classList.add('moving');
  card.dom.style.visibility = null;
  return Async.sequence(
    Async.wait(10),
    Async.apply(function() {
      card.dom.style.left = 0;
      card.dom.style.top = 0;
    }),
    Async.wait(1000),
    Async.apply(function() {
      fromSet.dom.removeChild(slot);
      card.dom.classList.remove('moving');
    })
  );
}