add leaderboard

aws-deepracer-community · Aug 30, 2019 · 64e8ad4 · 64e8ad4
1 parent cb75690
commit 64e8ad4
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 126 deletions.
diff --git a/static/jquery-3.3.1.min.js b/static/jquery-3.3.1.min.js
diff --git a/static/leaderboard.css b/static/leaderboard.css
@@ -21,87 +21,80 @@ div {
     display: block;
 }
 
-.lb-img {
+.lb-logo {
     display: block;
     margin: 15px 0;
     line-height: 0;
     overflow: hidden;
     text-align: center;
 }
 
-.lb-align-center {
-    text-align: center;
-}
-
-.lb-txt-bold {
-    font-weight: 500;
-}
-
 .lb-title {
     margin-top: 15px;
     margin-bottom: 15px;
+    text-align: center;
 }
 
-.m-leaderboard-items {
+.lb-items {
     max-width: 1200px;
     margin: 0 auto;
 }
 
-.m-leaderboard-items .m-header {
+.lb-items .lb-header {
     text-transform: uppercase;
     color: #aaa;
 }
 
-.m-leaderboard-items .m-header, .m-leaderboard-items .m-row {
+.lb-items .lb-header, .lb-items .lb-row {
     width: 100%;
     display: flex;
 }
 
-.m-leaderboard-items .m-header>div, .m-leaderboard-items .m-row>div {
+.lb-items .lb-header>div, .lb-items .lb-row>div {
     padding: 15px 30px;
     text-align: center;
 }
 
-.m-leaderboard-items .m-header>div:nth-child(1), .m-leaderboard-items .m-row>div:nth-child(1) {
+.lb-items .lb-header>div:nth-child(1), .lb-items .lb-row>div:nth-child(1) {
     width: 15%;
     min-width: 130px;
 }
 
-.m-leaderboard-items .m-header>div:nth-child(2), .m-leaderboard-items .m-row>div:nth-child(2) {
+.lb-items .lb-header>div:nth-child(2), .lb-items .lb-row>div:nth-child(2) {
     width: 35%;
     margin-right: auto;
     text-align: left;
 }
 
-.m-leaderboard-items .m-header>div:nth-child(n+3), .m-leaderboard-items .m-row>div:nth-child(n+3) {
+.lb-items .lb-header>div:nth-child(n+3), .lb-items .lb-row>div:nth-child(n+3) {
     display: block;
     width: 15%;
     text-align: left;
 }
 
-.m-leaderboard-items.m-initial .m-row:nth-child(n+2):nth-child(-n+4) {
+.lb-items.lb-initial .lb-row:nth-child(n+2):nth-child(-n+4) {
     margin-bottom: 10px;
     font-size: 16px;
     font-size: 1.6rem;
 }
 
-.m-leaderboard-items.m-initial .m-row:nth-child(n+2):nth-child(-n+4)>div:nth-child(-n+2) {
+.lb-items.lb-initial .lb-row:nth-child(n+2):nth-child(-n+4)>div:nth-child(-n+2) {
     color: #232f3e;
 }
 
-.m-leaderboard-items.m-initial .m-row:nth-child(2) {
+.lb-items.lb-initial .lb-row:nth-child(2) {
     background: linear-gradient(90deg,#fbdf47 0,#a66103);
 }
 
-.m-leaderboard-items.m-initial .m-row:nth-child(3) {
+.lb-items.lb-initial .lb-row:nth-child(3) {
     background: linear-gradient(90deg,#cacacd 0,#64656b);
 }
 
-.m-leaderboard-items.m-initial .m-row:nth-child(4) {
+.lb-items.lb-initial .lb-row:nth-child(4) {
     background: linear-gradient(90deg,#fac07b 0,#8f6347);
 }
 
-.m-leaderboard-items .m-row {
+.lb-items .lb-row {
     margin-bottom: 5px;
     background: linear-gradient(90deg,#405666 0,#3d246b);
     color: #fff;
@@ -113,3 +106,7 @@ div {
     height: 17px;
     width: 30px;
 }
+
+.lb-footer {
+    height: 50px;
+}
diff --git a/static/leaderboard.js b/static/leaderboard.js
@@ -2,6 +2,80 @@
  * leaderboard.js
  */
 
+let items = [];
+
+function clear() {
+    while (lb_items.lastChild) {
+        lb_items.removeChild(lb_items.lastChild);
+    }
+}
+
+function reload() {
+    let url = '/leaderboard.json?league=' + league;
+    $.ajax({
+        url: url,
+        type: 'get',
+        success: function (res, status) {
+            if (res) {
+                items = res.items;
+                print();
+            }
+        }
+    });
+}
+
+function print() {
+    clear();
+
+    addRow('lb-header', 'Position', 'Name', 'Time')
+
+    items.sort(compare);
+
+    let pos = 0;
+    items.forEach(function (e) {
+        pos++;
+        addRow('lb-row', pos, e.name, e.time);
+    });
+}
+
+function compare(a, b) {
+    a2 = sec(a.time);
+    b2 = sec(b.time);
+    if (a2 < b2) {
+        return -1;
+    } else if (a2 > b2) {
+        return 1;
+    }
+    return 0;
+}
+
+function sec(t) {
+    var a = t.split(':');
+    return ((+a[0]) * 60) + (+a[1]);
+}
+
+function addRow(className, position, name, time) {
+    let row = document.createElement('div');
+    row.classList.add(className);
+    addText(row, position);
+    addText(row, name);
+    addText(row, time);
+    lb_items.appendChild(row);
+}
+
+function addText(row, text) {
+    let item = document.createElement('div');
+    item.innerText = text;
+    row.appendChild(item);
+}
+
+$(function () {
+    reload();
+    setInterval(function () {
+        reload();
+    }, 1000);
+});
+
 let socket = io();
 socket.on('leaderboard', function (name) {
 

diff --git a/static/leaderboard.json b/static/leaderboard.json
@@ -0,0 +1,45 @@
+{
+    "title": "Pusan",
+    "items": [
+        {
+            "name": "Racer",
+            "time": "00:12.345"
+        },
+        {
+            "name": "Racer",
+            "time": "00:13.654"
+        },
+        {
+            "name": "Racer",
+            "time": "00:10.357"
+        },
+        {
+            "name": "Racer",
+            "time": "00:10.742"
+        },
+        {
+            "name": "Racer",
+            "time": "00:09.367"
+        },
+        {
+            "name": "Racer",
+            "time": "00:10.135"
+        },
+        {
+            "name": "Racer",
+            "time": "00:10.456"
+        },
+        {
+            "name": "Racer",
+            "time": "00:11.726"
+        },
+        {
+            "name": "Racer",
+            "time": "00:12.538"
+        },
+        {
+            "name": "Racer",
+            "time": "00:10.922"
+        }
+    ]
+}
diff --git a/static/timer.js b/static/timer.js
@@ -2,7 +2,7 @@
  * timer.js
  */
 
-class Stopwatch {
+class Timer {
     constructor(limiter, display, bestlap, results) {
         this.limiter = limiter;
         this.display = display;
@@ -168,7 +168,7 @@ function lpad(value, count) {
     return result.substr(result.length - count);
 }
 
-let stopwatch = new Stopwatch(
+let timer = new Timer(
     document.querySelector('.limiter'),
     document.querySelector('.display'),
     document.querySelector('.bestlap'),
@@ -178,17 +178,17 @@ let stopwatch = new Stopwatch(
 let socket = io();
 socket.on('timer', function (name) {
     if (name === 'start') {
-        stopwatch.start();
+        timer.start();
     } else if (name === 'pause') {
-        stopwatch.pause();
+        timer.pause();
     } else if (name === 'passed') {
-        stopwatch.passed();
+        timer.passed();
     } else if (name === 'press') {
-        stopwatch.press();
+        timer.press();
     } else if (name === 'reset') {
-        stopwatch.reset();
+        timer.reset();
     } else if (name === 'clear') {
-        stopwatch.clear();
+        timer.clear();
     }
 });