diff --git a/public/game.css b/public/game.css index 9969d8e..d12a622 100644 --- 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 index 2ae5f7f..f9a17f7 100644 --- 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} 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("
"); + } + //------------------------------ // // 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 index 84372b9..90384d8 100644 --- a/public/index.html +++ b/public/index.html @@ -26,8 +26,9 @@
-

has won the game!

+

won with 12 pairs!

The next game begins soon...

+