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

{% block title %}
    Game 4: Round {{ round_num }} of 5
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{% static "ball_catch/css/style_jung.css" %}" />
{% endblock %}

{% block scripts %}
    <script src="{% static "ball_catch/js/jquery-1.11.0.min.js" %}"></script>
    <script src="{% static "ball_catch/js/jquery-ui.min.js" %}"></script>
    <script src="{% static "ball_catch/js/ball-catch.js" %}"></script>

    <script>
        var prize = {{ player.prize }};
        var cost = {{ player.cost }};
        var interval = 21;
        var ballDelay = 625;
    </script>

{% endblock %}

{% block content %}
    <div id="wrapper">
        <div id="jballfall">
            <div class="statstext" id="gamestats">
                <div id="gamestatsleft">
                    <div>
                        Catches: <span id="catchesstats" class="statsnumber">0</span>
                    </div>

                    <div>
                        Score: <span id="scorestats" class="statsnumber">0</span>
                    </div>
                </div>
                <div id="gamestatsright">
                    <div>
                        Clicks: <span id="clicksstats" class="statsnumber">0</span>
                    </div>
                    <div>
                        Expense: <span id="expensestats" class="statsnumber">0</span>
                    </div>
                </div>
            </div>
            <div id="timer" class="statstext center"> Time Left: <p id="clock">1:00</p></div>
            <div id="gamecontainer">
                <div id="waterfall"></div>
                <div id="gameinfo" class="infogame">
                    <div>
                        Prize per catch: <span id="prize" class="statsnumber"></span>
                    </div>
                    <div>
                        Cost per click: <span id="cost" class="statsnumber"></span>
                    </div>
                </div>
            </div>
            <div id="clickleft">
                <div>
                    <button type="button" id="left" class="button" style="width:120px">LEFT</button>
                </div>
            </div>
            <div id="clickright">
                <div>
                    <button type="button" id="right" class="button" style="width:120px">RIGHT</button>
                </div>
            </div>
            <div id="periodcontroller">
                <div>
                    <button type="button" id="startbutton" class="button" style="width:150px">Start the Task!</button>
                </div>
            </div>
        </div>
        <br class="break" />
        <div id="container" align=center>
            <input type="hidden" name="catches" id="catches" value="0" />
            <input type="hidden" name="clicks" id="clicks" value="0" />
            <input type="hidden" name="score" id="score" value="0" />
            <input type="hidden" name="expense" id="expense" value="0" />
        </div>
    </div>

    {% next_button %}

{% endblock %}