nicolas
/
acorn


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							<!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);
            });

            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() {
                    connection = null;
                };
            }
            
            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) {
                    playerlist = "";
                    for (var i = 0; i < obj.game_state.players.length; i++) {
                        playerlist = playerlist + ", " + obj.game_state.players[i];
                    }
                    $('#status').html("Players: " + playerlist);
                    $('#createform').toggle();
                }
                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">
  <label for="word">Game ID:</label>
  <input id="word" type="text" /><br>
  <input id="submit" type="button" value="Submit Word" />
</form>
<div id="status">
</div>
</body>
</html>