{{ block title }}

{{ endblock }}
{{ block content }}

{{formfields}}

<!-- Same with normal outcome with few details change // I removed last chose .... -->

<div class="mycontainer"> 
        
        
    <div class="title"> 
        <div class="score"> <p> <b>Scores  </b> </p></div>
        <div class="title_left"> 
            

     <img src="/static/display_image/Div.png">


        
        </div> 
        <div class="title_right"> <p> <b> Outcome </b>  </p> </div> 
    </div>
           
      <div class="scores"> 

        {{ if player.id_in_group == 1 }}
          <div class="score_total"> <p>  Your total score:  <br>  <b> {{group.p1TotalScore }} </b>  </p></div>

                    <div class="scores_left"> <p>  You didnt choose the same island, so both of you will lose <br> <br>  <strong id="scores_right">    {{ group.p1Score }} </strong>  points    </p>
                         
       {{endif}}
        {{ if player.id_in_group == 2 }}

        <div class="score_total"> <p>  Your total score: <br> <b>{{group.p2TotalScore }}</b> </p></div>

                <div class="scores_left"> <p>  You didnt choose the same island, so both of you will lose  <br> <br>   <strong id="scores_left"> {{ group.p2Score }} </strong>  points  </p>
         
       {{endif}}


        </div>

      </div>
            
            <div class="images">
                {{ if player.id_in_group == 1 }}
          <div class="op"><p>  Your co-player total score: <br>  <b> {{group.p2TotalScore }} </b></p></div>
          {{endif}}

          {{ if player.id_in_group == 2 }}
          <div class="op"><p>  Your co-player total score: <br>  <b> {{group.p1TotalScore }} </b></p></div>
          {{endif}}
                
            </div>
    
            
    </div>
        
    <style>


.modal-content{
     background-color:rgb(163, 1, 1);
     color:white
}
.modal-content {
    overflow:hidden;
}
.modal-footer button {
    background-color: white;
    color: black;}
    .modal-footer button:hover {
    background-color: white;
    color: black;}


.otree-body{
    padding: 0;
    max-width: calc(100vw - 375px);
    max-height: calc(100vh - 16px);
}

.page-header {
    margin-top: 3px;
    margin-bottom: 0;
    padding-top: 0;
}


.mycontainer{
    width: 100%;
    height: 98vh;
    outline-style: solid;
    background-color:aliceblue;
}

.title{
    width: 100%;
    height: 20vh;
    border-bottom-style: solid;
}

.score{
    width: 15%;
    height: 20vh;
    position: relative;
    float: left;
    border-right-style: solid;
    padding-top: 50px;

}

.score p{
    text-align: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 4vh;
    
}

.title_left{
    width: 15%;
    height: 20vh;
    position: relative;
    float: left;
}

.title_left img{
    
    display: block;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-left: 10px;
}

.title_right{
    width: 69%;
    height: 20vh;
    float: right;
}

.title_right p {
    text-align: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 4vh;
    margin-right:30vh;
    padding-top: 50px;
}


.scores{
    width: 100%;
    height: 40.4vh;
    background-color:aliceblue; 
}
.score_total{
    width: 15%;
    height: 40vh;
    background-color:aliceblue; 
    position: relative;
    float: left;
    text-align: center;
    border-right-style: solid;
    border-bottom-style:solid;
    
}

.score_total p{
    align-content: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 3vh;
    color: blue;
    padding-top: 50px;
    line-height: 2.25;
}


.scores_left{
    width: 84%;
    height: 40vh;
    background-color:aliceblue; 
    position: relative;
    float: left;
}

.scores_left p{
    font-family: 'Oxygen', sans-serif;
    font-size: 4vh;
    margin-top:5vh;
    margin-left:5vh;
    color: red;
    text-align: center;

}


.images{
    width: 100%;
    background-color:aliceblue;   
}

.op{
    width: 15%;
    height: 37.6vh;
    background-color:aliceblue; 
    position: relative;
    float: left;
    border-right-style: solid;
text-align: center;}

.op p{
    align-content: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 3vh;
    color: orange;
    margin-left: 0;
    padding-top: 16px;
    line-height: 2.3;
}



@media screen and  (min-width: 1900px) and (max-width: 2200px) {
   
   .title_left img {
       height: 90%;
       width: 90%;
   }
   
   
   }
   
   @media screen and (min-width: 2200px) and (max-width: 2500px) {
      
   
   .title_left img {
       height: 85%;
       width: 85%;

   }
 
   }
   
   @media screen and  (min-width: 2500px) {
   
   
   .title_left img {
       height: 80%;
       width: 80%;
   }
   
   }

    </style>


