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

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        One option is a risk over money.
    </div>
    <div id="selectedEveTxt" class="col-3 d-flex justify-content-center align-items-right"
        style="font-size: 16px; font-weight: normal;">
        
        <div class="row">
            <div class="col-6 d-flex align-items-center justify-content-center" style="padding: 0;">
                You selected:
            </div>
            <div class="col-6 d-flex justify-content-center align-items-right">
                <svg class="envelopeHeader"
                    viewBox="0 0 200 100" 
                    stroke="rgb(86,86,86)" stroke-width="2">

                    <!--Outer frame-->
                    <polyline 
                        points="0,0 0,100 200,100 200,0 0,0"
                        style="fill: #fff8ef;"/>

                    <!--Inner lines-->
                    <line x1="0" y1="0" x2="100" y2="35"/>
                    <line x1="200" y1="0" x2="100" y2="35"/>
                    
                    <text 
                        font-size="1.8em"
                        text-anchor="end" 
                        x="95%" y="90%" 
                        fill="black">
                        {{player.participant.type}}
                    </text>
                </svg>
            </div>
        </div>  
    </div>
</div>
{% endblock %}

{% block content %}

<div class="d-none">
    {{ formfield_errors "choice_Instructions" }}
    <input type="hidden" id="choice_Instructions" name="choice_Instructions" value="-9999"></input>
    {{ formfield_errors "outcome_Instructions" }}
    <input type="hidden" id="outcome_Instructions" name="outcome_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 equally-likely outcomes</strong>—one higher and
                one lower amount of money. On average, the risk pays £1.00. 
                An example is shown below. (The risk that may determine your bonus will be different.)
            </p>
            
            <p>
                <strong>
                    A virtual shell game determines the outcome of the risk: 
                </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 you instruct us to give you the risk as bonus, 
                you receive the outcome shown on the slip under the shell you select. 
            </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>    

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

    <button id="next_page_btn" 
        class="btn btn-primary mt-2 d-none"
        >
        One option is a risk. What is the other option?
    </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')
        
        // Save selection to variables
        document.getElementById("choice_Instructions").value = clickedShellNum;
        document.getElementById("outcome_Instructions").value = selectedSlip.textContent;


        // 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 + "."

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

        sequence()    
    }

</script>




{% endblock %}