nicolas
/
acorn


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
							<!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;

            $('#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);
            });

            $('#submit').click(function() {
                var word = $('#word').val();
                var msg = {
                    submit_word: {
                        word: word
                    }
                };
                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.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) {
                        $('#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="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>
<div id="status">
</div>
</body>
</html>