Explode too big procedures into simple short sub-functions

js/GUI/Screen/Game/Animation.js

@@ -14,38 +14,6 @@ return {
 	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;
@@ -66,6 +34,48 @@ 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.state.turnedCard || TurnedCard.make(name);
+    State.state.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.state.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;
@@ -75,34 +85,54 @@ function insertCard(toSet, card) {
   }
 }
 
-function moveCard(fromSet, toSet, card) {
+function getSource(fromSet, card) {
-  var from, originalCard;
+  var source, origin;
-  var slot = Dom.make('li', {class: ['card', 'slot']});
+  if(fromSet == 'river') {
-  if (fromSet.card[card.value.name] != undefined) {
+      source = State.sets.river;
-    originalCard = fromSet.card[card.value.name].dom;
+  } else if(typeof fromSet == 'object') {
-    delete fromSet.card[card.value.name];
+    source = fromSet;
   } else {
-    originalCard = fromSet.dom.children[fromSet.dom.children.length - 1];
+    source = State.sets[fromSet].hand;
+    if(fromSet == 'them') {
+      origin = source.dom.children[source.dom.children.length - 1];
     }
-  from = originalCard.getBoundingClientRect();
+  }
-  fromSet.dom.replaceChild(slot, originalCard);
+  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);
-  var to = card.dom.getBoundingClientRect();
+  offsetInPlaceOf(slot, card.dom)
-  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() {
+    Async.apply(resetPostion(card)),
-      card.dom.style.left = 0;
-      card.dom.style.top = 0;
-    }),
     Async.wait(1000),
-    Async.apply(function() {
+    Async.apply(cleanUpMove(source, card, slot))
-      fromSet.dom.removeChild(slot);
-      card.dom.classList.remove('moving');
-    })
   );
 }