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

{% block title %}
    Option 1 (the risk)
{% endblock %}

{% block content %}

<div class="bg-light my-3 px-3 py-3 rounded border">
    <div class="row">
        <div class="col">    
            <p>
               <strong>
                Option 1 has two equally-likely outcomes</strong>—one higher and
                one lower amount of money. On average, Option 1 pays £1.00. An example of Option 1 is shown below.
            </p>
            
            <p>
                <strong>
                    A virtual shell game determines which outcome you receive: 
                </strong>
                Each outcome—<span id="firstOutcome"></span> 
                and <span id="secondOutcome"></span> in this example—is written on a different paper slip. 
                Each slip is placed under one shell. 
                The shells are then shuffled, such that you cannot know which slip is under which shell. 
                You must then select the left or the right shell.</br> 
                If Option 1 determines your bonus, you receive the outcome shown on the slip under the shell you selected. 
            </p>
        </div>
    </div>

    <div class="row justify-content-md-center">
        <div id="riskPicture" class="col-4 riskPicture container" style="width:50%"></div>
    </div>
    
    <div id="chooseShell" 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 shell by clicking on it.
            </div>
        </div>
    </div>
    
    <div id="shellResult" 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 have already committed ourselves to which outcome is under the left and right shell, respectively. 
                This is shown in Verification.pdf.
                By inspecting Verification.pdf at the end of the experiment, you can thus verify that 
                each outcome is indeed equally likely.
            </div>
        </div>
    </div>
    
        
    <button type="button" id="shuffleBtn" class="btn btn-primary mt-2"
        onclick="shuffleShells(1500);"
        >
        Prepare the shells for me 
    </button>
    
    <button type="button" id="verifyDesc_btn" 
        class="btn btn-primary mt-2 d-none"
        onclick='showVerification();'
        >
        How can I verify that the outcome of the shell game is fair?
    </button>

    <button id="next_page_btn" 
        class="btn btn-primary mt-2 d-none"
        >
        Got it. What about Option 2?
    </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/shellGameResolution.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
    
    payoffs.map((val, idx) => {
        if (idx == 0) {
            document.getElementById("firstOutcome").innerHTML = val
        } else if (idx == 1) {
            document.getElementById("secondOutcome").innerHTML = val
        }
    })
    

    ReactDOM.render(
        <ShellGame
            payoffs = {js_vars.payoffs}
            probabilities = {[0.5, 0,5]}
        />, document.querySelector('.riskPicture'))

    function shuffleShells(time) {
        document.getElementById("shuffleBtn").classList.add("d-none")
        const totalTime = time 

        function moveSlips(resolve, remainingTime) {
            let startDict = {}
            let distanceDict = {}
            let starttime
            payoffs.map((val, idx) => {
                const slip = document.getElementById("slip_" + idx)
                const shell = document.getElementById("shell_" + idx)

                const slipLeft = parseFloat(slip.style.left)
                const slipWidth = parseFloat(slip.style.width)

                const shellLeft = parseFloat(shell.style.left)
                const shellWidth = parseFloat(shell.style.width)

                const from = slipLeft
                const to = shellLeft + shellWidth / 2 - slipWidth / 2
                

                startDict[idx] = (from)
                distanceDict[idx] = (to-from)
            })

            function moveit(timestamp, startDict, distDict, duration){
                //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date:
                var timestamp = timestamp || new Date().getTime()
                var runtime = timestamp - starttime
                var progress = Math.min(runtime / duration,1)

                payoffs.map((val, idx) => {
                    const slip = document.getElementById("slip_" + idx)
                    const start = startDict[idx]
                    const dist = distDict[idx]

                    slip.style.left = (start + dist * progress).toFixed(2) + "%"
                })
                
                if (runtime < duration){ // if duration not met yet
                    requestAnimationFrame(function(timestamp){ // call requestAnimationFrame again with parameters
                        moveit(timestamp, startDict, distDict, duration)
                    }) 
                } else {
                    return resolve("done")
                }
            }

            requestAnimationFrame(function(timestamp){
                starttime = timestamp || new Date().getTime() //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date
                moveit(timestamp, startDict, distanceDict, remainingTime) // 400px over 1 second
            })
        }

        
        const slipToTop = () => {
            payoffs.map((val, idx) => {
                const slip = document.getElementById("slip_" + idx)
                slip.style.top = "0%"
            })
        }

        function shellsDown(resolve, totalTime)  {
            const startPos = {}
            const endPos = {}
            let starttime

            payoffs.map((val, idx) => {
                const shell = document.getElementById("shell_" + idx)
                shell.style.zIndex = "10"

                startPos[idx] = parseFloat(shell.style.top)
                endPos[idx] = parseFloat(50)
            })

            function moveit(timestamp, startDict, targetDict, duration){
                //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date:
                var timestamp = timestamp || new Date().getTime()
                var runtime = timestamp - starttime
                var progress = Math.min(runtime / duration,1)

                payoffs.map((val, idx) => {
                    const shell = document.getElementById("shell_" + idx)
                    const start = startDict[idx]
                    const end = targetDict[idx]

                    shell.style.top = (start + (end-start) * progress).toFixed(2) + "%"
                })
                
                if (runtime < duration){ // if duration not met yet
                    requestAnimationFrame(function(timestamp){ // call requestAnimationFrame again with parameters
                        moveit(timestamp, startDict, targetDict, duration)
                    }) 
                } else {
                    return resolve("done")
                }
            }

            requestAnimationFrame(function(timestamp){
                starttime = timestamp || new Date().getTime() //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date
                moveit(timestamp, startPos, endPos, totalTime) // 400px over 1 second
            })
        }

        const hideSlip = () => {
            payoffs.map((val, idx) => {
                const slip = document.getElementById("slip_" + idx)
                slip.style.display = "none"
                slip.classList.add("d-none")
            })
        }

        function moveShellsToMiddle(resolve, animationTime) {
            let starttime
            let iteration = 0
            const distDict = {}
            const startDict = {}
            const targetDict = {}

            payoffs.map((val, idx) => {
                const shell = document.getElementById("shell_" + idx)
                const shellLeft = parseFloat(shell.style.left)
                const shellWidth = parseFloat(shell.style.width)

                let target 
                if (idx == 0) {
                    target = 17
                } else if (idx == 1) {
                    target = 44 // Numbers found by trying, better way?
                }

                const distance = (target - shellLeft)

                distDict[idx] = distance
                startDict[idx] = shellLeft
                targetDict[idx] = target
            })

            function moveit(timestamp, fromDict, distanceDict, goalDict, duration){
                //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date:
                var timestamp = timestamp || new Date().getTime()
                var runtime = timestamp - starttime
                var progress = Math.min(runtime / duration,1)
                
                payoffs.map((val, idx) => {
                        const shell = document.getElementById("shell_" + idx)
                        const dist = distanceDict[idx]

                        const start = fromDict[idx]
                        shell.style.left = (start + dist * progress).toFixed(2) + "%"
                    })

                
                if (runtime < duration){ // if duration not met yet
                    requestAnimationFrame(function(timestamp){ // call requestAnimationFrame again with parameters
                        moveit(timestamp, fromDict, distanceDict,goalDict, duration)
                    }) 
                } else {
                    return resolve("done")
                }
            }

            requestAnimationFrame(function(timestamp){
                starttime = timestamp || new Date().getTime() //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date
                moveit(timestamp, startDict, distDict, targetDict, animationTime) // 400px over 1 second
            })
            
        }
        
        function shellShufflingAnimation(resolve, totalAnimationTime, numberShuffles) {
            const sumValues = obj => Object.values(obj).reduce((a, b) => a + b); // Sum object elements
            let starttime
            let iteration = 0
            const timeStepDict = {}
            const animationTime = {} // Animation should get faster, then slower
            const shellIDDict = {}
            const shellStartDict = {}

            for (let i=0; i < numberShuffles; i++){
                let middle = parseInt(numberShuffles / 2)
                //let max = middle * middle + 1
                let x = i - middle
                timeStepDict[i] = parseInt(0.4 * (x*x))
            }

            for (let i=0; i < numberShuffles; i++){
                const totalNums = sumValues(timeStepDict)
                const animationInterval = parseInt(totalAnimationTime/totalNums)
                animationTime[i] = Math.max(animationInterval * timeStepDict[i],40)
            } 

            console.log(animationTime)

            payoffs.map((val, idx) => {
                const shell = document.getElementById("shell_" + idx)
                const shellID = shell.id
                const shellLeft = parseFloat(shell.style.left)

                if (shellLeft == 17) {
                    shell.classList.add("shellFront")
                    shell.style["-webkit-animation-duration"] = animationTime[iteration] + "ms";
                    shell.style.zIndex = "20";
                }

                shellIDDict[idx] = shellID
                shellStartDict[idx] = shellLeft
            })

            function shuffleIt(timestamp, shellIDDict, shellStartPosDict, duration){
                //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date:
                var timestamp = timestamp || new Date().getTime()
                var runtime = timestamp - starttime
                var progress = Math.min(runtime / duration,1)

                for(let i=0; i<2; i++) {
                    const shellID = shellIDDict[i]
                    const shellLeft = shellStartPosDict[i]

                    let otherShell
                    if (i == 0 ) {
                        otherShell = 1
                    } else {
                        otherShell = 0
                    }
                    const dist = shellStartPosDict[otherShell]-shellStartPosDict[i]

                    const shell = document.getElementById(shellID)

                    shell.style.left = (shellLeft + dist * progress).toFixed(2) + "%"
                }
                
                if (runtime < duration){ // if duration not met yet
                    requestAnimationFrame(function(timestamp){ // call requestAnimationFrame again with parameters
                        shuffleIt(timestamp, shellIDDict, shellStartPosDict, duration)
                    }) 
                } else {
                    if (iteration < numberShuffles-1) {
                        iteration += 1

                        const newshellIDDict = {}
                        const newshellStartDict = {}

                        payoffs.map((val, idx) => {
                            const shell = document.getElementById("shell_" + idx)
                            const shellID = shell.id
                            const shellLeft = parseFloat(shell.style.left)

                            shell.classList.remove("shellFront")
                            shell.style.zIndex = "10";
                            
                            if (shellLeft == 17) {
                                shell.classList.add("shellFront")
                                if (animationTime[iteration] > 50){ 
                                    shell.style["-webkit-animation-duration"] = animationTime[iteration] + "ms";
                                }
                                shell.style.zIndex = "20";
                            }

                            newshellIDDict[idx] = shellID
                            newshellStartDict[idx] = shellLeft
                        })

                        requestAnimationFrame(function(timestamp){
                            starttime = timestamp || new Date().getTime() //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date
                            shuffleIt(timestamp, newshellIDDict, newshellStartDict, animationTime[iteration])
                        })
                    } else {
                        return resolve("done")
                    }
                }
            }


            requestAnimationFrame(function(timestamp){
                starttime = timestamp || new Date().getTime() //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date
                shuffleIt(timestamp, shellIDDict, shellStartDict, animationTime[iteration])
            })
        }

        function moveShellsOut(resolve, animationTime) {
            let starttime
            let iteration = 0
            const distDict = {}
            const startDict = {}
            const targetDict = {}

            payoffs.map((val, idx) => {
                const shell = document.getElementById("shell_" + idx)
                const shellLeft = parseFloat(shell.style.left)
                const shellWidth = parseFloat(shell.style.width)

                let target 
                if (shellLeft == 17) {
                    target = 5
                } else if (shellLeft == 44) {
                    target = 55 // Numbers from start
                }

                const distance = (target - shellLeft)

                distDict[idx] = distance
                startDict[idx] = shellLeft
                targetDict[idx] = target
            })

            function moveit(timestamp, fromDict, distanceDict, goalDict, duration){
                //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date:
                var timestamp = timestamp || new Date().getTime()
                var runtime = timestamp - starttime
                var progress = Math.min(runtime / duration,1)
                
                payoffs.map((val, idx) => {
                        const shell = document.getElementById("shell_" + idx)
                        const dist = distanceDict[idx]

                        const start = fromDict[idx]
                        shell.style.left = (start + dist * progress).toFixed(2) + "%"
                    })

                
                if (runtime < duration){ // if duration not met yet
                    requestAnimationFrame(function(timestamp){ // call requestAnimationFrame again with parameters
                        moveit(timestamp, fromDict, distanceDict,goalDict, duration)
                    }) 
                } else {
                    return resolve("done")
                }
            }

            requestAnimationFrame(function(timestamp){
                starttime = timestamp || new Date().getTime() //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date
                moveit(timestamp, startDict, distDict, targetDict, animationTime) // 400px over 1 second
            })
            
        }

        async function sequence (totalTime) {
            const slips = document.getElementsByClassName("shellText")

            // Hide text on shells
            for (let i = 0; i < slips.length; i++) {
                slips[i].classList.add("d-none")
                }

            await new Promise(
                // move slips to left and right
                (resolve, reject) => {
                    console.log("here")
                    moveSlips(resolve, totalTime / 2)
                }
            )

            await new Promise(
                // move slips to top
                (resolve, reject) => {
                    slipToTop()
                    resolve("done")
                }
            )

            await new Promise(
                // move shells down
                (resolve, reject) => {
                    shellsDown(resolve, 600)
                }
            )

            await new Promise(
                // hide slips
                (resolve, reject) => {
                    hideSlip()
                    resolve("done")
                }
            )

            // Shuffle shells
            await new Promise(
                // move shells middle and shuffle
                (resolve, reject) => {
                    moveShellsToMiddle(resolve, (3/4)*totalTime)
                }
            )
            
            await new Promise(
                // move shells middle and shuffle
                (resolve, reject) => {
                    shellShufflingAnimation(resolve, 5000, 20)
                }
            )
            
            await new Promise(
                // move shells middle and shuffle
                (resolve, reject) => {
                    moveShellsOut(resolve, (3/4)*totalTime)
                }
            )

            document.getElementById("leftShellText").classList.remove("d-none")
            document.getElementById("rightShellText").classList.remove("d-none")
            // Left shell is shell_0, right shell is shell_1

            payoffs.map((val, idx) => {
                const elem = document.getElementById("shell_" + idx)
                
                if (parseFloat(elem.style.left) == 5) {
                    elem.id="tmp0"
                } else if (parseFloat(elem.style.left) == 55) {
                    elem.id="tmp1"
                }
            })

            document.getElementById("tmp0").id="shell_0"
            document.getElementById("tmp1").id="shell_1"

            // Show text on shells
            for (let i = 0; i < slips.length; i++) {
                slips[i].classList.remove("d-none")
                }

            // Enable click on shell + change button
            payoffs.map((val, idx) => {
                const elem = document.getElementById("shell_" + idx)
                elem.style.cursor = "pointer"
                elem.setAttribute("onclick","shellSelect(this.id);")
            })

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

        sequence(totalTime)
    }
    
    function shellSelect(clicked_id) {
        document.getElementById("chooseShell").classList.add("d-none")

        const clickedShell = document.getElementById(clicked_id)
        const clickedShellNum = clicked_id.charAt(clicked_id.length - 1)
        const selectedSlip = document.getElementById("slip_" + clickedShellNum)
        const allSlips = document.querySelectorAll('.payoffSlip')
        
        // Shuffle payoff list
        const newPayoff = payoffs.sort(() => Math.random() - 0.5)

        // Disable shell click
        payoffs.map((val, idx) => {
            const elem = document.getElementById("shell_" + idx)
            elem.style.cursor = "default"
            elem.removeAttribute("onclick")
        })
        
        clickedShell.classList.remove("grayscale")

        const currentTop = parseFloat(document.getElementById("shell_0").style.top);
        const targetTop = 2;
        const interval = 2; // ms for updating
        // Move shells up and reveal outcome

        function shellsUp(resolve){
            let starttime

            function moveit(timestamp, startPos, targetPos, duration){
                //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date:
                var timestamp = timestamp || new Date().getTime()
                var runtime = timestamp - starttime
                var progress = Math.min(runtime / duration,1)

                payoffs.map((val, idx) => {
                        const shell = document.getElementById("shell_" + idx)
                        shell.style.top = (startPos - Math.abs(targetPos - startPos) * progress).toFixed(2) + '%'
                    })
                
                if (runtime < duration){ // if duration not met yet
                    requestAnimationFrame(function(timestamp){ // call requestAnimationFrame again with parameters
                        moveit(timestamp, startPos, targetPos, duration)
                    }) 
                } else {
                    return resolve("done")
                }
            }

            requestAnimationFrame(function(timestamp){
                starttime = timestamp || new Date().getTime() //if browser doesn't support requestAnimationFrame, generate our own timestamp using Date
                moveit(timestamp, currentTop, targetTop, 1000) // 1 second
            })
        }

        const showSlip = (resolve) => {
            payoffs.map((val, idx) => {
                const slip = document.getElementById("slip_" + idx)
                slip.style.display = ""
                slip.classList.remove("d-none")
                slip.innerHTML = newPayoff[idx] // Overwrite content of slip
            })
            return resolve("done")
        }

        async function sequence() {
            await new Promise(
                // move shells up
                (resolve, reject) => {
                    shellsUp(resolve)
                }
            )

            await new Promise(
                // show slips
                (resolve, reject) => {
                    showSlip(resolve)
                }
            )

            // Write result text
            let shellText =""
            if (clickedShellNum == 0) {
                shellText = "left"
            } else if (clickedShellNum == 1) {
                shellText = "right"
            }
            
            const symbol = selectedSlip.textContent;

            document.getElementById("shellResult").classList.remove("d-none")
            document.getElementById("resultText").innerHTML = "You selected the " + shellText +" shell. The slip under this shell shows " + symbol +
                ". Your bonus would thus be " + symbol + "."

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

        sequence()    
    }

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