profile: add winrate

frontend/static/js/views/ProfilePageView.js

@@ -75,14 +75,32 @@ export default class extends AbstractView {
 			statusIndicator.classList.add('bg-danger');
 	}
 
+	/**
+	 * @param {[Object]} games 
+	 */
 	async fillStatistics(games)
 	{
+		const winrateDiv = document.getElementById("winrate");
+		
+		const win = 0;
+		const lose = 0;
 
+		games.forEach(game => {
+			if (game.finished === false)
+				return
+
+			if (client.me.id === game.winner.id)
+				win++;
+			else
+				lose++;
+		});
+
+		winrateDiv.innerText = `winrate: ${win + lose === 0 ? "🤓" : win / (win + lose)}`
 	}
 
 	async fillHistory(games)
     {
-        let game_list = document.getElementById("game-list");
+        const game_list = document.getElementById("game-list");
 
         games.forEach(game => {
 
@@ -96,7 +114,7 @@ export default class extends AbstractView {
             if (game.started)
                 game_item.style.backgroundColor = "yellow";
             if (game.finished)
-                game_item.style.backgroundColor = this.profile.id === game.winner_id ? "green" : "red";
+                game_item.style.backgroundColor = this.profile.id === game.winner.id ? "green" : "red";
 
             game.players.forEach(player => {
                 let player_score = document.createElement("a");
@@ -133,9 +151,12 @@ export default class extends AbstractView {
 			<button class='btn btn-sm btn-danger d-none' id='blockButton'>Block</button>
 			<button class='btn btn-sm btn-secondary d-none' id='unblockButton'>Unblock</button>
 		  </div>
+		  <h1>Games</h1>
+		  <div>
+			<h1 id='winrate'></h1>
+		  </div>
 		  <div>
 			<link rel="stylesheet" href="/static/css/gameHistory.css">
-			<h1>Game History</h1>
 			<div id="game-list"></div>
 		  </div>
 		</div>