{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Practice round
{% endblock %}

{% block content %}
<!--Header-->
<div class="row my-3 bg-light px-3 py-3 rounded border">
<div class="col">
    
    <!--REACT component-->
    <div class="time-consistency"></div>

    <div class="row" id="remainingRounds">
        <div class="col pl-3 pr-1">
            </br>
            <div id="risksToTake" class="alert alert-info d-none">
            </div>
            <div id="moreRisks" class="alert alert-warning collapse">
                Although your bonus would be determined now, 
                you must <i>always</i> resolve five single risks during each Walking Task.
                Thus, you cannot complete 
                a Walking Task faster by instructing the computer to stop risk-taking early.  
                You will not see the outcome of the single risks once the bonus ball is determined.
            </div>
        </div>
    </div>

    <div id="task" class="row" style="margin:0;">
        <div class="col alert alert-warning">
            Please instruct the computer to continue or stop 
            risk-taking at the pulsing ball, and proceed 
            with coin tosses as request.
        </div>
    </div>

    </br>

    <div class="row px-3 py-3 d-none" id="nextScreen">
        <div class="col alert alert-info">
                    If a Walking Task is your bonus task, 
                    your bonus equals the accumulated
                    earnings at the bonus ball, plus your endowment.
                    <div id="fiveRisks" class="d-none">
                        </br>
                        <p>
                            Although the bonus ball determines your bonus,  
                            you must <i>always</i> resolve five single risks during the Walking Tasks.
                            Thus, you cannot complete 
                            a Walking Task faster by instructing the computer to stop risk-taking early.  
                            You will not see the outcome of the single risks once the bonus ball is determined.
                            Resolving risks after the bonus ball is determined
                            does not affect your bonus. 
                        </p>
                    </div>     
        </div>
    </div>


    <div class="row">
        <div class="col">
            <button class="btn btn-primary mt-2 d-none" id="confirm_btn">
                Start the Walking Tasks
            </button>
        </div>
    </div>

</div>

</div>

{% if testing %}
    <button class="btn btn-secondary btn-block" id="skipBtn" onclick="skip()">
        Skip for testing
    </button>
{% endif %}



<!--Load React Components-->
<script type="text/babel" src="{% static 'js/basicWalking.js' %}"></script>
<script type="text/babel" src="{% static 'js/ballTriangle.js' %}"></script>
<script type="text/babel" src="{% static 'js/coinToss.js' %}"></script>


<script type="text/babel">
    // Change continuation strat for plotting
    const stopRound = js_vars.continuationDec.indexOf("Stop")
    let plotStopStrategy = js_vars.stopStrategy.continuation
    for (let i=0; i<= js_vars.roundNumber; i++){
        if (js_vars.continuationDec[i] <= 100){
            let node = js_vars.path[i]
            if ( stopRound == -1 || i <= stopRound) {
                plotStopStrategy[node] = js_vars.continuationDec[i]
            }
        } 
    }

    ReactDOM.render(<WalkingTask
        roundNumber = {js_vars.roundNumber}
        drawn = {js_vars.path}
        continuationDec = {js_vars.continuationDec}
        endowment = {js_vars.endowment}
        initialColor = {js_vars.initialColor}
        practiceRound = {true}
    />, document.querySelector('.time-consistency'))

    if (js_vars.continuationDec.includes("Stop")) {

        document.getElementById("risksToTake").innerHTML = `
            Please resolve ${5 - js_vars.roundNumber} more single
            ${ (5 - js_vars.roundNumber == 1) ? " risk" : " risks"  }.
        `
        }

    function liveRecv(data) {
        let {
            type, 
            roundNumber, 
            path, 
            continuationDec,
            imagePathGuess,
            imagePathOutcome,
        } = data;

        // Change continuation strategy due to dynamic inconsistency
        const stopRound = continuationDec.indexOf("Stop")
        
        let plotStopStrategy = js_vars.stopStrategy.continuation
        for (let i=0; i<= roundNumber; i++){
            if (continuationDec[i] <= 100){
                let node = path[i]
                if (stopRound == -1 || i <= stopRound) {
                    plotStopStrategy[node] = continuationDec[i]
                }
            } 
        }

        let key = roundNumber
        
        if (type == "nodeChoice") {
            key = roundNumber + Math.random();
        } 

        ReactDOM.render(
            <WalkingTask
                key = {key}
                type = {type} 
                roundNumber = {roundNumber}
                drawn = {path}    
                continuationDec = {continuationDec}
                imagePathGuess = {imagePathGuess}
                imagePathOutcome = {imagePathOutcome}      
                endowment = {js_vars.endowment}  
                practiceRound = {true}
            />, 
            document.querySelector('.time-consistency'))

        
        if (continuationDec.includes("Stop")) {

            document.getElementById("risksToTake").innerHTML = `
                Please resolve ${5 - roundNumber} more single
                ${ (5 - roundNumber == 1) ? " risk" : " risks"  }.
            `
        }

    }

    function skip(){
        liveSend({
            'type': "skip", 
            'value': "skip"
            })
    }



</script>

<style>
    table.table-bordered {
        border: 1px solid black;
        margin-top: 20px;
    }

    table.table-bordered>thead>tr>th {
        border: 1px solid black;
    }

    table.table-bordered>tbody>tr>td {
        border: 1px solid black;
    }
</style>
              
              
             
{% endblock %}