window.onload = function() {
    const config = {
        "tag": "config",
        "game": "testing",
        "user": "test_user",
    };

    const rawHash = window.location.hash;
    if (rawHash) {
        const hash = rawHash.substr(1, rawHash.length).split(",");
        for (let i in hash) {
            let elements = hash[i].split(":");
            if (elements.length != 2) {
                continue;
            }
            config[elements[0]] = elements[1];
        }
    }

    $("#loggedin").text(`logged in as "${config.user}"`);
    $("#gamename").text(`playing in "${config.game}"`);

    var loc = window.location, new_uri;
    if (loc.protocol === "https:") {
        new_uri = "wss:";
    } else {
        new_uri = "ws:";
    }
    new_uri += "//" + loc.host;
    new_uri += loc.pathname + "socket";

    const socket = new WebSocket(new_uri);
    socket.addEventListener("open", function (event) {
        console.log("Connected to server!");
        socket.send(JSON.stringify(config));
    });

    socket.addEventListener("message", function (event) {
        msg = JSON.parse(event.data);
        var chat = $(".messages");
        chat.append(`<div class="msg"><span class="author">${msg.author}:</span> ${msg.content}</div>`);
        chat.animate({scrollTop: chat.prop('scrollHeight')});
    });


    $('#chatbox').on('keypress', function (e) {
       if (e.which === 13) {
           $(this).attr("disabled", "disabled");
           socket.send(JSON.stringify({
               "tag": "post",
               "author": config.user,
               "content": $('#chatbox').val()
           }))
           $('#chatbox').val('');
           $(this).removeAttr("disabled");
       }
   });
};