<?php 
$id = $pagina[1];
$dia = 1;

$queryValidate = mysqli_query($connect,"SELECT * FROM Retos WHERE id_asistente = '".$_SESSION['id_user']."' AND reto = '".$id."' AND tipo_juego = 2 AND dia = '".$dia."'  ");
if($queryValidate->num_rows > 0){
    echo '<script> alert("Ya terminaste este juego") </script>';
    echo '<script> window.location = "'.$url.'/encuentra_frase/'.($id+1).'"; </script>';
}

if($id > 10){
    echo '<script> window.location = "'.$url.'/concursos/2"; </script>';
}

$bt_volver = '
    <a href="'.$url.'/encuentra_frase/'.($id+1).'">
        <button class="btn btn_juegos btn-block" style="margin-top: 35px;" >
            Siguiente Frase
        </button>
    </a>
';

if($id >= 10){
    $bt_volver = '
        <a href="'.$url.'/ranking">
            <button class="btn btn_juegos btn-block" style="margin-top: 35px;" >
                Ver el Ranking
            </button>
        </a>
    ';
}







$frase = '';
$pista = '';
if($id == 1){
    $frase = 'valor';
    $pista = '<b>Pista:</b> Astellas se esforzará en ganar la confianza de sus grupos de interés y de ese modo, mejorar el _____ de la empresa.';
}

if($id == 2){
    $frase = 'cientifica';
    $pista = '<b>Pista:</b> Para garantizar el uso correcto de nuestros productos farmacéuticos, debemos proporcionar información basada en evidencia __________';
}


if($id == 3){
    $frase = 'instrucciones';
    $pista = '<b>Pista:</b> Asumir la responsabilidad: Es no sentarnos tranquilamente a un lado a esperar __________ ';
}

if($id == 4){
    $frase = 'reto';
    $pista = '<b>Pista:</b> Salirnos de nuestra zona de confort es el ____ ';
}

if($id == 5){
    $frase = 'resultados';
    $pista = '<b>Pista:</b> Comprometerse con los ___________ siempre que se presente un desafio ';
}

if($id == 6){
    $frase = 'objetivos';
    $pista = '<b>Pista:</b> Adoptaremos una mentalidad de crecimiento y estableceremos __________ claros para realizar el seguimiento de nuestro progreso';
}

if($id == 7){
    $frase = 'proactivos';
    $pista = '<b>Pista:</b> En Astellas Pharma,  seremos líderes _________ que nos desafiamos para direccionar nuestro propio crecimiento.';
}

if($id == 8){
    $frase = 'integridad';
    $pista = '<b>Pista:</b> Actuar con _________ al considerar siempre las implicaciones de nuestras acciones ';
}

if($id == 9){
    $frase = 'creatividad';
    $pista = '<b>Pista:</b> Maximizar la ___________ a travez  de la diversidad y comunicación';
}

if($id == 10){
    $frase = 'mejorar';
    $pista = '<b>Pista:</b> Preguntate si tus desiciones y acciones contribuyen a ________ la salud de los pacientes ';
}

?>

<style>
    body{
		background-size: cover; 
		background-position: center; 
		background-attachment: fixed;
        /* background-image: url(<?php echo $url; ?>/img/img_wd/bg_soporte1.png); */
        background-color: #a7a9ac;
	}
</style>



<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

<div class="col-md-12">

	<div class="container" >

		<?php echo $rersp; ?>

		<div class="row">
            
            <div class="col-md-12" align="center">
                <h1 style="color: #ffffff; margin-top: 25px">BUSCA LA FRASE</h1>
            </div>

            
			<div class="col-md-6" align="center" style="color: #ffffff; margin-top: 2%">
                
                <p><?php echo $pista; ?></p>
                
                <div id="resultado" style="font-size: 30px; margin-bottom: 30px; margin-top: 25px;"></div>
                
                <div id="entradas">
                
                    <input id="letra" class="form-control" type="text" placeholder="Ingrese una letra" maxlength="1" style=" width: 150px; display: inline-table;"> 
                    <button id="boton" class="btn btn_juegos" >Comprobar</button>
                    
                </div>
                
                <table width="100%" style="margin-top: 30px;" >
                    <tr>
                    
                        <td width="50%" align="center" >
                            <h3>Intentos</h3>
                            <div id="intentos" class="marcadores"></div>
                        </td>
                        <td align="center">
                            <h3>Historial</h3>
                            <div id="historial" class="marcadores"></div>
                        </td>
                    </tr>
                </table>
                
                <div id="hms" style=" font-size: 30px; color: #f3e745;"></div>
                <div align="center">Tienes 2 minutos para completar la frase</div>
                
                <style>
                    .marcadores{
                        height: 25px;
                        color: #FFDD00;
                    }
                
                </style>
                
        

			</div>

		    
            <div class="col-md-6" align="center" style="color: #fff;">
  
                <div id="vaso" style="margin-top: 5%">
                    <img src="/img/juegos/vaso1.png" width="50%">
                </div>

            </div>
            
            
            <div class="col-md-12" align="center" style="display: none" id="boton_volver">
                <?php echo $bt_volver; ?>
            </div>
            
        </div>

	</div>
	
