Clean up formatting, add completed timeago.

overload-development-community · Aug 13, 2019 · d97afbc · d97afbc
1 parent a80b64d
commit d97afbc
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 9 deletions.
diff --git a/public/css/home.css b/public/css/home.css
@@ -1,3 +1,8 @@
+#completed, #games {
+    display: flex;
+    flex-flow: row wrap;
+}
+
 .game {
     padding: 10px;
     display: grid;
@@ -7,6 +12,10 @@
     width: 300px;
 }
 
+.game > div {
+    border: solid 1px #999999;
+}
+
 .game .server {
     text-align: center;
 }

diff --git a/public/js/game.js b/public/js/game.js
@@ -22,6 +22,8 @@ class Game {
      * @returns {void}
      */
     static DOMContentLoaded() {
+        timeago().render(document.querySelectorAll(".timeago"));
+
         Game.ws = new WebSocketClient();
         Game.ws.onmessage = Game.onmessage;
         Game.ws.open((window.location.protocol === "http:" ? "ws:" : window.location.protocol === "https:" ? "wss:" : window.location.protocol) + "//" + window.location.host + "/game/" + Game.game.ip);

diff --git a/public/js/home.js b/public/js/home.js
@@ -194,6 +194,8 @@ class Home {
             </div>
         `);
 
+        timeago().render(document.querySelectorAll(".timeago"));
+
         game.remove();
 
         setTimeout(() => {

diff --git a/public/views/home/completedGame.js b/public/views/home/completedGame.js
@@ -49,8 +49,15 @@ class CompletedGameView {
                     <div class="score">${scores[player]}</div>
                 `).join("")}
             </div>
-            <div class="map">${game.settings && game.settings.level ? CompletedGameView.Common.htmlEncode(game.settings.level) : ""}</div>
-            <div class="condition">${game.settings && game.settings.condition || ""}</div>
+            <div class="info">
+                <div class="time">
+                    Copleted <time class="timeago" datetime="${new Date(game.end).toISOString()}">${new Date(game.end)}</time>
+                </div>
+                <div class="map">${game.settings && game.settings.level ? CompletedGameView.Common.htmlEncode(game.settings.level) : ""}</div>
+                ${game.settings && game.settings.condition ? /* html */`
+                    <div class="condition">${game.settings.condition}</div>
+                ` : ""}
+            </div>
         `;
     }
 }

diff --git a/public/views/home/game.js b/public/views/home/game.js
@@ -35,15 +35,19 @@ class GameView {
             <div class="scores">
                 ${GameView.ScoreView.get(game)}
             </div>
-            <div class="time">
-                ${game.countdown ? /* html */`
-                    <script>new Countdown(${game.countdown});</script>
-                ` : game.elapsed || game.elapsed === 0 ? /* html */`
-                    <script>new Elapsed(${game.elapsed});</script>
+            <div class="info">
+                <div class="time">
+                    ${game.countdown ? /* html */`
+                        <script>new Countdown(${game.countdown});</script>
+                    ` : game.elapsed || game.elapsed === 0 ? /* html */`
+                        <script>new Elapsed(${game.elapsed});</script>
+                    ` : ""}
+                </div>
+                <div class="map">${game.settings && GameView.Common.htmlEncode(game.settings.level) || ""}</div>
+                ${game.settings && game.settings.condition ? /* html */`
+                    <div class="condition">${game.settings.condition}</div>
                 ` : ""}
             </div>
-            <div class="map">${game.settings && GameView.Common.htmlEncode(game.settings.level) || ""}</div>
-            <div class="condition">${game.settings && game.settings.condition || ""}</div>
         `;
     }
 }