Animate turns by showing the cards movements

www/dom.js

@@ -1,31 +0,0 @@
-function Dom() {
-  return {
-    clear: clear,
-    make: make
-  }
-
-  function clear(elem) {
-    while(elem.firstChild) {
-      elem.removeChild(elem.firstChild);
-    }
-  }
-
-  function make(tag, properties) {
-    var e = document.createElement(tag);
-    for(key in properties) {
-      var value = properties[key];
-      switch(key) {
-        case "class":
-          e.className = Array.isArray(value) ? value.join(' ') : value;
-          break;;
-        case "onClick":
-          e.addEventListener("click", value);
-          break;;
-        default:
-          e[key] = value;
-      }
-    }
-    return e;
-  }
-
-}

www/game.css

@@ -96,6 +96,17 @@
   background-position-y: 91.7%;
 }
 
+#game .card.slot {
+	background: none;
+	border: 1px solid transparent;
+}
+
+#game .card.moving {
+	position: relative;
+	transition-property: left, top;
+	transition-duration: 1s;
+}
+
 #game #rest {
   margin: 0;
 }

www/game.js

@@ -7,29 +7,68 @@ function Game(modules) {
     step: null,
     month: null
   };
-  var sets = {
+  var sets = buildSets();
-    river: {
-      card: null,
-      dom: document.getElementById("river")
-    },
-    yourHand: {
-      card: null,
-      dom: document.getElementById("you").getElementsByClassName("hand")[0]
-    },
-    theirHand: {
-      dom: document.getElementById("them").getElementsByClassName("hand")[0]
-    }
-  };
   var selected = null;
+	var queue = [];
 
