Show total rewards for each node in leaderboard

src/css/app.css

@@ -27,7 +27,24 @@
     border: solid 4px #F00;
 }
 
-.leaderboard .my-bid {
+.leaderboard {
+    border-collapse: collapse;
+}
+
+.leaderboard td {
+    text-align: center;
+}
+
+.leaderboard th,
+.leaderboard td {
+    padding: 10px 15px;
+}
+
+.leaderboard tr:nth-of-type(even) {
+    background-color: #EEE;
+}
+
+.leaderboard tr.my-bid {
     background-color: rgba(255,0,255,0.3);
 }
 

src/index.html

@@ -80,6 +80,7 @@ <h1>Settings</h1>
                     <th></th>
                     <th>Bid</th>
                     <th>Reward</th>
+                    <th>sum(Reward)</th>
                 </tr>
             </table>
         </script>
@@ -89,6 +90,7 @@ <h1>Settings</h1>
                 <td class="rank"></td>
                 <td class="bid"></td>
                 <td class="reward"></td>
+                <td class="total"></td>
             </tr>
         </script>
 

src/js/leaderboardrow.js

@@ -3,13 +3,15 @@ LeaderboardRow = function(reward) {
     let template = document.getElementById("leaderboard-row-template").innerHTML;
     container = document.createElement("table");
     container.innerHTML = template;
-    this.el = container.querySelectorAll("*")[0];
+    this.el = container.querySelectorAll("tr")[0];
 
     let rewardStr = reward.reward.toFixed(2);
+    let totalRewardStr = Math.round(reward.total).toLocaleString();
 
     this.el.querySelectorAll(".rank")[0].textContent = reward.rank;
     this.el.querySelectorAll(".bid")[0].textContent = reward.bid;
     this.el.querySelectorAll(".reward")[0].textContent = rewardStr;
+    this.el.querySelectorAll(".total")[0].textContent = totalRewardStr;
 
     if (reward.me) {
         this.el.classList.add("my-bid");

src/js/section.js

@@ -79,6 +79,7 @@ Section = function() {
             rewards.push({
                 "bid": node.value,
                 "reward": reward,
+                "total": node.totalRewards,
                 "me": isMyBid,
             });
         }