{{ block content }}

<div class="container">
    <div class="card">
        <h4 class="card-header">
            Please wait: We are trying to find a group for you!
        </h4>
        <div class="card-body">
            <p> Click the button below to signal you are 'active'. The button appears every 20 seconds.
                <br>Only when you are 'active', you can be grouped and proceed to the game.
                <br> Whenever you can see the button, we assume you are inactive.
            </p>
            <p>
                <div id="activity-check">
                    <button type="button" id="activity-button" style="border-radius: 5px; background-color: #0d6efd; border-color: #0d6efd; color: white;">Click Me!</button>
                </div>
            </p>
            <p>
                For every time you click the button, you receive $0.05 in earnings.
                <br> If you miss to click the button within 60 seconds of its appearance, you will be excluded from the experiment.
            </p>


            <p>
            <div id="longwait-check" style="display: none;">
                <p id="longwait-info">
                    Test for longwait is updated through JavaFunction
                </p>
                <div>
                <button id="longwait-button" style="border-radius: 5px; background-color: #0d6efd; border-color: #0d6efd; color: white;">
                    Exit Experiment
                </button>
                </div>
            </div>
            </p>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
            </div>
        </div>
    </div>
</div>

<script>
    // (A) Code that processes information from server: 1. Submit form if grouped ; 2. Update info for long wait
    let longwaitCheck= document.getElementById('longwait-check')
    let longwaitButton= document.getElementById('longwait-button')
    let longwaitText = document.getElementById('longwait-info');

    function liveRecv(data) {
        console.log('data', data)
        if (data.finished) {
            document.getElementById("form").submit();
        }
        if (data.long) {
           longwaitCheck.style.display = 'block';
            longwaitText.textContent = `There are currently ${data.eligible} participants aside from you who are either waiting (${data.waiting}) or still answering the quiz (${data.pipeline}).
           \nSince you have actively waited for a while and we could not group you yet, you have the option of exiting the experiment.
           \nIn this case, we will pay you XXX for your time, but you cannot participate in the game.`;
        }
    }


    // (B) Code that sends information to the server/python code:
    // 1. Code for exiting the experiment:
    longwaitButton.addEventListener('click', function() {
        liveSend({'type': 'exit'});
        }
    )

    // 2. Code for the pop-up of of the "Click me" button, and setting participants inactive and excluding them
    let activityButton = document.getElementById('activity-button');
    let activityCheck = document.getElementById('activity-check');
    let isActive = false;
    let inactivityTimer;
    let exclusionTimer;

    // This function is executed after 20 seconds that the Button was clicked and shows the button again
    function showActivityCheck() {
        if (!isActive) {
            activityCheck.style.display = 'block';
            // Send update to the server that participant is passive
            liveSend({'type': 'participant_passive'});
        }
    }

    // This function is executed after 30 seconds to signal python that player is inactive
    function setPlayerInactive(){
            liveSend({'type': 'inactive'});
    }

    function setPlayerExcluded() {
            liveSend({'type': 'excluded'});
            document.getElementById("form").submit();
    }

    // This defined how the button works
    activityButton.addEventListener('click', function() {
        isActive = true;
        activityCheck.style.display = 'none';

        // Send update to the server that participant is active
        liveSend({'type': 'participant_active'});

        // Clear any previous inactivity timer
        clearTimeout(inactivityTimer);
        clearTimeout(exclusionTimer);

        setTimeout(function() {
            isActive = false;
            showActivityCheck();
        }, 20000); // Show the button again after 20 seconds

        inactivityTimer = setTimeout(function () {
            setPlayerInactive();
        }, 30000);  // set player inactive if haven't clicked button for 10 seconds after it appeared

        exclusionTimer = setTimeout(function() {
            setPlayerExcluded();
        }, 60000);
    });

</script>

{{ endblock }}