{{ 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> <!--  style="float:right; margin-right: 10px;" set this in JS -->
    {{ endif }}
</div>
<div id="boxrow">
</div>


<div id="bidwrapperabs">

    <center>
        <span id="boxinstructiontext">Touch and swipe left/right</span>
        <span id="rejectaccept">&nbsp;</span>
    </center>
    <div id="biddivabs">
        <div id="bid">
            <center>
                <span style="font-size: 60px">?</span><br>
            </center>
        </div>
    </div>
</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 -->
<span id="id_y" hidden></span> <!-- time -->
<span id="id_x" hidden></span>        <!-- scroll -->

<!-- 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>
document.body.style.background = '#91D8FF';

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

if (js_vars.roundnum >= 3) {
	document.getElementById('boxinstructiontext').innerHTML = '';
}

// 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";
        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();
    }
	
  	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";
            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("biddivabs");
//divi.style.top = 200 + "px"; // keep this commented off!
divi.style.left = "25%";

// make the DIV element draggagle
dragElement(divi);

function dragElement(elmnt) {
    var pos1 = 0, pos3 = 0;
    elmnt.onpointerdown = dragMouseDown;

  	var currentleft = 0;
  	var startleft = 0;
  
    function dragMouseDown(e) {
        document.getElementById('boxinstructiontext').innerHTML = '';
      	// if element is only clicked, make sure that startleft still gets nonzero value
        if (document.getElementById("startleft").innerHTML == 0) { 
            startleft = (elmnt.offsetLeft);
            document.getElementById("startleft").innerHTML = startleft;
        }
        var dt = new Date();
		document.getElementById('touchtimes').innerHTML += dt.getTime() + ','; // this is a list of timestamps that indicate when the box is touched
		document.getElementById('starttime').innerHTML = dt.getTime(); // this is needed for liveSend
        document.getElementById("id_x").innerHTML = ""; // clear
        document.getElementById("id_y").innerHTML = ""; // clear

      	e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;

        /* only show the bid value when the element is touched */
      	document.getElementById("bid").style.visibility = "visible";
		//document.getElementById("boxrow").style.visibility = "visible";

      	document.onpointerup = closeDragElement;
        document.onpointermove = elementDrag;

    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos3 = e.clientX;

      	// set the element's new position:
      	currentleft = (elmnt.offsetLeft - pos1);
      	document.getElementById("id_x").innerHTML += currentleft + ',';
		var d = new Date();
      	document.getElementById("id_y").innerHTML += d.getTime() - document.getElementById("starttime").innerHTML + ','; // this is the list of time as the y-coordinate

        elmnt.style.left = currentleft + "px";
      	document.getElementById("currentleft").innerHTML = currentleft;

      	if (document.getElementById("startleft").innerHTML == 0) { 
          	startleft = (elmnt.offsetLeft - pos1);
        	document.getElementById("startleft").innerHTML = startleft;
        }

		/* this means deliberation i.e. not showing the accept/reject text */
      	const deliberationthreshold = 30;
      	if (currentleft - startleft > deliberationthreshold) {
			document.getElementById("rejectaccept").style.visibility = "visible";
			// document.getElementById("rejectaccept").style.color = "green";
			document.getElementById("rejectaccept").innerHTML = "stop";
        }
        if ((currentleft - startleft < deliberationthreshold) && (currentleft - startleft > 0)) {
			document.getElementById("rejectaccept").style.visibility = "hidden";
        }
        if (currentleft - startleft < -deliberationthreshold) {
			document.getElementById("rejectaccept").style.visibility = "visible";
			// document.getElementById("rejectaccept").style.color = "red";
			document.getElementById("rejectaccept").innerHTML = "open";
        }
      	if ((currentleft - startleft > -deliberationthreshold) && (currentleft - startleft < 0)) {
			document.getElementById("rejectaccept").style.visibility = "hidden";
        }

      	/* this means that choice is already made and there is no turning back */
      	if (currentleft - startleft > 150) { // stop opening cards
            document.getElementById("id_stopped").value = 1;
			document.onpointermove = throwDragElement; /* when the choice is made, hide the element */
	        document.onpointerup = throwDragElement;
          
          	d = new Date();
          	let sd = document.getElementById('starttime').innerHTML;
            liveSend({'opened': 0,
                      'time': d.getTime(), 
                      'starttime': sd,
                      'x': document.getElementById('id_x').innerHTML,
                      'y': document.getElementById('id_y').innerHTML,
                      'startleft': document.getElementById('startleft').innerHTML,
          			  'touchtimes': document.getElementById('touchtimes').innerHTML});
			document.getElementById('touchtimes').innerHTML = ''; // clear touchtimes

          	setTimeout(function(){
	          	document.getElementById("form").submit();
			}, 1000); 
        }

      	if (currentleft - startleft < -150) {
          	// this means that a box is opened
          	d = new Date();
          	let sd = document.getElementById('starttime').innerHTML;
            liveSend({'opened': 1, 
                      'time': d.getTime(), 
                      'starttime': sd,
                      'x': document.getElementById('id_x').innerHTML,
                      'y': document.getElementById('id_y').innerHTML,
                      'startleft': document.getElementById('startleft').innerHTML,
          			  'touchtimes': document.getElementById('touchtimes').innerHTML});
			document.getElementById('touchtimes').innerHTML = ''; // clear touchtimes

          	document.getElementById("rejectaccept").style.visibility = "hidden";
            document.getElementById("bid").style.visibility = "hidden";
            //document.getElementById("boxrow").style.visibility = "hidden";
            document.onpointerup = null;
            document.onpointermove = null;

          	// the box is first hidden (thrown) and then after timeout returned back to center
            elmnt.style.visibility = "hidden";
          	setTimeout(function(){
                elmnt.style.visibility = "visible";
            	elmnt.style.left = document.getElementById("startleft").innerHTML + "px";
			}, 1000); 
        }

    }
  
  	function closeDragElement() {
      	/* stop moving when mouse button is released and return to start position */
        document.onpointerup = null;
        document.onpointermove = null;
        document.getElementById("rejectaccept").style.visibility = "hidden";
        /* only show the bid value when the element is touched */
      	document.getElementById("bid").style.visibility = "hidden";
      	//document.getElementById("boxrow").style.visibility = "hidden";
      
      	elmnt.style.left = document.getElementById("startleft").innerHTML + "px";
    }

  	function throwDragElement() {
      	/* when a choice is made, throw the drag element off screen into the direction of the swipe */
        elmnt.style.visibility = "hidden";
        document.getElementById("rejectaccept").style.visibility = "hidden";
      	document.getElementById("bid").style.visibility = "hidden";

    }



}

</script>
{{ endblock }}