{{ 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; Loss&nbsp;box:&nbsp;{{ player.roundloss }}&nbsp;pts &nbsp; &nbsp;
        <span id="howmanylosscards"></span> <!-- set this in JS -->
        {{ if roundi < 3 }}<span id="decisioninstrtext"><br>Touch the box and swipe left or right</span>{{ endif }}
    {{ else }}
        <span style="float:left; margin-left: 10px;">Round: {{ player.round_number }}</span>
        <span id="howmanylosscards" style="float:right; margin-right: 10px;"></span> <!-- set this in JS -->
        {{ if roundi < 3 }}<span id="decisioninstrtext"><br>Touch the box and swipe left or right</span>{{ endif }}
    {{ endif }}
</div>
<div id="boxrow_desktop">
</div>

<div id="buttonrow_desktop">
    <center>
        {{ next_button}}
    </center>
</div>


<span id="starttime" hidden></span>
<span id="startleft" hidden>0</span>
<span id="currentleft" hidden>0</span>
<span id="touchtimes" hidden></span>

<!-- instead of inputs, x and y are recorded in span elements and sent with liveSend 
     these need to be emptied whenever touch is released from the box -->
<br>
<span id="id_y" hidden></span>
<span id="id_x" 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>
// 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_desktop"); // 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";
        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
     // 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();
    }

    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_desktop"); // 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 < data.openedcards) {
            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 == data.openedcards) { 
            para.className = "currentbox";
            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";

let divi = document.getElementById("desktop_stopbutton");
//divi.style.top = 200 + "px"; // keep this commented off!
divi.style.left = "25%";

// NO DRAGGING
// CLICKING divi SHOULD SUBMIT THE FORM


const box1 = document.querySelector('#myDiv');

// add a click event listener to the div
box1.addEventListener('click', function() {
	
});



</script>
{{ endblock }}