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

{{ block content }}

<div id="roundinfo">
    {{ if icons == 'smileys' }}
        Round: {{ player.block }} &nbsp; &nbsp;
        Gain: {{ player.blockgain }} &nbsp; &nbsp; Loss: {{ player.blockloss }} &nbsp; &nbsp; Loss&nbsp;boxes:&nbsp;{{ player.blocklosscards }}
    {{ else }}
        <span style="float:left; margin-left: 10px;">Round: {{ player.block }}</span>
    {{ endif }}
    <!-- BlockEnd page of the ice cream treatment does not display the birds in round info -->
</div>

<div id="boxrow">
</div>

<div id="blockendinfo">

    <p>
        {{ if icons == 'smileys' }}
            {{ if player.accept == 1 }}
                You decided to stop after {{ player.gaincardsturned }} gain boxes.
            {{ else }}
                You <span id="redfont">opened a loss box</span>.
            {{ endif }}
            </p><p>Your profit for this round is {{ player.profit }}.
            <br>
        {{ else }}
            {{ if player.accept == 1 }}
                {{ if player.round_in_block == 1 }}
                    You stopped without collecting any ice creams.
                {{ else }}
                    You collected {{ player.gaincardsturned }} ice creams and managed to avoid the 
                    {{ if player.blocklosscards == 1 }} bird! {{ else }} birds! {{ endif }}
                {{ endif }}
            {{ else }}
                You <span id="redfont">opened a bird box</span>
                {{ if player.round_in_block == 1}} before collecting any ice creams. 
                {{ else }} and the bird ate all the ice creams you had collected!
                {{ endif }}
            {{ endif }}
        {{ endif }}
    </p>
    <br>
    {{ if player.block == C.NUM_BLOCKS }}
        <p>
            That was the last round.
        </p>
    {{ endif }}
    <center>
        {{ next_button }}
    </center>

    <p>
        See below a summary of each round so far.
    </p>
    <br>

    <center>
        <table width="90%">
            <tr align="center">
                {{ if icons == 'smileys' }}
                    <th>Round</th><th>Gain boxes</th><th>Profit</th>
                {{ else }}
                    <th>Round</th><th>Ice creams</th>
                {{ endif }}
            </tr>
            {{ tabledata }}
        </table>
    </center>

</div>

{{ endblock }}

{{ block scripts }}
<script>
document.getElementById("boxrow").style.visibility = "visible";

// 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 reqired amount of boxes that are all revealed
// in the ice cream app, the bird eats all the ice creams
const losscardlist = js_vars.losscardlist;
for (let i = 0; i < js_vars.boxes; i++) {
    const para = document.createElement("span");
    var node;

    // create opaqueness for unopened boxes
    if (i < js_vars.blockround - 1) {
        para.className = "box";
    } else {
        para.className = "opaquebox";          
    }
    if ((js_vars.endedinloss == 1) && (i + 1 == js_vars.firstlosscard)) {
        para.className = "box";
    }
  
	if (js_vars.icons == 'smileys') { // for the smileys treatment

      	// create the faces
		if (losscardlist.length == 1) {

            if (losscardlist[0] == i+1) {
                node = document.createTextNode('\uD83D\uDE28'); // fearful face
            } else {
                node = document.createTextNode('\uD83D\uDE00'); // grin face
            }

		} else if (losscardlist.length == 2) {

            if (losscardlist[0] == i+1 || losscardlist[1] == i+1) {
                node = document.createTextNode('\uD83D\uDE28'); // fearful face
            } else {
                node = document.createTextNode('\uD83D\uDE00'); // grin face
            }

		} else {

            if (losscardlist[0] == i+1 || losscardlist[1] == i+1 || losscardlist[2] == i+1) {
                node = document.createTextNode('\uD83D\uDE28'); // fearful face
            } else {
                node = document.createTextNode('\uD83D\uDE00'); // grin face
            }

        }

	} else { // for the ice creams & birds treatment 
        // '\uD83D\uDC26'); bird
        // '\uD83C\uDF66'); ice cream

		if (losscardlist.length == 1) {

            if (losscardlist[0] == i+1) {
                node = document.createTextNode('\uD83D\uDC26'); // bird
            } else {
              	if ((js_vars.endedinloss == 1) && (i + 1 < js_vars.firstlosscard)) {
	                node = document.createTextNode(''); // empty (eaten ice cream)
                } else {
	                node = document.createTextNode('\uD83C\uDF66'); // ice cream                  
                }
            }

		} else if (losscardlist.length == 2) {

            if (losscardlist[0] == i+1 || losscardlist[1] == i+1) {
                node = document.createTextNode('\uD83D\uDC26'); // bird
            } else {
              	if ((js_vars.endedinloss == 1) && (i + 1 < js_vars.firstlosscard)) {
	                node = document.createTextNode(''); // empty (eaten ice cream)
                } else {
	                node = document.createTextNode('\uD83C\uDF66'); // ice cream                  
                }
            }

		} else {

            if (losscardlist[0] == i+1 || losscardlist[1] == i+1 || losscardlist[2] == i+1) {
                node = document.createTextNode('\uD83D\uDC26'); // bird
            } else {
              	if ((js_vars.endedinloss == 1) && (i + 1 < js_vars.firstlosscard)) {
	                node = document.createTextNode(''); // empty (eaten ice cream)
                } else {
	                node = document.createTextNode('\uD83C\uDF66'); // ice cream                  
                }
            }

        }

	}
    para.appendChild(node);

  	const element = document.getElementById("boxrow"); // attach to the div that displays the opened boxes in a row
	element.appendChild(para);
}


// if the round ended in loss, flash body
if (js_vars.endedinloss == 1) {
    var f = document.body;
    f.style.backgroundColor = '#ccb8b8';
    setTimeout(function() {
        f.style.backgroundColor = '';
      	f.style.transitionDuration = '2s';
    }, 500);  
}

</script>
{{ endblock }}