nicolas
/
acorn


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(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 number = parseInt($("g" + i).val());
                    if (number == NaN) {
                        $("#status").html("Please enter a valid number");
                        return;
                    }
                    else if (number > 0 && number <= questionlist.length) {
                        list.push([wordlist[i], questionlist[number - 1]]);
                    }
                }
                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 name='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 {
                    $('#status').html("Unknown Message recieved");
                }
            }
        });
    </script>
</head>
<body>
<form id="loginform">
  <label for="gameId">Game ID:</label>
  <input id="gameId" type="text"  /><br>
  <label for="nick">Nickname:</label>
  <input id="nick" type="text" /><br>
  <input id="join" type="button" value="Join" />
  <input id="create" type="button" value="Create Game" />
</form>

<form id="startingform" style="display:none">
    <input id="ready" type="button" value="Ready" />
</form>

<form id="createform" style="display:none">
    <input id="question" type="text" readonly="readonly" /><br>
    <label for="letters">Create a word with the following letters</label>
    <input id="letters" type="text" readonly="readonly" /><br>
    <label for="word">Word:</label>
    <input id="word" type="text" /><br>
    <input id="submit" type="button" value="Submit Word" />
</form>
<div id="guessing" style="display:none">
    You now have to guess!
    <div id="guessingDynTable">
    </div>
 
    <form id="guessingform">
        <div id="guessingDyn">
        </div>
        <input id="submitGuess" type="button" value="Submit Guess" />
    </form>
</div>
<div id="status">
</div>
</body>
</html>