Habrawars: utility for graphical debugging

I decided to share a plugin for the game HabraWars - a graphical debugger. Able to be embedded in the engine and display points, lines and text. The rest can be screwed to taste.

With the help of the plugin you can draw something useful. For example, you can see what my bot thinks :)


Source:

var debug = true ; // Enable or disable debugging

// Usage example: draws a yellow message at (100,200) point for 50 frames
// if (debug) debug.plotText(100, 200, 'Hello world!', 'yellow', 50);

var DebugHelper = function () {
this ._2Pi = 2 * Math.PI;
this .padding = 10;
this .canvas = null ;

var engine = null ;
var window = ( function () { return this ; })();
if (window) {
engine = window.engine;
}

if (engine) {
this .canvas = engine.canvas;
var oldDraw = engine.draw;
var self = this ;
if ( this .canvas) {
engine.draw = function (a, b, c, d, e, f) {
oldDraw.apply(engine, arguments);
self._draw();
}
}
}
this .shapes = [];
};

DebugHelper.prototype._draw = function (x, y) {
var len = this .shapes.length;

for ( var i = 0; i < len; i++) {
var shape = this .shapes.shift();

if (shape.type === 'point' ) {
this ._drawPoint(shape);
}
else if (shape.type === 'line' ) {
this ._drawLine(shape);
}
else if (shape.type === 'text' ) {
this ._drawText(shape);
}

shape.frameCount--;
if (shape.frameCount > 0) {
this .shapes.push(shape);
}
}
};

DebugHelper.prototype._drawPoint = function (point) {
if (! this .canvas) return ;
this .canvas.beginPath();
this .canvas.fillStyle = point.color;
this .canvas.arc( this .padding + point.x, this .padding + point.y, point.size, 0, this ._2Pi, true );
this .canvas.fill();
};

DebugHelper.prototype._drawLine = function (line) {
if (! this .canvas) return ;
this .canvas.beginPath();
this .canvas.strokeStyle = line.color;
this .canvas.moveTo( this .padding + line.x1, this .padding + line.y1);
this .canvas.lineTo( this .padding + line.x2, this .padding + line.y2);
this .canvas.closePath();
this .canvas.stroke();
};

DebugHelper.prototype._drawText = function (text) {
if (! this .canvas) return ;
this .canvas.font = "10pt Arial" ;
this .canvas.fillStyle = text.color;
this .canvas.fillText(text.text, this .padding + text.x, this .padding + text.y);
};

DebugHelper.prototype.plotPoint = function (x, y, color, size, frameCount) {
this .shapes.push({
'type' : 'point' ,
'frameCount' : (frameCount ? frameCount : 1),
'x' : x,
'y' : y,
'color' : (color ? color : 'white' ),
'size' : (size ? size : 1)
});
};

DebugHelper.prototype.plotLine = function (x, y, x2, y2, color, frameCount) {
this .shapes.push({
'type' : 'line' ,
'frameCount' : (frameCount ? frameCount : 1),
'x1' : x,
'y1' : y,
'x2' : x2,
'y2' : y2,
'color' : (color ? color : 'white' )
});
};

DebugHelper.prototype.plotText = function (x, y, text, color, frameCount) {
this .shapes.push({
'type' : 'text' ,
'frameCount' : (frameCount ? frameCount : 1),
'x' : x,
'y' : y,
'text' : text,
'color' : (color ? color : 'white' )
});
};

if (debug) debug = new DebugHelper();

* This source code was highlighted with Source Code Highlighter .