
<!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;">
			
							
				<h1 style="text-align:center;color:white" > <u id="titreProfile">Ladder </u></h1>
				<div class="ladder" >
				<TABLE   id="tabLadder" CELLPADDING="10"> 
					<TR> 
						<TH id="thUser" onclick="changeFiltres('username')"> Username </TH> 
						<TH id="thPoints" onclick="changeFiltres('gameData.nbrPoints')" > Total Points </TH> 
						<TH id="thTime" onclick="changeFiltres('gameData.timePlayed')"> Total Time played </TH> 
						<TH id="thGames" onclick="changeFiltres('gameData.nbrGames')"> Number of Games</TH> 
						<TH id="thLanguage" onclick="changeFiltres('language')"> Langage</TH> 
					</TR> 
					<TR> 
						<TH></TH><TH></TH><TH><strong style="text-align:center">Loading Ladder...</strong></TH>
					</TR>
					
				</TABLE> 
				
			</div>
		</div>
		
		
		<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 '';
		}
	
		//variable pour le filtre
		var myFiltre="gameData.nbrPoints";
		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";}
		
		
		//on emets un socket avec notre filtre
		socket.emit('ladder',myFiltre);
		
		//quand on recoit la réponse avec les infos profils
		socket.on('recupLadder', function(data)
		{
			if(data.validation==1)
			{
				users=data.user;
				
				document.getElementById('tabLadder').innerHTML='<tr> <TH id="thUser" onclick="changeFiltres(\'username\')"> Username </TH> <TH  id="thPoints" onclick="changeFiltres(\'gameData.nbrPoints\')"> Total Points </TH> <TH id="thTime" onclick="changeFiltres(\'gameData.timePlayed\')"> Total Time played </TH> <TH id="thGames" onclick="changeFiltres(\'gameData.nbrGames\')"> Number of Games</TH> <TH  id="thLanguage" onclick="changeFiltres(\'language\')"> Langage</TH> </tr> ';
				for (var i = 0; i < data.user.length; i++)
				{
					document.getElementById('tabLadder').innerHTML+="<TR  id='row_"+users[i].username+"' ><TD>"+users[i].username+"</TD><TD>"+users[i].gameData.nbrPoints+"</TD><TD>"+users[i].gameData.timePlayed+"</TD><TD>"+users[i].gameData.nbrGames+"</TD><TD>"+users[i].language+"</TD></TR> ";
					if(users[i].username==sName){document.getElementById('row_'+sName).style.color="red";}
	
				}
				changeUnderline(myFiltre);
			}
		});
		
		function changeFiltres(filtre)
		{
			myFiltre=filtre;
			//on emets un socket avec notre filtre
			socket.emit('ladder',filtre);
			
		}
		
		function changeUnderline(filtre)
		{
			//on change le underline en fonction du filtre
			if(filtre=='username')document.getElementById('thUser').style.textDecoration="underline";
			if(filtre=='gameData.nbrPoints')document.getElementById('thPoints').style.textDecoration="underline";
			if(filtre=='gameData.timePlayed')document.getElementById('thTime').style.textDecoration="underline";
			if(filtre=='gameData.nbrGames')document.getElementById('thGames').style.textDecoration="underline";
			if(filtre=='language')document.getElementById('thLanguage').style.textDecoration="underline";
			
		}
		
	</script>
		
		
    </body>

	
</html>