
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>3WEB-Pictionarry</title>
		<link rel="stylesheet" href="/css/style1.css" />
		<script src="/socket.io/socket.io.js"></script>
    </head>
	

    <body style="background-image:url('/pictures/bg5.jpg');background-repeat:repeat;">  
		<nav>
			<%- include nav.ejs %>
		</nav>
		<div class="corp" style="box-shadow:0px 0px 0px 0px white inset;">
			<div class="profile" style="position:absolute; left:5%;">
			<img src="pictures/quickdraw.jpg"  alt="draw" style="position:absolute;top:30%;left:60%;width:500px; border:2px solid black; border-radius:7px;"  />
		
			<h1 style="text-align:center;color:white" > <u id="titreProfile">Your Profile - </u></h1>
			
			<article class="profile" >
				<h2 style="color:#95c329;">
					<b>Your Behavior</b></br>
					¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
				</h2>
				<section>
					<ul>
						<li id="timePlayed"> <b>Total time Played :</b> </li>
						<li id="nbrGames"> <b>Total of games played :</b> </li>
					</ul>
				</section>
					
				<h2 style="color:#95c329;">
					<b>Game Statistics</b></br>
					¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
				</h2>
				<section>
					<ul>
						<li id="avgDuration"><b> Average duration of a game :</b> </li>
						<li id="avgPoint"><b> Average of point per game :</b> </li>
					</ul>
				</section>
					
				<h2 style="color:#95c329;">
					<b>Skills</b></br>
					¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
				</h2>
				<section>
					<ul>
						<li id="nbrPoint"><b> Total point earned :</b> </li>
						<li id="nbrGuessedWords"><b> Total of guessed words :</b> </li>
						<li id="avgTimeGuessWord"> <b>Average time to guess a word :</b> </li>
						<li id="nbrNoGuessWords"> <b>Number of words not guessed :</b> </li>
						<li id="ratioWords"> <b>Ratio words G/NG :</b> </li>
						<li id="nbrDraws"><b> Number of drawings:</b> </li>
						<li id="nbrNoGuessDraws"> <b>Number of drawings leave unguessed :</b> </li>
						<li id="ratioDraws"> <b>Ratio drawings G/NG  :</b> </li>
					</ul>
				</section>
				<h2 style="color:#95c329;">
					
					¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
				</h2>
			</article>
		</div>
		</div>
		
		
    </body>
	
	<script>
	// On se connecte au serveur
		var socket = io.connect();
	
	
	function readCookie(name) 
		{
			var i, c, ca, nameEQ = name + "=";
			ca = document.cookie.split(';');
			for(i=0;i < ca.length;i++) {
				c = ca[i];
				while (c.charAt(0)==' ') {
					c = c.substring(1,c.length);
				}
				if (c.indexOf(nameEQ) == 0) {
					return c.substring(nameEQ.length,c.length);
				}
			}
			return '';
		}
	
		var sName = readCookie('sessionName');
		
		//si il est sur la page sans etre conecté
		if(sName==""){alert('You must be loged to acces this page');	window.location.href = "/index";}
		document.getElementById('titreProfile').innerHTML+=sName;
		
		//on emets un socket avec notre pseudo
		socket.emit('profile', sName);
		
		//quand on recoit la réponse avec les infos profils
		socket.on('recupProfile', function(data)
		{
			if(data.validation==1)
			{
				users=data.user[0];
				
				//on calcule tout les rations et moyennes
				var avgDuration=users.gameData.timePlayed/users.gameData.nbrGames;
				if(users.gameData.timePlayed==0 || users.gameData.nbrGames==0){avgDuration="Non Calculable";}
				
				var avgPoints=users.gameData.nbrPoints/users.gameData.nbrGames;
				if(users.gameData.nbrPoints==0 || users.gameData.nbrGames==0){avgPoints="Non Calculable";}
				
				var avgTimeGuessWord=users.gameData.timePlayed/users.gameData.nbrGuessWords;
				if(users.gameData.nbrGuessWords==0 || users.gameData.timePlayed==0){avgTimeGuessWord="Non Calculable";}
				
				var ratioWords=users.gameData.nbrGuessWords/users.gameData.nbrNoGuessWords;
				if(users.gameData.nbrGuessWords==0 || users.gameData.nrbNoGuessWords==0){ratioWords="Non Calculable";}
				
				var ratioDraws=users.gameData.nbrDraws/users.gameData.nbrNoDraws;
				if(users.gameData.nbrDraws==0 || users.gameData.nrbNoDraws==0){ratioDraws="Non Calculable";}
				
				//on les affiches
				document.getElementById('timePlayed').innerHTML+=users.gameData.timePlayed;
				document.getElementById('nbrGames').innerHTML+=users.gameData.nbrGames;
				document.getElementById('avgDuration').innerHTML+=avgDuration;
				document.getElementById('nbrPoint').innerHTML+=users.gameData.nbrPoints;
				document.getElementById('avgPoint').innerHTML+=avgPoints;
				document.getElementById('nbrGuessedWords').innerHTML+=users.gameData.nbrGuessWords;
				document.getElementById('avgTimeGuessWord').innerHTML+=avgTimeGuessWord;
				document.getElementById('nbrNoGuessWords').innerHTML+=users.gameData.nrbNoGuessWords;
				document.getElementById('ratioWords').innerHTML+=ratioWords;
				document.getElementById('nbrDraws').innerHTML+=users.gameData.nbrDraws;
				document.getElementById('nbrNoGuessDraws').innerHTML+=users.gameData.nrbNoDraws;
				document.getElementById('ratioDraws').innerHTML+=ratioDraws;
				
			}
		});
		
	</script>
</html>