{% extends 'layout.html.twig' %}
{% block stylesheets %}
  {{parent()}}
  <link href="{{ asset('css/competition.css') }}" media="screen" rel="stylesheet" type="text/css">
  <link href="{{ asset('css/trivial.css') }}" media="screen" rel="stylesheet" type="text/css">
  <link href="{{ asset('css/tutorial.css') }}" media="screen" rel="stylesheet" type="text/css">
{% endblock %}
{% block body %}
{{ parent() }}
<div style="display: flex; justify-content:center; align-items: center; height: 70%">
  <div class="container">         
        {# PROFILE #}
    <div class="row">
      <div class="col-xs-12 home-image"><img src="{{asset('img/logo2.png')}}"></div>
    </div>       
    <!-- Modal -->
   <div class="row">             
      <div class="col-xs-12 btn-play-container">
        <div id="playGame" data-id-trivial="1"  data-tokenSession="{{app.session.get('tokenSession')}}" href="#" data-toggle="modal" data-target="#modalGame" class="btn btn-play"><span id="languagetext">PLAY</span></div>
      </div>
    </div>
    <div class="modal fade" id="modalGame" role="dialog">
      <div class="modal-dialog">                  
        <!-- Modal content-->
        <div class="modal-content">
          <div id="game">
          </div>
        </div>
      </div>
    </div>
     </div>
  </div>
    {% endblock %}
    {% block javascripts %}
      {{parent()}}
      <script src="{{asset('js/qrCode.min.js')}}"></script>
      {% if firstTime is defined and firstTime == 1 %}
        <script type="text/javascript">
          window.onload = function(){
            $('#tutoModal').modal('show');
          };

          {% if firstTime is defined and firstTime == 1 %}       
              var fT = 1;
              $("#tutoModal").on('hidden.bs.modal', function (e) {
                  if(fT == 1){
                    showBadgeModal();
                  }
              });

            function showBadgeModal(){
              $('#myBadgeModal-'+currentModal).appendTo("body").modal('show');
              fT = 0;
            }
          {% endif %}

        </script>
      {% endif %}
      <script src="{{ asset('js/countdown.js') }}" ></script>
        <script src="{{ asset('js/playGame_ok1.js') }}" ></script>
      <script type="text/javascript">

      $(function () {
        count = 0;
        wordsArray = ["PLAY", "JUGAR", "JOKATU","JOGAR","JOUER","GIOCO","遊ぶ"];
        setInterval(function () {
          count++;
           $("#languagetext").text(wordsArray[count % wordsArray.length]);
        }, 500);
      });
//crea elemento
const video = document.createElement("video");

//nuestro camvas
const canvasElement = document.getElementById("qr-canvas");
const canvas = canvasElement.getContext("2d");

//div donde llegara nuestro canvas
const btnScanQR = document.getElementById("btn-scan-qr");

const btnOpenCamera = document.getElementById("openCam");
const btnCloseCamera = document.getElementById("closeCam");

//lectura desactivada
let scanning = false;

//funcion para encender la camara
const encenderCamara = () => {
  navigator.mediaDevices
    .getUserMedia({ video: { facingMode: "environment" } })
    .then(function (stream) {
      scanning = true;
      btnScanQR.hidden = true;
      canvasElement.hidden = false;
      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
      video.srcObject = stream;
      video.play();
      tick();
      scan();
    });
    btnOpenCamera.style.display = "none";
    btnCloseCamera.style.display = "block";
};

//funciones para levantar las funiones de encendido de la camara
function tick() {
  canvasElement.height = video.videoHeight;
  canvasElement.width = video.videoWidth;
  canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);

  scanning && requestAnimationFrame(tick);
}

function scan() {
  try {
    qrcode.decode();
  } catch (e) {
    setTimeout(scan, 300);
  }
}

//apagara la camara
const cerrarCamara = () => {
  video.srcObject.getTracks().forEach((track) => {
    track.stop();
  });
  canvasElement.hidden = true;
  btnScanQR.hidden = false;
  btnOpenCamera.style.display = "block";
  btnCloseCamera.style.display = "none";
};

//callback cuando termina de leer el codigo QR
qrcode.callback = (respuesta) => {
  if (respuesta) {
    //console.log(respuesta);
    window.location.href = respuesta;
    //encenderCamara();    
    cerrarCamara();    

  }
};
//evento para mostrar la camara sin el boton 
/*window.addEventListener('load', (e) => {
  encenderCamara();
})*/

</script>
{% endblock %}