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



<div class="prevent" >

<div class=prevent_all>

<p>
    Please use Your personal Computer and set the window to maximum size!
</p>

</div>

</div>

<div class='allow'>

</div>
    {{ formfields }}
   
    <div class="modal fade" id="onload" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <!-- Add this line to your code -->
        <div class="modal-dialog">
            <div class="modal-content">
               
                <div class="modal-body">
    
    
                
                </div>
               
            </div>
        </div>
    </div>



 <div class="mycontainer">
        <div class="title"> 
            <div class="title_right"> <p> <b> Island Selection </b> </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">
                  <a href="#"   onClick = "cooperationMode()">    <img id="cooperation"  src="/static/display_image/co.png">  </a>
                   {{if player.round_number == 1}} 
                  <p class="cooperationP">{{player.cooperationScore}}</p>
                  {{else}}
                  <p class="cooperationP">{{group.cooperationScore}}</p>
                  {{endif}}

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

                 
                </div>

                  <div class="imgDiv">
                  <a href="#" onClick = "independentMode()">  <img id="independent" src="/static/display_image/ind.png"> </a>
                  {{if player.round_number == 1}} 
                  <p class="independenPt">{{player.independentScore}}</p>
                  {{else}}
                  <p class="independenpt" >{{group.independentScore}}</p>
                  {{endif}}
               
                </div>

                </div>

            </div>
        </div>

</div>



    <style>
.prevent{
    
width: 100%;
height: 100vh;
background-color: black;
}

.prevent_all{

    margin: auto;
    width: 75%;
    padding: 10px;
    font-size: 20px;
    line-height: 3;  
      color: white;
    padding-top: 80px;
    text-align: center;
}
.mycontainer{
    width: 100%;
    height: 99.06vh;
 border: 3px solid black;
    background-color:aliceblue;
    border-bottom: 3px solid black;
}

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

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

}

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

.middle_right{
    width: 84%;
    height:78vh;
    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;
    border-style: solid;
}
.imgDiv{
    width: 33%;
text-align: center;

float: left;

}


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

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

.middle_right a{

    color: black;
}

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


.middle_right a:hover{

    color: red;
}

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



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

}
/* .cooperationP{
    margin-left: -60px;

}
.independenPt{
    margin-left: -60px;

} */


.middle_right a{

    color: black;
}

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


.middle_right a:hover{

    color: red;
}

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

#independent{
    width: 85%;
    height: auto;
   
    margin-left:0vh;
    margin-top: 10vh;
    border-style: solid;
}

.middle_right a{

    color: black;
}

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


.middle_right a:hover{

    color: red;
}

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

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

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

@media (max-width:950px) or ((orientation: landscape) and (max-height:550px))  {
    body{
        overflow: hidden;
    }
    .otree-body {
    padding: 0;
    max-width: calc(100vw);
    max-height: calc(100vh );
}
    .allow {
       display:none;
    }
    .prevent{
        display:block;

    }
    .ptype1 , .ptype2 , .ptype3 {
       display:none;
    }
    .type1 , .type2 , .type3 {
       display:none;
    }
}

    @media (min-width:950px) {
    .otree-body{
    padding: 0;
    max-width: calc(100vw - 375px);
    max-height: calc(100vh - 60px);
}
.prevent{
        display:none;

    }
    .allow {
       display:block;
    }
 }

</style>

<script>

    start_time=0
	end_time=0
	spent_time=0

	window.addEventListener("load", function(){
	  start_time =  Number(new Date())

	})


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= "<span class='ptype1' style='color:" + color + "; position:absolute; left:" + (x1 + x2) / 1.96+ "px; top:" + ((y1 + y2) / 2.05) + "px;</span>";

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= "<span class='ptype2' style='color:" + color + "; position:absolute; left:" + (x1 + x2) / 2+ "px; top:" + (y1 + y2) / 2 + "px;</span>";

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= "<span class='ptype3' style='color:" + color + "; position:absolute ; left:" + (x1 + x2) / 2+ "px; top:" + (y1 + y2) / 2 + "px;</span>";

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



    function competitionMode() {
    document.getElementById("id_mode-0").checked = true;
    document.getElementById("id_modeflag-1").checked = true;
    end_time =  Number(new Date())
spent_time=(end_time -start_time)/1000
document.getElementById('id_actualTime').value =spent_time;
    document.getElementById('form').submit();

   }
    function cooperationMode() {
    document.getElementById("id_mode-1").checked = true;
    document.getElementById("id_modeflag-1").checked = true;
end_time =  Number(new Date())
spent_time=(end_time -start_time)/1000
document.getElementById('id_actualTime').value =spent_time;
    document.getElementById('form').submit();


   }

   function independentMode() {
    document.getElementById("id_mode-2").checked = true;
    document.getElementById("id_modeflag-1").checked = true;
document.getElementById('id_actualTime').value =spent_time;
    document.getElementById('form').submit();

   }
   
  

