Skip to content

Commit

Permalink
Merge pull request #3 from TheWhite147/feature/stats-screen
Browse files Browse the repository at this point in the history 
Feature/stats screen
  • Loading branch information
@TheWhite147
TheWhite147 authored Mar 12, 2018
2 parents 95ec126 + c2b3e1c commit 7e8f9a1
Show file tree
Hide file tree
Showing 4 changed files with 169 additions and 50 deletions.
10 changes: 10 additions & 0 deletions web/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,4 +88,14 @@ h1 {
color: white;
font-size: 100px;
padding-left: 18% !important;
}

/* Stats master view */
#table-stats {
color: white;
font-size: 50px;
}

#table-stats td {
padding: 0px 15px;
}
96 changes: 60 additions & 36 deletions web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,55 +16,79 @@

<body>

<!-- +++++++++++++++++++++ -->
<!-- VIEW: MAIN_MENU -->
<!-- +++++++++++++++++++++ -->
<!-- ++++++++++++++++++++++++++++ -->
<!-- MASTER VIEW: PLAY -->
<!-- ++++++++++++++++++++++++++++ -->
<div id="master-view-play">

<div id="view-main-menu">
<!-- +++++++++++++++++++++ -->
<!-- VIEW: MAIN_MENU -->
<!-- +++++++++++++++++++++ -->

<nav>
<div class="nav-wrapper orange" id="nav-main-menu">
<a href="#" class="brand-logo center">
Sélectionnez les joueurs
</a>
</div>
</nav>

<div class="row center" id="row-players">
<div class="col s6">
<h1 class="white-text">Joueur 1</h1>
<div id="view-main-menu">

<nav>
<div class="nav-wrapper orange" id="nav-main-menu">
<a href="#" class="brand-logo center">
Sélectionnez les joueurs
</a>
</div>
</nav>

<div class="row center" id="row-players">
<div class="col s6">
<h1 class="white-text">Joueur 1</h1>
</div>
<div class="col s6">
<h1 class="white-text">Joueur 2</h1>
</div>
</div>
<div class="col s6">
<h1 class="white-text">Joueur 2</h1>

<div class="row center" id="players-list">
<div class="col s6 fixed-height" id="players-list-1"></div>
<div class="col s6 fixed-height" id="players-list-2"></div>
</div>
</div>

<div class="row center" id="players-list">
<div class="col s6 fixed-height" id="players-list-1"></div>
<div class="col s6 fixed-height" id="players-list-2"></div>
</div>

</div>
<!-- +++++++++++++++++++ -->
<!-- VIEW: IN_GAME -->
<!-- +++++++++++++++++++ -->

<!-- +++++++++++++++++++ -->
<!-- VIEW: IN_GAME -->
<!-- +++++++++++++++++++ -->
<div id="view-in-game"></div>

<div id="view-in-game"></div>
<div class="row" id="row-elo">
<div class="col s6 elo-player valign-wrapper" id="elo-player-1" data-id-player1-elo="PLAYER1ID"></div>
<div class="col s6 elo-player valign-wrapper" id="elo-player-2" data-id-player2-elo="PLAYER2ID"></div>
</div>

<!-- +++++++++++++++++++++++++++ -->
<!-- STATS BANNER (STATIC) -->
<!-- +++++++++++++++++++++++++++ -->
<div class="row" id="banner-stats">
<marquee scrollamount=15 id="banner-marquee">
<div class="col s12" id="banner-stats-content"></div>
</marquee>
</div>

<div class="row" id="row-elo">
<div class="col s6 elo-player valign-wrapper" id="elo-player-1" data-id-player1-elo="PLAYER1ID"></div>
<div class="col s6 elo-player valign-wrapper" id="elo-player-2" data-id-player2-elo="PLAYER2ID"></div>
</div>

<!-- +++++++++++++++++++++++++++ -->
<!-- STATS BANNER (STATIC) -->
<!-- +++++++++++++++++++++++++++ -->
<div class="row" id="banner-stats">
<marquee scrollamount=15>
<div class="col s12" id="banner-stats-content"></div>
</marquee>
<!-- ++++++++++++++++++++++++++ -->
<!-- MASTER VIEW: STATS -->
<!-- ++++++++++++++++++++++++++ -->
<div id="master-view-stats" style="display: none;">
<nav>
<div class="nav-wrapper blue" id="nav-stats">
<a href="#" class="brand-logo center">
Statistiques des joueurs classés
</a>
</div>
</nav>
<div class="row">
<div class="col s10 push-s1" id="table-stats-section"></div>
</div>
</div>

