Added player scores to wins

Knewton · Dec 13, 2011 · 5408276 · 5408276
1 parent 62fce6c
commit 5408276
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/public/game.css b/public/game.css
@@ -49,6 +49,13 @@ h1 {
     z-index: 1000;
 }
 
+#losers {
+	text-align: center;
+    font: 18px/24px Verdana;
+    border-top: 1px solid #000;
+    padding-top: 10px;
+}
+
 /* Announce
 ----------------------------------*/
 #messages {

diff --git a/public/game.js b/public/game.js
@@ -168,6 +168,23 @@
         KOI.processors.classes(e, type);
     }
 
+    /**
+     * Returns a text block of the losers and their score.
+     * @param {Object<key, int>} players The players and their scores.
+     */
+    function losers(players) {
+        var l = [],
+            di = [];
+        KOI.each(players, function (p, s) {
+            l.push({player: p, score: s});
+        });
+        l.sort(function (a,b) { b.score - a.score; });
+        KOI.each(l, function (index, d) {
+            di.push(KOI.format("{0.player}: {0.score}", d));
+        }); 
+        return di.join("<br/>");
+    }
+
     //------------------------------
     //
     // Event bindings
@@ -230,6 +247,7 @@
             KOI.processors.classes(KOI.getElements("#winner-screen"), "");     
             KOI.processors.text(KOI.getElements("#winner-name"), 
                 data.state.winner);     
+            KOI.processors.text(KOI.getElements("#losers"), losers(data.players));
         } else {
             KOI.processors.classes(KOI.getElements("#winner"), "hide");     
             KOI.processors.classes(KOI.getElements("#winner-screen"), "hide");     

diff --git a/public/index.html b/public/index.html
@@ -26,8 +26,9 @@
 </head>
 <body>
     <div id="winner">
-        <h1><span id="winner-name"></span> has won the game!</h1>
+        <h1><span id="winner-name"></span> won with 12 pairs!</h1>
         <h1>The next game begins soon...</h1>
+        <div id="losers"></div>
     </div>
     <div id="winner-screen"></div> 
 	<div id="wrapper">