From 9183528f1b5f4d1363878a6fb58d8fb707ba05c2 Mon Sep 17 00:00:00 2001
From: Ac_K <Acoustik666@gmail.com>
Date: Sat, 29 Aug 2020 03:04:33 +0200
Subject: [PATCH] Restyle the homepage

---
 index.html | 65 ++++++++++++++++++++++++++++++++++++------------------
 main.js    | 25 ++++++++++++---------
 style.css  | 62 +++++++++++++++++++++++++++++++++------------------
 3 files changed, 97 insertions(+), 55 deletions(-)

diff --git a/index.html b/index.html
index 5dc560c..ca97d01 100644
--- a/index.html
+++ b/index.html
@@ -48,35 +48,56 @@
         </div>
         <div class="container">
             <div class="row">
-                <div class="col-sm-5 who-online">
-                    <div class="card shadow h-100">
+                <div class="col-sm-4 margin-bt">
+                    <div class="card shadow">
                         <div class="card-header">
-                            <h4 class="my-0 font-weight-normal"><i class="fas fa-users"></i> Who is online ?</h4>
+                            <h4 class="my-0 font-weight-normal"><i class="red-sw fas fa-users"></i> Who is online ?</h4>
                         </div>
                         <div class="card-body">
-                            <div class="container main-stats"></div>
+                            <table class="w-100">
+                                <thead>
+                                    <tr>
+                                        <th></th>
+                                        <th class="text-right">Public <i class="fas fa-user"></i></th>
+                                        <th class="text-right">Private <i class="fas fa-user-secret"></i></th>
+                                        <th class="text-right">Total <i class="fas fa-users"></i></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <th><i class="fas fa-users"></i> Players</th>
+                                        <td class="players-public text-right"></td>
+                                        <td class="players-private text-right"></td>
+                                        <td class="players-total text-right"></td>
+                                    </tr>
+                                    <tr>
+                                        <th><i class="fas fa-gamepad"></i> Games</th>
+                                        <td class="games-public text-right"></td>
+                                        <td class="games-private text-right"></td>
+                                        <td class="games-total text-right"></td>
+                                    </tr>
+                                    <tr>
+                                        <th><i class="fas fa-people-arrows"></i> In Connection</th>
+                                        <td></td>
+                                        <td></td>
+                                        <td class="in-progress-total text-right"></td>
+                                    </tr>
+                                    <tr>
+                                        <th><i class="fas fa-server"></i> On Proxy Server</th>
+                                        <td></td>
+                                        <td></td>
+                                        <td class="proxy-server-total text-right"></td>
+                                    </tr>
+                                </tbody>
+                            </table>
                         </div>
                     </div>
                 </div>
-                <div class="col-sm-7 hosted-games">
-                    <div class="card shadow">
-                        <div class="card-header">
-                            <h4 class="my-0 font-weight-normal"><i class="fas fa-network-wired"></i> Hosted Games</h4>
-                        </div>
-                        <div class="card-body public-games">
-                            <table class="table">
-                                <thead>
-                                  <tr>
-                                    <th>Game</th>
-                                    <th>Players</th>
-                                    <th>State</th>
-                                  </tr>
-                                </thead>
-                                <tbody class="games-table">
-                                </tbody>
-                              </table>
-                        </div>
+                <div class="col-sm-8">
+                    <div class="card-header margin-bt">
+                        <h4 class="my-0 font-weight-normal"><i class="red-sw fas fa-network-wired"></i> Hosted Games</h4>
                     </div>
+                    <div class="public-games"></div>
                 </div>
             </div>
             <footer class="pt-4 my-md-5 pt-md-5 border-top">