{{ if player.id_in_group == 1 }}

<script>
window.onload = () => {
var Random_selectionp1 = JSON.parse(localStorage.getItem('Choose_selectionp1'))
if (Random_selectionp1=='True'){


        $('#onload').modal('show');
        localStorage.setItem('Choose_selectionp1', JSON.stringify('False'))

    
}

}


</script>
{{ else }}

<script>
    window.onload = () => {
    var Random_selectionp2 = JSON.parse(localStorage.getItem('Choose_selectionp2'))
    if (Random_selectionp2=='True'){
    
    
            $('#onload').modal('show');
            localStorage.setItem('Choose_selectionp2', JSON.stringify('False'))
    
        
    }
    
    }
    
    
    </script>
    {{endif}}



{{ if player.id_in_group == 1 }}

{{ if group.choosep1 == "Stone" }}

<script>
window.addEventListener("load", function(){

    $('.images_left img').css('color', 'blue');
    $('.images_left img').css('border-style', 'solid');

})
</script>
     
{{endif}}

{{ if  group.choosep1 == "Tree"}}

<script>
window.addEventListener("load", function(){

    $('.images_right img').css('color', 'blue');
    $('.images_right img').css('border-style', 'solid');

})

</script>
{{endif}}


{{ if group.choosep2 == "Stone" }}

<script>
window.addEventListener("load", function(){

    $('.images_left img').css('color', 'orange');
    $('.images_left img').css('border-style', 'solid');

})
</script>
     
{{endif}}

{{ if  group.choosep2 == "Tree"}}

<script>
window.addEventListener("load", function(){

    $('.images_right img').css('color', 'orange');
    $('.images_right img').css('border-style', 'solid');

})


</script>


     
{{endif}}
{{endif}}



{{ if player.id_in_group == 2 }}


{{ if group.choosep1 == "Stone" }}

<script>
window.addEventListener("load", function(){

    $('.images_left img').css('color', 'orange');
    $('.images_left img').css('border-style', 'solid');

})
</script>
     
{{endif}}

{{ if  group.choosep1 == "Tree"}}

<script>
window.addEventListener("load", function(){

    $('.images_right img').css('color', 'orange');
    $('.images_right img').css('border-style', 'solid');

})

</script>
{{endif}}


{{ if group.choosep2 == "Stone" }}

<script>
window.addEventListener("load", function(){

    $('.images_left img').css('color', 'blue');
    $('.images_left img').css('border-style', 'solid');

})
</script>
     
{{endif}}

{{ if  group.choosep2 == "Tree"}}

<script>
window.addEventListener("load", function(){

    $('.images_right img').css('color', 'blue');
    $('.images_right img').css('border-style', 'solid');

})


</script>


     
{{endif}}
{{endif}}




{{ if group.choosep1  == group.choosep2  }}
{{ if  group.choosep1 == "Tree"}}

<script>
window.addEventListener("load", function(){

        $('.images_right img').css('color', 'orange');
        $('.images_right img').css('border-style', 'solid');

        $('.images_right img').css({'outline-style': 'solid',
    'outline-color': 'blue'
});
})
</script>
{{endif}}
{{ if  group.choosep1 == "Stone"}}

<script>
window.addEventListener("load", function(){

        $('.images_left img').css('color', 'orange');
        $('.images_left img').css('border-style', 'solid');

        $('.images_left img').css({'outline-style': 'solid',
    'outline-color': 'blue'
});
})
</script>
{{endif}}
{{endif}}



{{if player.round_number <= C.demo_trial }}


<script>


    window.onload = () => {



    var counter=setInterval(timer, {{C.t_e}}); //1000 will  run it every 1 second
    
    
    function timer()
    {
        clearInterval(counter);
        document.getElementById('form').submit();
         
    }

}

</script>

    {{else}}

    <script>


    window.onload = () => {



    var counter=setInterval(timer, {{C.t_e}}); //1000 will  run it every 1 second


    function timer()
    {
        clearInterval(counter);
        document.getElementById('form').submit();

    }

}

</script>
    {{endif}}

<script>
document.getElementById("scores_left").innerHTML = Math.abs({{group.p2Score }});
</script>
    <script>
document.getElementById("scores_right").innerHTML = Math.abs({{group.p1Score }});
</script>



{{ endblock }}