
<!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/bg2.jpg');background-repeat:repeat;" onunload="erasePlayer(sName)">  
		<nav>
			<%- include nav.ejs %>
		</nav>
		<div class="corp" style="box-shadow:0px 0px 0px 0px white inset;text-align:center;" >
			
		<h1 style="text-align:center;color:white" > <u>Create a room</u></h1>
		<section id="createRoom">
		
			<input id="nameRoom" class="caseForm" type="text" placeholder="Room name..." size="30" /></br>
			<button onclick="createRoom()" >Create</button>
		
		</section>
		<h1 >OR</h1>
		<h1 style="text-align:center;color:white" > <u>Join a room</u></h1>
		
		<section id="gameLabel" style="display:none;">

		</section>
		
		<section id="joinRoom">
			<b style="color:white;" >Loading rooms....</b>
		</section>
		</div>
		
		
    </body>
	
	<script>
	
	var myRoom;
	// 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";}
		
		function createRoom()
		{
			var nameRoom = document.getElementById('nameRoom').value;
			socket.emit('newRoom',{'name':nameRoom});
			//on rafraichi la page
			window.location.href = "/room";
		}
		
		socket.on('recupRooms', function (data)
		{  document.getElementById('joinRoom').innerHTML='';
			//if(document.getElementById('joinRoom').innerHTML=='<b>Loading rooms....</b>';) {document.getElementById('joinRoom').innerHTML='';}
			for (var i = 0; i < data.rooms.length; i++)
			{
				document.getElementById('joinRoom').innerHTML+='<button id="butJoinRoom" onclick="joinRoom(this.innerHTML)" >'+data.rooms[i].name+'</button>';
			}
			if(document.getElementById('joinRoom').innerHTML=='') {document.getElementById('joinRoom').innerHTML='<b style="color:white;" >There is no room, create one !</b>';}
		});

		
		//on défini la zone de room
		var label=document.getElementById('gameLabel');
		
		function joinRoom(name)
		{	
			myRoom=name;
			socket.emit('joinRoom',{'username':sName, 'room':name});
			//on va appeler notre fonction pour recuperer les joueurs avec un return pour la liste
			socket.emit('RoomPlayers', myRoom);
		}
		
		
			var gamers='';
			var nbrGamers=0;

			//on recupere les joueurs déja présents dans la room
			socket.on('recupRoomPlayers',function(data)
			{ gamers='';
				for (var i = 0; i < data.players.length; i++)
				{
					if(data.players[i].room==myRoom)
					{
						gamers+='<li>'+data.players[i].username+'</li>';	
						nbrGamers++;
					}
				}
				displayRoom();
			});
			
			//quand un joueur rentre
			socket.on('newPlayerInTheRoom', function(data)
			{
				 var validation=false;
			//on vérifie qu'il est bien dans la piece concernée
				for (var i = 0; i < data.players.length; i++)
				{
					if(data.players[i].room==myRoom && data.players[i].username==sName)
					{
						validation=true;
					}
				}
				if(validation==true)
				{
					//on vide le label
					label.innerHTML='';
					//on envoie la requete pour faire afficher tout les joueurs
					socket.emit('RoomPlayers', myRoom);	
				}
				
			});
			
			
		var del=false;
		//quand quelqu'un quite
		function erasePlayer(name)
		{
			del=true;
			//on appele la fonction pour marquer sur le chat que la personne part

			if(del==true)
			{ 
				nbrGamers--;				
				socket.emit('delPlayerRoom',sName);
			}
		}
			
			
		//on affiche les infos de la room
		function displayRoom()
		{	label.innerHTML='';
			label.style.display="block";
			label.innerHTML+='<h2>This is the room : '+myRoom+'<h2>';
			label.innerHTML+='<h3> Here is the list of the players in the room : </h3>';
			label.innerHTML+='<ul>'+gamers+'</ul>';
			label.innerHTML+='<input type="checkbox" id="readyToPlay" checked />I\'m ready   <button onclick="launchGame(\''+myRoom+'\')" >Let\' Play! </button>';
		
		
		}
		
		
		
		function launchGame(name)
		{
			//si la case était coché pour lui
			if(document.getElementById('readyToPlay').checked && nbrGamers>=2)
			{
				//on envoi le signal au serveur
				socket.emit('launchGame', name);
				alert('The game : '+name+' is going to start!');
				window.location.href = "/play";
				
				label.style.display="none";
				label.innerHTML="";
				
				//mettre socket pour suprimer la room
			}
			else if(nbrGamers<2) alert('You can\'t launch a game alone');
			else 
			{
				alert('You are not Ready yet.');
			}
		}
		
		//si on recoit le broadcast su serv pour lancer le jeu
		socket.on('letsPlay',function(data)
		{	var validation=false;
			//on vérifie qu'il est bien dans la liste
			for (var i = 0; i < data.players.length; i++)
			{
				if(data.players[i].room==myRoom && data.players[i].username==sName)
				{
					validation=true;
				}
			}
			
			//si on est bien dans la liste des concernés
			if (validation==true)
			{
				//si la case était coché pour lui
				if(document.getElementById('readyToPlay').checked)
				{
					//on envoi le signal au serveur
					socket.emit('launchGame', name);
					alert('The game : '+name+' is going to start!');
					window.location.href = "/play";
					
					label.style.display="none";
					label.innerHTML="";
					
					//mettre socket pour suprimer la room
				}
				else 
				{
					alert('You are not Ready yet');
					window.location.href = "/room";
				}
			}

		
		});
		
		
	</script>
</html>