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

{{ block content }}

<div id="roundinfo">
    {{ if icons == 'smileys' }}
        <!-- {{ player.round_number }}/{{ C.NUM_ROUNDS }} &nbsp; &nbsp; -->
        Gains:&nbsp;{{ gains }}&nbsp;pts &nbsp; &nbsp; Loss&nbsp;box:&nbsp;{{ player.roundloss }}&nbsp;pts &nbsp; &nbsp; Loss&nbsp;boxes:&nbsp;{{ player.roundlosscards }}
    {{ else }}
        <span style="float:left; margin-left: 10px;">Round: {{ player.round_number }}</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.round_number < 3 }}
                This was practice round {{ player.round_number }}.
                {{ if player.round_number == 2 }} The next round will be a real decision round. {{ endif }}
                <br><br>
           {{ endif }}
            {{ if player.endedinloss == 0 }}
                You decided to stop after
                {{ if player.chosencard == 1 }} 1 gain box. 
                {{ else }} {{ player.chosencard }} gain boxes.
                {{ endif }}
                Each gain box was {{ player.roundgain }} points.
                Your gains are {{ gains }} points.
            {{ else }}
                You <span id="redfont">opened a loss box</span>. Before that you managed to open {{ player.chosencard }} gain boxes.
                Each gain box was {{ player.roundgain }} points.
                Your gains are {{ gains }} points and losses {{ player.roundloss }} points.
            {{ endif }}
            </p><p>Therefore your total points for this round are {{ player.profit }}.
            <br>
        {{ else }}
            {{ if player.endedinloss == 0 }}
                {{ if player.chosencard == 0 }}
                    You stopped without collecting any ice creams.
                {{ else }}
                    You collected {{ player.chosencard }} ice creams and managed to avoid the 
                    {{ if player.roundlosscards == 1 }} bird! {{ else }} birds! {{ endif }}
                {{ endif }}
            {{ else }}
                You <span id="redfont">opened a bird box</span>
                {{ if player.chosencard == 0}} before collecting any ice creams. 
                {{ else }} and the bird ate all the ice creams you had collected!
                {{ endif }}
            {{ endif }}
        {{ endif }}
    </p>
    <br>
    {{ if player.round_number == C.NUM_ROUNDS }}
        <p>
            That was the last round.
        </p>
    {{ endif }}
    <center>
        {{ next_button }}
    </center>

    {{ if player.round_number > 1 }}
        <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>Points</th>
                    {{ else }}
                        <th>Round</th><th>Ice creams</th>
                    {{ endif }}
                </tr>
                {{ tabledata }}
            </table>
        </center>
        <br><br>
    {{ endif }}
</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.chosencard) {
        para.className = "box";
    } else {
        para.className = "opaquebox";          
    }
    if (js_vars.endedinloss && (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 && (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 && (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 && (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) {
    var f = document.body;
    f.style.backgroundColor = '#ccb8b8';
    setTimeout(function() {
        f.style.backgroundColor = '';
      	f.style.transitionDuration = '2s';
    }, 500);  
}

</script>
{{ endblock }}