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

{% block title %}
    Walking Task {{player.round_number}}
{% endblock %}

{% block content %}
<!--Header-->
<div class="row my-3 bg-light px-3 py-3 rounded border">
<div class="col">
    <div class="row">
        <div class="col text-center">
            <strong>
            Your endowment is {{endowment}}.
            </strong>
            <br></br>
        </div>
    </div>

    <!--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>
    </div>

    <div id="riskInfo">
    <hr></hr>

    <div class="row">
        <div class="col-md-6 pl-3 pr-1">
            <div class="card h-100 card-body">
                <table class="mb-2" style="
                    width:70%;
                    align-self:center; 
                    position: relative; 
                    margin: 0 auto;
                    text-align:center;
                    ">
                    <tbody>
                        <tr>
                            <td >
                                If you win the single risk:
                            </td>
                            <td>
                            +{{upTick}}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                If you lose the single risk:
                            </td>
                            <td>
                            -{{upTick}}
                            </td>
                        </tr>
                    </tbody>
                </table> 
            </div>
        </div>

        <div class="col-md-6 pl-3 pr-1">
            <div class="card h-100 card-body">
                Please instruct the computer to continue or stop 
                risk-taking at the pulsing ball, and proceed 
                with coin tosses as requested.
            </div>
        </div>

    </div>
    </div>


    <div class="row mt-2 d-none" id="nextScreen" style="margin:0;">
        <div class="col alert alert-info">
                You have reached the last column of the ball triangle. <br></br> 
                If Walking Task {{player.round_number}} is your bonus task, 
                your bonus will be the accumulated
                earnings of £<span id="finPay1"></span> 
                plus the endowment of {{endowment}}.     
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col">
            <button class="btn btn-primary mt-2 d-none" id="confirm_btn" disabled>
                {{ if player.round_number == 10}}
                    Continue
                {{ else }}
                    Next task
                {{ endif }}
            </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">
    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]
            }
        } 
    }

    if (js_vars.continuationDec.includes("Stop")) {
        if (5 - js_vars.roundNumber == 0) {
            document.getElementById("risksToTake").innerHTML = `
                You completed Walking Task ${js_vars.taskNumber}.
            `
        } else {
            document.getElementById("risksToTake").innerHTML = `
                Please resolve ${5 - js_vars.roundNumber} more single
                ${ (5 - js_vars.roundNumber == 1) ? " risk" : " risks"  }.
            `
        }
    }

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

    
    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}     
                plotStopStrategy = {plotStopStrategy}  
            />, 
            document.querySelector('.time-consistency'))

        
        if (continuationDec.includes("Stop")) {
            if (5 - roundNumber == 0) {
                document.getElementById("risksToTake").innerHTML = `
                    You completed Walking Task ${js_vars.taskNumber}.
                `
            } else {
                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 %}