</div>

<script>
var porcentaje = 0;
 // Antes de ejecutar Javascript espera que toda la página se dibuje
//document.addEventListener('DOMContentLoaded', function () {

const listaPalabras = [ '<?php echo $frase; ?>' ];
let palabraAdivinar = [];
let palabraMostrar = [];
let historialLetrasUsuario = [];
let numIntentos = 5;
let nodoLetra = document.querySelector('#letra');
let nodoBoton = document.querySelector('#boton');
let nodoResultado = document.querySelector('#resultado');
let nodoIntentos = document.querySelector('#intentos');
let nodoHistorial = document.querySelector('#historial');
    
let cantidad_Letras = 0;
let aciertos = 0;

const slugify = str => {
  const map = {
    'a' : 'á|à|ã|â|ä|À|Á|Ã|Â|Ä',
    'e' : 'é|è|ê|ë|É|È|Ê|Ë',
    'i' : 'í|ì|î|ï|Í|Ì|Î|Ï',
    'o' : 'ó|ò|ô|õ|ö|Ó|Ò|Ô|Õ|Ö',
    'u' : 'ú|ù|û|ü|Ú|Ù|Û|Ü',
  };

  for (var pattern in map) {
    str = str.replace(new RegExp(map[pattern], 'g'), pattern);
  }

  return str;
}


//Método que prepara el juego para iniciarse  
function prepararJuego () {
        //// 1 Selecciono una palabra aleatoria de listaPalabra
        //// 1.1 Obtengo la posicion aleatoria
        let posAleatoriaListaPalabras = _.random(listaPalabras.length - 1);
        //// 1.2 Obtengo la palabra aleatoria
        let palabraAleatoria = listaPalabras[posAleatoriaListaPalabras];
        //// 1.3 Separo la palabra en letras y lo guardo
        palabraAdivinar = palabraAleatoria.split('');
        //// 2 Preparo el array que va a ver el usuario. Tendrá el mismo número de guiones que letras en palabraAdivinar
        for (let letra of palabraAdivinar) {

            if(letra == ' '){
                console.log(letra);
                palabraMostrar.push('-');
            }
            else{
                palabraMostrar.push('_');
            }
            cantidad_Letras++;
            
        }
        //// 3 Dibuja todo lo necesario
        dibujarJuego();
}

//Método que redibuja lo que ve el usuario con los cambios
function dibujarJuego () {
        // Convertimos un array en un texto, separado por espacios, y lo mostramos en el div resultado
        nodoResultado.textContent = palabraMostrar.join(' ');
        // Mostramos los intentos
        nodoIntentos.textContent = numIntentos;
        // Mostramos el historial de letras
        nodoHistorial.textContent = historialLetrasUsuario.join(' ');  
}


//Método que comprueba la letra que ha introducido el usuario
function comprobarLetraUsuario () {
    
        //// 1 Sustituye los guiones por la letra acertada
        // Guardo la letra del input que ha escrito el usuario en una variable
        let letraUsuario = nodoLetra.value.toLowerCase();
        letraUsuario = slugify(letraUsuario);
        // Vaciamos el input para que el usuario pueda volver a escribir
        nodoLetra.value = '';
        // Le devolvemos el foco al input para que pueda introducir otra letra
        nodoLetra.focus();
        // Recorremos todas las letras para saber si alguna esta bien
        for (const [posicion, letraAdivinar] of palabraAdivinar.entries()) {
            // Comprobamos si la letra del usuario es igual a la letra a adivinar
            if (letraUsuario == letraAdivinar) {
                // Sustituimos el guion por la letra acertada
                palabraMostrar[posicion] = letraAdivinar;
                aciertos++;
                
                porcentaje = (aciertos*100) / cantidad_Letras;
                
                if( porcentaje >= 0 && porcentaje <= 15  ){
                    $("#vaso").html('<img src="/img/juegos/vaso1.png" width="50%">');
                }
                
                if( porcentaje >= 15 && porcentaje <= 25  ){
                    $("#vaso").html('<img src="/img/juegos/vaso1.png" width="50%">');
                }
                
                if( porcentaje > 25 && porcentaje <= 35  ){
                    $("#vaso").html('<img src="/img/juegos/vaso3.png" width="50%">');
                }
                
                if( porcentaje > 35 && porcentaje <= 50  ){
                    $("#vaso").html('<img src="/img/juegos/vaso4.png" width="50%">');
                }
                
                if( porcentaje > 50 && porcentaje <= 75  ){
                    $("#vaso").html('<img src="/img/juegos/vaso5.png" width="50%">');
                }
                
                if( porcentaje > 75 && porcentaje < 100  ){
                    $("#vaso").html('<img src="/img/juegos/vaso6.png" width="50%">');
                }
                
                
                if( porcentaje >= 100  ){
                    $("#vaso").html('<img src="/img/juegos/vaso7.png" width="50%">');
                }
                
            }
        }
        //// 2 Comprobamos si se ha equivocado
        // ¿No esta la letra?
        if (!palabraAdivinar.includes(letraUsuario)) {
            // Restamos un intento
            numIntentos -= 1;
            // Guardamos en el historial la letra pulsada por el usuario
            historialLetrasUsuario.push(letraUsuario);
            
        }
        //// 3 Comprobamos si hay que terminar el juego
        acabarJuego();
        //// 4 Mostramos los cambios
        dibujarJuego();
}


 //Método que comprueba si se ha pulsado la tecla Enter
