{{ block title }}

{{ endblock }}
{{ block content }}


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

        <div class="title-wrapper">
            <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> Score Table </b>  </p> </div> 
        </div>
    </div>
           
    <div class ='X_point' style="display:none ;"> {{ group.x }} </div>
  
    <div class ='p1InterchangePenallty' style="display:none ;"> {{ group.p1InterchangePenallty }} </div>
    
    <div class ='p2InterchangePenallty' style="display:none ;"> {{ group.p2InterchangePenallty }} </div>
   
    <div class="raw"> 
        <div class="raw1">


         


            {{if player.id_in_group == 1}}
            <div class="you"> <p> Your total score:   <br> <b>  {{group.p1TotalScore }} </b>  </p></div>
            <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="you"> <p> Your total score:   <br>  <b> {{group.p2TotalScore }} </b>  </p></div>
            <div class="op"> <p> Your Co-player total score:  <br> <b> {{group.p1TotalScore }} </b>  </p></div>
            {{endif}}

        </div>
        <div class="raw_left"> <p> <b> Your outcome </b> </p>
            <div class="table-wrapper">

                <h4 class="player-header"> Your co-player choice </h4>
               <table class="T1 table" style="width:70%">
                   
                   <tr class="raw_1"> 
                       <td class="out"></td>
                       <td class="first" colspan="4"> <h4> Your choice </h4> </td>
       
                   </tr>
                   
                   <tr class="raw_2"> 
                       <td></td>
                       <td> <img class="tree1" src="/static/display_image/tree.jpeg" > </td>
                       <td> <img class="stone1" src="/static/display_image/stone.jpeg" > </td>
                   </tr>
                   
                   <tr class="raw_3"> 
                       
                       <td > <img class="tree2" src="/static/display_image/tree.jpeg" >  </td>
                       
                   </tr>
                   
                   <tr class="raw_4"> 
                       
                       <td> <img class="stone2" src="/static/display_image/stone.jpeg" > </td>
                      
                   </tr>
       
               </table>
            </div>


        </div>
        <div class="raw_right">  <p> <b> Your co-player outcome </b>  </p>
            
            <div class="table-wrapper">

                <h4 class="player-header"> Your co-player choice </h4>
               
                <table class="T2 table" style="width:70%">
                   
                   <tr class="raw_1"> 
                       <td class="out"></td>
                       <td class="first" colspan="4"> <h4> Your choice </h4> </td>
       
                   </tr>
                   
                   <tr class="raw_2"> 
                       <td></td>
                       <td> <img class="tree3" src="/static/display_image/tree.jpeg" > </td>
                       <td> <img class="stone3" src="/static/display_image/stone.jpeg" > </td>
                   </tr>
                   
                   <tr class="raw_3"> 
                       
                       <td > <img class="tree4" src="/static/display_image/tree.jpeg" >  </td>
                     
                   </tr>
                   
                   <tr class="raw_4"> 
                       
                       <td> <img class="stone4" src="/static/display_image/stone.jpeg" > </td>
                     
                   </tr>
       
               </table>
            </div>
        
        
        </div>
    
    </div>
    
            
    </div>


<style>
td{
    font-size: 20px;
    width: 33%;
    
}
td > img {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin: 0 !important;
    display: inline !important;
    width: 50px !important;
    height: 50px !important;
}
.mycontainer{
    width: 100%;
    height: 99vh;
    border : 3px solid black;
    background-color:aliceblue;
}
.otree-body{
padding: 0;
    max-width: calc(100vw - 375px);
    max-height: calc(100vh - 60px);
}

.title{
    width: 100%;
    height: 20.3vh;
    border-bottom : 3px solid black;
    display: flex;
    align-items: center;

}
.title-wrapper{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.score{
    min-width: 250px;
    height: 100%;
    position: relative;
    float: left;
    display: flex;
    align-items: center;
   justify-content: center;
    border-right: 3px solid black;
    /* border-right-style: solid; */
    width: 250px;
    padding-top: 18px;
}


.score p{
    text-align: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 4vh;
    line-height: 30px;
   
    color: black;
}

.title_left{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    max-height: 250px;
    padding-left: 32px;
}

.title_left img{
    height: 80%;
    width: 80%;

}

.title_right{
    height: 100%;
    flex: 1;
    margin-left: -120px;
}

.title_right p {
    text-align: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 4vh;
    line-height: 30px;
    padding-top: 18px;
    color: black;
}
.raw{
    width: 100%;
    height: 79vh;
    display: flex;
    justify-content: space-between;
    /* outline-style: solid;  */
}
.raw1{
   display: flex;
   flex-direction: column;
   min-width: 250px;
   max-width: 250px;
   justify-content: space-between;
    height: 99%;
    border-right: 3px solid black;
     
    /* border-right-style: solid; */
}

.raw_1{

    border-bottom: 2px solid black;
}

.you{
    width: 100%;
    border-bottom: 3px solid black;
    height: 35vh;
    /* border-bottom: solid; */
    text-align: center;
    height: 40vh;
}

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

.op{
    width: 100%;
    height: 34vh;
    text-align: center;

}
.page-header{
    display: none;
}
.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;
}

