It is doubtful that I will make much progress this Mother's day. Nevertheless, even on a special day like this, I want to make some progress and keep my chain unbroken. So here goes...
With my code now well-factored and well-behaved, I want to begin the process of seeing others in the
<canvas> room as I move about it. Right now, all of the comet communication from the fab.js server is moving an explicitly referenced character around. If I am to move many named characters around, I need a list of all players with which I can interact. But first, players need to be able to identify themselves. For that, I add a form above the <canvas> element:<body>I am not doing anything fancy on the server side to prevent duplicate logins (and I do not even have accounts on the server side). For now, I simply want to identify myself via the form. If I have done so, show the room (and tell the server). If not, show the login form. This bit of jQuery does the trick:
<form id="login" method="get">
<label>Name
<input type="text" name="player">
</label>
<input type="submit" value="Play">
</form>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
$(function() {
var kv = location.search.substr(1).split(/=/);
if (kv[0] == 'player' && kv[1]) {
$('#login').hide();
new Room($("#canvas")[0], {me:kv[1]});
}
else {
$('#canvas').hide();
}
});I am actually a bit surprised that jQuery does not make query parameter parsing easier than that (no doubt there is a plugin for that). For my purposes however, splitting the query paramter string (location.search) on the key-value separator (=) is enough. If the play parameter is present, then hide the login form and show the room. Otherwise hide the room and leave the form visible to prompt the user to login.Now that players can identify themselves, I need a mechanism for fab.js to interact with a list of players on all connected browsers. My first attempt initializes with me (so that the server never tries to move me, only I can move me), but provides an interface for the server access players so that it can inform the client that
Player objects have moved:var PlayerList = function(me) {
this.me = me;
this.others = {};
};
PlayerList.prototype.add_player = function(obj) {
if (!this.others[obj.id] && obj.id != this.me.id) {
this.others[obj.id] = new Player(obj.id, obj);
}
};
PlayerList.prototype.get_player = function(id) {
return this.others[id];
};With this, I can add others to my board (but I handle me as a special case) and I also provide a mechanism to access each player so that I can inform them that they need to move.I stop there for tonight. Hopefully tomorrow, I will be able to get other players showing up in my room.
Day #98
No comments:
Post a Comment