//definimos todas las letras que formarán el  teclado
const letras_validas = 'QWERTYUIOPASDFGHJKLÑZXCVBNM';
let palabras = [
  "ARNES", "ASTRO", "ATAJO", "AXILA", "BALON", "BOXER", "BURRO", "BUSTO", "CAFES", "CAJAS", "CALIZ", "CALLO", "CANAS", "CANES", "COMIC", "DANOS", "DATOS", "DEDOS", "DONAS", "DONES", 
  "DRAMA", "DUBAI", "ELLAS", "ENCIA", "ENOJO", "ENVIO", "ERROR", "ESQUI", "EUROS", "FEMUR", "FORMA", "FOSIL", "FOTOS", "FRENO", "FRESA", "GAFAS", "GALES", "GASES", "GATOS", "GENES", 
  "GHANA", "GOLES", "GORRA", "GRUAS", "GRUMO", "HAITI", "HOTEL", "HUEVO", "HURTO", "IDEAS", 
  "IGLUS", "INGLE", "ISLAS", "JAPON", "JARRA", "JEFES", "JERGA", "JUGOS", "JULIO", "LAGOS", 
  "LAZOS", "LEYES", "LOROS", "LUNAR", "MAGOS", "MANOS", "MAPAS", "MARES", "MEDIA", "MEMES", 
  "MENTA", "MENUS", "MESAS", "METAS", "MILES", "MODAS", "MONOS", "MOSCU", "MOVIL", "MULTA", 
  "NAVES", "NEPAL", "NINOS", "NOTAS", "NUBES", "NUDOS", "OBRAS", "OJERA", "OLLAS", "ONDAS", 
  "ONZAS", "OPERA", "OSITO", "OVULO", "OXIDO", "PANAL", "PANES", "PARIS", "PASAS", "PASEO", 
  "PATOS", "PAUSA", "PAUTA", "PAVOS", "PECAS", "PECES", "REGLA", "REINO", "REYES", "RIMEL", 
  "RIOSA", "RITOS", "RULOS", "RUSIA", "SANTA", "SAPOS", "VACAS", "VALLE", "VASOS", "VIAJE", 
  "ARMAR", "AULLO", "AYUDA", "AYUNA", "BURLA", "CALMO", "CANSA", "CANTA", "CANTO", "DANCE", 
  "DEBEN", "DEBES", "DEJAS", "DICES", "DILES", "DONAN", "ESPIO", "ESTAR", "EVADE", "EVOCA", 
  "EXIGE", "FUMAR", "GASTO", "GRABE", "GRITO", "HABIA", "HABLA", "HABRA", "HACEN", "HACES", 
  "HALLA", "IRIAS", "JUGAR", "LADRO", "LOGRA", "MANDA", "MARCO", "MIRAS", "MORIR", "NADAR", 
  "ODIAS", "OIRTE", "PAGAR", "PASAR", "QUEMO", "REZAN", "RIMAR", "ROBAR", "RODAR", "SABIA", 
  "SALIR", "SALTA", "SANAR", "SERAS", "TENGO", "TENIA", "TIENE", "VENGO", "VIMOS", "VOLAR", 
  "VOTAR", "YENDO", "ABAJO", "ACASO", "AHORA", "ANTES", "ATRAS", "BUENO", "CERCA", "DETRAS", 
  "DONDE", "ENTRE", "FUERA", "JAMAS", "JUSTO", "LEJOS", "LUEGO", "MITAD", "MUCHO", "NUNCA", 
  "QUIEN", "QUIZA", "SOBRE", "DEBIL", "DENSA", "DULCE", "DUROS", "EBRIO", "FLACA", "GORDA", 
  "GRAVE", "GUAPO", "ILUSO", "INDIA", "INDIO", "IRANI", "ISLAM", "LARGA", "LENTA", "LIBRE", 
  "LINDA", "LOCAS", "LOCOS", "MALES", "MALOS", "PATAN", "ROJAS", "RUSAS", "TAPON", "PLATA", 
  "NATAL", "PLANA", "LATON", "CITAN", "ANULO", "CINCA", "TACON", "ANCLO", "CUNIT", "UNITO", 
  "CANUT", "NACIO", "ACTUO", "CUITA", "LUCIA", "CLICA", "AUTUN", "LUCAN", "CINTA"
];
let numeroAleatorio = Math.floor(Math.random() * palabras.length);
let palabra_secreta = palabras[numeroAleatorio];
//console.log(palabra_secreta);
let fallos = 0;
let aciertos = 0;
let ganadas = 0;
let perdidas = 0;

dibujar();
crear_teclado();