.raw_left{
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    height: 70vh;
    width: 50%;
}
.raw_left  > h4 {
    position: absolute;
    left: -38px;
    top: 60%;
    transform: rotate(-90deg);
    font-size: 14px;
}
.raw_left p {
    font-family: 'Oxygen', sans-serif;
    font-size: 3vh;
    line-height: 30px;
    margin-bottom: 72px;
    margin-top: 32px;
    color: blue;
}


.raw_right{
    height: 99%;
    width: 50%;
    border-left: 3px solid black;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* outline-style: solid; */
}
.raw_right > h4 {
    position: absolute;
    left: -38px;
    top: 53%;
    transform: rotate(-90deg);
    font-size: 14px;
}
.raw_right p {
    font-family: 'Oxygen', sans-serif;
    font-size: 3vh;
    line-height: 30px;
    color: orange;
    margin-bottom: 72px;
    margin-top: 32px;
}

.T1,.T2{
    text-align: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 1vh;
   margin: auto;
    color: black;
    border-left: 2.5px solid black;
}
/* .first{
    border-bottom: solid;
    
} */

.raw_1 h4{
    font-size: 2vh;

}


.raw_2 h4{
    transform: rotate(-90deg);
    white-space: nowrap;
    font-size: 2vh;

}


.other_choices{
    /* border-right-style: solid; */

}
.out{
    /* border-right-style: solid; */
    /* border-bottom-style: solid; */
}

.table-wrapper{
position: relative;
width: 100%;
height: 100%;
max-height: 250px;
}
.player-header{
    position: absolute;
    left: -20px;
    bottom:  22%;
    transform: rotate(-90deg);
    font-size: 14px;
}
.raw_2 img{
    display: block;
    width: 45%;
    height: auto;
    margin-left: 7vh;
    
}

.raw_3 img{
    display: block;
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vh;
    
}

.raw_4 img{
    display: block;
    width: 70%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vh;
}

.other_choices{
    margin-right: 10vh;
}





@media screen and  (min-width: 1900px) and (max-width: 2200px) {
    td > img {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin: 0 !important;
    display: inline !important;
    width: 70px !important;
    height: 70px !important;
}

.score p {
    font-size: 35px;
  }

  .player-header {
    position: absolute;
    left: 0px;
    bottom: 5%;
    transform: rotate(-90deg);
    font-size: 16px;
   
}
.title_left img {
    height: 100%;
    width: 100%;
}

table td{


    font-size: 30px;
}

}



@media screen and (min-width: 2200px) and (max-width: 2500px) {
    td > img {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin: 0 !important;
    display: inline !important;
    width: 90px !important;
    height: 90px !important;
}

.player-header {
    position: absolute;
    left: -50px;
    bottom: -10%;
    transform: rotate(-90deg);
    font-size: 25px;
}

.table-wrapper {
    position: relative;
    width: 90%;
    height: 90%;
    max-height: 250px;
}

table td{


    font-size: 30px;
}

.raw_1  h4{


font-size: 30px;
}
.title_left img {
    height: 120%;
    width: 120%;
    margin-left: 180px;
}
}

@media screen and  (min-width: 2500px) {

    .score p {
    font-size: 25px;
  }

  .player-header {
    
    position: absolute;
    left: 34px;
    bottom: -11%;
    transform: rotate(-90deg);
    font-size: 25px;
}
.raw_1  h4{


font-size: 25px;
}





td > img {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin: 0 !important;
    display: inline !important;
    width: 90px !important;
    height: 90px !important;
}

table td{


font-size:25px;
}
.title_left img {
    height: 140%;
    width: 140%;
    margin-left: 300px;
}

}


</style>

{{if player.round_number > 1 }}


{{ if player.id_in_group == 1 }}

{{ if group.Lastchoosep1 == 'Tree' }}


{{if group.Lastchoosep2 == 'Tree'}}
<script>
    window.addEventListener("load", function(){

    $('.tree1').css('border', '3px dashed blue');
    $('.tree2').css('border', '3px dashed orange');
    $('.tree3').css('border', '3px dashed blue');
    $('.tree4').css('border', '3px dashed orange');


});
</script>
{{endif}}


