Improved layout to separate zones for each player and the table

www/game.css

@@ -1,3 +1,24 @@
+#game > div {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+#them {
+  top: 0;
+  bottom: 75%;
+}
+
+#table {
+  top: 25%;
+  bottom: 25%;
+}
+
+#you {
+  top: 75%;
+  bottom: 0;
+}
+
 #game .card {
   background: url("/cards.jpg") no-repeat;
   background-size: 400% 1200%;
@@ -79,7 +100,7 @@
   display: none;
 }
 
-#river li.card.candidate, #hand.yourTurn li.card {
+#river li.card.candidate, #you .hand.yourTurn li.card {
   cursor: pointer;
 }
 
@@ -87,24 +108,10 @@
   box-shadow: 0 0 0.5em 0.1em #fc0;
 }
 
-#hand li.card.selected {
+#you .hand li.card.selected {
   margin-top: -1em;
 }
 
-#opponent, #own {
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
-#opponent {
-  top: 0;
-}
-
-#own {
-  bottom: 0;
-}
-
 #game ul {
   display: inline-block;
   margin-left: 3em;
@@ -112,15 +119,15 @@
   float: right;
 }
 
-#opponent .card, #own .card {
+#them .card, #you .card {
   margin-left: -3em;
 }
 
-#game #hand {
+#game #you .hand {
   margin-left: 0;
   float: left;
 }
 
-#hand .card {
+#you .hand .card {
   margin-left: 0.5em;
 }

www/game.js

@@ -1,14 +1,20 @@
 function Game(modules) {
-  var turned = document.getElementById('turned');
+  var turned = document.getElementById("turned");
   var status = {
-    dom: document.getElementById('status'),
+    dom: document.getElementById("status"),
     playing: false,
     step: null,
-    month: null
+    month: null,
   };
   var sets = {
-    river: cardSet('river'),
+    river: {
-    hand: cardSet('hand'),
+      card: null,
+      dom: document.getElementById("river")
+    },
+    hand: {
+      card: null,
+      dom: document.getElementById("you").getElementsByClassName("hand")[0]
+    }
   };
   var selected = null;
 
@@ -17,18 +23,11 @@ function Game(modules) {
     setStatus(o.game);
     setCaptures(o.game);
     [
-      {name: 'river', cards: o.game.river},
+      ['river', o.game.river, RiverCard],
-      {name: 'hand', cards: o.game.players[modules.session.getKey()].hand}
+      ['hand', o.game.players[modules.session.getKey()].hand, HandCard]
-    ].forEach(setCardSet);
+    ].forEach(function(args) {setCardSet.apply(null, args)});
     if(status.step == "Turned") {
-      modules.dom.clear(turned);
+      setTurned(o.game.step.contents);
-      var card = new Card(o.game.step.contents);
-      turned.appendChild(card.dom);
-      turned.classList.remove("hidden");
-      if(status.playing) {
-        selected = card.name;
-        showCandidates(modules.hanafuda.Card[selected], true);
-      }
     } else {
       turned.classList.add("hidden");
     }
@@ -46,13 +45,6 @@ function Game(modules) {
     });
   }
 
-  function cardSet(id) {
-    return {
-      card: null,
-      dom: document.getElementById(id)
-    };
-  }
-
   function matchingInRiver(card) {
     return modules.fun.mapFilter(
       modules.fun.of(sets.river.card),
@@ -80,28 +72,43 @@ function Game(modules) {
 
   function setCaptures(game) {
     for(var key in game.players) {
-      var elem = document.getElementById(modules.session.is(key) ? "own" : "opponent");
+      var elem = document.getElementById(modules.session.is(key) ? "you" : "them");
       elem.getElementsByClassName('score')[0].textContent = game.scores[key] + " pts";
-      Array.prototype.forEach.call(elem.getElementsByTagName('ul'), modules.dom.clear);
+      var byClass = {}
+      Object.values(modules.hanafuda.Family).forEach(function(family) {
+        byClass[family.class] = elem.getElementsByClassName(family.class)[0];
+        modules.dom.clear(byClass[family.class]);
+      });
       game.players[key].meld.forEach(function(cardName) {
         var card = new Card(cardName);
-        elem.getElementsByClassName(card.value.family.class)[0].appendChild(card.dom);
+        byClass[card.value.family.class].appendChild(card.dom);
       });
     }
   }
 
-  function setCardSet(conf) {
+  function setCardSet(setName, cardNames, constructor) {
-    var set = sets[conf.name];
+    constructor = constructor || Card;
-    var constructor = conf.name == "river" ? RiverCard : HandCard;
+    var set = sets[setName];
-    modules.dom.clear(set.dom);
     set.card = {};
-    conf.cards.forEach(function(cardName) {
+    modules.dom.clear(set.dom);
+    cardNames.forEach(function(cardName) {
       var card = new constructor(cardName);
       set.card[cardName] = card;
       set.dom.appendChild(card.dom);
     });
   }
 
+  function setTurned(cardName) {
+    var card = new Card(cardName);
+    modules.dom.clear(turned);
+    turned.appendChild(card.dom);
+    turned.classList.remove("hidden");
+    if(status.playing) {
+      selected = cardName;
+      showCandidates(modules.hanafuda.Card[selected], true);
+    }
+  }
+
   function showCandidates(card, yes) {
     matchingInRiver(card).forEach(function(riverCard) {riverCard.setCandidate(yes);});
   }

www/index.html

@@ -36,18 +36,21 @@
       </form>
     </div>
     <div id="game">
-      <ul id="status"></ul>
+      <div id="them">
-      <ul id="river"></ul>
+        <ul class="hand"></ul>
-      <ul id="turned" class="hidden"></ul>
-      <div id="opponent">
         <ul class="kasu"></ul>
         <ul class="tane"></ul>
         <ul class="tan"></ul>
         <ul class="hikari"></ul>
         <span class="score"></span>
       </div>
-      <div id="own">
+      <div id="table">
-        <ul id="hand"></ul>
+        <ul id="turned" class="hidden"></ul>
+        <ul id="river"></ul>
+        <ul id="status"></ul>
+      </div>
+      <div id="you">
+        <ul class="hand"></ul>
         <ul class="kasu"></ul>
         <ul class="tane"></ul>
         <ul class="tan"></ul>