{{ block title }}         
{{ endblock }}
{{ block content }}

<!-- Modal -->

  

<div class="mycontainer">
    <div class="title"> 
        <div class="title_right"> 



     {{ 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}}
        
        
     <p> Selected Island : <Strong>{{ group.GameMode }}  </Strong></p>
        
        </div>
        <div class="title_left"> <p> <b> Scores </b> </p> 
     

        </div>
    </div>
    
    
    <div class="middle">


        <div class="middle_left">
            {{ if player.id_in_group == 1 }}

            <div class="score_top"> <p> Your total score:   <br> <b> {{group.p1TotalScore }} </b>  </p> </div>
            <div class="score_dawn"> <p> Your co-player total Score: <br> <b> {{group.p2TotalScore }} </b>  </p> </div>
            {{endif}}

            {{ if player.id_in_group == 2 }}

            <div class="score_top"> <p> Your total score:  <br> <b> {{group.p2TotalScore }} </b>  </p> </div>
            <div class="score_dawn"> <p> Your co-player total score:  <br> <b> {{group.p1TotalScore }} </b>  </p> </div>
            {{endif}}

        </div>


       
        
        <div class="middle_right"> 
             <div class="imgDiv">
              <img id="cooperation"  src="/static/display_image/co.png">
              {{if player.round_number == 1}} 
              <p>{{player.cooperationScore}}</p>
              {{else}}
              <p>{{group.cooperationScore}}</p>
              {{endif}}

            </div>
            <div class="imgDiv">
               <img id="competition" src="/static/display_image/com.png">
               {{if player.round_number == 1}} 
               <p class="competitionP">{{player.competitionScore}}</p>
               {{else}}
               <p class="competitionP">{{group.competitionScore}}</p>
               {{endif}}
            </div>

              <div class="imgDiv">
               <img id="independent" src="/static/display_image/ind.png">
               {{if player.round_number == 1}} 
                  <p>{{player.independentScore}}</p>
                  {{else}}
                  <p>{{group.independentScore}}</p>
                  {{endif}}
            </div>

            </div>

        
    </div>

</div>

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

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


.modal-footer button {
    background-color: white;
    color: black;}
    .modal-footer button:hover {
    background-color: white;
    color: black;}
.mycontainer{
width: 100%;
height: calc(100vh - 6px);
border: 3px solid black;
background-color:aliceblue;
border-bottom: 3px solid black;
}
.title_right img{
    
    display: inline-block;
    width: 17%;
    height: auto;
    /* padding-top: 6px; */
    /* padding-left: 10px; */
    position: relative;
}

.title {
width: 100%;
height: 20vh;
background-color:aliceblue;

}

.title_left {
width: 15%;
height: 20vh;
background-color:aliceblue;
position: relative;
float: left;    
border-right: 3px solid black;
}

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

}

.title_right {
width: 84%;
height: 20vh;
background-color:aliceblue;
float:right;


}

.title_right p {
text-align: center;
font-family: 'Oxygen', sans-serif;
font-size: 4vh;
line-height: 30px;
margin-top:8vh;
color: black; 
display: inline-block;
margin-left: 100px;
}

.middle{
width: 100%;
height: 78.5vh;
background-color:aliceblue;
border-top: 3px solid black;

}

.middle_left{
width: 15%;
height: 78.1vh;
background-color:aliceblue; 
position: relative;
float: left;
border-right: 3px solid black;
}

.middle_right{
width: 84%;
background-color:aliceblue; 
float: right;
}

.score_top{
width: 100%;
height: 40vh;
background-color:aliceblue; 
border-bottom-style: solid;
position: relative;
float: left;
}

.score_top p {
text-align: center;
font-family: 'Oxygen', sans-serif;
font-size: 3vh;
margin-top:8vh;
color: blue;
}


.score_dawn{
width: 100%;
height: 35vh;
background-color:aliceblue; 
float: right;
}

.score_dawn p {
text-align: center;
font-family: 'Oxygen', sans-serif;
font-size: 3vh;
margin-top:8vh;
color: orange;
}


#cooperation{
width: 85%;
height: auto;
position: relative;

margin-top: 5vh;
}
.imgDiv{
width: 33%;
text-align: center;

float: left;

}

.middle_right a{

color: black;
}

a:-webkit-any-link {
color: aliceblue;
cursor: pointer;
}




#competition{
width: 85%;
height: auto;
position: relative;
margin-top: 40vh;
margin-left: -120px;
}
.competitionP{
margin-left: -120px;

}

.middle_right a{

color: black;
}

a:-webkit-any-link {
color: aliceblue;
cursor: pointer;
}


#independent{
width: 85%;
height: auto;

margin-left:0vh;
margin-top: 10vh;
}

.middle_right a{

color: black;
}

a:-webkit-any-link {
color: aliceblue;
cursor: pointer;
}



.p1{    
width: 5%;
height: 5vh;
outline-style: solid;
outline-color: black;
background-color:aliceblue;
left:10vh;  
}



.imgDiv p{font-size: 3vh;
    font-weight: 600;}
.ptype1 ,.ptype2 , .ptype3{
    font-size: 2.5vh;
    font-weight: 600;

}
</style>




<script>