diff --git a/main.js b/main.js
index 239efbf..4e00e6f 100644
--- a/main.js
+++ b/main.js
@@ -2,21 +2,24 @@ $(document).ready(function() {
     function encode(r){return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})}
 
     $.getJSON("/api", function(data) {
-        $(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-user"></i></div><div class="col-6">Public Players</div><div class="col-4 text-right">' + data.public_players_count + '</div></div>');
-        $(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-user-secret"></i></div><div class="col-6">Private Players</div><div class="col-4 text-right">' + data.private_players_count + '</div></div>');
-        $(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-users"></i></div><div class="col-6">Total Players</div><div class="col-4 text-right">' + data.total_players_count + '</div></div>');
-        $(".main-stats").append('<div class="row row-space"></div>');
-        $(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-gamepad"></i></div><div class="col-6">Public Games</div><div class="col-4 text-right">' + data.public_games_count + '</div></div>');
-        $(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-lock"></i></div><div class="col-6">Private Games</div><div class="col-4 text-right">' + data.private_games_count + '</div></div>');
-        $(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-layer-group"></i></div><div class="col-6">Total Games</div><div class="col-4 text-right">' + data.total_games_count + '</div></div>');
-        $(".main-stats").append('<div class="row row-space"></div>');
-        $(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-people-arrows"></i></div><div class="col-6">In Connection</div><div class="col-4 text-right">' + data.in_progress_count + '</div></div>');
-        $(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-server"></i></div><div class="col-6">On Proxy Server</div><div class="col-4 text-right">' + data.master_proxy_count + '</div></div>');
+        $(".players-public").text(data.public_players_count);
+        $(".players-private").text(data.private_players_count);
+        $(".players-total").text(data.total_players_count);
+
+        $(".games-public").text(data.public_games_count);
+        $(".games-private").text(data.private_games_count);
+        $(".games-total").text(data.total_games_count);
+
+        $(".in-progress-total").text(data.in_progress_count);
+        $(".proxy-server-total").text(data.master_proxy_count);
     });
 
     $.getJSON("/api/public_games", function(data) {
         $.each(data, function() {
-            $(".games-table").append('<tr><th><i class="fas fa-gamepad"></i> ' + this.game_name + '<br /><span class="titleid">(' + this.title_id + ')</span></th><td>' + this.player_count + '/' + this.max_player_count + ' <i class="fas fa-users"></i><br /><i class="fas fa-home"></i> ' + this.players.map(player => encode(player)).join(', <i class="fas fa-user"></i> ') + '</td><td><i class="fas fa-network-wired"></i> ' + this.mode + ' (' + this.status + ')</td></tr>');
+            $(".public-games").append('<div class="card margin-bt shadow"><div class="card-header"><div class="row"><div class="col-sm-10"><i class="red-sw fas fa-gamepad"></i> ' + this.game_name + ' <span class="badge badge-dark">' + this.title_id + '</span></div>'
+                                    + '<div class="col-sm-2 games-players-number"><i class="blue-sw fas fa-users"></i> ' + this.player_count + '/' + this.max_player_count + ' Players</div></div></div>'
+                                    + '<div class="card-body"><blockquote class="blockquote mb-0"><i class="blue-sw fas fa-home"></i> ' + this.players.map(player => encode(player)).join(', <i class="fas fa-user"></i> ')
+                                    + '<footer class="blockquote-footer"><i class="blue-sw fas fa-network-wired"></i> ' + this.mode + ' (' + this.status + ')</footer></blockquote></div></div>');
         });
     });
 });
\ No newline at end of file
diff --git a/style.css b/style.css
index 07e50dc..0476298 100644
--- a/style.css
+++ b/style.css
@@ -15,11 +15,6 @@ table {
     color: #FFFFFF !important;
 }
 
-.public-games {
-    height: 300px;
-    overflow-y: auto;
-}
-
 .display-4, .font-weight-normal {
     font-weight: 500 !important;
 }
@@ -44,29 +39,48 @@ table {
     background-color: #515159;
 }
 
-.row-space { height: 15px; }
-
-.main-stats .col-4 {
-    padding-right: 0;
-}
-
-.main-stats .row {
-    margin-right: -30px;
-}
-
-.titleid {
-    font-size: 12px;
-    font-weight: normal;
-}
-
 .online-dot {
-    color: #4bd6d1;
+    color: #02c5e5;
+}
+
+.margin-bt {
+    margin-bottom: 40px;
+}
+
+.blockquote {
+    font-size: 1rem !important;
+}
+
+.blockquote-footer {
+    color: #FFFFFF !important;
+    font-size: 1rem !important;
+}
+
+th {
+    font-weight: normal !important;
+}
+
+.red-sw {
+    color: #ff5f55;
+}
+
+.blue-sw {
+    color: #02c5e5;
+}
+
+.blockquote-footer::before {
+    color: #02c5e5;
+    content: "\221F\00A0" !important;
 }
 
 @media (min-width: 768px) {
     html {
         font-size: 16px;
     }
+
+    .games-players-number {
+        text-align: right!important;
+    }
 }
 
 @media (max-width: 768px) {
@@ -74,7 +88,11 @@ table {
         border-top: none !important;
     }
 
-    .who-online {
+    .margin-bt {
         margin-bottom: 20px;
     }
+
+    .games-players-number {
+        text-align: left!important;
+    }
 }
\ No newline at end of file