</body>

</html>
38 changes: 38 additions & 0 deletions web/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,14 @@
var _scorePlayer_1 = 0;
var _scorePlayer_2 = 0;
var _lstPlayers = [];

// Master view variables
var _lastButtonActivityTime = 0;
var _lastPlayer1Selected = -1;
var _lastPlayer2Selected = -1;

setInterval(handleMasterView, 1000); // Every seconds

// Fill the players list
getPlayersList(function() {
setInterval(update_ui, 500);
Expand Down Expand Up @@ -65,6 +72,37 @@
}
}

function handleMasterView() {

if (_state != 0)
return;

var now = new Date().getTime();

if (_lastPlayer1Selected == _activePlayer_1
&& _lastPlayer2Selected == _activePlayer_2) { // Nothing moved?

if (now - _lastButtonActivityTime < 60 * 1000) // Show stats after 60 seconds of inactivity
return; // Still active
else {
$("#master-view-play").hide(); // Hide the game, show the stats
$("#master-view-stats").show();
}


}
else { // Still active
$("#master-view-play").show(); // Hide the stats, show the game
$("#master-view-stats").hide();
document.getElementById("banner-marquee").start();
_lastButtonActivityTime = now;
}

_lastPlayer1Selected = _activePlayer_1;
_lastPlayer2Selected = _activePlayer_2;
}


