{% 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 class="container">         
        {# PROFILE #}
<div class="row">
  <div class="col-xs-12 home-image"><img src="{{asset('img/logo3.png')}}"></div>
</div>
<div class="row">
  <div class="col-xs-12 progressbar-container" style="padding:0px;">
 {# animacion #}
    {# <div class="mision" ><h3 id="selfres"><span class="red bold score-number" id="selftext">100</span><img style="height:auto;width:32px;"src="{{asset('img/redstar.png')}}"></h3></div> #}
      {% set userPoints = 0 %}
      {% set maxScore = 0 %}
      {% for att in rankingIndividual %}{% if app.user.id == att.id %}{% set userPoints = att.score %}{% endif %}{% endfor %}
      {% for att in rankingIndividual %}{% if loop.first %} {% set maxScore = att.score %}{% endif %}{% endfor %}
      {% set porcentajeUser = (userPoints * 100)/maxScore %}
        {# animacion #}
{#       <div class="mision" ><h3 id="res"><span id="text">100</span><img style="height:auto;width:32px;"src="{{asset('img/bluestar.png')}}"></h3></div> #}

      <div class="progressbar-total ">
        <div class="mision hoverpoints" style=""><h2 class="white bold score-number" style="margin-top: 3px !important">{{maxScore}}</h2></div>
       {#  <div id="self-points" class="progressbar-selfpoint" {% if porcentajeUserDonated <= 20 %} style="width:20%;" {% else %}style="width:{{porcentajeUserDonated}0%;" {% endif %}><div class="mision" style="width:auto;"><h3 class="white " style="z-index:100;" >{{userDonated}}</h3></div><div class="mision" style="width:auto;"><h3 class="red " style="margin-top: 30px !important;" >YOU</h3></div></div> #}

        {# Calacular el max-width para que no se salga del progressbar #}
        {% set maxWidthOtherPoints = 100 %}
        {% if porcentajeUser <= 20 %}
            {# si el usuario tiene menos del 20 hacer la media sobre 80 #}
            {% set maxWidthOtherPoints = (80 * porcentajeUser) / 100 %}
            {% if maxWidthOtherPoints > 80 %}
              {% set maxWidthOtherPoints = 80 %}
            {% endif %}
        {% else %}
            {% set maxWidthOtherPoints = 100 - porcentajeUser %}
        {% endif %}

        <div id="width"  class="progressbar-otherpoints"{% if porcentajeUser <= 20 %} style="width:20%;" {% else %} 
        {% if porcentajeUser <= 100 %} 
        style="width:{{porcentajeUser}}%;max-width:{{porcentajeUser}}%;"{% else %} style="width:100%;max-width:100%;"{% endif %}{% endif %}><div  class="mision" style="width:auto;"><h3 id="total" style="margin-top: 6px !important" class="white score-number">{% for att in rankingIndividual %}{% if app.user.id == att.id %} {{att.score}}{% endif %}{% endfor %}</h3></div>{# <div class="mision" style="width:auto;"><h3 class="blue " style="margin-top: 30px !important;" >ALL</h3></div> #}</div>



      </div>
       <div class="end-blackstar">
        <img id="s" class="profile-blue-star" src="{{ asset('img/star.png') }}"/>
      </div>
       <div class="col-xs-12 mision"><h2 class="orange">MIS PUNTOS</h2></div> 
      </div>
  </div>
          <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">JUGAR</span></div>
            </div>
          </div>
            <!-- Modal -->
                <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>
    {% endblock %}
    {% block javascripts %}
      {{parent()}}
      {% if firstTime %}
        <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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script src="{{ asset('js/donut-chart.js') }}" ></script>
      <script src="{{ asset('js/competition-search.js') }}" ></script>
      <script src="{{ asset('js/competition-accordion.js') }}" ></script>
      <script src="{{ asset('js/competition-delete.js') }}" ></script>
      <script src="{{ asset('js/actions-links.js') }}" ></script>
      <script src="{{ asset('js/playGame_ok1.js') }}" ></script>
      <script src="{{ asset('js/delete-trivial.js') }}" ></script>
      <script src="{{ asset('js/validateAddCompetitionForm.js') }}" ></script>
      <script src="{{ asset('js/downloadTrackingCompetition.js') }}" ></script>
      <script type="text/javascript">

      $(function () {
        count = 0;
        wordsArray = ["JUGAR", "PLAY", "JOKATU","JOGAR","JOUER","GIOCO","遊ぶ"];
        setInterval(function () {
          count++;
           $("#languagetext").text(wordsArray[count % wordsArray.length]);
          // $("#languagetext").fadeOut(400, function () {
          //   $(this).text(wordsArray[count % wordsArray.length]).fadeIn(500);
          // });
        }, 500);
      });

      $(document).ready(function(){

            // $('#s').on('click', function(e) {
            //     $.ajax({
            //       url: document.URL.replace("/competition/usersCompetition", "/ajax_points"),
            //       dataType: "json",
            //       success: function(data){
            //         alert(data.total+"/"+data.width);
            //       }
            //     });

            // });


          // $(".progressbar-total").hover(function(){
          //     $(this).css("background-color", "yellow");
          //     }, function(){
          //     $(this).css("background-color", "rgba");
          //   });
              

      });    

//animacion
      //   $(function () {
      //   setInterval(function () {
      //     var actualPoints = document.getElementById("total");
      //     var res;
      //     actualPoints = $(actualPoints).text();
      //     $.ajax({
      //             url: document.URL.replace("/competition/usersCompetition", "/ajax_points"),
      //             dataType: "json",
      //             success: function(data){
      //               $("#total").text(data.total);
      //               if (data.width<=20){
      //               $("#width").css("width", 20+"%");

      //               }else{
      //                $("#width").css("width", data.width+"%");
      //               }
      //               res = parseInt(data.total)-parseInt(actualPoints);
      //               if (res>0){
      //                // var anim=document.getElementById("res");
      //                 $("#text").text(res);
      //                 //$(anim).removeClass("activeAnim");
      //                  //void anim.offsetWidth;
      //                // $(anim).addClass("activeAnim");
      //               }
      //             }
      //           });
      //   }, 5000);
      // });


        // $(function () {
        // setInterval(function () {
        //   var actualPoints = document.getElementById("selftotal");
        //   var selfres;
        //   actualPoints = $(actualPoints).text();
        //   // console.log(actualPoints)
        //   $.ajax({
        //           url: document.URL.replace("/competition/usersCompetition", "/ajax_selfpoints"),
        //           dataType: "json",
        //           success: function(data){
        //             $("#selftotal").text(data.propios);
        //             res = parseInt(data.propios)-parseInt(actualPoints);
        //             if (res>0){
        //              // var anim=document.getElementById("selfres");
        //               $("#selftext").text(res);
        //              // $(anim).removeClass("activeAnim");
        //              // void anim.offsetWidth;
        //             //  $(anim).addClass("activeAnim");
        //             }
        //           }
        //         });
        // }, 5000);
      // });




      </script>
{% endblock %}