{{ block title }}{{ endblock }}
{{ block content }}
<link rel="stylesheet" href="{{ static 'matrix_game/matrix.css' }}?v=48">
<style>
body { background:white; font-size:20px; }
.task-screen {
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:white;
}
.task-heading {
    position:absolute;
    top:calc(50% - 290px);
    left:0;
    right:0;
    margin:0;
    text-align:center;
}
</style>

<input type="hidden" name="chosen_side" id="chosen_side">
<input type="hidden" name="rt" id="id_rt">

<div id="taskScreen" class="task-screen">
    <h3 class="task-heading">Which option do you choose?</h3>
    <div id="taskMatrix">{{ include "matrix_game/MatrixMatrix.html" }}</div>
</div>

<script>
const dilemmaForm = document.querySelector('form');
const chosenSide = document.getElementById('chosen_side');
const rtInput = document.getElementById('id_rt');
let trialStart;
let trialActive = false;
let submitted = false;

function recordChoice(side) {
    if (!trialActive || submitted) return;
    trialActive = false;
    chosenSide.value = side;
    rtInput.value = ((performance.now() - trialStart) / 1000).toFixed(6);
    submitted = true;
    const selector = side === 'Left' ? '.choice-left' : '.choice-right';
    document.querySelector('#taskMatrix ' + selector).classList.add('selected');
    window.setTimeout(function () {
        dilemmaForm.requestSubmit();
    }, 500);
}

document.addEventListener('keydown', function (event) {
    if (event.repeat) return;
    const key = event.key.toLowerCase();
    if (trialActive && key === 'f') {
        event.preventDefault();
        recordChoice('Left');
    } else if (trialActive && key === 'j') {
        event.preventDefault();
        recordChoice('Right');
    }
});

window.addEventListener('DOMContentLoaded', function () {
    window.requestAnimationFrame(function () {
        window.requestAnimationFrame(function () {
            trialStart = performance.now();
            trialActive = true;
        });
    });
});
</script>
{{ endblock }}