function crear_teclado(){
	document.getElementById('teclado').innerHTML = '';
	//un bucle recorre el array de letras y va creando las teclas en pantalla
	for(let n=0; n<letras_validas.length;n++){
		//creamos un div con la letras
		let letra = document.createElement('div');
		//Ponemos los atributos a cada capa de letra
		letra.setAttribute('id', letras_validas[n]);
		letra.setAttribute('class', 'tecla');
		letra.innerHTML=letras_validas[n];
		//colocamos la letra creada dentro de la capa de teclado
		document.getElementById('teclado').appendChild(letra);
		letra.addEventListener('click', evaluar);//añadimos un listener para el clic sobre la letra
	}	
}

function evaluar(event){
	//desactivar la tecla.
	//document.getElementById(event.target.id).style.border = '1px solid grey';
	event.target.style.border = '1px solid grey';
	event.target.style.color = 'white';
	event.target.style.background = 'grey';
	event.target.removeEventListener('click', evaluar);
	
	//para comprobar si la letra seleccionada está en la palabra, recorremos cada letra de la palabra y la comparamos con la pulsada
	let acierto = false;//esta variable nos servirá para comprobar si hay algún acierto. Seguirá valiendo false hasta que haya un acierto
	for(let n=0;n<palabra_secreta.length;n++){
		if(event.target.id == palabra_secreta[n]){//si la letra pulsada coincide con esta letra de la palabra, hay algún acierto.
			document.getElementById(n).innerHTML=event.target.id;
			acierto = true;//cuando alguna letra coincide, marcamos la variable como true, el acierto queda registrado
			aciertos++;
		}
	}
	if(acierto == false){//si la variable sigue valiendo false, significa que ninguna letra coincidió
		//alert('la letra no coincide');
		fallos++;
		dibujar();
	}else if (aciertos == palabra_secreta.length){
		document.getElementById('mensaje').innerHTML='¡Enhorabuena, la has adivinado!';
		document.getElementById('fin_juego').style.visibility='visible';
		ganadas++;
		actualizar_marcador();
	}
}

function dibujar(){
	if(fallos==0){
		document.getElementById('cabeza').style.visibility='hidden';
		document.getElementById('tronco').style.visibility='hidden';
		document.getElementById('brazo_izq').style.visibility='hidden';
		document.getElementById('brazo_der').style.visibility='hidden';
		document.getElementById('pierna_izq').style.visibility='hidden';
		document.getElementById('pierna_der').style.visibility='hidden';
	}
	if(fallos==1){
		document.getElementById('cabeza').style.visibility='visible';	
	}
	if(fallos==2){
		document.getElementById('tronco').style.visibility='visible';	
	}
	if(fallos==3){
		document.getElementById('brazo_izq').style.visibility='visible';	
	}
	if(fallos==4){
		document.getElementById('brazo_der').style.visibility='visible';	
	}
	if(fallos==5){
		document.getElementById('pierna_izq').style.visibility='visible';	
	}	
	if(fallos==6){
		document.getElementById('pierna_der').style.visibility='visible';
		//En este punto el juego está terminado
		
		//Informamos de que el juego está terminado
		document.getElementById('fin_juego').style.visibility='visible';
		document.getElementById('mensaje').innerHTML='El juego ha terminado.';
		perdidas++;
		actualizar_marcador();
		//Mostrar la palabra que no ha adivinado. Rellenamos las posiciones vacías en letra roja
		
		//Tenemos que recorrer la palabra (bucle for). Para cada letra, si la capa de la letra está vacía, es que no se ha adivinado: tenemos que escribirla en rojo.
		
		for(let n=0;n<palabra_secreta.length;n++){
			if(document.getElementById(n).innerHTML == ''){//si la capa no contiene nada dentro.
				document.getElementById(n).innerHTML = palabra_secreta[n];//escribimos la letra
				document.getElementById(n).style.color = 'red';
				//ponemos el texto de la capa en rojo
			}
		}
	}
}


function reiniciarJuego(){
	aciertos=0;
	fallos=0;
	actualizar_marcador();
	dibujar();
	numeroAleatorio = Math.floor(Math.random() * palabras.length);
	palabra_secreta = palabras[numeroAleatorio];
	//console.log(palabra_secreta);
	document.getElementById('fin_juego').style.visibility='hidden';
	for(let n=0;n<palabra_secreta.length;n++){
		document.getElementById(n).innerHTML = '';
		document.getElementById(n).style.color = 'black';
	}
	crear_teclado();
}
function actualizar_marcador(){
	document.getElementById('ganadas').innerHTML = 'Ganadas: ' + ganadas;
	document.getElementById('perdidas').innerHTML = 'Perdidas: ' + perdidas;
	document.getElementById('jugadas').innerHTML = 'Jugadas: ' + (ganadas+perdidas);
}