{% 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 mt-3" id="remainingRounds">
        <div class="col pl-3 pr-1">
            <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 with which probability 
            to stop 
            risk-taking at the pulsing ball, and proceed 
            with card draws and coin tosses as requested.
        </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
            {{ if costly }}
            less the cost for using numbered balls
            {{ endif }}
            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>


    <div class="row">
        <div class="col">
            <button class="btn btn-primary 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">
        Skip for testing
    </button>
{% endif %}



<!--Load React Components-->
<script type="text/babel" src="{% static 'js/randWalking.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" src="{% static 'js/nodeDecision.js' %}"></script>
<script type="text/babel" src="{% static 'js/cardDeck.js' %}"></script>


<script type="text/babel">
    // Time-inconsistency affects displayed stop strategy
    const stopRound = js_vars.cardOutcome.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]
            }
        } 
    }

    const currentNode = js_vars.path[js_vars.roundNumber]
    const currentStopProb = plotStopStrategy[currentNode]

    // Determine the last action to route component correctly
    let type = ""
    if (js_vars.coinTossOutcome[js_vars.roundNumber] != 0) {
        // Coin was tossed
        type = "coin"
    } else if (js_vars.chosenCard[js_vars.roundNumber] >= 0) {
        // Card for this round was submitted
        type = "card"
    } else if (js_vars.continuationDec[js_vars.roundNumber] <=100) {
        // Instruction for current period was submitted
        type = "nodeChoice" 
    } 

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

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

    ReactDOM.render(<WalkingTask
        type = {type}
        roundNumber = {js_vars.roundNumber}
        drawn = {js_vars.path}
        continuationDec = {js_vars.cardOutcome}
        endowment = {js_vars.endowment}
        initialColor = {js_vars.initialColor}
        currentProb = {currentStopProb}
        plotStopStrategy = {plotStopStrategy}
        cardOutcome = {js_vars.cardOutcome}
        previousValue = {js_vars.chosenCard[js_vars.roundNumber]}
        practiceRound = {true}
        costly = {js_vars.costly}
    />, document.querySelector('.time-consistency'))

    // LIVE RECEIVE DATA
    function liveRecv(data) {
        let {
            type, 
            roundNumber, 
            path, 
            continuationDec,
            imagePathGuess,
            imagePathOutcome,
            previousValue,
            cardOutcome,
        } = data;

        const stopRound = cardOutcome.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]
                }
            } 
        }
        
        const currentNode = path[roundNumber]
        const currentStopProb = (continuationDec[roundNumber] <= 100) ? continuationDec[roundNumber] : plotStopStrategy[currentNode]

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

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

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

    }

</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 %}