Overhauled leaderboard screen

client/templates/leaderboard.jade

@@ -1,58 +1,127 @@
-style
- body {
-  font-family: Verdana;
-  font-size: 13px;
-  background: #eee;
- }
- td {
-  padding: 10px;
- }
- tr {
-  background-color: #d3d3d3;
- }
- table {
-  border: 2px solid gray;
-  border-radius: 10px;
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  border-collapse: collapse;
-  border-style: hidden;
-  box-shadow: 0 0 0 1px #666;
- }
- tr:nth-child(even) {
-  background-color: #c3c3c3;
- }
- th{
-  width: 200px;
-  border-bottom: 1px solid gray;
- }
- table tr:first-child th:first-child,
- table.Info tr:first-child td:first-child {
-  border-top-left-radius: 10px;
- }
- table tr:first-child th:last-child,
- table.Info tr:first-child td:last-child {
-  border-top-right-radius: 10px;
- }
+style
+  @font-face {
+    font-family: 'origicideregular';
+    src: url('http://p-insurgence.com/fonts/Origicide-webfont.eot');
+    src: url('http://p-insurgence.com/fonts/Origicide-webfont.eot?#iefix') format('embedded-opentype'),
+         url('http://p-insurgence.com/fonts/Origicide-webfont.woff') format('woff'),
+         url('http://p-insurgence.com/fonts/Origicide-webfont.ttf') format('truetype'),
+         url('http://p-insurgence.com/fonts/Origicide-webfont.svg#origicideregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+  body {
+    font-family: 'Helvetica Neue', Helvetica, Arial;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+    color: #3b3b3b;
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    background: #2b2b2b;
+  }
+  .wrapper {
+    margin: 0 auto;
+    padding: 40px;
+    max-width: 800px;
+  }
+  table {
+    margin: 0 0 40px 0;
+    width: 100%;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    display: table;
+  }
+  @media screen and (max-width: 580px) {
+    .table {
+      display: block;
+    }
+  }
+  .row {
+    display: table-row;
+    background: #f6f6f6;
+  }
+  .row:nth-of-type(odd) {
+    background: #e9e9e9;
+  }
+  .row.header {
+    font-weight: 900;
+    color: #fff;
+    background: #ea6153;
+  }
+  .row.header.name {
+    font-family: 'origicideregular';
+    font-size: large;
+    font-weight: 100;
+  }
+  .row.green {
+    background: #27ae60;
+  }
+  .row.blue {
+    background: #2980b9;
+  }
+  @media screen and (max-width: 580px) {
+    .row {
+      padding: 8px 0;
+      display: block;
+    }
+  }
+  .cell {
+    padding: 6px 12px;
+    display: table-cell;
+    width: 50px;
+  }
+  @media screen and (max-width: 580px) {
+    .cell {
+      padding: 2px 12px;
+      display: block;
+    }
+  }
+  a {
+    color: black;
+    text-decoration: none;
+  }
+  .crown {
+    vertical-align: bottom;
+    width: 25px;
+    float: right;
+  }
 
- table tr:last-child td:first-child {
-  border-bottom-left-radius: 10px;
- }
-
- table tr:last-child td:last-child {
-  border-bottom-right-radius: 10px;
- }
 div
-  table
-    thead
-      tr
-        th Rank
-        th Player
-        th Score
-    tbody
+  .wrapper
+    .table
+      .row.header.name
+        .cell
+        .cell Insurgence
+        .cell OU
+        .cell
+        .cell
+      .row.header
+        .cell
+          | Rank
+        .cell
+          | Player
+        .cell
+          | Score
+        .cell
+          | Win Ratio
+        .cell
+          | Total Battles
       each member, i in players
-        tr
-          td #{i + 1}
-          td #{member.username}
-          td #{member.score}
+        .row
+          .cell
+            | #{i + 1}
+            if i == 0
+              img.crown(src="../Sprites/images/goldcrown.png")
+            else if i == 1
+              img.crown(src="../Sprites/images/silvercrown.png")
+            else if i == 2
+              img.crown(src="../Sprites/images/bronzecrown.png")
+          .cell
+            | <a href=http://forums.p-insurgence.com/users/#{member.username}>#{member.username}</a>
+          .cell
+            | #{member.score}
+          - var totalbattles = member.ratio.win + member.ratio.draw + member.ratio.lose
+          - var winratio = ((member.ratio.win / totalbattles) * 100).toFixed(2)
+          .cell
+            | #{winratio}%
+          .cell
+            | #{totalbattles}

server/index.coffee

@@ -65,19 +65,31 @@ CLIENT_VERSION = assets.getVersion()
     page = req.param('page')
     perPage = req.param('per_page')
     ratings.listRatings page, perPage, (err, results) ->
-      if err
-        res.json(500, err.message)
-      else
-        res.render('leaderboard.jade', players: results)
+      temparr = results.map((e) -> e.username)
+      ratioarr = []
+      ratings.getRatios temparr, (err, ratios)->
+        for username in temparr
+          index = temparr.indexOf(username)
+          results[index].ratio = ratios[username]
+        if err
+          res.json(500, err.message)
+        else
+          res.render('leaderboard.jade', players: results)
         
   app.get '/leaderboard/json', (req, res) ->
     page = req.param('page')
     perPage = req.param('per_page')
     ratings.listRatings page, perPage, (err, results) ->
-      if err
-        res.json(500, err.message)
-      else
-        res.json(players: results)
+      temparr = results.map((e) -> e.username)
+      ratioarr = []
+      ratings.getRatios temparr, (err, ratios)->
+        for username in temparr
+          index = temparr.indexOf(username)
+          results[index].ratio = ratios[username]
+        if err
+          res.json(500, err.message)
+        else
+          res.json(players: results)
 
   app.get '/pokeuse/json', (req, res) ->
     user= req.user

server/ratings.coffee

@@ -14,7 +14,7 @@ RATINGS_SUBKEYS = {}
 for attribute in RATINGS_ATTRIBUTES
   RATINGS_SUBKEYS[attribute] = [RATINGS_KEY, attribute].join(':')
 RATINGS_MAXKEY = "ratings:max"
-RATINGS_PER_PAGE = 15
+RATINGS_PER_PAGE = 20
 
 ALGORITHM_OPTIONS =
   systemConstant: 0.2  # Glicko2 tau
@@ -203,6 +203,35 @@ updateMaxStreak = (id, next) =>
     return next(err)  if err
     updateMaxRatings(idArray, next)
 
+@getRatio = (id, next) ->
+  id = id.toLowerCase()
+  multi = redis.multi()
+  for attribute, key of RATIOS_SUBKEYS
+    multi = multi.hget(key, id)
+  multi.exec (err, results) ->
+    return next(err)  if err
+    hash = {}
+    for attribute, i in RATIOS_ATTRIBUTES
+      hash[attribute] = Number(results[i]) || 0
+    return next(null, hash)
+
+@getRatios = (users, next) ->
+  multi = redis.multi()
+  for id in users
+    for attribute, key of RATIOS_SUBKEYS
+      multi = multi.hget(key, id)
+  multi.exec (err, results) ->
+    return next(err)  if err
+    hasharray = {}
+    iter = 0
+    for id, i in users
+      hash = {}
+      for attribute, j in RATIOS_ATTRIBUTES
+        hash[attribute] = Number(results[iter]) || 0
+        iter++
+      hasharray[id] = hash
+    next(null, hasharray)
+
 @listRatings = (page = 1, perPage = RATINGS_PER_PAGE, next) ->
   if arguments.length == 2 && typeof perPage == 'function'
     [perPage, next] = [RATINGS_PER_PAGE, perPage]
@@ -218,18 +247,6 @@ updateMaxStreak = (id, next) =>
       array.push(username: username, score: score)
     next(null, array)
 
-@getRatio = (id, next) ->
-  id = id.toLowerCase()
-  multi = redis.multi()
-  for attribute, key of RATIOS_SUBKEYS
-    multi = multi.hget(key, id)
-  multi.exec (err, results) ->
-    return next(err)  if err
-    hash = {}
-    for attribute, i in RATIOS_ATTRIBUTES
-      hash[attribute] = Number(results[i]) || 0
-    return next(null, hash)
-
 @getStreak = (id, next) ->
   id = id.toLowerCase()
   multi = redis.multi()