add leaderboard

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

Hide file tree

Showing 9 changed files with 277 additions and 19 deletions.
diff --git a/server.js b/server.js
@@ -23,12 +23,20 @@ app.get('/', function (req, res) {
     });
 });
 
-app.get('/call/:name', function (req, res) {
+app.get('/leaderboard/:league', function (req, res) {
+    const league = req.params.league;
+    let host = os.hostname();
+    res.render('leaderboard.ejs', {
+        league: league
+    });
+});
+
+app.get('/timer/:name', function (req, res) {
     const name = req.params.name;
-    io.sockets.emit('call', `${name}`);
+    io.sockets.emit('timer', `${name}`);
     return res.status(200).json({
         result: true,
-        call: name
+        timer: name
     });
 });
 
@@ -47,9 +55,9 @@ io.on('connection', function (socket) {
         }
     });
 
-    socket.on('call', function (name) {
-        console.log('call : ', socket.id, name);
-        io.sockets.emit('call', `${name}`);
+    socket.on('timer', function (name) {
+        console.log('timer : ', socket.id, name);
+        io.sockets.emit('timer', `${name}`);
     });
 });
 
@@ -62,17 +70,17 @@ http.listen(port, function () {
 gpio.on('change', function (channel, value) {
     console.log(`Channel ${channel} value is now ${value} \t- ${(Math.random() * 100000)}`);
     if (channel === 7) {
-        io.sockets.emit('call', 'press');
+        io.sockets.emit('timer', 'press');
     } else if (channel === 37) {
-        io.sockets.emit('call', 'start');
+        io.sockets.emit('timer', 'start');
     } else if (channel === 35) {
-        io.sockets.emit('call', 'pause');
+        io.sockets.emit('timer', 'pause');
     } else if (channel === 33) {
-        io.sockets.emit('call', 'passed');
+        io.sockets.emit('timer', 'passed');
     } else if (channel === 31) {
-        io.sockets.emit('call', 'reset');
+        io.sockets.emit('timer', 'reset');
     } else if (channel === 29) {
-        io.sockets.emit('call', 'clear');
+        io.sockets.emit('timer', 'clear');
     }
 });
 gpio.setup(7, gpio.DIR_IN, gpio.EDGE_BOTH);

diff --git a/static/deepracer.png b/static/deepracer.png
diff --git a/static/leaderboard.css b/static/leaderboard.css
@@ -0,0 +1,115 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    background: #111;
+    color: #eee;
+    font-family: Menlo, Noto Mono;
+}
+
+figure {
+    display: block;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 40px;
+    margin-inline-end: 40px;
+}
+
+div {
+    display: block;
+}
+
+.lb-img {
+    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;
+}
+
+.m-leaderboard-items {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.m-leaderboard-items .m-header {
+    text-transform: uppercase;
+    color: #aaa;
+}
+
+.m-leaderboard-items .m-header, .m-leaderboard-items .m-row {
+    width: 100%;
+    display: flex;
+}
+
+.m-leaderboard-items .m-header>div, .m-leaderboard-items .m-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) {
+    width: 15%;
+    min-width: 130px;
+}
+
+.m-leaderboard-items .m-header>div:nth-child(2), .m-leaderboard-items .m-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) {
+    display: block;
+    width: 15%;
+    text-align: left;
+}
+
+.m-leaderboard-items.m-initial .m-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) {
+    color: #232f3e;
+}
+
+.m-leaderboard-items.m-initial .m-row:nth-child(2) {
+    background: linear-gradient(90deg,#fbdf47 0,#a66103);
+}
+
+.m-leaderboard-items.m-initial .m-row:nth-child(3) {
+    background: linear-gradient(90deg,#cacacd 0,#64656b);
+}
+
+.m-leaderboard-items.m-initial .m-row:nth-child(4) {
+    background: linear-gradient(90deg,#fac07b 0,#8f6347);
+}
+
+.m-leaderboard-items .m-row {
+    margin-bottom: 5px;
+    background: linear-gradient(90deg,#405666 0,#3d246b);
+    color: #fff;
+}
+
+.icon-trophy {
+    background: url(/trophy.png) no-repeat top left;
+    display: inline-block;
+    height: 17px;
+    width: 30px;
+}
diff --git a/static/leaderboard.js b/static/leaderboard.js
@@ -0,0 +1,8 @@
+/**
+ * leaderboard.js
+ */
+
+let socket = io();
+socket.on('leaderboard', function (name) {
+
+});
diff --git a/static/timer.css b/static/timer.css
@@ -4,8 +4,8 @@
 }
 
 html {
-    background: #333;
-    color: #ddd;
+    background: #111;
+    color: #eee;
     font-family: Menlo, Noto Mono;
 }
 

diff --git a/static/timer.js b/static/timer.js
@@ -1,3 +1,7 @@
+/**
+ * timer.js
+ */
+
 class Stopwatch {
     constructor(limiter, display, bestlap, results) {
         this.limiter = limiter;
@@ -172,7 +176,7 @@ let stopwatch = new Stopwatch(
 );
 
 let socket = io();
-socket.on('call', function (name) {
+socket.on('timer', function (name) {
     if (name === 'start') {
         stopwatch.start();
     } else if (name === 'pause') {
@@ -189,7 +193,7 @@ socket.on('call', function (name) {
 });
 
 function call(name) {
-    socket.emit('call', name);
+    socket.emit('timer', name);
 }
 
 document.addEventListener('keydown', function (event) {

diff --git a/static/trophy.png b/static/trophy.png
diff --git a/views/index.ejs b/views/index.ejs
@@ -3,8 +3,8 @@
 
 <head>
     <meta charset="utf-8">
-    <title>deepracer-timer</title>
-    <link rel="stylesheet" href="./timer.css">
+    <title>timer</title>
+    <link rel="stylesheet" href="/timer.css">
 </head>
 
 <body>
@@ -24,4 +24,4 @@
 </html>
 
 <script src="/socket.io/socket.io.js"></script>
-<script src="./timer.js"></script>
+<script src="/timer.js"></script>
diff --git a/views/leaderboard.ejs b/views/leaderboard.ejs
@@ -0,0 +1,123 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>leaderboard</title>
+    <link rel="stylesheet" href="/leaderboard.css">
+</head>
+
+<body>
+    <figure class="lb-img">
+        <div>
+            <img src="/deepracer.png" width="300">
+        </div>
+    </figure>
+
+    <h1 class="lb-title lb-align-center">AWS DeepRacer League</h1>
+
+    <div class="m-dr-leaderboard-container">
+        <div class="m-leaderboard-items lb-txt-bold m-initial">
+            <div class="m-header">
+                <div>Position</div>
+                <div>Name</div>
+                <div>Time</div>
+            </div>
+            <div class="m-row">
+                <div><span class="icon-trophy"></span> 1</div>
+                <div>날밤</div>
+                <div>2965.85</div>
+            </div>
+            <div class="m-row">
+                <div><span class="icon-trophy"></span> 2</div>
+                <div>Breadcentric</div>
+                <div>2965.574</div>
+            </div>
+            <div class="m-row">
+                <div><span class="icon-trophy"></span> 3</div>
+                <div>nero-DNPds</div>
+                <div>2965.071</div>
+            </div>
+            <div class="m-row">
+                <div>4</div>
+                <div>Etaggel</div>
+                <div>2965</div>
+            </div>
+            <div class="m-row">
+                <div>5</div>
+                <div>Jouni-Cybercom</div>
+                <div>2964.209</div>
+            </div>
+            <div class="m-row">
+                <div>6</div>
+                <div>maeda-ai</div>
+                <div>2964.173</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+            <div class="m-row">
+                <div>7</div>
+                <div>sola-DNPds</div>
+                <div>2963.992</div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
+
+<script src="/socket.io/socket.io.js"></script>
+<script src="./leaderboard.js"></script>