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

{% block title %}
    The risk
{% endblock %}

{% block content %}

<div>
    {{ formfield_errors "riskChoice_Instructions" }}
    <input type="hidden" id="riskChoice_Instructions" name="riskChoice_Instructions" value="-9999"></input>
    {{ formfield_errors "riskOutcome_Instructions" }}
    <input type="hidden" id="riskOutcome_Instructions" name="riskOutcome_Instructions" value="-9999"></input>
</div>

<div class="bg-light my-3 px-3 py-3 rounded border">
    <div class="row">
        <div class="col">    
            <p>
                <strong>
                The risk has two outcomes</strong>—one higher and
                one lower amount of money. The chance of obtaining
                each outcome
                varies across the risks in this experiment. 
            </p>                
                
            
            <p>
                <strong>
                    A virtual card game determines the outcome of the risk: 
                </strong>
                100 cards numbered from 1 to 100 are turned around, 
                shuffled, and laid out again.
                You must then select one card.</br>
                If the risk determines your bonus
                and you select
                a <i>winning card</i>,
                you receive the high outcome. 
                You receive the low outcome if
                the risk determines your bonus and you 
                do not select a winning card. 
            </p>

            <p>
                An example of the risk 
                is shown below. Cards 
                1 to <span id="highProb"></span>
                are the winning cards yielding 
                <span id="firstOutcome"></span>. 
                The chance of the high outcome 
                is therefore <span id="highProb2"></span> percent.
                (The risk that may determine your bonus will be different.)
            </p>

            </br>

        </div>
    </div>

    <div class="row justify-content-md-center">
        <div id="riskPicture" class="col-4 riskPicture container" style="width:50%; background-color:white;"></div>
    </div>
    
    <div id="chooseCard" class="row justify-content-md-center d-none">
        <div>
            </br>
        </div>
        <div class="col-4 container" style="width:50%">
            <div class="d-flex alert alert-info justify-content-center">
                Please select one card by clicking on it.
            </div>
        </div>
    </div>
    
    <div id="cardResult" class="row justify-content-md-center d-none">
        <div>
            </br>
        </div>
        <div class="col-4 container" style="width:50%">
            <div id="resultText" class="d-flex alert alert-warning justify-content-center">

            </div>
        </div>
    </div>

    <div id="verifyDesc" class="row d-none">
        <div class="col">
            <div class="alert alert-success">
                <b>Note:</b> For the risk that may determine your bonus, 
                we already committed ourselves to the position of  
                each card. 
                The positions are shown in Verification.pdf.
                By inspecting Verification.pdf at the end of the experiment, 
                you can thus verify that 
                the card game is played fairly, exactly as described.
            </div>
        </div>
    </div>
    

    <button type="button" id="shuffleBtn" class="btn btn-primary mt-2"
        onclick="shuffleCards();"
        >
        Prepare the cards for me 
    </button>

    <button id="next_page_btn" 
        class="btn btn-primary mt-2 d-none"
        >
        Got it. How do I choose between a risk and the safe amount?
    </button>
</div>

{% if testing %}
    {{ formfield 'feedback_option1' }}
{% endif %}

<!--Load React-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!--Load Babel-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

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