function connect(div1, div2, color, thickness,type) {
var off1 = getOffset(div1);
var off2 = getOffset(div2);

if (type==1){
    // bottom right
    var x1 = off1.left + (off1.width/1.6);
    var y1 = off1.top + off1.height;
    // top left
    var x2 = off2.left;
    var y2 = off2.top+ (off2.height/2);
    }


   else if (type==2){
       
    // top right

    var x1 = off1.left+off1.width ;
    var y1 = off1.top+ (off1.height/2);
   
    // buttom left
    var x2 = off2.left+(off2.width/2.4);
    var y2 = off2.top+ off2.height;

    }

    else{

// top right

    var x1 = off1.left + off1.width;
    var y1 = off1.top +(off1.height/2)
   
    // buttom left
    var x2 = off2.left;
    var y2 = off2.top+ (off2.height/2);

    }


// distance
var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
// center
var cx = ((x1 + x2) / 2) - (length / 2);
var cy = ((y1 + y2) / 2) - (thickness / 2);
// angle
var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
// make hr


if (type==1){
    $('.type1').remove();
    $('.ptype1').remove();
var htmlLine = "<div class='type1' style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
var htmlpoint= "<p class='ptype1' style='color:" + color + "; position:absolute; left:" + (x1 + x2) / 1.96+ "px; top:" + (y1 + y2) / 2.05 + "px;'> </p>";

document.body.innerHTML += htmlpoint;  
}
else if (type==2)
{
    $('.type2').remove();
    $('.ptype2').remove();
var htmlLine = "<div class='type2' style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
var htmlpoint= "<p class='ptype2' style='color:" + color + "; position:absolute; left:" + (x1 + x2) / 2+ "px; top:" + (y1 + y2) / 2 + "px;'>  </p>";

document.body.innerHTML += htmlpoint;  
}
else{

    $('.type3').remove();
    $('.ptype3').remove();
var htmlLine = "<div class='type3' style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
var htmlpoint= "<p class='ptype3' style='color:" + color + "; position:absolute; ; left:" + (x1 + x2) / 2+ "px; top:" + (y1 + y2) / 2 + "px;'> </p>";

document.body.innerHTML += htmlpoint;  

}

document.body.innerHTML += htmlLine; 
}

function getOffset( el ) {
var rect = el.getBoundingClientRect();
return {
    left: rect.left + window.pageXOffset,
    top: rect.top + window.pageYOffset,
    width: rect.width || el.offsetWidth,
    height: rect.height || el.offsetHeight
};
}

window.drawtype1 = function() {
var div1 = document.getElementById('cooperation');
var div2 = document.getElementById('competition');
connect(div1, div2, "#000",2,1);

}

window.drawtype2 = function() {
var div2 = document.getElementById('competition');
var div3 = document.getElementById('independent');
connect(div2, div3, "#000",2,2);
}

window.drawtype3= function() {
var div1 = document.getElementById('cooperation');
var div3 = document.getElementById('independent');
connect(div1, div3, "#000",2,3);
}

$(window).resize(function () {

drawtype1();
drawtype2();
drawtype3();
})

window.addEventListener("load", function(){

drawtype1();
drawtype2();
drawtype3();
})

</script>


{{ if player.id_in_group == 1 }}


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

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

        $('#competition').css('color', 'blue');
        $('#competition').css('border-style', 'solid');

})
</script>
     
{{endif}}

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

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

        $('#cooperation').css('color', 'blue');
        $('#cooperation').css('border-style', 'solid');

})
</script>
     
{{endif}}

{{ if group.modep1 == "Independent" }}

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

        $('#independent').css('color', 'blue');
        $('#independent').css('border-style', 'solid');

})
</script>
     
{{endif}}


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

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

        $('#competition').css('color', 'orange');
        $('#competition').css('border-style', 'solid');

})
</script>
     
{{endif}}

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

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

        $('#cooperation').css('color', 'orange');
        $('#cooperation').css('border-style', 'solid');

})
</script>
     
{{endif}}

{{ if group.modep2 == "Independent" }}

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

        $('#independent').css('color', 'orange');
        $('#independent').css('border-style', 'solid');

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



{{ if player.id_in_group == 2 }}


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

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

        $('#competition').css('color', 'orange');
        $('#competition').css('border-style', 'solid');

})
</script>
     
{{endif}}

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

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

        $('#cooperation').css('color', 'orange');
        $('#cooperation').css('border-style', 'solid');

})
</script>
     
{{endif}}

{{ if group.modep1 == "Independent" }}

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

        $('#independent').css('color', 'orange');
        $('#independent').css('border-style', 'solid');

})
</script>
     
{{endif}}


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

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

        $('#competition').css('color', 'blue');
        $('#competition').css('border-style', 'solid');

})
</script>
     
{{endif}}

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

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

        $('#cooperation').css('color', 'blue');
        $('#cooperation').css('border-style', 'solid');

})
</script>
     
{{endif}}

{{ if group.modep2 == "Independent" }}

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

        $('#independent').css('color', 'blue');
        $('#independent').css('border-style', 'solid');

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










{{ if group.modep2 == group.modep1 }}

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

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

        $('#competition').css('color', 'orange');
        $('#competition').css('border-style', 'solid');

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

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

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

    $('#cooperation').css('color', 'orange');
        $('#cooperation').css('border-style', 'solid');

        $("#cooperation").css({'outline-style': 'solid',
    'outline-color': 'blue'
});

})
</script>
     
{{endif}}

{{ if group.modep2 == "Independent" }}

<script>
window.addEventListener("load", function(){
    $('#independent').css('color', 'orange');
        $('#independent').css('border-style', 'solid');

        $("#independent").css({'outline-style': 'solid',
    'outline-color': 'blue'
});

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



<script>


    window.onload = () => {

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



}

</script>




{{ endblock }}