{{ extends "global/GamePage.html" }} 

{{ block scripts }}

<script>
    var lAnswers = [];
    var inputSel

    document.addEventListener("DOMContentLoaded", ()=> { 
        inputSel = document.getElementById('sChoices')
    })

    function removeItemOnce(arr, value) {
        var index = arr.indexOf(value);
        if (index > -1) {
            arr.splice(index, 1);
        }
        return arr;
    }
    function addAnswer(elem) {
        if (lAnswers.includes(elem.id)) {
            console.log(`removed ${elem.id}`);
            elem.classList.remove('selected');
            removeItemOnce(lAnswers,elem.id)
        } else {
            console.log(`added ${elem.id}`);
            elem.classList.add('selected');
            lAnswers.push(elem.id);
        }
    }

    function confirmAnswer() {
        inputSel.value = lAnswers.join('.');
        endTrial();
    }

</script>
{{ endblock }}

{{ block styles }}
<style>
    /* Emotion Game Settings */
    .img-cell {
        height: 10vh;
        width: auto;
    }

    .emotion-table {
        flex-direction: column;        
    }
    .emotion-row {
        flex-direction: row;
    }

    .emotion-btn {
        background-color: rgb(190,190,190);
        border: 2px rgb(190,190,190) solid;
    }

    .selected {
        border: 2px black solid;
    }

</style>
{{ endblock }}


{{ block game }}
<div class="flex-center math-inst">
    <p class="flex-center "> Find all {{ emotion }} faces: </p>
</div>
<div class="flex-center emotion-table" > 
    {{ for row in lContent }}
        <div class="flex-center emotion-row"> 
            {{ with rowCounter=forloop.counter0 }}
            {{ for cell in row }}
                <button type="button" class="flex-center emotion-btn" onclick="addAnswer(this)" value="{{ cell }}" id="b{{ rowCounter }}{{ forloop.counter0 }}">
                    <img class="img-cell" src="{% static cell %}" />
                </button>
            {{ endfor }}
            {{ endwith }}
        </div>
    {{ endfor }}
</div>
<div class="flex-center math-row"> 
    <button type="button" class="continue-btn" onclick="confirmAnswer()"> Confirm </button>
</div>

<input type="hidden" id="sChoices" name="sChoices">

{{ endblock }}