<script type="text/babel">
    // Define functions for animation
    window.requestAnimationFrame = window.requestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.msRequestAnimationFrame
    || function(f){return setTimeout(f, 1000/60)} // simulate calling code 60 
 
    window.cancelAnimationFrame = window.cancelAnimationFrame
        || window.mozCancelAnimationFrame
        || function(requestID){clearTimeout(requestID)} //fall back

    const payoffs = js_vars.payoffs
    const probabilities = js_vars.probabilities
    
    document.getElementById("firstOutcome").innerHTML = payoffs[0]
    document.getElementById("highProb").innerHTML = probabilities[0] * 100
    document.getElementById("highProb2").innerHTML = probabilities[0] * 100
    

    ReactDOM.render(
        <CardDeck
            payoffs = {js_vars.payoffs}
            probabilities = {js_vars.probabilities}
            resolution = {false}
        />, document.querySelector('.riskPicture'))

    function shuffleCards(){
        const cards = document.querySelectorAll('.playCard')

        let positions = []

        cards.forEach( card => {
            const left = card.style.left
            const top = card.style.top

            positions.push( [left, top])
        })

        const toMiddle = () => {
                cards.forEach( (card, idx) => {
                    setTimeout(
                        () => {
                            card.style.zIndex = 100-idx;
                            card.style.top = '45%';
                            card.style.left = '45%';
                        }, idx * 10)
                })
        }

        const blackCards = () => {
                cards.forEach( (card) => {
                    card.style.background = "#696969"
                    card.style.color = "transparent"
                } 
                )
            }

        const shuffling = () => {
            // Shuffle positions for 1000 times
            for (let i = 0; i<=1000; i++) {
                
                const rnd1 = Math.floor(Math.random() * 100)
                const rnd2 = Math.floor(Math.random() * 100)

                const tmp = positions[rnd1]

                positions[rnd1] = positions[rnd2]
                positions[rnd2] = tmp
            }
        }

        const cardsToNewPos = () => {
            cards.forEach( (card, idx) => {
                    const newLeft = positions[idx][0]
                    const newTop = positions[idx][1]
                    setTimeout(
                        () => {
                            //card.style.zIndex = 100-idx;
                            card.style.top = newTop;
                            card.style.left = newLeft;
                        }, idx * 4)
                })

        }


        async function sequence () {
            document.getElementById("shuffleBtn").classList.add("d-none");

            await new Promise(
                // move cards to middle 
                (resolve, reject) => {
                    toMiddle()
                    resolve("done")
                }
            )

            await new Promise(resolve => setTimeout(resolve, 1500))

            await new Promise(
                // make card black 
                (resolve, reject) => {
                    blackCards()
                    resolve("done")
                }
            )
            
            await new Promise(
                // Shuffle positions
                (resolve, reject) => {
                    shuffling()
                    resolve("done")
                }
            )

            await new Promise(
                // Move cards back
                (resolve, reject) => {
                    cardsToNewPos()
                    resolve("done")
                }
            )

            cards.forEach(
                (card) => {
                    card.disabled = false;
                    card.setAttribute("onclick","cardClick(this.id);")
                }
            )

            document.getElementById("chooseCard").classList.remove("d-none")
            
        }

        sequence()
    }
    

    function cardClick(id) {
        document.getElementById("chooseCard").classList.add("d-none")
        
        const cardNumber = id.split('_')[1];
        document.getElementById("riskChoice_Instructions").value = parseInt(cardNumber);
        console.log(document.getElementById("riskChoice_Instructions").value);
        console.log(typeof(document.getElementById("riskChoice_Instructions").value));
        const winningProb = probabilities[0] * 100
        let payoffText = ""
        console.log(winningProb)
        if (cardNumber < winningProb) { // Note: Need smaller here because index starts at 0, not at 1
            // High payoff
            payoffText = payoffs[0]
        } else {
            // Low payoff
            payoffText = payoffs[1]
        }
        document.getElementById("riskOutcome_Instructions").value = parseFloat(payoffText.split('£')[1]);
        console.log(document.getElementById("riskOutcome_Instructions").value);

        const cards = document.querySelectorAll('.playCard')

        cards.forEach(
                (card) => {
                    card.disabled = true;
                    card.removeAttribute("onclick")
                })


        const selectedCard = document.getElementById(id)

        selectedCard.style.background = "white"
        selectedCard.style.color = "black"
        selectedCard.style.zIndex = 100
        selectedCard.classList.add("card-grow")
        selectedCard.appendChild(document.createElement('br'));
        selectedCard.appendChild(document.createTextNode(payoffText));


        document.getElementById("cardResult").classList.remove("d-none")
        document.getElementById("resultText").innerHTML = "You selected card " + (parseInt(cardNumber)+1) +
                ". Your bonus would thus be " + payoffText + "."

       // document.getElementById("chooseCard").classList.add("d-none");
        setTimeout(function() {
            openCards(id);
        }, 1100 // time must be slightly longer than animation duration in custom.css
        )

    }
    
    const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms))

    async function openCards(id) {
        const selectedCard = document.getElementById(id)
        selectedCard.style.outline = "medium solid #88B04B"

        const cards = document.querySelectorAll('.playCard')
        
        for (let card of cards) {
            card.style.background = "white"
            card.style.color = "black"
            await wait(5)
        }

        if (js_vars.treatment==0) {
                showVerification()
                //document.getElementById("verifyDesc_btn").classList.remove("d-none");
        } else {
            document.getElementById("next_page_btn").classList.remove("d-none");
        }
    }

    
    function showVerification() {
        //document.getElementById("verifyDesc_btn").classList.add("d-none");
        document.getElementById("verifyDesc").classList.remove("d-none");
        document.getElementById("next_page_btn").classList.remove("d-none");
    }

</script>




{% endblock %}