+	window.addEventListener('focus', runQueue);
   modules.messaging.addEventListener(["Game"], function(o) {
+		if(document.hasFocus()) {
+			modules.async.run(handleGameMessage(o));
+		} else {
+			queue.push(handleGameMessage(o));
+		}
+	});
+
+  function buildSets() {
+    var sets = {};
+    ['river', 'you', 'them'].forEach(function(id) {
+      var dom = document.getElementById(id);
+      if(dom.tagName.toLowerCase() == 'ul') {
+        sets[id] = {card: null, dom: dom};
+      } else {
+        sets[id] = {};
+        for(var i = 0; i < dom.children.length; i++) {
+          if(dom.children[i].tagName.toLowerCase() == 'ul') {
+            sets[id][dom.children[i].className] = {card: {}, dom: dom.children[i]};
+          }
+        }
+      }
+    });
+    return sets;
+  }
+
+	function runQueue() {
+		if(queue.length > 0) {
+			modules.async.run.apply(null, queue.concat(
+				modules.async.apply(function() {queue = [];})
+			));
+		}
+	}
+
+	function handleGameMessage(o) {
+		if(o.game.deck == 24) {
+			return o.logs.length > 0 ? modules.async.sequence(applyDiff(o), setGame(o)) : setGame(o);
+		} else {
+			return applyDiff(o);
+		}
+	}
+
+	function setGame(o) {
+		return function(f) {
 			setStatus(o.game);
 			setCaptures(o.game);
 			[
-      ['river', o.game.river, RiverCard],
+				[sets.river, o.game.river, RiverCard],
-      ['yourHand', o.game.players[modules.session.getKey()].hand, HandCard]
+				[sets.you.hand, o.game.players[modules.session.getKey()].hand, HandCard]
 			].forEach(function(args) {setCardSet.apply(null, args)});
 			setTheirCards(o.game);
+			handleStep(o)(f);
+		};
+	}
+
+	function handleStep(o) {
+		return function(f) {
 			if(status.step == "Turned") {
     	  setTurned(o.game.step.contents);
     	} else {
@@ -45,20 +84,104 @@ function Game(modules) {
     	    modules.screen.dialog({
     	      text: modules.i18n.get('youScored'),
     	      answers: [
-            {label: 'endRound', action: function() {play({koiKoi: false})}},
+    	        {label: 'endRound', action: function() {play({koiKoi: false}); f();}},
-            {label: 'koikoi', action: function() {play({koiKoi: true});}}
+    	        {label: 'koikoi', action: function() {play({koiKoi: true}); f();}}
     	      ]
     	    });
     	  } else {
     	    modules.screen.dialog({
     	      text: modules.i18n.get('theyScored')(modules.room.name(o.game.playing)),
     	      answers: [
-            {label: 'ok', action: function() {}}
+    	        {label: 'ok', action: f}
     	      ]
     	    });
     	  }
+    	} else {
+				f();
+			}
+		};
+	}
+
+	function applyDiff(o) {
+		return modules.async.sequence.apply(null,
+			o.logs.map(animate).concat(
+				modules.async.apply(setStatus, o.game),
+				handleStep(o)
+			)
+		);
+	}
+
+  function animate(movement) {
+		return modules.async.bind(
+			modules.async.apply(function() {
+				var card;
+    		var movingCards = [];
+    		var side = (status.playing) ? 'you' : 'them';
+    		var dest = sets.river;
+				if(movement.captures != undefined) {
+					card = new Card(movement.played);
+    		  dest = sets[side];
+					movingCards.push([sets.river, dest, new Card(movement.captures)]);
+				} else {
+					card = new RiverCard(movement.played);
+				}
+				if(movement.source == 'Hand') {
+					movingCards.push([sets[side].hand, dest, card]);
+				} else {
+					var cardSet = {};
+					cardSet[card.name] = turnedCard(card.name);
+					movingCards.push([{card: cardSet, dom: deck}, dest, card]);
+				}
+				return movingCards;
+			}),
+			function(movingCards) {
+				return modules.async.parallel.apply(null,
+					movingCards.map(function(args) { return moveCard.apply(null, args); })
+				);
+			}
+		);
+  }
+
+  function moveCard(fromSet, toSet, card) {
+    var from, originalCard;
+		var slot = modules.dom.make('li', {class: ['card', 'slot']});
+    if (fromSet.card[card.name] != undefined) {
+			originalCard = fromSet.card[card.name].dom;
+			delete fromSet.card[card.name];
+		} else {
+      var 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 modules.async.sequence(
+			modules.async.wait(10),
+			modules.async.apply(function() {
+				card.dom.style.left = 0;
+				card.dom.style.top = 0;
+			}),
+			modules.async.wait(1000),
+			modules.async.apply(function() {
+				fromSet.dom.removeChild(slot);
+				card.dom.classList.remove('moving');
+			})
+		);
+  }
+
+  function insertCard(toSet, card) {
+    if(toSet.dom != undefined) {
+      toSet.card[card.name] = card;
+      toSet.dom.appendChild(card.dom);
+    } else {
+      insertCard(toSet[card.value.family.class], card);
+    }
   }
-  });
 
   function play(move) {
     modules.messaging.send({
@@ -86,10 +209,10 @@ function Game(modules) {
     var turn = null;
     status.playing = modules.session.is(game.playing);
     if(status.playing) {
-      sets.yourHand.dom.classList.toggle("yourTurn", status.step == "ToPlay");
+      sets.you.hand.dom.classList.toggle("yourTurn", status.step == "ToPlay");
       turn = modules.i18n.get("yourTurn");
     } else {
-      sets.yourHand.dom.classList.remove("yourTurn");
+      sets.you.hand.dom.classList.remove("yourTurn");
       turn = modules.i18n.get('playing')(modules.room.name(game.playing));
     }
     status.dom.appendChild(modules.dom.make('li', {textContent: turn}));
@@ -111,9 +234,8 @@ function Game(modules) {
     }
   }
 
-  function setCardSet(setName, cardNames, constructor) {
+  function setCardSet(set, cardNames, constructor) {
     constructor = constructor || Card;
-    var set = sets[setName];
     set.card = {};
     modules.dom.clear(set.dom);
     cardNames.forEach(function(cardName) {
@@ -127,16 +249,21 @@ function Game(modules) {
     var turnsTheyPlayed = Math.floor(
       (24 - game.deck + (modules.session.is(game.oyake) ? 0 : 1)) / 2
     );
-    modules.dom.clear(sets.theirHand.dom);
+    modules.dom.clear(sets.them.hand.dom);
     for(var i = 0; i < 8 - turnsTheyPlayed; i++) {
-      sets.theirHand.dom.appendChild(modules.dom.make('li', {class: "card"}));
+      sets.them.hand.dom.appendChild(modules.dom.make('li', {class: "card"}));
     }
   }
 
-  function setTurned(cardName) {
+	function turnedCard(cardName) {
     var card = new Card(cardName);
     card.dom.id = "turned";
     deck.appendChild(card.dom);
+		return card;
+	}
+
+  function setTurned(cardName) {
+		turnedCard(cardName);
     if(status.playing) {
       selected = cardName;
       showCandidates(modules.hanafuda.Card[selected], true);
@@ -173,6 +300,7 @@ function Game(modules) {
       if(card.candidate) {
         var withCard = selected;
         selected = null;
+				showCandidates(card.value, false);
         play(
           status.step == 'ToPlay' ? {capture: [withCard, card.name]} : {choose: card.name}
         );
@@ -190,19 +318,17 @@ function Game(modules) {
   }
 
   HandCard.prototype.onClick = function() {
-    if(status.playing && status.step == "ToPlay") {
     var card = this;
     return function() {
+      if(status.playing && status.step == "ToPlay") {
         if(selected != undefined) {
-          sets.yourHand.card[selected].setSelected(false);
+          sets.you.hand.card[selected].setSelected(false);
         } else {
           card.play();
         }
-      };
-    } else {
-      return function() {};
       }
     };
+  };
 
   HandCard.prototype.setSelected = function(yes) {
     selected = yes ? this.name : null;

www/index.html

@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <title>KoiKoi</title>
-    <script src="dom.js"></script>
+    <script src="UnitJS/async.js"></script>
+    <script src="UnitJS/dom.js"></script>
     <script src="translations.js"></script>
     <script src="i18n.js"></script>
     <script src="fun.js"></script>

www/main.js

@@ -1,5 +1,6 @@
 window.addEventListener('load', function() {
   var dom = Dom();
+  var async = Async();
   var translations = Translations();
   var i18n = I18n({translations: translations});
   var fun = Fun();
@@ -9,7 +10,7 @@ window.addEventListener('load', function() {
   var room = Room({dom: dom, messaging: messaging, session: session, fun: fun});
   var login = Login({dom: dom, i18n: i18n, messaging: messaging, room: room, screen: screen, session: session});
   var hanafuda = Hanafuda({fun: fun});
-  var game = Game({dom: dom, i18n: i18n, fun: fun, hanafuda: hanafuda, messaging: messaging, room: room, screen: screen, session: session});
+  var game = Game({async: async, dom: dom, i18n: i18n, fun: fun, hanafuda: hanafuda, messaging: messaging, room: room, screen: screen, session: session});
 
   var domElems = {
     join: document.getElementById('login').join,