Replace card names by pictures in a sprite

www/game.css

@@ -1,52 +1,126 @@
-#game h2 {
-	clear: both;
-}
-
-#game ul {
-  padding: 0;
-}
-
 #game .card {
-	background: #fff;
+  background: url("/cards.jpg") no-repeat;
-	display: inline-block;
+  background-size: 400% 1200%;
-	border-radius: 0.5em;
+  display: inline-block;
-	border: 1px solid #555;
+  border-radius: 0.5em;
-	width: 5em;
+  border: 1px solid #555;
-	height: 8em;
+  width: 4.5em;
-	max-height: 10%;
+  height: 7em;
-	float: left;
+  max-height: 10%;
-	margin: 0.5em;
+  float: left;
+  margin: 0.5em;
+}
+
+#game .card.value0 {
+  background-position-x: 0%;
+}
+
+#game .card.value1 {
+  background-position-x: 33.3%;
+}
+
+#game .card.value2 {
+  background-position-x: 66.7%;
+}
+
+#game .card.value3 {
+  background-position-x: 100%;
+}
+
+#game .card.month0 {
+  background-position-y: 0%;
+}
+
+#game .card.month1 {
+  background-position-y: 9.1%;
+}
+
+#game .card.month2 {
+  background-position-y: 18.2%;
+}
+
+#game .card.month3 {
+  background-position-y: 27.3%;
+}
+
+#game .card.month4 {
+  background-position-y: 36.4%;
+}
+
+#game .card.month5 {
+  background-position-y: 45.5%;
+}
+
+#game .card.month6 {
+  background-position-y: 54.5%;
+}
+
+#game .card.month7 {
+  background-position-y: 63.6%;
+}
+
+#game .card.month8 {
+  background-position-y: 72.7%;
+}
+
+#game .card.month9 {
+  background-position-y: 81.8%;
+}
+
+#game .card.month10 {
+  background-position-y: 90.9%;
+}
+
+#game .card.month11 {
+  background-position-y: 100%;
 }
 
 #turned.hidden {
-	display: none;
+  display: none;
 }
 
 #river li.card.candidate, #hand.yourTurn li.card {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 #river li.card.candidate {
-	box-shadow: 0 0 0.5em 0.1em #fc0;
+  box-shadow: 0 0 0.5em 0.1em #fc0;
 }
 
 #hand li.card.selected {
-	margin-top: -1em;
+  margin-top: -1em;
 }
 
 #opponent, #own {
-	position: absolute;
+  position: absolute;
-	right: 0;
+  left: 0;
+  right: 0;
 }
 
 #opponent {
-	top: 0;
+  top: 0;
 }
 
 #own {
-	bottom: 0;
+  bottom: 0;
+}
+
+#game ul {
+  display: inline-block;
+  margin-left: 3em;
+  padding: 0;
+  float: right;
 }
 
 #opponent .card, #own .card {
-	margin-left: -2em;
+  margin-left: -3em;
+}
+
+#game #hand {
+  margin-left: 0;
+  float: left;
+}
+
+#hand .card {
+  margin-left: 0.5em;
 }

www/game.js

@@ -21,10 +21,12 @@ function Game(modules) {
       {name: 'hand', cards: o.game.players[modules.session.getKey()].hand}
     ].forEach(setCardSet);
     if(status.step == "Turned") {
-      turned.textContent = o.game.step.contents;
+      modules.dom.clear(turned);
+      var card = new Card(o.game.step.contents);
+      turned.appendChild(card.dom);
       turned.classList.remove("hidden");
       if(status.playing) {
-        selected = o.game.step.contents;
+        selected = card.name;
         showCandidates(modules.hanafuda.Card[selected], true);
       }
     } else {
@@ -107,9 +109,13 @@ function Game(modules) {
   function Card(name) {
     this.value = modules.hanafuda.Card[name];
     this.name = name;
-    this.dom = document.createElement('li');
+    var domElem = document.createElement('li');
-    this.dom.className = "card";
+    this.dom = domElem;
-    this.dom.textContent = name;
+    [
+      "card",
+      "value" + modules.hanafuda.getValue(this.value),
+      "month" + this.value.flower
+    ].forEach(function(c) {domElem.classList.add(c);});
     this.dom.addEventListener('click', this.onClick());
   }
 

www/hanafuda.js

@@ -112,6 +112,7 @@ function Hanafuda(modules) {
     Flower: Flower,
     Family: Family,
     Card: Card,
+    getValue: getValue,
     sameMonth: sameMonth
   };
 
@@ -120,6 +121,11 @@ function Hanafuda(modules) {
     return [0,1,2,3].map(function(i) {return Card[CardNames[first + i]];});
   }
 
+  function getValue(card) {
+    var first = 4 * card.flower;
+    return card.id - first;
+  }
+
   /*
 data Flower =
     Pine

www/index.html

@@ -37,24 +37,22 @@
     </div>
     <div id="game">
       <ul id="status"></ul>
-      <h2>River</h2>
       <ul id="river"></ul>
-      <span id="turned" class="card hidden"></span>
+      <ul id="turned" class="hidden"></ul>
-      <h2>Hand</h2>
-      <ul id="hand"></ul>
       <div id="opponent">
-				<span class="score"></span>
         <ul class="kasu"></ul>
         <ul class="tane"></ul>
         <ul class="tan"></ul>
         <ul class="hikari"></ul>
+        <span class="score"></span>
       </div>
       <div id="own">
-				<span class="score"></span>
+        <ul id="hand"></ul>
         <ul class="kasu"></ul>
         <ul class="tane"></ul>
         <ul class="tan"></ul>
         <ul class="hikari"></ul>
+        <span class="score"></span>
       </div>
     </div>
     <p id="debug"></p>