Adding string printing to canvas

TODO: Add in all the symbols the font has

1 files changed, 101 insertions, 19 deletions

diff --git a/public/js/rogue.js b/public/js/rogue.js
index 10f53b8..c89b7df 100644
--- a/public/js/rogue.js
+++ b/public/js/rogue.js
@@ -95,6 +95,8 @@ var ghost = new Sprite(7, 20, 16, 16);
 var number = new Sprite(2, 59, 8, 16);
 var upper = new Sprite(2, 60, 8, 16);
 var lower = new Sprite(2, 62, 8, 16);
+var symbol = new Sprite(2, 64, 8, 16);
+var space = new Sprite(1, 59, 8, 16);
 
 /** Client Logic **/
 
@@ -107,21 +109,21 @@ spritemap.src = 'scroll-o-sprites-edited.png';
 function drawInitialBoard() {
 	for(var i = 0; i < 32; i++) {
 		for(var j = 0; j < 26; j++) {
-			drawSprite(nothing, i, j);
+			drawSprite(nothing, i, j, false);
 		}
 	}
 	for(var i = 5; i < 30; i++) {
 		for(var j = 2; j < 10; j++) {
-			drawSprite(dirt, i, j);
+			drawSprite(dirt, i, j, false);
 		}
 	}
 	for(var i = 0; i < 32; i++) {
-		drawSprite(wall[0], i, 0);
-		drawSprite(wall[1], i, 25);
+		drawSprite(wall[0], i, 0, false);
+		drawSprite(wall[1], i, 25, false);
 	}
 	for(var j = 0; j < 26; j++) {
-		drawSprite(wall[2], 0, j);
-		drawSprite(wall[2], 31, j);
+		drawSprite(wall[2], 0, j, false);
+		drawSprite(wall[2], 31, j, false);
 	}
 
 	drawPlayerInfo();
@@ -136,23 +138,39 @@ function drawPlayerInfo() {
 	
 	for(var i = 0; i < boxWidth; i++) {
 		for(var j = 1; j < 25; j++) {
-			drawSprite(nothing, 31 - i, j);
+			drawSprite(nothing, 31 - i, j, false);
 			if(i == 0) {
-				drawSprite(border[5], 31 - boxWidth, j);
-				drawSprite(border[4], 31, j);
+				drawSprite(border[5], 31 - boxWidth, j, false);
+				drawSprite(border[4], 31, j, false);
 			}
 		}
-		drawSprite(border[6], 31 - i, 0);
-		drawSprite(border[7], 31 - i, 25);
+		drawSprite(border[6], 31 - i, 0, false);
+		drawSprite(border[7], 31 - i, 25, false);
 	}
 	
-	drawSprite(border[1], 31 - boxWidth, 0);
-	drawSprite(border[0], 31, 0);
-	drawSprite(border[3], 31 - boxWidth, 25);
-	drawSprite(border[2], 31, 25);
+	drawSprite(border[1], 31 - boxWidth, 0, false);
+	drawSprite(border[0], 31, 0, false);
+	drawSprite(border[3], 31 - boxWidth, 25, false);
+	drawSprite(border[2], 31, 25, false);
 
-	drawSprite(heart, 31 - boxWidth + 2, 7);
-	drawSprite(shield, 31 - boxWidth + 2, 8);
+	drawSprite(heart, 31 - boxWidth + 2, 7, false);
+	drawSprite(shield, 31 - boxWidth + 2, 8, false);
+
+	renderText("Player  Info", 31 - boxWidth + 2, 1);
+	renderText("100", 31 - boxWidth + 3, 7);
+	renderText("15", 31 - boxWidth + 3, 8);
+}
+
+/**
+ * Creates a temporary sprite based off an initial sprite, indexed to the right
+ * of the original sprite from the spritemap.
+ *
+ * @param sprite The original sprite to start from
+ * @param diff The number of sprites to the right to go on the spritemap
+ */
+function indexSprite(sprite, diff) {
+	var newSprite = new Sprite(sprite.x + diff, sprite.y, sprite.width, sprite.height);
+	return newSprite;
 }
 
 /**
@@ -161,7 +179,71 @@ function drawPlayerInfo() {
  * @param sprite The {@code Sprite} to draw
  * @param x The X location to draw to
  * @param y The Y location to draw to
+ * @param shift Adds 8 pixels to the final X location (used for the font since is are half as wide)
  */
-function drawSprite(sprite, x, y) {
-	context.drawImage(spritemap, sprite.x * 16, sprite.y * 16, sprite.width, sprite.height, x * 16, y * 16, sprite.width, sprite.height);
+function drawSprite(sprite, x, y, shift) {
+	var xlocal = 32 + ((sprite.x - 2) * sprite.width);
+	if(shift) {
+		context.drawImage(spritemap, xlocal, sprite.y * 16, sprite.width, sprite.height, x * 16 + 8, y * 16, sprite.width, sprite.height);
+	} else {
+		context.drawImage(spritemap, xlocal, sprite.y * 16, sprite.width, sprite.height, x * 16, y * 16, sprite.width, sprite.height);
+	}
+}
+
+/**
+ * Prints out a string at a location, using the sprite font
+ * This will automatically jump to the next line when it hits the edge of the
+ * canvas. Printing will stop when it hits the bottom of the canvas. Also has
+ * minimal support for esacpe codes.
+ *
+ * @param message A string containing the message to write
+ * @param x The X location to start at
+ * @param y The Y location to start at
+ */
+function renderText(message, x, y) {
+	var startX = x;
+	var shift = false;
+	for(var i = 0; i < message.length; i++) {
+		var sprite = space;
+		var character = message.charCodeAt(i);
+		if(character === 92 && i + 1 < message.length) {
+			switch(message.charCodeAt(i + 1)) {
+			case 110: // newline
+				y++;
+				shift = false;
+				continue;
+			case 116: // tab
+				x += 4;
+				shift = false;
+				continue;
+			case 92: // \ character
+				sprite = indexSprite(symbol, 19);
+				break;
+			default:
+				break;
+			}
+		} else {
+			if(character >= 48 && character <= 57) {
+				sprite = indexSprite(number, character - 48);
+			} else if(character >= 65 && character <= 90) {
+				sprite = indexSprite(upper, character - 65);
+			} else if(character >= 97 && character <= 122) {
+				sprite = indexSprite(lower, character - 97);
+			}
+			// TODO: Add other symbols
+		}
+		if(x >= 31) {
+			y++;
+			x = startX;
+			shift = false;
+		}
+		if(y >= 24) {
+			break;
+		}
+		drawSprite(sprite, x, y, shift);
+		if(shift) {
+			x++;
+		}
+		shift = !shift;
+	}
 }