{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    Stroop test
{% endblock %}

{% block content %}
    <h1>What color you can see below?</h1>
    <div class="btn btn-outline-dark btn-lg question my-3"></div>
    <div>
        <div class="btn-group" role="group" aria-label="Basic example">
            {% for c in Constants.colors %}
                <button class="answer btn btn-outline-dark" type="button" data-color="{{ c }}">{{ c }}</button>
            {% endfor %}
        </div>
    </div>

{% endblock %}
{% block scripts %}
    <script>
        $(function () {
            var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
            var ws_path = ws_scheme + '://' + window.location.host + "/tasktracker/{{ player.id }}";
            var socket = new ReconnectingWebSocket(ws_path);
            socket.onmessage = function (event) {
                var obj = jQuery.parseJSON(event.data);
                var $q = $('div.question');
                $q.html(obj.color_text);
                $q.css('background-color', obj.color_color);
                $q.css('color', 'white');

            };
            $("button.answer").on("click", function () {
                var msg = $(this).data('color');
                console.log(msg);
                if (socket.readyState === WebSocket.OPEN) {
                    socket.send(JSON.stringify(msg));
                };
            });
        });
    </script>
{% endblock %}