<?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> window.location = "'.$url.'/encuentra_frase/'.($id+1).'"; </script>';
}
if($id > 3){
echo '<script> window.location = "'.$url.'/concursos"; </script>';
}
$bt_volver = '
<a href="'.$url.'/encuentra_frase/'.($id+1).'">
<button class="btn btn-primary btn-block" style="margin-top: 35px;" >
Siguiente Juego
</button>
</a>
';
if($id > 2){
$bt_volver = '
<a href="'.$url.'/ranking">
<button class="btn btn-primary btn-block" style="margin-top: 35px;" >
Ver el Ranking
</button>
</a>
';
}
$frase = '';
$pista = '';
if($id == 1){
$frase = 'trabajo cross funcional';
$pista = '<b>Pista:</b> El camino es transitar de una forma que nos garantice el éxito en común';
}
if($id == 2){
$frase = 'codigo de conducta';
$pista = '<b>Pista:</b> Es la guía de nuestras acciones de comportamiento tanto afuera como adentro de la empresa';
}
if($id == 3){
$frase = 'evento adverso';
$pista = '<b>Pista:</b> cualquier circunstancia médica adversa ocurrida en un paciente o en un sujeto de una investigación clínica al que se le ha administrado un producto farmacéutico y que no tiene necesariamente que tener una relación causal con dicho tratamiento le denominamos:';
}
?>
<style>
body{
background-size: cover;
background-position: center;
background-attachment: fixed;
background-image: url(<?php echo $url; ?>/img/bg_juegos.jpg);
}
</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">ENCUENTRE 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-primary">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;
//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();
// 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>
