Handle decreasing deck and opponent's hand

www/dom.js

@@ -1,6 +1,7 @@
 function Dom() {
   return {
-    clear: clear
+    clear: clear,
+    make: make
   }
 
   function clear(elem) {
@@ -8,4 +9,22 @@ function Dom() {
       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,8 +96,48 @@
   background-position-y: 91.7%;
 }
 
-#turned.hidden {
-  display: none;
+#game #rest {
+  margin: 0;
+}
+
+#rest.init, #rest.count24 {
+  box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 6px 9px 0 0 #555;
+}
+
+#rest.count22 {
+  box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 5.5px 8.3px 0 0 #555;
+}
+
+#rest.count20 {
+  box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 5px 7.5px 0 0 #555;
+}
+
+#rest.count18 {
+  box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 4.5px 6.8px 0 0 #555;
+}
+
+#rest.count16 {
+  box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555;
+}
+
+#rest.count14 {
+  box-shadow: 2px 3px 0 0 #555, 3.5px 5.3px 0 0 #555;
+}
+
+#rest.count12 {
+  box-shadow: 2px 3px 0 0 #555, 3px 4.5px 0 0 #555;
+}
+
+#rest.count10 {
+  box-shadow: 2px 3px 0 0 #555, 2.5px 3.8px 0 0 #555;
+}
+
+#rest.count8 {
+  box-shadow: 2px 3px 0 0 #555;
+}
+
+#game #turned {
+  margin: -0.1em 0 0 -4.75em;
 }
 
 #river li.card.candidate, #you .hand.yourTurn li.card {
@@ -122,6 +162,10 @@
   transform: translateY(-50%);
 }
 
+#game ul#deck {
+  float: left;
+}
+
 #game ul#river {
   position: absolute;
   left: 50%;
@@ -136,11 +180,11 @@
   margin-left: -3.5em;
 }
 
-#game #you .hand {
+#game .hand {
   margin-left: 0;
   float: left;
 }
 
-#you .hand .card {
+#game .hand .card {
   margin: 0.5em 0.1em;
 }

www/game.js

@@ -1,35 +1,45 @@
 function Game(modules) {
-  var turned = document.getElementById("turned");
+  var deck = document.getElementById("deck");
+  var rest = document.getElementById("rest");
   var status = {
     dom: document.getElementById("status"),
     playing: false,
     step: null,
     month: null,
+    played: 0
   };
   var sets = {
     river: {
       card: null,
       dom: document.getElementById("river")
     },
-    hand: {
+    yourHand: {
       card: null,
       dom: document.getElementById("you").getElementsByClassName("hand")[0]
+    },
+    theirHand: {
+      dom: document.getElementById("them").getElementsByClassName("hand")[0]
     }
   };
   var selected = null;
 
   modules.messaging.addEventListener(["Game"], function(o) {
-    status.step = o.game.step.tag;
     setStatus(o.game);
     setCaptures(o.game);
     [
       ['river', o.game.river, RiverCard],
-      ['hand', o.game.players[modules.session.getKey()].hand, HandCard]
+      ['yourHand', o.game.players[modules.session.getKey()].hand, HandCard]
     ].forEach(function(args) {setCardSet.apply(null, args)});
+    setTheirCards(o.game.oyake);
     if(status.step == "Turned") {
       setTurned(o.game.step.contents);
     } else {
-      turned.classList.add("hidden");
+      if(status.step == "ToPlay" && o.game.playing == o.game.oyake) {
+        rest.className = ["card", "count" + (24 - status.played)].join(' ');
+      }
+      if(deck.lastChild.id != "rest") {
+        deck.removeChild(deck.lastChild);
+      }
     }
     if(status.playing && status.step == "Scored") {
       play({koiKoi: confirm(
@@ -54,20 +64,28 @@ function Game(modules) {
 
   function setStatus(game) {
     modules.dom.clear(status.dom);
+    status.step = game.step.tag;
+    if(game.month != status.month) {
       status.month = game.month;
-    var month = document.createElement('li');
-    month.textContent = "This month's flower is the " + status.month;
-    status.dom.appendChild(month);
-    var playing = document.createElement('li');
+      status.played = 0;
+    } else {
+      if(status.step == "ToPlay") {
+        status.played++;
+      }
+    }
+    status.dom.appendChild(
+      modules.dom.make('li', {textContent: "This month's flower is the " + status.month})
+    );
+    var turn = null;
     status.playing = modules.session.is(game.playing);
     if(status.playing) {
-      sets.hand.dom.classList.toggle("yourTurn", status.step == "ToPlay");
-      playing.textContent = "Your turn";
+      sets.yourHand.dom.classList.toggle("yourTurn", status.step == "ToPlay");
+      turn = "Your turn";
     } else {
-      sets.hand.dom.classList.remove("yourTurn");
-      playing.textContent = modules.room.name(game.playing) + " is playing";
+      sets.yourHand.dom.classList.remove("yourTurn");
+      turn = modules.room.name(game.playing) + " is playing";
     }
-    status.dom.appendChild(playing);
+    status.dom.appendChild(modules.dom.make('li', {textContent: turn}));
   }
 
   function setCaptures(game) {
@@ -98,11 +116,20 @@ function Game(modules) {
     });
   }
 
+  function setTheirCards(oyake) {
+    var turnsTheyPlayed = Math.floor(
+      (status.played + (modules.session.is(oyake) ? 0 : 1)) / 2
+    );
+    modules.dom.clear(sets.theirHand.dom);
+    for(var i = 0; i < 8 - turnsTheyPlayed; i++) {
+      sets.theirHand.dom.appendChild(modules.dom.make('li', {class: "card"}));
+    }
+  }
+
   function setTurned(cardName) {
     var card = new Card(cardName);
-    modules.dom.clear(turned);
-    turned.appendChild(card.dom);
-    turned.classList.remove("hidden");
+    card.dom.id = "turned";
+    deck.appendChild(card.dom);
     if(status.playing) {
       selected = cardName;
       showCandidates(modules.hanafuda.Card[selected], true);
@@ -116,14 +143,14 @@ function Game(modules) {
   function Card(name) {
     this.value = modules.hanafuda.Card[name];
     this.name = name;
-    var domElem = document.createElement('li');
-    this.dom = domElem;
-    [
+    this.dom = modules.dom.make('li', {
+      class: [
         "card",
         "value" + modules.hanafuda.getValue(this.value),
         "month" + this.value.flower
-    ].forEach(function(c) {domElem.classList.add(c);});
-    this.dom.addEventListener('click', this.onClick());
+      ],
+      onClick: this.onClick()
+    });
   }
 
   Card.prototype.onClick = function() {return function() {};};
@@ -160,7 +187,7 @@ function Game(modules) {
       var card = this;
       return function() {
         if(selected != undefined) {
-          sets.hand.card[selected].setSelected(false);
+          sets.yourHand.card[selected].setSelected(false);
         } else {
           card.play();
         }

www/index.html

@@ -45,7 +45,9 @@
         <span class="score"></span>
       </div>
       <div id="table">
-        <ul id="turned" class="hidden"></ul>
+        <ul id="deck">
+          <li class="card init" id="rest"></li>
+        </ul>
         <ul id="river"></ul>
         <ul id="status"></ul>
       </div>

www/room.js

@@ -4,8 +4,7 @@ function Room(modules) {
     this.key = key;
     this.name = name;
     this.alone = alone;
-    this.dom = document.createElement('li');
-    this.dom.textContent = name;
+    this.dom = modules.dom.make('li', {textContent: name});
     this.position = null;
   }