{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Round {{ r_num }}: Share to Player B
{% endblock %}

{% block content %}


 
 <div class="boxed">


    <p style="text-align:center; font-weight:bold; font-size: 22px;">Lottery {% if round_case == 2 %}1{% else %}2{% endif %} is selected for this round. Possible outcomes:</p> 

<table class="table_1" >

     <tr>

                <td style="vertical-align:middle;">
                    
                    <p align="center" style="text-align:center; font-size: 18px; font-weight:bold; color:green; vertical-align:middle;">WIN - you receive ${{ win_outcome|floatformat:2 }}</p>
                    
                    
                </td>
                
                <td style="text-align:center; vertical-align:middle;" ><h4>AND</h4></td>
                
                <td style="vertical-align:middle;">
                    
                    
                    <p align="center" style="text-align:center; font-size: 18px; font-weight:bold; color:purple; vertical-align:middle;">LOSE - you receive ${{ loss_outcome|floatformat:2 }}</p>
                </td>
    </tr> 
    </table>
    
    <hr style="width:50%;">
        {% if treatment == "C" %} 
            <p style="font-weight:bold; font-size: 18px;">Your probability of winning was determined by the emoji selection task of the Player B you are matched with for this round.</p> 
        {% else %}
            <p style="font-weight:bold; font-size: 18px;">Round {{ r_num }} Player B selected {{ n_correct }} peace {% if n_correct == 1 %}sign{% else %}signs{% endif %} and {{ n_incorrect }} fingers crossed {% if n_correct == 1 %}sign{% else %}signs{% endif %}, so changed the probability of winning from 50.00% to {{ win_prob|floatformat:2 }}%.</p> 
        {% endif %}

    
       <hr style="width:50%;">
       

       
            {% if treatment == "T2" %}
            
  
                     <button type="button" id="outcome_button" onclick="reveal_outcome('t2')" class="otree-btn-next btn btn-primary">Reveal the lottery outcome!</button>

                    
                    {% else %}
                    
                          <button type="button" id="outcome_button" onclick="reveal_outcome('C');" class="otree-btn-next btn btn-primary">Reveal the lottery outcome!</button>

                    
                    {% endif %}       
       
       

       
       
       
   

    <div id="outcome" style="display:none"> 
    
    
    
  <p style="font-weight:bold; font-size: 18px;"> The outcome of the lottery is: 
      {% if outcome == 1 %}
          <span style="color:green;" >WIN - you receive ${{ win_outcome|floatformat:2 }}</span>
        {% else %}
        <span style="color:purple;" >LOSE - you receive ${{ loss_outcome|floatformat:2 }}</span>
      {% endif %}
      
  </p> 
  
    {% if treatment == "T2" %}
    
            <button type="button" id="video_watch_id" style="display:none;" onclick="f1(); setInterval(incrementSeconds_2, 1000);" class="otree-btn-next btn btn-primary">Watch 30-Second Video!</button>
    {% else %}


          <p id="seconds-counter" style="text-align:center; color:red;">Please wait, you can submit your answer in 30 seconds.</p>  
   
     {% endif %} 
  
  </div>
  
  
  
  
  
  
  
  
 
  

       
     <div id="video_block" style="display:none;">

     {% if treatment == "T2" %}
            <hr style="width:50%;">
                    
            <div style="border: 20px double rgb(80, 80, 80); border-radius:25px;">
          <p id="seconds-counter_2" style="text-align:center; color:red;">Time Left: 30 seconds.</p>  

                <table  align="center" class="table_2">
                
                                               
                
                    {% for row in my_list %}
                        <tr align="center">
                          
                                        
                            {% for smile, image_id, val_id in row %}
                                <td>
                                    {% if smile == 1 %}
                                        
                                        <img src="{% static "global/victory.png" %}" id={{image_id|safe}} width=50% height=50% />
                                    {% else %} 
                                        <img src="{% static "global/crossed.png" %}" id={{image_id|safe}} width=50% height=50%/>
                                    {% endif %} 
                                </td>
                            {% endfor %}
                                    
                           
                                    
                        </tr> 
                        
                    
                    
                    {% endfor %}
                </table>
            </div>
        
        
           <hr style="width:50%;">
           
           
            
        
      
     
  

  {% endif %} 
  
    </div>
    

  <div id="sharing_block" style="display:none;">
    
      <p style="font-weight:bold; font-size: 18px;"> I would like to share
          <input id="share_id"  name="share" style="text-align:center; width:50pt;"/>
          out of my 
      {% if outcome == 1 %}
         ${{ win_outcome|floatformat:2 }}
        {% else %}
        ${{ loss_outcome|floatformat:2 }}
      {% endif %}
      with Player B.
          

  
  </p> 
  
        
   <button type="button" id="final_outcome" onclick="check_valid({{ final_outcome|safe }})"  class="otree-btn-next btn btn-primary">Share</button>
  </div>









   

    
</div>


 

{% endblock %}


{% block scripts %}

    
    <script type="text/javascript">

         
        var t_list = {{ click_time|safe }};
        var m_list = {{ image_list|safe }};
        var t = t_list[0];
        var m = "image_"+m_list[0].toString();
        var c = 1;
        var zero_happen = 0
        var total_duration = t
        var n_times = 0
        
      
    
        function changeTimer(){
             
            t = t_list[1]+1000/(t_list[1]+1);
            total_duration += t
            n_times += 1 
            if (m_list[1]>0){
                m = "image_"+m_list[1].toString();
                c = 1;
                }
            else if (m_list[1]==0){
                m = "image_"+m_list[1].toString();
                if (zero_happen==0){
                    c = 1;
                    zero_happen = 1
                    }
                
                else{
                    c = 0
                    zero_happen = 0
                    }
            
            }
            else{
                
                m = "image_"+(m_list[1]*(-1)).toString();
                c = 0;
            
                }
            t_list.splice(0, 1);
            m_list.splice(0, 1);

        } 
          
        function f1() { 
            var video_block = document.getElementById("video_block");
            
        
          
          video_block.style.display = "block";
          if (n_times < 1 ){
          video_block.scrollIntoView();
          }
        
            
            if (total_duration<=30000){
                if (c == 1){
                    document.getElementById(m).style.width="100%"; 
                    document.getElementById(m).style.height="100%"; 
                    }
                else{
                    document.getElementById(m).style.width="50%"; 
                    document.getElementById(m).style.height="50%";
                    }
                changeTimer(); 
                setTimeout(f1, t);
                }
                 
            else{
                clearTimeout();
                
                }
    
        }
        


    </script> 
    
    
    <script>

 
            function check_valid(max_share){
            var answ = document.getElementById("share_id");
            var max_share = max_share
            
            
            
           
            if( answ.value == ""){
                alert("Please enter how much you are willing to share with Player B!");
                
                }
            else if (answ.value > max_share){
            alert("Shared amount should be from 0 to "+max_share.toString()+"!");
            }
            
            else if (answ.value < 0){
            alert("Shared amount should be from 0 to "+max_share.toString()+".");
            }
                
            else{
                document.querySelector("form").submit();
            }
            }
            
            
            
               
    
    
        function reveal_outcome(arg) {
          
          var outcome = document.getElementById("outcome");
          var button = document.getElementById("outcome_button");
          var video_watch_id = document.getElementById("video_watch_id");
          var sharing_block = document.getElementById("sharing_block");
          
          
          
          outcome.style.display = "block";
          outcome_button.style.display = "none";
          if (arg == "C"){
          var cancel = setInterval(incrementSeconds, 1000);
          setTimeout(enable_button, 30000);
          
          }
          else if (arg == "t2"){
          video_watch_id.style.display = "block";
          }
          
  
        }
        
        function enable_button() {
        var sharing_block = document.getElementById("sharing_block");
        sharing_block.style.display = "block";
        }
        
    
    </script>
    
    <script>
    
    
    var seconds = 30;
    var seconds_counter = document.getElementById("seconds-counter");   

    function incrementSeconds() {

        if (seconds > 0){
            seconds += -1;
            seconds_counter.innerHTML = "Please wait, you can submit your answer in " + seconds + " seconds.";
                }
                 
            else{
                clearTimeout();
                }
    }
    

    
    
    </script>
    
    
    <script>
    
    
    var seconds = 30;
    var el = document.getElementById("seconds-counter_2");  
    var sharing_block = document.getElementById("sharing_block"); 

    function incrementSeconds_2() {
    

        if (seconds > 0){
            seconds += -1;
            el.innerHTML = "Time Left: " + seconds + " seconds.";
                }
                 
        else{
            clearTimeout();
            sharing_block.style.display = "block";
            
            }
    }
    

    
    
    
    </script>
    






            
    
{% endblock %}



{% block styles %}
    <style>
 
        
        .table_2 td {
          height:60px;
          width:60px
          
        }
        
        .table_2{
          border-collapse: separate;
          border-spacing: 2px 2px;
          width: 90%
          }
          
          p.main{
            font-size: 18px; 
            text-align: justify;
                
                }
        
    
    </style>
{% endblock %}