*use image instead of unicode for yellow stars.

cat.html

@@ -8,8 +8,8 @@
 <meta http-equiv="content-type" content="text/html; charset=UTF8">
 
 <!-- Viewport isn't scalable -->
-<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0" />
-<meta name="viewport" content="width=devicewidth, minimal-ui" />
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-au" />
+<!-- <meta name="viewport" content="width=device-width, minimal-ui" /> -->
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 
@@ -130,8 +130,13 @@ var wipe = {
 	},
 };
 
-var FULLSTAR = "\u2605";
-var EMPTYSTAR = "\u2606";
+//var FULLSTAR = "\u2605";
+//var EMPTYSTAR = "\u2606";
+
+var STARWID_LEVSEL = 16;
+var STARWID_LEVSEL_LOCKED = 16;
+var STARWID_LEVSEL_TOP = 24;
+var STARWID_ENDLEV = 32;
 
 var DEF_GRIDSIZE = 80;
 var DEF_THINGSIZE = 64;
@@ -576,13 +581,16 @@ function startGame() {
 	loadimage('catwalkl', 'images/catwalkl.png');
 	loadimage('catwalkr', 'images/catwalkr.png');
 
+	loadimage('starfull', 'images/starfull.png');
+	loadimage('starempty', 'images/starempty.png');
+
 
 	game.init();
 	game.initlevels();
 
 	playerdata.load();
 
-	window.addEventListener('load', game.init, false);
+	//window.addEventListener('load', game.init, false);
 	window.addEventListener('resize', game.resize, false);
 
 	mainloop();
@@ -955,13 +963,16 @@ var game = {
 
 	screenflash: 0,
 
+	canvas: null,
+
 	addfirework : function() {
 		this.screenflash = 1.0;
 	},
 
-	canvas : document.createElement("canvas"),
-
 	init : function() {
+
+		this.canvas = document.createElement("canvas");
+
 		this.ratio = SCREENW / SCREENH;
 		this.curw = SCREENW;
 		this.curh = SCREENH;
@@ -980,7 +991,6 @@ var game = {
 
 		document.body.insertBefore(this.canvas, document.body.childNodes[0]);
 
-		/*
 		// try to go full screen?
 		var body = document.documentElement;
 		if (body.requestFullscreen) {
@@ -992,7 +1002,6 @@ var game = {
 		} else if (body.msrequestFullscreen) {
 			body.msrequestFullscreen();
 		}
-		*/
 
 		this.resize();
 
@@ -1055,19 +1064,23 @@ var game = {
 	},
 
 	resize : function() {
-		this.curh = window.innerHeight;
-		this.curw = this.curh * this.ratio;
+		game.curh = window.innerHeight;
+		game.curw = game.curh * game.ratio;
 
 		// hide address bar on phones
-		if (this.android || this.ios) {
+		if (game.android || game.ios) {
 			document.body.style.height = (window.innerHeight + 50) + 'px';
 		}
 
 		// scale canvas
 		////this.canvas.style.width = this.curw + 'px';
 		//this.canvas.style.height = this.curh + 'px';
-		this.canvas.style.width = this.curw + 'px';
-		this.canvas.style.height = this.curh + 'px';
+
+	//	this.canvas.style.width = this.curw + 'px';
+	//	this.canvas.style.height = this.curh + 'px';
+console.log("game.canvas = " + game.canvas);
+		game.canvas.style.width = game.curw + 'px';
+		game.canvas.style.height = game.curh + 'px';
 
 		window.setTimeout(function() {
 			window.scrollTo(0, 1);
@@ -1789,34 +1802,34 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 			y += TAPBUTTONSIZEC;
 
 			nstars = game.calcstars(curlevel, score);
-			game.drawstars(ctx, SCREENW / 2, y, TAPBUTTONSIZESTAR, nstars);
+			game.drawstars(ctx, SCREENW / 2, y, TAPBUTTONSIZESTAR, nstars, STARWID_ENDLEV);
 			console.log("earned " + nstars + " stars");
 		}
 
 		
 	},
 
-	drawstars : function(ctx, x, y, size, stars) {
+	drawstars : function(ctx, x, y, size, stars, starwid) {
 		var i;
 		var starcol = "#dddd00";
-		var starwid;
+		var starspace = starwid / 10;
 		var sx;
 
-		starwid = gettextw(ctx, FULLSTAR, size);
-		
-		sx = x - (starwid);
+		sx = x - (starwid+starspace);
 		for (i = 1;i <= 3; i++) {
-			var thiscol;
+			var thiscol,imgname;
 			if (stars >= i) {
-				thiscol = starcol;
+				imgname = "starfull";
 			} else {
-				thiscol = "black";
+				imgname = "starempty";
 			}
 
 			ctx.textAlign = "center";
 			ctx.textBaseline = "middle";
-			shadowtext(ctx, FULLSTAR, size, thiscol, sx, y);
-			sx += starwid;
+			this.context.drawImage(image[imgname], sx - (starwid/2), y - (starwid/2), starwid, starwid);
+
+			sx += starwid + starspace;
+
 		}
 	},
 
@@ -2958,6 +2971,8 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 		var buttonyoff = 0;
 		var gridalpha = 1.0;
 
+		var topstarsize = 
+
 		//ctx = this.context;
 
 		// background
@@ -2969,9 +2984,11 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 		titleyoff = wipe.getval(titley*5, "down", "up", 0);
 		shadowtext(ctx, "Level Selection", TITLESIZELEVSELECT,titlecol, SCREENW / 2, titley - titleyoff); 
 
+		ctx.drawImage(image['starfull'], LEVSEL_X, pstarsy - titleyoff, STARWID_LEVSEL_TOP, STARWID_LEVSEL_TOP);
+
 		ctx.textAlign = "left";
 		ctx.textBaseline = "top";
-		shadowtext(ctx, FULLSTAR + " " + playerdata.totstars, TEXTSIZETOTSTARS,starcol, LEVSEL_X, pstarsy - titleyoff);
+		shadowtext(ctx, playerdata.totstars, TEXTSIZETOTSTARS,starcol, LEVSEL_X + STARWID_LEVSEL_TOP*1.2, pstarsy - titleyoff);
 		
 		gridalpha = wipe.getval(1.0, "up", "down", 1.0);
 
@@ -3003,11 +3020,18 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 							GRIDSIZE/2, GRIDSIZE/2);
 
 						// # stars to unlock
-						ctx.textAlign = "center";
-						ctx.textBaseline = "middle";
-						shadowtext(ctx, FULLSTAR + " " + this.levels[levnum].starsrequired, 
+
+						ctx.drawImage(image['starfull'], 
+						   	LEVSEL_X + x + GRIDSIZE/2 - STARWID_LEVSEL_LOCKED*1.25,  
+							LEVSEL_Y + y + GRIDSIZE - (GRIDSIZE/4) - (STARWID_LEVSEL_LOCKED/2),
+						   	STARWID_LEVSEL_LOCKED, STARWID_LEVSEL_LOCKED);
+
+						ctx.textAlign = "left";
+						ctx.textBaseline = "top";
+
+						shadowtext(ctx, this.levels[levnum].starsrequired, 
 							TEXTSIZELEVSTARS, starcol, 
-							LEVSEL_X + x + GRIDSIZE/2, LEVSEL_Y + y + GRIDSIZE - (GRIDSIZE/4));
+							LEVSEL_X + x + GRIDSIZE/2, LEVSEL_Y + y + GRIDSIZE - (GRIDSIZE/4) - (STARWID_LEVSEL_LOCKED/2));
 				
 
 					} else {
@@ -3033,7 +3057,7 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 							starcount = 0;
 						}
 						
-						game.drawstars(ctx, LEVSEL_X + x + GRIDSIZE/2, stary, TEXTSIZELEVSTARS, starcount);
+						game.drawstars(ctx, LEVSEL_X + x + GRIDSIZE/2, stary, TEXTSIZELEVSTARS, starcount, STARWID_LEVSEL);
 			
 						/*
 						stars = game.calcstartext(starcount);
@@ -3625,7 +3649,6 @@ function shadowtext(ctx, text, size, col, x, y) {
 	}
 
 	ctx.font = size + "pt " + FONT;
-//console.log("shadowtest() - font: " + ctx.font + " text:  " + text);
 	// shadows
 	ctx.fillStyle = "black";
 	ctx.fillText(text, x-1, y-1); 

todo

@@ -32,7 +32,8 @@ https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/
 
 ----------
 
-show star counts in dark if you haven't got them
+*use image instead of unicode for yellow stars.
+
 ----------