Readying Things for the Kids

‹prev | My Chain | next›

Up tonight, I need to start thinking about making things a bit easier for my kids to code my (fab) game.

I expect the entry point that will pull in the kids will be the frames animation that prompted me to write the animate-frames plugin for raphaël.js. The problem right now is that the responsibility for describing the frames is in the game room:

Room.prototype.player_frames = function() {
var standing = [
  { label: "left_leg",
    style: "fill:none;stroke:#000000;stroke-width:0.99999779px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline",
    d: "M 9.7001312,18.93142 C 9.4644309,22.702657 9.2287306,26.473893 8.9930303,30.24513" },

  // ...
];

var walking = [
  // ...
];

  return [standing, walking];
};

Room.prototype.draw_player = function(player, color) {
  var frames = this.player_frames();

  // set x-y position from player.x, player.y
  return this
    .paper
    .svg_frames(frames)
    .translate(player.x, player.y);
};

It is not completely crazy that the room draws the player. The game board is responsible for holding the reference to the raphaël paper object that draws things. It also needs to keep track of players, makes sure that they do not stray out of the room and sends mouse events to the players.

OK, so that is pretty much a bunch of bull. The room might need to ask the player how the player ought to be drawn, but it has no business holding onto that information.

So first up, I make a player_frames global object, in a separate file, javascript/player_frames.js, that will hold that information. The kids ought to be able to get in there and play with things without being distracted by all the other code. As an intermediate step, I replace the player_frames() call with a reference to the global object:

Room.prototype.draw_player = function(player, color) {
  // set x-y position from player.x, player.y
  return this
    .paper
    .svg_frames(player_frames)
    .translate(player.x, player.y);
};

I then need to pull that global into the page, which is done as a fab.js HTML app:

// ...
      ( SCRIPT, { src:  "/javascript/room.js",
                  type: "application/javascript" } )()

      ( SCRIPT, { src:  "/javascript/player_frames.js",
                  type: "application/javascript" } )()

      ( SCRIPT, { type: "application/javascript" } )
        ( board_js_string )
      ()
// ...

Reloading, I start getting all sorts of undefined errors. It takes me a bit, but I eventually realize that one of the problems with HTML (fab) apps is that the server needs to be restarted when changes are made—even to HTML pages.

Once I figure that out, I get things working. Ultimately, I make the Player responsible for the player frames:

Room.prototype.draw_player = function(player, color) {
  // set x-y position from player.x, player.y
  return this
    .paper
    .svg_frames(player.frames())
    .translate(player.x, player.y);
};

Ah, much better.

That will suffice for tonight. Up tomorrow, I need to get some of the changes to the animate-frames plugin back into the main repository. I would also like to make sure that everything still works with the latest version of fab.js.

Never a shortage of things to learn.


Day #245