Use images for star goals at top of game screen, rather than unicode.

cat.html

@@ -141,6 +141,7 @@ var wipe = {
 //var FULLSTAR = "\u2605";
 //var EMPTYSTAR = "\u2606";
 
+var STARWID_TOPGOALS = 16;
 var STARWID_LEVSEL = 16;
 var STARWID_LEVSEL_LOCKED = 16;
 var STARWID_LEVSEL_TOP = 24;
@@ -978,10 +979,14 @@ var game = {
 	},
 
 	incloadprogress : function() {
+		/*
 		setTimeout(function () { 
 			nimages++;
 			console.log(nimages + " / " + maximages + " images loaded.");
 		 }, (rnd(3)+1) * 1000);
+		*/
+		nimages++;
+		console.log(nimages + " / " + maximages + " images loaded.");
 	},
 
 	drawloader : function() {
@@ -997,12 +1002,16 @@ var game = {
 	init : function() {
 
 		this.canvas = document.createElement("canvas");
+		this.stargoalbanner = document.createElement("canvas");
 
 		this.hratio = SCREENH / SCREENW;
 		this.wratio = SCREENW / SCREENH;
 		this.curw = SCREENW;
 		this.curh = SCREENH;
 
+		this.stargoalbanner.width = SCREENW;
+		this.stargoalbanner.height = STARWID_TOPGOALS;
+
 		this.canvas.width = SCREENW;
 		this.canvas.height = SCREENH;
 
@@ -1537,11 +1546,10 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 
 		if (game.state == "running") {
 			var y1 = 10;
-			var y2 = 26;
+			var y2 = 20;
 			var y3 = 45;
 			var x,y = 10;
 
-
 			// show level
 /*
 			ctx.font = "16pt Futura";
@@ -1555,25 +1563,20 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 			ctx.textBaseline = "middle";
 			shadowtext(ctx, "Level " + curlevel, LEVELTEXTSIZE, "#00aaee", SCREENW/2, y1);
 
-			// show star targets
+			// just blit pre-generated star goal targets
+			ctx.drawImage(this.stargoalbanner, 0, y2, this.stargoalbanner.width, this.stargoalbanner.height);
+
+
+			/*
 			var starsize = 10;
 			var starindent = 16;
 			var startextcol = "#eeee00";
 			var startextcoldark = "#999900";
 			x = SCREENW/4;
-			// TODO:  use star inage. draw on temp
-			// canvas buffer.  compute at start of
-			// level then just re use it.
+			// TODO:  use star image instead. 
 			for (i = 0; i < 3; i++) {
 				var n,starx,stars = "";
 				for (n = 0; n < (i+1); n++) {
-					/*
-						if (n == 0) {
-							starx = (SCREENW/4)
-						} else if
-						drawcross(ctx, starx, y, starx + starsize, y + starsize, startextcol, 2);
-						starx += starsize*1.5;
-					*/
 					stars = stars + "\u2605"
 
 				}
@@ -1584,6 +1587,7 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 					x, y2);  
 				x += (SCREENW / 4);
 			}
+			*/
 
 			// show score
 			ctx.textAlign = "left";
@@ -3373,6 +3377,71 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 		}
 	},
 
+	generatestargoalbanner : function() {
+		var i,x,y;
+		var topctx = this.stargoalbanner.getContext("2d");
+
+		// show star targets
+		var starsize = STARWID_TOPGOALS;
+		var spacewid = starsize / 2;
+		var starindent = 16;
+		var startextcol = "#eeee00";
+		var startextcoldark = "#999900";
+
+		x = SCREENW/4;
+		y = 0;
+
+		// clear top buffer
+		topctx.clearRect(0, 0, this.stargoalbanner.width, this.stargoalbanner.height);
+
+		// for each points goal, generate a temp image and paste it.
+		for (i = 0; i < 3; i++) {
+			var xx = 0,yy = 0;
+			var n;
+			var textw,pointtext;
+
+			// create third temp buffer for this star images + points
+			var a = document.createElement("canvas");
+			var actx = a.getContext("2d");
+
+			// figure out how big text will be
+			pointtext = addcommas(game.levels[curlevel].starpoints[i]);
+			textw = gettextw(actx, pointtext, STARPOINTTEXTSIZE);
+
+			// size third temp buffer based on text width
+			a.width = starsize*3 + spacewid + textw;
+			a.height = this.stargoalbanner.height;
+			a.id = "a";
+
+			actx.clearRect(0, 0, a.width, a.height);
+
+
+			for (n = 0; n < (i+1); n++) {
+				// draw star on to third buffer
+				actx.drawImage(image['starfull'], xx, yy, starsize, starsize);
+				xx += starsize;
+			}
+
+			xx += starsize/4;
+
+			// draw text on to third buffer
+			actx.textAlign = "left";
+			actx.textBaseline = "top";
+			shadowtext(actx, pointtext, STARPOINTTEXTSIZE, 
+				(score >= game.levels[curlevel].starpoints[i]) ? startextcol : startextcoldark,
+				xx, yy);
+
+
+			// blit third buffer to top buffer then move along
+//console.log("i: " + i + ", x = " + x + "   y = " + y + "     a.dims = " + a.width + "," + a.height);
+			topctx.drawImage(a, x - a.width/2, y, a.width, a.height);
+			x += (SCREENW / 4);
+
+			// remove temp third buffer
+			//document.removeChild(document.getElementById("a"));
+		}
+	},
+
 	setstate : function(newstate) {
 
 
@@ -3408,7 +3477,6 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 			tapx = 0;
 			tapy = BOARDY;
 		} else if (newstate == "running") {
-
 			this.initlevelvars();
 			this.populategrid();
 
@@ -3419,6 +3487,9 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 			winimg.src = "images/win" + n + ".png";
 			this.winimgsize = 0.1;
 
+			// generate starpoint goal banner for top of screen
+			this.generatestargoalbanner();
+
 			wipe.start("", "in", 50);
 		} else if (newstate == "levselect") {
 			// reset grid size

todo

@@ -8,6 +8,16 @@ https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/
 
 ----------
 
+images for star goals.
+	On level init:
+		make temp topbuffer - SCREENW x hight
+		3 x
+			make temp buffer - starwid + textwid(" = 6,000");
+			blit to temp topbuffer
+
+	In drawtop(){
+		blit topbuffer to screen
+
 
 white outline ?