$(window).resize(function () {


    
    if ((matchMedia('only screen and (min-width: 950px)').matches) 
     || ((window.matchMedia("(orientation: landscape)").matches)
      && (matchMedia('only screen and (min-height: 550px)').matches)))
     {

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



})

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


    if ((matchMedia('only screen and (min-width: 950px)').matches) 
     || ((window.matchMedia("(orientation: landscape)").matches)
      && (matchMedia('only screen and (min-height: 550px)').matches)))
     {


    document.getElementsByClassName('mb-3 _formfield')[0].style.display = 'none';
document.getElementsByClassName('mb-3 _formfield')[1].style.display = 'none';
document.getElementsByClassName('mb-3 _formfield')[2].style.display = 'none';


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


</script>

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

<script>
window.addEventListener("load", function(){
  
    if ((matchMedia('only screen and (min-width: 950px)').matches) 
     || ((window.matchMedia("(orientation: landscape)").matches)
      && (matchMedia('only screen and (min-height: 550px)').matches)))
     {


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

function timer()
{

    clearInterval(counter);
    random_selection= Math.floor(Math.random() * 3);

    document.getElementById("id_mode-"+random_selection+"").checked = true;

    document.getElementById("id_modeflag-0").checked = true;

       
if (random_selection ==0){

document.querySelector('.modal-body').insertAdjacentHTML(
'afterbegin',
` <p> You Didn't select your game mode so we Randomly selected  <strong> Competition </strong> mode for you </p>`      
)
}
else if (random_selection ==1){
document.querySelector('.modal-body').insertAdjacentHTML(
'afterbegin',
` <p> You Didn't select your game mode so we Randomly selected  <strong> Cooperation </strong> mode for you </p>`      
)
}

else{
document.querySelector('.modal-body').insertAdjacentHTML(
'afterbegin',
` <p> You Didn't select your game mode so we Randomly selected  <strong> Independent </strong> mode for you </p>`      
)
} 

$('#onload').modal({backdrop: 'static', keyboard: false})  

  $('#onload').modal('show');



setTimeout(function() {

 
    $("#onload").modal("hide");
    document.getElementById('form').submit();

}, {{C.t}});

     
}





})
</script>

{{else}}

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

    if ((matchMedia('only screen and (min-width: 950px)').matches)
     || ((window.matchMedia("(orientation: landscape)").matches)
      && (matchMedia('only screen and (min-height: 550px)').matches)))
     {


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

function timer()
{

    clearInterval(counter);
    random_selection= Math.floor(Math.random() * 3);

    document.getElementById("id_mode-"+random_selection+"").checked = true;

    document.getElementById("id_modeflag-0").checked = true;


if (random_selection ==0){

document.querySelector('.modal-body').insertAdjacentHTML(
'afterbegin',
` <p> You Didn't select your game mode so we Randomly selected  <strong> Competition </strong> mode for you </p>`
)
}
else if (random_selection ==1){
document.querySelector('.modal-body').insertAdjacentHTML(
'afterbegin',
` <p> You Didn't select your game mode so we Randomly selected  <strong> Cooperation </strong> mode for you </p>`
)
}

else{
document.querySelector('.modal-body').insertAdjacentHTML(
'afterbegin',
` <p> You Didn't select your game mode so we Randomly selected  <strong> Independent </strong> mode for you </p>`
)
}

$('#onload').modal({backdrop: 'static', keyboard: false})

  $('#onload').modal('show');



setTimeout(function() {


    $("#onload").modal("hide");
    document.getElementById('form').submit();

}, {{C.t}});


}





})
</script>

{{endif}}

{{ endblock }}