{% 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>

    {{ if costly}}
    <div class="row mb-2 mt-3">
        <div class="col text-center">
            <div id="decoloringCostInfo"> 
            </div>
        </div>
    </div>
    {{ endif }}

    <div class="row mt-2" id="remainingRounds">
        <div class="col pl-3 pr-1">
            <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> 

                {{if costly}}
                Instructing the computer to use 
                a numbered ball 
                costs {{costPerBall}}. White and black balls are free.
                {{ endif }}
            </div>
        </div>

        <div class="col-md-6 pl-3 pr-1">
            <div class="card h-100 card-body">
                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>

    </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> <span id="costlyDecoloring"></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/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")) {
        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"  }.
            `
        }
    }

    // Count numbered balls along current path
    let costlyCount = 0
    if (js_vars.costly) {
         let stop = false
         for (const [index, pathStop] of js_vars.continuationDec.entries()) {
             if (pathStop < 100 && pathStop > 0 && !stop) {
                 costlyCount = costlyCount + 1
             }

             if (js_vars.cardOutcome[index] == "Stop") {
                 stop = true
             }
         }
     }

     let totalCosts = (js_vars.costPerBall * costlyCount).toFixed(2)
     if (costlyCount > 0) {
        let plural = (costlyCount > 1) ? "balls" : "ball"
        document.getElementById("decoloringCostInfo").innerHTML = `
             You instructed the computer to use ${costlyCount} numbered ${plural} along
             your path, costing you £${totalCosts}.
             </br>
             `

         document.getElementById("costlyDecoloring").innerHTML = `
          less the cost for using numbered balls of £${totalCosts}, 
         `
     }

    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]}
        costly = {js_vars.costly}
        decoloringCosts = {totalCosts}
    />, 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")

        // Count numbered balls along current path
        let costlyCount = 0
         if (js_vars.costly) {
             let stop = false
             for (const [index, pathStop] of continuationDec.entries()) {
                 if (pathStop < 100 && pathStop > 0 && !stop) {
                     costlyCount = costlyCount + 1
                 }

                 if (index == stopRound) {
                     stop = true
                 }
             }
         }

         let totalCosts = (js_vars.costPerBall * costlyCount).toFixed(2)
         if (costlyCount > 0) {
             let plural = (costlyCount > 1) ? "balls" : "ball"
             document.getElementById("decoloringCostInfo").innerHTML = `
                 You instructed the computer to use ${costlyCount} numbered ${plural} along
                 your path, costing you £${totalCosts}.
                 </br>
                 `
         }
        
        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}
                costly = {js_vars.costly}
                decoloringCosts = {totalCosts}
            />, 
            document.querySelector('.time-consistency'))

        
        if (cardOutcome.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 %}