From e91c8fd403ef999de1b7a5cb9f3e167df8734da8 Mon Sep 17 00:00:00 2001
From: Marc LeBlanc <thewhite147@gmail.com>
Date: Sun, 11 Mar 2018 20:30:28 -0400
Subject: [PATCH 1/2] Stats screen integrated

---
 web/css/style.css | 10 +++++
 web/index.html    | 96 +++++++++++++++++++++++++++++------------------
 web/js/stats.js   | 75 +++++++++++++++++++++++++++++-------
 3 files changed, 131 insertions(+), 50 deletions(-)
diff --git a/web/css/style.css b/web/css/style.css
index 4575d47..2977134 100644
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -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;
 }
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 64c7abb..6c5194c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -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>
+                    <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>
\ No newline at end of file
diff --git a/web/js/stats.js b/web/js/stats.js
index fde1e52..889a6b3 100644
--- a/web/js/stats.js
+++ b/web/js/stats.js
@@ -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
@@ -31,9 +37,6 @@ function updateBanner(callback) {
 
     getAllStatsData(function() {
 
-        // Diags
-        var startDate = new Date().getTime();
-
         _longestGameInfo = { maxScores: 0 };
         _lastShutoutInfo = { date: 0 };
 
@@ -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);} );
 
@@ -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();
@@ -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);
@@ -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;
@@ -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; 
     }
 
@@ -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;
@@ -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";

From c2b3e1c611b9f04b1c37658ee211ed5f2ba72fcb Mon Sep 17 00:00:00 2001
From: Marc LeBlanc <thewhite147@gmail.com>
Date: Sun, 11 Mar 2018 21:00:13 -0400
Subject: [PATCH 2/2] Stats screen show after 60 seconds of inactivity

---
 web/index.html   |  2 +-
 web/js/script.js | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/web/index.html b/web/index.html
index 6c5194c..1f3f6b3 100644
--- a/web/index.html
+++ b/web/index.html
@@ -66,7 +66,7 @@ <h1 class="white-text">Joueur 2</h1>
             <!--    STATS BANNER (STATIC)    -->
             <!-- +++++++++++++++++++++++++++ -->
             <div class="row" id="banner-stats">
-                <marquee scrollamount=15>
+                <marquee scrollamount=15 id="banner-marquee">
                     <div class="col s12" id="banner-stats-content"></div>
                 </marquee>
             </div>
diff --git a/web/js/script.js b/web/js/script.js
index cfe79d4..3d1c1cf 100644
--- a/web/js/script.js
+++ b/web/js/script.js
@@ -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);
@@ -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() {
 