function comprobarPulsadoEnter (evento) {
    if (evento.code == 'Enter') {
        comprobarLetraUsuario();
    }
}

//Método que verifica si se ha acabado el juego
function acabarJuego () {
        // Ha ganado: ¿Le queda guiones al jugador?
        if (!palabraMostrar.includes('_')) {
            $("#vaso").html('<img src="/img/juegos/vaso7.png" width="50%">');
            
            $("#modal_general").modal("show");
            $("#modal_body").html('Felicitaciones, ha completado la frase.');
            $("#entradas").hide();
            
            $("#boton_volver").show();
            parar();
            Guardar_Puntaje( cantidad_Letras, numIntentos, 100);
        }
    if (numIntentos == 0) {
        $("#modal_general").modal("show");
            $("#modal_body").html('Lo sentimos. no ha completado la frase.<br>');
            $("#entradas").hide();
            Guardar_Puntaje( cantidad_Letras, numIntentos, porcentaje);
            $("#boton_volver").show();
            parar(); 
        
    }
}
    
//Método que verifica si se ha acabado el juego
function acabarJuego_2 () {
    // Ha ganado: ¿Le queda guiones al jugador?
    if (!palabraMostrar.includes('_')) {
            $("#vaso").html('<img src="/img/juegos/vaso7.png" width="50%">');
            
            $("#modal_general").modal("show");
            $("#modal_body").html('Felicitaciones, ha completado la frase.');
            $("#entradas").hide();
            
            $("#boton_volver").show();
            Guardar_Puntaje( cantidad_Letras, numIntentos, porcentaje);
            parar();
    }
    else {
        $("#modal_general").modal("show");
            $("#modal_body").html('Lo sentimos. no ha completado la frase.<br>');
            $("#entradas").hide();
            Guardar_Puntaje( cantidad_Letras, numIntentos, porcentaje);
            parar();
    }
}

//======================================================================
// EVENTOS
//======================================================================
// Al hacer clic en el boton se llama la funcion comprobarLetraUsuario
nodoBoton.addEventListener('click', comprobarLetraUsuario);
// Al hacer Enter con el teclado se llama a la funcion comprobarLetraUsuario
nodoLetra.addEventListener('keyup', comprobarPulsadoEnter);

prepararJuego(); 
//});   
    
var api = '<?php echo $url; ?>/api/';  
function Guardar_Puntaje(acierto, numIntentos, porcentaje){
    data = {
        id_user : <?php echo $_SESSION['id_user']; ?>,
        tiempo : total_segundos, 
        porcentaje : porcentaje,
        reto : <?php echo $id; ?>,
        tipo_juego : 2,
        dia: <?php echo $dia; ?>
    };
    
    jQuery.ajax({
		url: api+"guardar_puntaje.php",
		type:'post',
		data: data,
		}).done(function (resp){
			$("#xscript").html(resp);
		})
		.fail(function(resp) {
			console.log(resp);
		})
		.always(function(resp){
		}
	);

}
    
</script>



<script>
var total_segundos = 0;
h = 0;
m = 0;
s = 0;
document.getElementById("hms").innerHTML="00:00:00";
    
    
window.onload = init;
function init(){
    h = 0;
    m = 0;
    s = 0;
    document.getElementById("hms").innerHTML="00:00:00";
}         
function cronometrar(){
    escribir();
    id = setInterval(escribir,1000);
}
function escribir(){
    var hAux, mAux, sAux;
    s++;
    if (s>59){m++;s=0;}
    if (m>59){h++;m=0;}
    if (h>24){h=0;}

    if (s<10){sAux="0"+s;}else{sAux=s;}
    if (m<10){mAux="0"+m;}else{mAux=m;}
    if (h<10){hAux="0"+h;}else{hAux=h;}

    document.getElementById("hms").innerHTML = hAux + ":" + mAux + ":" + sAux; 
    total_segundos++;
    
    if(total_segundos > 120){
        parar();
        console.log("han pasado 10 segundos");
        acabarJuego_2();
        $("#boton_volver").show();
    }
}
function parar(){
    clearInterval(id);
}
function reiniciar(){
    clearInterval(id);
    document.getElementById("hms").innerHTML="00:00:00";
    h=0;m=0;s=0;
}
    
$( document ).ready(function() {
    cronometrar();
});
    
</script>