Restyle the homepage

This commit is contained in:
Ac_K 2020-08-29 03:04:33 +02:00
parent 4a0a5b2e6b
commit 9183528f1b
3 changed files with 97 additions and 55 deletions

View file

@ -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">

25
main.js
View file

@ -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>');
});
});
});

View file

@ -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;
}
}