{{ extends 'global/Page.html' }}
{{ block title }} {{ endblock }}

{{ block content }}

<center>
    <h3>Funnel game</h3>
    <div id="wrapper" align="center">
        <div id="mydiv"></div>
        <canvas id="myCanvas" width="300px" height="300px"></canvas>
    </div>

    <div id="buttondiv" align="center">
        <p><span hidden>
                Funnel location: (
                <span id="xposition">{{ prevx }}</span>,
                <span id="yposition">{{ prevy }}</span>)
            </span>
        <br>
        Round: {{ player.round_number }} / {{ C.NUM_ROUNDS }} ... Score: <span id="score">&nbsp;</span></p>

        <input type="hidden" name="x" id="hiddeninputx">
        <input type="hidden" name="y" id="hiddeninputy">
        <button class="btn btn-primary btn-large">Drop a new marble</button>

        <button class="btn btn-primary btn-large" type="button" onclick="instructions()" style="line-height: 15px;"><span style="font-size: 25px; font-family: Georgia, serif;">i</span></button>

    </div>
</center>

{{ endblock }}

{{ block scripts }}
<script>
function instructions() {
      alert("On each round, a black marble is dropped through a funnel. The marble will land on a random location in the vicinity of the funnel. You are responsible for keeping the marbles as close to the centre of the area as possible. Your task is to control the location of the funnel, by moving the red circle. You can move it by dragging it. Try to keep all marbles as close to the centre of the area as possible. Your score is a sum of the distances of each new marble from the centre -- the smaller your score, the better.");
}

var round = js_vars.roundd;
var xlist = js_vars.allxcoord;
var ylist = js_vars.allycoord;

var x = xlist[xlist.length-1];
var y = ylist[ylist.length-1];
var xposfinal = 150+(x);
var yposfinal = 150+(-y);

// the position from which the new marble is dropped
var xpos = xposfinal;
var ypos = 0;


// THIS SETS THE SCORE UPDATE WITH 2 SECOND DELAY
setTimeout(function(){
    document.getElementById("score").innerHTML = js_vars.cumulativescore;
}, 2000);

// THIS MAKES THE ANIMATE EFFECT OF THE CURRENT BALL DROPPING FROM THE FUNNEL
var id = setInterval(frame, 10);
function frame() {
    if (ypos == yposfinal) {
        clearInterval(id);
    } else {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0,0,300,300);
        // DRAW THE AXIS LINES
        ctx.beginPath();
        ctx.moveTo(150, 0);
        ctx.lineTo(150, 297);
        ctx.moveTo(0, 150);
        ctx.lineTo(297, 150);
        ctx.strokeStyle = "#aaaaaa";
        ctx.stroke();
        // DRAWS ALL BUT THE LATEST BLACK BALLS IMMEDIATELY ON THE CANVAS
        for(var i = 0; i < round-1; i++) {
            var ballxpos = 150+(xlist[i]);
            var ballypos = 150+(-ylist[i]);
            ctx.beginPath();
            ctx.arc(ballxpos,ballypos,5,0,2*Math.PI);
            ctx.fill();
        }
        // DRAWS THE CURRENT BALL AS ANIMATED SO THAT IT DROPS FROM THE TOP,
        // WIGGLES IN THE FUNNEL, AND SHRINKS TO ITS PROPER SIZE AS IT MOVES
        ctx.beginPath();
        if (ypos < 0.5*yposfinal) {
            ctx.arc(xpos+50*Math.random(),ypos+50*Math.random(),5+0.5*(yposfinal-ypos),0,2*Math.PI);
        } else {
            ctx.arc(xpos,ypos,5+0.5*(yposfinal-ypos),0,2*Math.PI);
        }
        ctx.fill();
        ypos++;
    }
}
// THIS PART CREATES THE DRAGGABLE RED CIRCLE
var divi = document.getElementById("mydiv");
divi.style.top = 135 -  js_vars.prevy + "px";
divi.style.left = 135 + js_vars.prevx + "px";
// default values if the circle is not moved
document.getElementById("hiddeninputx").value = js_vars.prevx;
document.getElementById("hiddeninputy").value = js_vars.prevy;
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onpointerdown = dragMouseDown; // onmousedown
    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onpointerup = closeDragElement; // onmouseup
        // call a function whenever the cursor moves:
        document.onpointermove = elementDrag; // onmousemove
    }
    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        // write new position on span element
        document.getElementById("xposition").innerHTML = -150+15+(elmnt.offsetLeft - pos1);
        document.getElementById("yposition").innerHTML = 150-15-(elmnt.offsetTop - pos2);
        document.getElementById("hiddeninputx").value = -150+15+(elmnt.offsetLeft - pos1);
        document.getElementById("hiddeninputy").value = 150-15-(elmnt.offsetTop - pos2);
    }

    function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onpointerup = null; // onmouseup
        document.onpointermove = null; // onmousemove

    }
}

</script>
{{ endblock }}