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

    </head>

    <body onresize="resizeCanvas()" onload="initCanvas()"  onunload="delPlayer()">  
		<nav>
			<%- include nav.ejs %>
		</nav>
		<div class="corp">
			<article id="playArea">
			
				<section id="drowArea">
					<canvas id="canvas" width="945" height="405"  >Your browser doesn't support canvas</canvas>
				</section>
				
				<section id="brushArea">
					<p> 		
						<img src="pictures/paint/small.png" id="small" onclick="changeSize(this.id)" />
						<img src="pictures/paint/medium.png" id="medium"onclick="changeSize(this.id)" />
						<img src="pictures/paint/big.png" id="big" onclick="changeSize(this.id)" />
						<b style="font-size:40px;">   |   </b>
						<img src="/pictures/paint/black.png" id="black" onclick="changeColor(this.id);"/>
						<img  src="/pictures/paint/white.png" id="white" onclick="changeColor(this.id);"/>
						<img src="/pictures/paint/red.png"  id="red"onclick="changeColor('#e70000');"/>
						<img src="/pictures/paint/blue.png"  id="blue" onclick="changeColor('#0e1de5');"/>
						<img src="/pictures/paint/green.png" id="green" onclick="changeColor('#3ccd03');"/>
						<img src="/pictures/paint/yellow.png"   id="yellow" onclick="changeColor('#f3eb01');"/>
						<img src="/pictures/paint/grey.png"  id="grey" onclick="changeColor('#afafaf');"/>
						<img src="/pictures/paint/brown.png"  id="brown" onclick="changeColor('#943715');"/>
						<img src="/pictures/paint/pink.png"  id="pink" onclick="changeColor('#f902f0');"/>
						<img src="/pictures/paint/orange.png"  id="orange" onclick="changeColor('#f37f01');"/>
						<img src="/pictures/paint/purple.png"  id="purple" onclick="changeColor('#5800e9');"/>
						<img src="/pictures/paint/turquoise.png"  id="turquoise" onclick="changeColor('#04f8b1');" />
						<b style="font-size:40px;">   |   </b>
						<img src="/pictures/paint/eraser.png" id="eraser" onclick="eraseCanvas()" alt="ERASE"; />
					</p>
					
					
				</section>
				
				
					<section id="timeArea" >
						<b id="timer" style="font-size:3.5em;">00:00</b></br>
						<button id="btnStart" onclick="startTimer();" ><b>Start</b></button>  <button id="btnStop" onclick="stop=true;" style="display:none"><b>Stop</b></button>  <button id="btnReset" onclick="resetTimer()" style="display:none" ><b>Reset</b></button>
						
					</section>
					
					<section id="scorringArea">
						<ul>
							<div id="listPlayers" ></div>
						</ul>
					</section>
					
					<section id="chatArea" style="text-align:center">
						<div id="tchat" style="background-color:rgba(255, 255, 255, 0.5);"></div>
						<form onsubmit="return (envoiMessage());">
							<input type="text" name="message" id="message" style="width:50%; padding:5px 5px 5px 5px;border-radius:5px;" placeholder="Message..." />
							<input id="butSend" type="submit" value="Send"  />
						</form>
					</section>
					
				
				
			</article>
			

		</div>
    </body>
	<!--SCRIPT DE BASE -->
	<script>
	
	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 pseudo = readCookie('sessionName');
	
		//si il est sur la page sans etre conecté
		if(pseudo==""){alert('You must be loged to acces this page');	window.location.href = "/index";}
		
	// On demande le pseudo de l'utilisateur
		var del=false;
		//var pseudo = prompt('Bienvenue dans le jeu, rentrez votre Pseudo :')  || 'Utilisateur';
		document.title=(pseudo+" - 3WEB-Pictionarry");
		
		// On se connecte au serveur
		var socket = io.connect();
		
	</script>
	
	
	<!--SCRPIT DU CANVAS-->
	<script>
		
		var started = false;
		var x, y;
		var canvasD;
		var context;
		var canvasColor;
		
		function initCanvas()
		{
			//zone de canvas
			canvasD = document.getElementById('canvas');
			context = canvasD.getContext('2d');
			//evenements de la souris
			canvasD.addEventListener('mousemove', mousemovement, false);
			canvasD.addEventListener('mousedown', mouseclick, false);
			canvasD.addEventListener('mouseup', mouseunclick, false);
			resizeCanvas();	
		}
		
			//fonction pour redimensioner le canvas a la taille de sa section 
		function resizeCanvas()
		{
			var hauteur=document.getElementById("drowArea").offsetHeight;
			var largeur=document.getElementById("drowArea").offsetWidth;
			canvasD.style.height=hauteur+"px";
			canvasD.style.width=largeur+"px";
		}	
		
		//on clique sur la souris
		function mouseclick()
		{
			context.beginPath();
			context.moveTo(x, y);
			started = true;
		}


		// on recupere la position de la souris à l'intérieur du canvas.
		function getOffset(e)
		{
			var cx = 0;
			var cy = 0;
		 
			while(e && !isNaN(e.offsetLeft) && !isNaN(e.offsetTop))
			{
				cx += e.offsetLeft - e.scrollLeft;
				cy += e.offsetTop - e.scrollTop;
				e = e.offsetParent;
			}
			return { top: cy, left: cx };
		}
		 
		function mousemovement(e)
		{
		 
			// recup la position de la souris
		 
			if(e.offsetX || e.offsetY) 
			{
				x = e.pageX - getOffset(document.getElementById('canvas')).left - window.pageXOffset;
				y = e.pageY - getOffset(document.getElementById('canvas')).top - window.pageYOffset;
			}
			else if(e.layerX || e.layerY) 
			{
				x = (e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft)
				- getOffset(document.getElementById('canvas')).left - window.pageXOffset;
				y = (e.clientY + document.body.scrollTop + document.documentElement.scrollTop)
				- getOffset(document.getElementById('canvas')).top;
			}  
		 
			// on trace la ligne si started est vrai
			if(started) 
			{
				context.lineTo(x, y);
				context.stroke();
				socket.emit('sendCanvas',{'lineToX':x,'lineToY':y, 'color':context.stroke.style, 'size':context.lineWidth});
			}
		}
		 
		 //si le bouton est relaché
		function mouseunclick() {
			if(started) {
				started = false;
			}
		 
		}
		
		//fonction pour changer la couleur du canvas
		function changeColor(color)
		{
			//canvasColor=color;
			context.strokeStyle=color;
			socket.emit('canvasChangeColor',color);
		}
		
		//on recoit le changement de couleur
		socket.on('recupererColor',function(color)
		{
			context.strokeStyle=color;
		});
		
		
		//fonction pour changer la taille du pinceau du canvas
		function changeSize(size)
		{
			if(size=="small"){context.lineWidth=1; }
			if(size=="medium"){context.lineWidth=10; }
			if(size=="big"){context.lineWidth=35; } 
			socket.emit('canvasChangeSize',size);
		}
		
		//on recoit le changement de taille
		socket.on('recupererSize',function(size)
		{
			if(size=="small"){context.lineWidth=1; }
			if(size=="medium"){context.lineWidth=10; }
			if(size=="big"){context.lineWidth=35; } 
		});
		
		//fonction pour effacer le canvas
		function eraseCanvas()
		{
			canvasD.width = canvasD.width;
			socket.emit('eraseCanvas','erase');
		}
		
		//si on recoit un effacement
		socket.on('eraseAllDraws', function(draws)
		{
			canvasD.width = canvasD.width;
		});
		
		
		// Si quelqu'un a déssiné
		socket.on('recupererNouveauDessin', function (draw) 
		{
			context.lineTo(draw.lineToX, draw.lineToY );
			context.stroke();
		});
		
		//on récupere les dessins déja fait
		socket.on('recupererDessin',function(draw)
		{
			for (var i = 0; i < draw.length; i++)
			{
				context.lineWidth=draw[i].size;
				context.strokeStyle=draw[i].color;
				context.lineTo(draw[i].lineToX, draw[i].lineToY );	
				context.stroke();
			}
		
		});
		
		
	</script>
	
	
	<!--SCRIPT TCHAT-->
	<script>

		// On crée l'événement recupererMessages pour récupérer direcement les messages sur serveur
		socket.on('recupererMessages', function (messages)
		{
			// messages est le tableau contenant tous les messages qui ont été écris sur le serveur
			var html = '';
			for (var i = 0; i < messages.length; i++)
			html += '<div class="line"><i>'+messages[i].heure+'  </i><b>'+messages[i].pseudo+'</b> : '+messages[i].message+'</div>';
			document.getElementById('tchat').innerHTML = html +document.getElementById('tchat').innerHTML;
		});
		
		// Si quelqu'un a posté un message
		socket.on('recupererNouveauMessage', function (message) 
		{
			document.getElementById('tchat').innerHTML += '<div class="line"><i>'+message.heure+'  </i><b>'+message.pseudo+'</b> : '+message.message+'</div>';
		});
		
		//on envoie un message
		function envoiMessage(mess) 
		{
			var heure=dateTime();
			
			var message = document.getElementById('message').value;
			// On appelle l'événement se trouvant sur le serveur pour qu'il enregistre le message et qu'il l'envoie à tous les autres clients connectés (sauf nous)
			socket.emit('nouveauMessage', {'heure':heure, 'pseudo' : pseudo, 'message' : message });
			// On affiche directement notre message dans notre page
			document.getElementById('tchat').innerHTML += '<div class="line"><i>'+heure+'  </i><b>'+pseudo+'</b> : '+message+'</div>';
			// On vide le formulaire
			document.getElementById('message').value = '';
			
			// On retourne false pour ne pas que le formulaire n'actualise la page
			return false;	
		}
		
		//fonction pour le scroll
		function scroll()
		{  //on scroll en bas
			document.getElementById('tchat').scrollTop = document.getElementById('tchat').scrollHeight;
		}
		//on rappelle la fonction toute les 1s
		var scrollInterval = setInterval(function(){scroll()},2000);

		//fonction qui va retourner l'heure pour le TCHAT
		function dateTime()
		{
			var myDate = new Date(); 
			var hour = myDate.getHours(); 
			var minute = myDate.getMinutes();
			if (hour<10)hour="0"+hour;
			if (minute<10)minute="0"+minute;
			var theHour="["+hour+":"+minute+"]";
			return theHour;
		}
		
			
  </script>
	
	
	
	<!--SCRIPT TIMER-->
	<script>
		
		var temps;
		var timeLocal,timeInit;
		var stop=false;
		var minute=0;
		var seconde=0;
		var timer=document.getElementById('timer');	
		
		//on envoie la requete pour initier le timer
		socket.on('initTimer', function(time)
		{ 
			displayTime(time);
			timeInit=time;
			timeLocal=time;
			//on lance et on arrete le chrono au chargement d ela page
			var timerInterval = setInterval(function(){Timer(time)},1000);
			clearInterval(timerInterval);
		});
		
		
		//quand on lance le timer
		function startTimer()
		{	
			
			//cache le bouton  start et affiche le bouton stop
			document.getElementById('btnStart').style.display="none";
			document.getElementById('btnStop').style.display="inline";
			//on envoie au serv le début du timer
			socket.emit('startTimer',timeLocal);
			displayTime(timeLocal);
		}
		
		//on recoit la réponse du startTimer
		socket.on('goTimer', function(time)
		{
			timerInterval = setInterval(function(){Timer(time)},1000);
		});
		
		//on recoit le broadcast pour cacher le bouton
		socket.on('hideButton', function (button) 
		{	
			if(button=='start')
			{
				document.getElementById('btnStart').style.display="none";
				document.getElementById('btnStop').style.display="inline";
			}
			if(button=='stop')
			{
				document.getElementById('btnStop').style.display="none";
				document.getElementById('btnReset').style.display="inline";			
			}
			if(button=='reset')
			{
				document.getElementById('btnReset').style.display="none";
				document.getElementById('btnStart').style.display="inline";			
			}			
		});
		
		
		//on recoit ce que on va devoir afficher
		socket.on('displayTimer', function (time) 
		{	
			displayTime(time);			
		});
		
		//fonction pour traiter et afficher le temps
		function displayTime(time)
		{ 
			temps=time;
			var compteMinute=0;
			var compteSeconde=0;

			//on calcule le nombre de minute et de seconde
			while(temps-60>=0)
			{ 
				temps-=60;
				compteMinute++;
			}
			compteSeconde=temps;
			minute=compteMinute;
			seconde=compteSeconde;
			//quelques comparaisons pour l'affichage propres des chiffres
			if(minute>0)
			{
				if(seconde<10){timer.innerHTML="0"+minute+":0"+seconde;}
				else{timer.innerHTML="0"+minute+":"+seconde;}
			}
			if(minute==0)
			{ 
				if(seconde<10){timer.innerHTML=":0"+seconde;}
				if(seconde>9){timer.innerHTML="00:"+seconde;}
			}
		}
	
	//fonction qui gere le temps
		function Timer(time)
		{	timeLocal-=1;
			verif(timeLocal);
			socket.emit('myTime',timeLocal);	
		}
		
		//on effectue des vérifications sur le temps
		function verif(time)
		{
			//si le bouton stop a été préssé
			if(stop==true)
			{
				clearInterval(timerInterval);
				document.getElementById('btnStop').style.display="none";
				document.getElementById('btnReset').style.display="inline";
				socket.emit('stopTimer',time);
			}
			//si le temps est écoule
			if(time<1)
			{
				clearInterval(timerInterval);
				alert('TEMPS ECOULE');
				document.getElementById('btnStop').style.display="none";
				document.getElementById('btnReset').style.display="inline";
				socket.emit('stopTimer',time);
			}
			
			//si on recoit un broadcast stop timer
			socket.on('stopTimerB', function(time)
			{
					//si le bouton stop a été préssé
				if(time>1)
				{
					clearInterval(timerInterval);
					document.getElementById('btnStop').style.display="none";
					document.getElementById('btnReset').style.display="inline";
					
				}
				//si le temps est écoule
				if(time<1)
				{
					clearInterval(timerInterval);
					alert('TEMPS ECOULE');
					document.getElementById('btnStop').style.display="none";
					document.getElementById('btnReset').style.display="inline";
					
				}
			});
			
		}
	
		//fonction de reset du timer
		function resetTimer()
		{
			stop=false;
			//cache le bouton RESET et affiche le START
			document.getElementById('btnReset').style.display="none";
			document.getElementById('btnStart').style.display="inline";
			timeLocal=timeInit;
			displayTime(timeInit);
			socket.emit('resetTimer',true);
		}
		
		socket.on('resetTimerB', function(reset)
		{
			stop=false;
			//cache le bouton RESET et affiche le START
			document.getElementById('btnReset').style.display="none";
			document.getElementById('btnStart').style.display="inline";
						
			timeLocal=timeInit;
			displayTime(timeInit);
		});
		
		
	</script>
	
	
	<!--SCRIPT SCOREAREA-->
	<script>
		var scoreLocal=0;
		//on envoie le nouveau joueur au serveur
		socket.emit('newPlayer',{'pseudo':pseudo, 'score':0});
		var players=document.getElementById('listPlayers');
		players.innerHTML+="<li id='li_"+pseudo+"'><button id='but_"+pseudo+"' onclick='scorePlus(this.id)' >+1</button>  "+pseudo+": "+scoreLocal+" pts</li>";
		
		//quand un nouveau joueur arrive
		socket.on('recupererNouveauJoueur',function (pseudo)
		{
			players.innerHTML+="<li id='li_"+pseudo.pseudo+"'><button id='but_"+pseudo.pseudo+"'  onclick='scorePlus(this.id)'  >+1</button>   "+pseudo.pseudo+" : "+pseudo.score+" pts</li>";
		});
	
		// On crée l'événement recupererJoueurs pour recuperer les joueurs sur le serv
		socket.on('recupererJoueurs', function (joueurs)
		{
			// joueurs est le tableau contenant tous les joueurs
			var j = '';
			for (var i = 0; i < joueurs.length; i++) j += "<li id='li_"+pseudo[i].pseudo+"'><button id='but_"+pseudo[i].pseudo+"'  onclick='scorePlus(this.id)'  >+1</button>   "+joueurs[i].pseudo+" : "+joueurs[i].score+" pts</li>";
			players.innerHTML += j;
		});
		
		// On crée l'événement recupererAnciensJoueurs pour recuperer les joueurs ancienssur le serv(on enleve celui qui est parti)
		socket.on('recupererAnciensJoueurs', function (joueurs)
		{
			// joueurs est le tableau contenant tous les joueurs
			var j = '';
			for (var i = 0; i < joueurs.length; i++){ j += "<li id='li_"+pseudo[i].pseudo+"'><button id='but_"+pseudo[i].pseudo+"' onclick='scorePlus(this.id)'  >+1</button>   "+joueurs[i].pseudo+" : "+joueurs[i].score+" pts</li>"; }
			players.innerHTML = j;
		});
		
		//quand on utilisateur quite
		function delPlayer()
		{ del=true;
			//on appele la fonction pour marquer sur le chat que la personne part
			var messageQuit="<i> left the game. </i>";
			var heure=dateTime();
			if(del===true){socket.emit('nouveauMessage', {'heure':heure, 'pseudo' : pseudo, 'message' : messageQuit });}

			//players.innerHTML=players.innerHTML.replace('<li>'+pseudo+'</li>',''); //inutile parce que on va travailler sur notre page...
			socket.emit('delPlayer',pseudo);
		}
		
		//quand quel'qu'un a un point en plus
		function scorePlus(id)
		{
			var str=id;
			var pseudo = str.replace("but_","");
			socket.emit('newScore', pseudo);
			scoreLocal++;
			document.getElementById('li_'+pseudo).innerHTML="<button id='but_"+pseudo+"' onclick='scorePlus(this.id)' >+1</button>  "+pseudo+": "+scoreLocal+" pts";
		}
		
		//quand on recoit un nouveau score on refait un affichage
		socket.on('recupererScores', function(joueurs)
		{
			//document.getElementById('li_'+pseudo).innerHTML="<button id='but_"+pseudo+"' onclick='scorePlus(this.id)' >+1</button>  "+pseudo+": "+scoreLocal+" pts";
			var j = '';
			for (var i = 0; i < joueurs.length; i++) j += "<li id='li_"+joueurs[i].pseudo+"'><button id='but_"+joueurs[i].pseudo+"'  onclick='scorePlus(this.id)'  >+1</button>   "+joueurs[i].pseudo+" : "+joueurs[i].score+" pts</li>";
			players.innerHTML = j;
		});
		
		
		
	</script>
	
	
	
	<!--SCRPIT ONLOAD -->
	<script>
	//on affiche un message de bienvenue
		var heure=dateTime();
		var messageBienvenue="<i> had join the game.</i>";
		//on envoie le message au serv
		socket.emit('nouveauMessage', {'heure':heure, 'pseudo' : pseudo, 'message' : messageBienvenue });
		//on se l'affiche
		document.getElementById('tchat').innerHTML += '<div class="line"><i>'+heure+'  </i><b>'+pseudo+'</b> : '+messageBienvenue+'</div>';
		
	</script>
	
</html>