{{ extends "global/Page.html" }}
{{ block title }} {{ endblock }}

{{ block content }}


<!-- these divs have position: absolute
     so there is space for five rows of boxes -->

<div id="roundinfo">
    {{ if icons == 'smileys' }}
        <!-- {{ player.round_number }}/{{ C.NUM_ROUNDS }} &nbsp; &nbsp; -->
        Gains:&nbsp;<span id="gaintally">0</span>&nbsp;pts 
        &nbsp; &nbsp;
        <span id="howmanylosscards"></span> <!-- set this in JS -->
    {{ else }}
        <span id="howmanylosscards"></span> <!-- set this in JS style="float:right; margin-right: 10px;" -->
    {{ endif }}
</div>
<div id="boxrow">
</div>

<div id="bidwrapperabs"> <!-- float-parent-element -->
    <div id="float-child-element">
        <div id="red"><button id="leftbutton" type="button" class="choicebutton">Open</button></div>
    </div>
    <div id="float-child-element">
        <div id="yellow"><button id="rightbutton" type="button" class="choicebutton">Stop</button></div>
    </div>
</div>

<span id="starttime" hidden></span>

<!-- the only value sent with form is boolean indicating if the round ends into stopping or not (into opening a loss card) -->
<input type="hidden" name="stopped" id="id_stopped">


{{ endblock }}

{{ block scripts }}
<script>
if (js_vars.icons != 'smileys') {
	document.body.style.background = '#91D8FF';
}

document.getElementById("boxrow").style.visibility = "visible"; // always show 

// change otree container class padding to zero for this page only
var elems = document.getElementsByClassName('container');
Array.prototype.filter.call(elems, function(testElement){
    testElement.style.padding = "0px" 
});

// create the required amount of boxes that are opened, current, or unopened
const element = document.getElementById("boxrow"); // attach to the div that displays the opened boxes in a row
while (element.firstChild) {
    element.removeChild(element.firstChild);
}
for (let i = 0; i < js_vars.boxes; i++) { // js_vars.boxes is the value of C.BOXES
    const para = document.createElement("span");
    if (i < js_vars.openedcards) { // js_vars.openedcards is only created for the purpose of this initial display
        para.className = "box";
        var node;
        // https://www.fileformat.info/info/unicode/char/1f600/index.htm 
        if (js_vars.icons == 'smileys') {
            node = document.createTextNode('\uD83D\uDE00'); // grin face
        } else {
            node = document.createTextNode('\uD83C\uDF66'); // ice cream
        }
        para.appendChild(node);
    } else if (i == js_vars.openedcards) { 
        para.className = "currentbox_none";
        const node = document.createTextNode('');
        para.appendChild(node);
    } else {
        para.className = "box";
        const node = document.createTextNode('?');
        para.appendChild(node);
    }

    element.appendChild(para);

}

function liveRecv(data) { // this function receives the live message from server to create opened boxes
    setTimeout(function(){
        document.getElementById("leftbutton").style.opacity = "1";
        document.getElementById("rightbutton").style.opacity = "1";
	 	document.getElementById("leftbutton").disabled = false;
    }, 1000);

    let d = new Date();
    document.getElementById('starttime').innerHTML = d.getTime(); // this is needed for liveSend
  	// data.chosencard should indicate the current number of cards that are opened
  	if (data.openedcards == js_vars.firstlosscard)  {
        document.getElementById("id_stopped").value = 0;
      	document.getElementById("form").submit();
    }
	
  	if (js_vars.icons == 'smileys') {
	    document.getElementById("gaintally").innerHTML = data.openedcards * js_vars.gainvalue;
    }

    // create the required amount of boxes that are opened, current, or unopened
    const element = document.getElementById("boxrow"); // attach to the div that displays the opened boxes in a row
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
    for (let i = 0; i < js_vars.boxes; i++) { // js_vars.boxes is the value of C.BOXES
        const para = document.createElement("span");
        para.className = "box";
        var node;

        if (i < data.openedcards) {
            if (i == js_vars.firstlosscard - 1)  { // if the opened card is a loss card, do not insert a grin face
              // https://www.fileformat.info/info/unicode/char/1f600/index.htm 
              node = document.createTextNode('?');  
              
          	} else {

              if (js_vars.icons == 'smileys') {
                  node = document.createTextNode('\uD83D\uDE00'); // grin face
              } else {
                  node = document.createTextNode('\uD83C\uDF66'); // ice cream
              }
              
	          para.appendChild(node);
			}

        } else if (i == data.openedcards) { 
            para.className = "currentbox_none";
            const node = document.createTextNode('');
            para.appendChild(node);
        } else {
            para.className = "box";
            const node = document.createTextNode('?');
            para.appendChild(node);
        }

      	element.appendChild(para);

    }
}



// these are the round information displayed at the top
if (js_vars.icons == 'smileys') {
	document.getElementById('howmanylosscards').innerHTML = 'Loss&nbsp;boxes:&nbsp;' + js_vars.losscards;
} else {
	if (js_vars.losscards == 1) {
	  	document.getElementById('howmanylosscards').innerHTML = '\uD83D\uDC26';
    } else if (js_vars.losscards == 2) {
	  	document.getElementById('howmanylosscards').innerHTML = '\uD83D\uDC26 \uD83D\uDC26';
    } else {
	  	document.getElementById('howmanylosscards').innerHTML = '\uD83D\uDC26 \uD83D\uDC26 \uD83D\uDC26';
    }
}

document.getElementsByTagName("body")[0].style.position = "fixed";
document.getElementsByTagName("html")[0].style.position = "fixed";

// in this app the button press activates the live method
let d = new Date();
document.getElementById('starttime').innerHTML = d.getTime(); // this is needed for liveSend

// OPEN
let leftbutton = document.getElementById("leftbutton");
leftbutton.addEventListener("click", function() {
 	document.getElementById("leftbutton").style.opacity = ".8";
 	document.getElementById("leftbutton").disabled = true; 
  	let d = new Date();
  	let sd = document.getElementById('starttime').innerHTML;
    liveSend({'opened': 1, 
            'time': d.getTime(), 
            'starttime': sd});
});

// STOP
let rightbutton = document.getElementById("rightbutton");
rightbutton.addEventListener("click", function() {
    document.getElementById("id_stopped").value = 1;
 	document.getElementById("rightbutton").style.opacity = ".8";
    let d = new Date();
    let sd = document.getElementById('starttime').innerHTML;
	setTimeout(function(){
	    liveSend({'opened': 0,
    		'time': d.getTime(), 
          	'starttime': sd});
    	document.getElementById("form").submit();
  	}, 1000); 
});





</script>
{{ endblock }}