<!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);
}
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>
<div id="status">
</div>
</body>
</html>