{% extends 'otree/WaitPage.html' %}
{% load otree %}

{% block title %}{{ title_text }}{% endblock %}

{% block content %}

    <p>
        {{ body_text }}
    </p>
    
    <p>
        How many have connected: <strong><span id="connected">{{connected}}</span>/{{ Constants.players_per_group }}</strong>
    </p>
 
    <p id="waiting_time">
        Waiting time left: <strong><span id="timer"></span></strong>
    </p>

{% endblock %}

{% block scripts %}
    <script>
        var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
        //var wpsocket = new WebSocket(ws_scheme + '://' + window.location.host + "/wait_page");

        var wpsocket = new WebSocket(
            ws_scheme + '://' + window.location.host + 
            '/waiting_page'
        );

        // Handle any errors that occur.
        wpsocket.onerror = function (error) {
            console.log('WebSocket Error: ', error);
        };

        // Show a connected message when the WebSocket is opened.
        wpsocket.onopen = function (event) {
            console.log('connected to oTree');
            console.log(event.data);
            
            wpsocket.send(JSON.stringify({	
                "event": "update",	
                "connected": {{ connected }}
            }));
        };

        // Handle messages sent by the server.
        wpsocket.onmessage = function (event) {
            var message = JSON.parse(event.data);

            if (message.hasOwnProperty('connected')) {
                connected = message.connected;
                $('#connected').html(connected);
            }
        };

        // Show a disconnected message when the WebSocket is closed.
        wpsocket.onclose = function (event) {
            console.log('disconnected from oTree');
        };

        
    </script>

    <script src="{% static 'grouping/jquery.countdown.min.js' %}"></script>

    <script type="text/javascript">
        var currentDate = new Date();
        var milliseconds = Math.floor({{time_left|json}} * 1000);

        $("#timer").countdown(currentDate.valueOf() + milliseconds)
            .on('update.countdown', function(event) {
                // %-N is "Total count of minutes till the end, non-padded"
                // %S is seconds left
                var format = '%-N:%S';
                var time_left = event.strftime(format);
                $(this).html(time_left);
            })
            .on('finish.countdown', function (event) {
                // Refresh so timeouts get pushed
                location.reload();
            });
    </script>
{% endblock %}