Added dates to high scores

Ruurd Bijlsma · Ruurd Bijlsma · commit b32725032b46 · 2018-03-30T09:59:08.000+02:00
diff --git a/highscore/main.css b/highscore/main.css
@@ -116,6 +116,17 @@ body {
     font-size: 23px;
 }
 
+.score-date {
+    font-size: 10px;
+    text-transform: uppercase;
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.score[active] .score-date {
+    font-size: 13px;
+    text-transform: none;
+}
+
 .user {
     font-weight: bold;
     transition: 0.1s;
diff --git a/highscore/script.js b/highscore/script.js
@@ -80,12 +80,17 @@ function showScore(e) {
     e.target.setAttribute('active', '');
 }
 
+let months = ["January", "February", "March", "April", "May", "June", "July", "August", "October", "November", "December"];
+
 function displayScores(element, scores) {
     let html = '';
-    for (let score of scores) html += `
+    for (let score of scores) {
+        let date = new Date(score.date);
+        html += `
             <li class="score" onclick="showScore(event)">
                 <div class="user">${score.user}</div>
                 <div class="total-score">${score.totalScore}</div>
+                <div class="score-date">${date.getDay()} ${months[date.getMonth()]} ${date.getFullYear()}</div>
                 <div class="hidden">
                     <h4>Round scores</h4>
                     <ol class="individual-scores">${score.individualScores.map(s => `<li>${s}</li>`).join('')}</ol>
@@ -100,5 +105,6 @@ function displayScores(element, scores) {
                 </div>
             </li>
         `;
+    }
     element.innerHTML = html;
 }