{{if group.Lastchoosep2 == 'Stone'}}
<script>
    window.addEventListener("load", function(){

    $('.tree1').css('border', '3px dashed blue');
    $('.stone2').css('border', '3px dashed orange');
    $('.tree3').css('border', '3px dashed blue');
    $('.stone4').css('border', '3px dashed orange');

});
</script>
{{endif}}

{{endif}}

{{ if group.Lastchoosep1 == 'Stone' }}


{{if group.Lastchoosep2 == 'Tree'}}
<script>
    window.addEventListener("load", function(){

    $('.stone1').css('border', '3px dashed blue');
    $('.tree2').css('border', '3px dashed orange');
    $('.stone3').css('border', '3px dashed blue');
    $('.tree4').css('border', '3px dashed orange');


});
</script>
{{endif}}


{{if group.Lastchoosep2 == 'Stone'}}
<script>
    window.addEventListener("load", function(){

    $('.stone1').css('border', '3px dashed blue');
    $('.stone2').css('border', '3px dashed orange');
    $('.stone3').css('border', '3px dashed blue');
    $('.stone4').css('border', '3px dashed orange');

});
</script>
{{endif}}

{{endif}}
{{endif}}


{{ if player.id_in_group == 2 }}

{{ if group.Lastchoosep1 == 'Tree' }}


{{if group.Lastchoosep2 == 'Tree'}}
<script>
    window.addEventListener("load", function(){

    $('.tree1').css('border', '3px dashed blue');
    $('.tree2').css('border', '3px dashed orange');
    $('.tree3').css('border', '3px dashed blue');
    $('.tree4').css('border', '3px dashed orange');


});
</script>
{{endif}}


{{if group.Lastchoosep2 == 'Stone'}}
<script>
    window.addEventListener("load", function(){

    $('.tree2').css('border', '3px dashed orange');
    $('.stone1').css('border', '3px dashed blue');
    $('.tree4').css('border', '3px dashed orange');
    $('.stone3').css('border', '3px dashed blue');

});
</script>
{{endif}}

{{endif}}

{{ if group.Lastchoosep1 == 'Stone' }}


{{if group.Lastchoosep2 == 'Tree'}}
<script>
    window.addEventListener("load", function(){

    $('.stone2').css('border', '3px dashed orange');
    $('.tree1').css('border', '3px dashed blue');
    $('.stone4').css('border', '3px dashed orange');
    $('.tree3').css('border', '3px dashed blue');


});
</script>
{{endif}}


{{if group.Lastchoosep2 == 'Stone'}}
<script>
    window.addEventListener("load", function(){

    $('.stone1').css('border', '3px dashed blue');
    $('.stone2').css('border', '3px dashed orange');
    $('.stone3').css('border', '3px dashed blue');
    $('.stone4').css('border', '3px dashed orange');

});
</script>
{{endif}}

{{endif}}
{{endif}}


{{endif}}









{{ if player.id_in_group == 1 }}

