{% block title %}
    Fortune wheel
{% endblock %}
{{ block content }}
<p><center> Round {{ round }} out of 14</center>
</p>

<div class="row mt-5 mb-5">
    <div class="col-lg-4 col-md-12">
        <div id='chart'></div>
    </div>
    <div class="col-lg-2 col-md-12">
        <div style="margin-top: 200px">
        <div style="font-size: 12px">
        <span style='font-size:30px; color: #0174DF;'>&#9632;</span> You
            </div>
        <div style="font-size: 12px">
        <span style='font-size:30px; color: #46b70b;'>&#9632;</span> Random number
            </div>
            </div>
    </div>
    <div class="col-lg-6 col-md-12 pt-4">
        <div class="card">
            <div class="card-header"></div>
            <div class="card-body">
                <table id='results' class="table table-sm" ></table>
        </div>
        <div id='winner' class="mt-4"></div>
    </div>
</div>

    <button id="next" class="otree-btn-next btn btn-primary">Continue</button>

{{ endblock }}



{{ block scripts }}
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        let share_a = js_vars.share_a;
        let share_b = js_vars.share_b;
        let win_pie_max = js_vars.win_pie_max;
        let final_arrow = js_vars.final_arrow;
        let ticket = js_vars.ticket;
        let other_ticket = js_vars.other_ticket;
        let own_effort = js_vars.own_effort;
        let other_effort = js_vars.other_effort;
        let prob_percent = js_vars.prob_percent;
        let other_percent = js_vars.other_percent;
        let round_earnings = js_vars.round_earnings;
        let won = js_vars.won;
        let earnings_win = js_vars.earnings_win;
        let earnings_lose = js_vars.earnings_lose;
        let padding = {top:10, right:10, bottom:10, left:10},
            w = 300 - padding.left - padding.right,
            h = 300 - padding.top  - padding.bottom,
            r = Math.min(w, h)/2,
            rotation = 0,
            oldrotation = 0,
            picked = 100000,
            oldpick = [],
            color = d3.scale.ordinal().range(["#0174DF", "#46b70b"]);//category20c()

        //http://osric.com/bingo-card-generator/?title=HTML+and+CSS+BINGO!&words=padding%2Cfont-family%2Ccolor%2Cfont-weight%2Cfont-size%2Cbackground-color%2Cnesting%2Cbottom%2Csans-serif%2Cperiod%2Cpound+sign%2C%EF%B9%A4body%EF%B9%A5%2C%EF%B9%A4ul%EF%B9%A5%2C%EF%B9%A4h1%EF%B9%A5%2Cmargin%2C%3C++%3E%2C{+}%2C%EF%B9%A4p%EF%B9%A5%2C%EF%B9%A4!DOCTYPE+html%EF%B9%A5%2C%EF%B9%A4head%EF%B9%A5%2Ccolon%2C%EF%B9%A4style%EF%B9%A5%2C.html%2CHTML%2CCSS%2CJavaScript%2Cborder&freespace=true&freespaceValue=Web+Design+Master&freespaceRandom=false&width=5&height=5&number=35#results

        let data = [
                    {"value": Math.round(share_a)},
                    {"value": Math.round(share_b)},
        ];

        let svg = d3.select('#chart')
            .append("svg")
            .data([data])
            .attr("width",  w + padding.left + padding.right)
            .attr("height", h + padding.top + padding.bottom);

        let container = svg.append("g")
            .attr("class", "chartholder")
            .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");

        let vis = container
            .append("g");

        let pie = d3.layout.pie().sort(null).value(function(d){return d.value; });

        // declare an arc generator function
        let arc = d3.svg.arc().outerRadius(r);

        // select paths, use arc generator to draw
        let arcs = vis.selectAll("g.slice")
            .data(pie)
            .enter()
            .append("g")
            .attr("class", "slice");


        arcs.append("path")
            .attr("fill", function(d, i){ return color(i); })
            .attr("d", function (d) { return arc(d); });

        // add the text
        arcs.append("text").attr("transform", function(d){
                d.innerRadius = 0;
                d.outerRadius = r;
                d.angle = (d.startAngle + d.endAngle)/2;
                return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")";
            })
            .attr("text-anchor", "end")
            .text( function(d, i) {
                return data[i].label;
            });

        setTimeout(spin, 2000);


        function spin(d){
            rotation = final_arrow + 360 + 360 + 360;

            vis.transition()
                .duration(4000)
                .attrTween("transform", rotTween)
        }

        //make arrow
        svg.append("g")
            .attr("transform", "translate(" + (w/2 + padding.right) + "," + (padding.top) + ")")
            .append("path")
            .attr("d", "M" + (r*-0.05) + ",-10L0," + (r*.15) + "L" + (r*0.05) + ",-10Z")
            .style({"fill":"black"});

        //draw spin circle
        container.append("circle")
            .attr("cx", 0)
            .attr("cy", 0)
            .attr("r", 20)
            .style({"fill":"white","cursor":"pointer"});

        function rotTween(to) {
          let i = d3.interpolate(oldrotation % 360, rotation);
          return function(t) {
            return "rotate(" + i(t) + ")";
          };
        }

        setTimeout(function (){
            document.getElementById('winner').innerHTML = won + ' the prize in this round!';
            }, 6000);

        setTimeout(function (){
            document.getElementById('next').style.visibility = "visible";
        }, 6000)


            document.getElementById('results').innerHTML =
                '<thead>' +
                '<tr>' +
                '<th></th>' +
                '<th>You</th>' +
                '<th>Random number</th>' +
                '</tr>' +
                '</thead>' +
                '<tbody>' + '<tr>' +
                '<th> Tickets </th>' +
                '<td>' + ticket + '</td>' +
                '<td>' + other_ticket + '</td>' +
                '</tr>' +
                '<tr>' +
                '</tr>' +
                '<tr>' +
                '<th> Win probability </th>' +
                '<td>' + prob_percent + '%</td>' +
                '<td>' + '' + '</td>'




        </script>

{{ endblock }}

{{ block styles }}
    <style type="text/css" xmlns="http://www.w3.org/1999/html">

    #chart {
        position: relative;
    }

    #round {
        font-weight: normal;
        font-size: 14px;
        text-align: right;
}

    #role {
        font-weight: normal;
        font-size: 14px;
        text-align: left;
}

    #header {
        font-weight: normal;
        font-size: 14px;
        text-align: right;
}

    #results {
        position: relative;
    }

    #header {
        position: relative;
        display: block;
        font-weight: normal;
        font-size: 14px;
        text-align: right;
    }

    .otree-btn-next{
        position: relative;
        visibility: hidden;
    }

    </style>
{{ endblock }}