// Triggers height and scroll fixes
function fixScroll() {

Expand Down
75 changes: 61 additions & 14 deletions web/js/stats.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ var _lstScores = [];
var _longestGameInfo = { maxScores: 0 };
var _lastShutoutInfo = { date: 0 };

// ELO configuration
var INITIAL_ELO = 1000;
var MINIMUM_GAMES_FOR_RANK = 15;
var UNRANKED_COEFFICIENT = 20;
var RANKED_COEFFICIENT = 10;

// Get initial banner stats then set interval for later updates
updateBanner();
setInterval(updateBanner, 1000 * 60 * 5) // 5 minutes
Expand All @@ -31,9 +37,6 @@ function updateBanner(callback) {

getAllStatsData(function() {

// Diags
var startDate = new Date().getTime();

_longestGameInfo = { maxScores: 0 };
_lastShutoutInfo = { date: 0 };

Expand Down Expand Up @@ -64,10 +67,10 @@ function updateBanner(callback) {
_lstPlayers[i].shutout_losts = 0;

// ELO
_lstPlayers[i].elo = 1000; // Everyone starts with 1000 ELO
_lstPlayers[i].elo = INITIAL_ELO; // Everyone starts with 1000 ELO
_lstPlayers[i].elo_games = 0; // Number of ELO games counted
_lstPlayers[i].ranking = "unranked"; // Rank from ELO

// Sort games by date (oldest first)
_lstGames.sort(function(a,b) {return (a.created_date > b.created_date) ? 1 : ((b.created_date > a.created_date) ? -1 : 0);} );

Expand Down Expand Up @@ -131,13 +134,9 @@ function updateBanner(callback) {

}

// Diags
var endDate = new Date().getTime();
var diff = endDate - startDate;
console.log("Banner construction time = " + diff + " ms");

Stats.ComputeElo(function() {
setBannerText();
setStatsScreen();

if (callback)
callback();
Expand All @@ -157,6 +156,8 @@ function setBannerText() {

// Stats 0 - Best ELO score
var _lstPlayersBestElo = _lstPlayers.sort(function(a,b) {return (a.elo > b.elo) ? -1 : ((b.elo > a.elo) ? 1 : 0);} );
_lstPlayersBestElo = _lstPlayersBestElo.filter(function (p) { return p.games_played >= MINIMUM_GAMES_FOR_RANK });

var currentStatTemplate = eloStatTemplate;
currentStatTemplate = currentStatTemplate.replace(/STATS/g, "Top ELO");
currentStatTemplate = currentStatTemplate.replace(/NAME1/g, _lstPlayersBestElo[0].name);
Expand Down Expand Up @@ -256,6 +257,49 @@ function setBannerText() {

}

function setStatsScreen() {
// Set headers
var statsTemplate = '<table id="table-stats"><thead><tr>';
statsTemplate += '<th>Joueur</th>'; // Name
statsTemplate += '<th>ELO</th>'; // ELO
statsTemplate += '<th>PJ</th>'; // Games played
statsTemplate += '<th>V</th>'; // Win
statsTemplate += '<th>D</th>'; // Lost
statsTemplate += '<th>V/D</th>'; // W/L Ratio
statsTemplate += '<th>V-PR</th>'; // Overtime win
statsTemplate += '<th>D-PR</th>'; // Overtime lost
statsTemplate += '<th>V-BL</th>'; // Shutout win
statsTemplate += '<th>D-BL</th>'; // Shutout lost

statsTemplate += '</tr></thead><tbody>'; // Shutout lost

var lstPlayersStats = _lstPlayers.sort(function(a,b) {return (a.elo > b.elo) ? -1 : ((b.elo > a.elo) ? 1 : 0);} );
lstPlayersStats = lstPlayersStats.filter(function (p) { return p.games_played >= MINIMUM_GAMES_FOR_RANK });

for (var i = 0; i < lstPlayersStats.length; i++) {

statsTemplate += '<tr>';

statsTemplate += "<td>" + lstPlayersStats[i].name + "</td>";
statsTemplate += "<td>" + lstPlayersStats[i].elo + '<img src="images/ranks/' + lstPlayersStats[i].ranking + '.png" class="mini-img-rank"></td>'; // Ranked player
statsTemplate += "<td>" + lstPlayersStats[i].games_played + "</td>";
statsTemplate += "<td>" + lstPlayersStats[i].games_won + "</td>";
statsTemplate += "<td>" + lstPlayersStats[i].games_lost + "</td>";
statsTemplate += "<td>" + lstPlayersStats[i].win_lost_ratio + "</td>";
statsTemplate += "<td>" + lstPlayersStats[i].overtime_wins + "</td>";
statsTemplate += "<td>" + lstPlayersStats[i].overtime_losts + "</td>";
statsTemplate += "<td>" + lstPlayersStats[i].shutout_wins + "</td>";
statsTemplate += "<td>" + lstPlayersStats[i].shutout_losts + "</td>";

statsTemplate += '</tr>';
}


statsTemplate += '</tbody></table>';

$("#table-stats-section").html(statsTemplate);
}

function getAllStatsData(callback) {
Api.GetPlayersList(function(players) {
_lstPlayers = players;
Expand Down Expand Up @@ -403,7 +447,7 @@ Stats.ComputeElo = function(callback) {

// Reset number of games
for (var i = 0; i < _lstPlayers.length; i++){
_lstPlayers[i].elo = 1000;
_lstPlayers[i].elo = INITIAL_ELO;
_lstPlayers[i].elo_games = 0;
}

Expand Down Expand Up @@ -432,8 +476,8 @@ Stats.ComputeElo = function(callback) {
var wValuePlayer2 = _lstGames[i].id_winning_player == player2.id ? 1 : 0;

// Development coefficient (K)
var kValuePlayer1 = player1.elo_games < 15 ? 20 : 10;
var kValuePlayer2 = player2.elo_games < 15 ? 20 : 10;
var kValuePlayer1 = player1.elo_games < MINIMUM_GAMES_FOR_RANK ? UNRANKED_COEFFICIENT : RANKED_COEFFICIENT;
var kValuePlayer2 = player2.elo_games < MINIMUM_GAMES_FOR_RANK ? UNRANKED_COEFFICIENT : RANKED_COEFFICIENT;

// Ranking difference (D)
var dValuePlayer1 = initialEloPlayer1 - initialEloPlayer2;
Expand All @@ -460,7 +504,10 @@ Stats.ComputeElo = function(callback) {
for (var i = 0; i < _lstPlayers.length; i++) {
var elo = _lstPlayers[i].elo;

if (elo < 800)
// Is player ranked?
if (_lstPlayers[i].games_played < MINIMUM_GAMES_FOR_RANK)
_lstPlayers[i].ranking = "unranked";
else if (elo < 800)
_lstPlayers[i].ranking = "bronze1";
else if (elo >= 800 && elo < 850)
_lstPlayers[i].ranking = "bronze2";
Expand Down

0 comments on commit 7e8f9a1

Please sign in to comment.