{{ if group.GameMode == "Competition" }}



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

    x= $('.X_point').text()
    p1InterchangePenallty= $('.p1InterchangePenallty').text()
    p2InterchangePenallty= $('.p2InterchangePenallty').text()
    $('.T1 .raw_3').append('<td id="2" class="td-cell">'+Math.floor((0.5*x)- p1InterchangePenallty)+'</td>');
    $('.T1 .raw_3').append('<td id="3" class="td-cell">'+Math.floor(0- p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="2" class="td-cell">'+Math.floor(0- p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="3" class="td-cell">'+Math.floor((0.5*x)- p1InterchangePenallty)+'</td>');

    $('.T2 .raw_3').append('<td id="2">'+Math.floor(0- p2InterchangePenallty)+'</td>');
    $('.T2 .raw_3').append('<td id="3">'+Math.floor((0.5*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="2">'+Math.floor((0.5*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="3">'+Math.floor(0-p2InterchangePenallty)+'</td>');

});
    
</script>

{{endif}}

{{ if group.GameMode == "Cooperation" }}



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

    x= $('.X_point').text()
    p1InterchangePenallty= $('.p1InterchangePenallty').text()
    p2InterchangePenallty= $('.p2InterchangePenallty').text()
    $('.T1 .raw_3').append('<td id="2">'+Math.floor((0.5*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_3').append('<td id="3">'+Math.floor((0.4*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="2">'+Math.floor((0.1*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="3">'+Math.floor((0.2*x)-p1InterchangePenallty)+'</td>');

    $('.T2 .raw_3').append('<td id="2">'+Math.floor((0.5*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_3').append('<td id="3">'+Math.floor((0.1*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="2">'+Math.floor((0.4*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="3">'+Math.floor((0.2*x)-p2InterchangePenallty)+'</td>');

});
    
</script>

{{endif}}
{{ if group.GameMode == "Independent" }}



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

    x= $('.X_point').text()
    p1InterchangePenallty= $('.p1InterchangePenallty').text()
    p2InterchangePenallty= $('.p2InterchangePenallty').text()
    $('.T1 .raw_3').append('<td id="2">'+Math.floor((0.3*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_3').append('<td id="3">'+Math.floor((0.3*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="2">'+Math.floor((0.7*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="3">'+Math.floor((0.7*x)-p1InterchangePenallty)+'</td>');

    $('.T2 .raw_3').append('<td id="2">'+Math.floor((0.3*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_3').append('<td id="3">'+Math.floor((0.7*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="2">'+Math.floor((0.3*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="3">'+Math.floor((0.7*x)-p2InterchangePenallty)+'</td>');

});
    
</script>

{{endif}}




{{endif}}

{{ if player.id_in_group == 2 }}

{{ if group.GameMode == "Competition" }}



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

    x= $('.X_point').text()
    p1InterchangePenallty= $('.p1InterchangePenallty').text()
    p2InterchangePenallty= $('.p2InterchangePenallty').text()
    $('.T2 .raw_3').append('<td id="2">'+Math.floor((0.5*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_3').append('<td id="3">'+Math.floor(0-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="2">'+Math.floor(0-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="3">'+Math.floor((0.5*x)-p2InterchangePenallty)+'</td>');

    $('.T1 .raw_3').append('<td id="2">'+Math.floor(0-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_3').append('<td id="3">'+Math.floor((0.5*x)-p2InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="2">'+Math.floor((0.5*x)-p2InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="3">'+Math.floor(0-p2InterchangePenallty)+'</td>');

});
    
</script>

{{endif}}

{{ if group.GameMode == "Cooperation" }}



<script>
window.addEventListener("load", function(){
   
  
    x= $('.X_point').text()
    p1InterchangePenallty= $('.p1InterchangePenallty').text()
    p2InterchangePenallty= $('.p2InterchangePenallty').text()
    $('.T1 .raw_3').append('<td id="2">'+Math.floor((0.5*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_3').append('<td id="3">'+Math.floor((0.4*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="2">'+Math.floor((0.1*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="3">'+Math.floor((0.2*x)-p1InterchangePenallty)+'</td>');

    $('.T2 .raw_3').append('<td id="2">'+Math.floor((0.5*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_3').append('<td id="3">'+Math.floor((0.1*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="2">'+Math.floor((0.4*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="3">'+Math.floor((0.2*x)-p2InterchangePenallty)+'</td>');

});
    
</script>

{{endif}}
{{ if group.GameMode == "Independent" }}



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

    x= $('.X_point').text()
    p1InterchangePenallty= $('.p1InterchangePenallty').text()
    p2InterchangePenallty= $('.p2InterchangePenallty').text()
    $('.T2 .raw_3').append('<td id="2">'+Math.floor((0.3*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_3').append('<td id="3">'+Math.floor((0.7*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="2">'+Math.floor((0.3*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="3">'+Math.floor((0.7*x)-p2InterchangePenallty)+'</td>');

    $('.T1 .raw_3').append('<td id="2">'+Math.floor((0.3*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_3').append('<td id="3">'+Math.floor((0.3*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="2">'+Math.floor((0.7*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="3">'+Math.floor((0.7*x)-p1InterchangePenallty)+'</td>');




});
    
</script>

{{endif}}


{{endif}}


{{ if group.GameMode == "Divergent" }}



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

    x= $('.X_point').text()
    p1InterchangePenallty= $('.p1InterchangePenallty').text()
    p2InterchangePenallty= $('.p2InterchangePenallty').text()
    $('.T1 .raw_3').append('<td id="2">'+Math.floor((-0.3*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_3').append('<td id="3">'+Math.floor((-0.3*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="2">'+Math.floor((-0.3*x)-p1InterchangePenallty)+'</td>');
    $('.T1 .raw_4').append('<td id="3">'+Math.floor((-0.3*x)-p1InterchangePenallty)+'</td>');

    $('.T2 .raw_3').append('<td id="2">'+Math.floor((-0.3*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_3').append('<td id="3">'+Math.floor((-0.3*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="2">'+Math.floor((-0.3*x)-p2InterchangePenallty)+'</td>');
    $('.T2 .raw_4').append('<td id="3">'+Math.floor((-0.3*x)-p2InterchangePenallty)+'</td>');
});
    
</script>

{{endif}}




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

<script>
window.onload = () => {


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


}
</script>

{{else}}

<script>
window.onload = () => {


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


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

    }


}
</script>

{{endif}}

{{ endblock }}