{{ block title }}

{{ endblock }}
{{ block content }}

{{formfields}}



<div class="mycontainer"> 
        
        
    <div class="title"> 
        <div class="score"> <p> <b>Scores  </b> </p></div>
        <div class="title_left"> 
            
                 
      {{ if group.GameMode == "Independent" }}
      <img src="/static/display_image/ind.png">
     {{endif}}
     {{ if group.GameMode == "Cooperation" }}
    <img src="/static/display_image/co.png">
     {{endif}}
     {{ if group.GameMode == "Competition" }}
      <img src="/static/display_image/com.png">
     {{endif}}
     {{ if group.GameMode == "Divergent" }}
     <img src="/static/display_image/Div.png">
     {{endif}}

        
        </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>  Your outcome: <br> <br> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <strong> {{ group.p1Score }} </strong>      </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>  Your outcome: <br> <br>  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <strong> {{ group.p2Score }} </strong>    </p>
         
       {{endif}}
        

     <!-- {{ if player.id_in_group == 1 }}

     <table class='table table-bordered text-center'
              style='width: auto; margin: auto' id="table-data-1">
           <thead>
           <tr>
            <th></th>
               <th>SelectedMode</th>
               <th>GameMode</th>
               <th>Choice</th>
               <th>PredictionStone</th>
               <th>PredictionTree</th>
            
           </tr>
       </thead>
       <tbody>
           <tr>
               <th>You</th>
               <td>{{group.modep1}}</td>
               <td>{{group.GameMode}}</td>
               <td>{{group.choosep1}}</td>
               <td> {{group.predictionStoneP1}}</td>
               <td> {{group.predictionTreeP1}}</td>
            
           </tr>
   
   
           <tr>
               <th>Opponent</th>
               <td>{{group.modep2}}</td>
               <td>{{group.GameMode}}</td>
               <td>{{group.choosep2}}</td>
               <td> {{group.predictionStoneP2}}</td>
               <td> {{group.predictionTreeP2}}</td>
              
   
           </tr>
       </tbody>
       </table>
       {{else}}
   
   
       <table class='table table-bordered text-center'
       style='width: auto; margin: auto' id="table-data-2">
       <thead>
       <tr>
        <th></th>
        <th>SelectedMode</th>
        <th>GameMode</th>
        <th>Choice</th>
        <th>PredictionStone</th>
        <th>PredictionTree</th>
        
       </tr>
   </thead>
   <tbody>
       <tr>
           
           <th>You</th>
           <td>{{group.modep2}}</td>
           <td>{{group.GameMode}}</td>
           <td>{{group.choosep2}}</td>
           <td> {{group.predictionStoneP2}}</td>
           <td> {{group.predictionTreeP2}}</td>
         
       </tr>
   
   
       <tr>
           <th>Opponent</th>
           <td>{{group.modep1}}</td>
           <td>{{group.GameMode}}</td>
           <td>{{group.choosep1}}</td>
           <td> {{group.predictionStoneP1}}</td>
           <td> {{group.predictionTreeP1}}</td>
           
       </tr>
   </tbody>
   </table>
   
       {{endif}}
    -->

        </div>
        {{ if player.id_in_group == 1 }}
          <div class="scores_right"> <p>  Your co-Player outcome: <br> <br> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <strong> {{ group.p2Score }} </strong>    </p> </div>
 
          {{endif}}
          {{ if player.id_in_group == 2 }}
          <div class="scores_right"> <p>  Your co-Player outcome: <br> <br> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <strong> {{ group.p1Score }} </strong>    </p> </div>
 
          {{endif}}

      </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 class="images_left"> <img src="/static/display_image/stone.jpeg">  </div>
          <div class="images_right"><img src="/static/display_image/tree.jpeg">  </div>
                
            </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; 
    border-bottom-style: solid;
}
.score_total{
    width: 15%;
    height: 40vh;
    background-color:aliceblue; 
    position: relative;
    float: left;
    border-right-style: solid;
    text-align: center;
    
}

.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: 42%;
    height: 40vh;
    background-color:aliceblue; 
    position: relative;
    float: left;
    border-right-style: solid;
}

.scores_left p{
    font-family: 'Oxygen', sans-serif;
    font-size: 3vh;
    margin-top:5vh;
    margin-left:20vh;
    color: blue;

}

.scores_right{
    width: 42%;
    height: 40vh;
    background-color:aliceblue;   
    float: right;
}

.scores_right p{
    font-family: 'Oxygen', sans-serif;
    font-size: 3vh;
    margin-top:5vh;
    margin-left:15vh;
    color: orange;
}

.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;
}

.images_left{
    width: 42%;
  
    background-color:aliceblue; 
    float: left;
}

.images_right{
    width: 42%;
   
    background-color:aliceblue;   
    float: right;
}

.images_right img{
    display: block;
    width: 35%;
    height: auto;
    margin-left: auto;
    margin-right: 50vh;
    margin-top: 10vh;
    margin-left:25vh;
    margin: 40px auto;
}

.images_left img{
    display: block;
    width: 27%;
    height: auto;
    margin-left: auto;
    margin-right: 50vh;
    margin-top: 10vh;
    margin-left:25vh;
    margin: 40px auto;
}




@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.t3}}); //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}}); //1000 will  run it every 1 second


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

    }

}

</script>
    {{endif}}


{{ endblock }}