acorn/static/comm.js

$(function() {
    var connection = null;

    var wordlist = null;
    var questionlist = null;

    $('#join').click(function() {
        var game_id = $('#gameId').val();
        var nick = $('#nick').val();
        var msg = {
            join: {
                game_id: game_id,
                nick: nick,
            }
        };
        connect(msg);
    });

    $('#create').click(function() {
        var game_id = $('#gameId').val();
        var nick = $('#nick').val();
        var msg = {
            create_game: {
                game_id: game_id,
                nick: nick,
            }
        };
        connect(msg);
    });

    $('#ready').click(function() {
        var game_id = $('#gameId').val();
        var nick = $('#nick').val();
        var msg = "ready";
        send(msg);
    });

    $('#submit').click(function() {
        var word = $('#word').val();
        var msg = {
            submit_word: {
                word: word
            }
        };
        send(msg);
    });

    $('#submitGuess').click(function() {
        var list = [];
        for(var i = 0; i < wordlist.length; i++) {
            var field = "#g" + i;
            var numTxt = $(field).val();
            var number = parseInt(numTxt);
            if (number > 0 && number <= questionlist.length) {
                list.push([wordlist[i], questionlist[number - 1]]);
            }
            else {
                $("#status").html("Please enter a valid number");
                return;
            }
        }
        var msg = {
            submit_guess: {
                guesses: list
            }
        };
        send(msg);
    });

    function connect(initial_message) {
        if (connection != null) {
            disconnect();
        }
        var uri = 'ws://' + window.location.host + '/ws/';
        connection = new WebSocket(uri);

        connection.onopen = function() {
            connection.send(JSON.stringify(initial_message));
        };
        connection.onmessage = function(e) {
            onReceive(e);
        };
        connection.onclose = function() {
        };
    }

    function send(message) {
        if (connection != null) {
            connection.send(JSON.stringify(message));
        }
    }

    function disconnect() {
        connection.close();
        connection = null;
    }

    function onReceive(msg) {
        var obj = jQuery.parseJSON(msg.data);
        if (obj.game_not_found != null) {
            $('#status').html("Game \"" + obj.game_not_found.game_id + "\" not found");
        }
        else if (obj.game_already_exists != null) {
            $('#status').html("Game \"" + obj.game_already_exists.game_id + "\" already exists");
        }
        else if (obj.game_state != null) {
            var gs = obj.game_state;
            if (gs.state_data === "starting") {
                $('#startingform').show();
            }
            else if (gs.state_data.creating != null) {
                var players = gs.players;
                playerlist = "";
                for (var i = 0; i < players.length; i++) {
                    playerlist += players[i].nick + "(" + players[i].points + ")";
                    if (i + 1 < players.length)
                        playerlist += ", ";
                }
                $('#status').html("Players: " + playerlist);

                var creating = gs.state_data.creating;
                var chars = creating.available_chars;
                $('#question').val(creating.question);
                $('#letters').val(chars.join());
                $('#createform').show();
            }
            else if (gs.state_data.guessing != null) {
                var guesses = gs.state_data.guessing;
                var sub_words = guesses.submitted_words;
                var questions = guesses.questions;
                var questionsHtml = "";
                for (var i = 0; i < questions.length; i++) {
                    questionsHtml += (i + 1) + ": " + questions[i] + "<br>";
                }
                $('#guessingDynTable').html(questionsHtml);
                $('#guessingDyn').html("");
                for (var i = 0; i < sub_words.length; i++) {
                    var $label = $("<label to='g" + i + "'>" + sub_words[i][0] + "</label>");
                    var $field = $("<input id='g" + i + "' type='text' /><br>");
                    $('#guessingDyn').append($label);
                    $('#guessingDyn').append($field);
                }

                questionlist = questions;
                wordlist = sub_words.map(pair => pair[0]);
                
                $('#createform').hide();
                $('#guessing').show();
            }
        }
        else if (obj.round_result != null) {
            displayResult(obj.round_result);
        }
        else {
            $('#status').html("Unknown Message recieved");
        }
    }

    function displayResult(result) {
        var $table = $('<table/>');

        var wordline = "<tr><th></th>";
        for(var i = 0; i < result.words.length; i++) {
            wordline += "<th>" + result.words[i] + "</th>";
        }
        wordline += "</tr>";
        $table.append(wordline);

        for(var i = 0; i < result.questions.length; i++) {
            var wordline = "<tr><th>" + result.questions[i] + "</th>";
            for(var j = 0; j < result.words.length; j++) {
                wordline += "<td>" + result.guesses[j][i] + "</td>";
            }
            wordline += "</tr>";
            $table.append(wordline);
        }

        $('#results').append($table);


        $('#createform').hide();
        $('#guessing').hide();
        $('#startingform').hide();
        $('#results').show();
    }
});