Flawed pirate card

[a.b...@gmail.com]

My apologies for the card I wrote that uses the HTML Canvas element
for the boats UI. I tested it using "debug" but I forgot that in the
context of pirate cards, "this" is not the game object but the Pirate
object. I was going to write a replacement card on my turn, but
somebdy *ahem* stabbed me in the back.

Geoff, I think nothing will go wrong if you try to play your current
card (it should just throw an exception). If you want to write the
replacement card, below is my updated version.
--abliss

// Updates the old Boat GUI to use HTML canvas instead of the jsGraphics hack.

this.FrontEnd.onLoad = function(div, pirateGame) {
while(div.hasChildNodes()){
div.removeChild(div.firstChild);
}
var canvas = document.createElement("canvas");
canvas.id = "pirateCanvas";
canvas.width = canvas.height = 500;
div.appendChild(canvas);
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(232, 238, 250)";
ctx.fillRect (0, 0, 500, 500);
var drawables = [pirateGame.Boats.wind];
pirateGame.crew.forEach(
function(pirate) {
if (pirateGame.Boats.boats[pirate.id]) {
drawables.push(pirateGame.Boats.getBoat(pirate));
}
});
for (var i = 0; i < drawables.length; i++) {
drawables[i].draw(ctx);
}
}
};

this.Boats.wind.draw = function(ctx) {
ctx.save();
var tailX = 10, tailY = 10, width = 5;
ctx.fillStyle = "black";
ctx.translate(tailX, tailY);
ctx.rotate(this.direction);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(this.speed, 0);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(this.speed, width);
ctx.lineTo(this.speed + width, 0);
ctx.lineTo(this.speed, - width);
ctx.fill();
ctx.restore();
};

this.Boats.prototype.draw = function(ctx) {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.bearing);
String("Draw the hull");
ctx.beginPath();
ctx.moveTo(0,this.width / 2);
ctx.lineTo(this.length, 0);
ctx.lineTo(0, - this.width / 2);
ctx.fillStyle= "#" + (this.color);
ctx.fill();
String("Draw the rudder");
ctx.strokeStyle = "black";
ctx.save();
ctx.rotate(this.rudderAngle);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(this.length, 0);
ctx.stroke();
ctx.restore();
String("Draw the sail.");
ctx.strokeStyle = "white";
ctx.translate(this.length / 2, 0);
ctx.rotate(this.sailAngle);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(this.sailLength, 0);
ctx.stroke();
String("Allow for easy expansion.");
this.draw2(ctx);
ctx.restore();
};

"Ahoy, tha boats be pretty again!";