Improved texts in info box

Improved texts in info box

Author: BdR76

bin/lcdgame.js

@@ -763,6 +763,28 @@ LCDGame.Game.prototype = {
 		xhr.send();
 	},
 
+	tinyMarkDown: function(str) {
+		// \n => <br/>
+		str = str.replace(/\n/gi, "<br/>");
+
+		// *bold* => <b>bold</b>
+		str = str.replace(/\*.*?\*/g, function(foo){
+			return "<b>"+foo.slice(1, -1)+"</b>";
+		});
+		
+		// _italic_ => <i>italic</i>
+		str = str.replace(/\_.*?\_/g, function(foo){
+			return "<i>"+foo.slice(1, -1)+"</i>";
+		});
+		
+		// [button] => <btn>button</btn>
+		str = str.replace(/\[.*?\]/g, function(foo){
+			return "<btn>"+foo.slice(1, -1)+"</btn>";
+		});
+		
+		return str;
+	},
+
 	// -------------------------------------
 	// metadata load JSON file
 	// -------------------------------------
@@ -771,7 +793,8 @@ LCDGame.Game.prototype = {
 		this.metadata = data;
 
 		// infobox content
-		this.infocontent.innerHTML = "<h1>" + data.gameinfo.device.title + "</h1><br/>" + data.gameinfo.instructions.en;
+		var instr = this.tinyMarkDown(data.gameinfo.instructions.en);
+		this.infocontent.innerHTML = "<h1>" + data.gameinfo.device.title + "</h1><br/>" + instr;
 
 		// get info from metadata
 		var title = data.gameinfo.device.title
@@ -1240,7 +1263,7 @@ LCDGame.Game.prototype = {
 		//this.context2d.fillStyle = "#fff";
 		//this.context2d.fillText(index, this.gamedata.frames[index].xpos, this.gamedata.frames[index].ypos);
 	},
-	
+
 	debugText: function(str, x, y) {
 		// set font
 		this.context2d.font = "bold 12px sans-serif";

css/lcdstyle.css

@@ -22,6 +22,21 @@ td:nth-child(3) {
     text-align: right;
 }
 
+btn {
+    display: inline-block;
+    margin: 0 .1em;
+    padding: .1em .6em;
+    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
+    line-height: 1.4;
+    color: #242729;
+    text-shadow: 0 1px 0 #FFF;
+    background-color: #e1e3e5;
+    border: 1px solid #adb3b9;
+    border-radius: 3px;
+    box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
+    white-space: nowrap;
+}
+
 .container {
 }
 

games/highway/metadata/gameinfo.json

@@ -16,7 +16,7 @@
 			"game 1", "game 2"
 		],
 		"instructions": {
-			"en": "Avoid obstacles, pick up hitchhiker on the left and drop them off at sign on the right. Drop off 3 hitchhikers for a bonus game, get 3 identical numers for bonus."
+			"en": "Avoid obstacles, pick up hitchhiker on the left and drop them off at sign on the right. Drop off 3 hitchhikers for a bonus game, get 3 identical numers for bonus.\n\nPress [Mode] to select game mode,\nthen [< Left] or [Right >] to start the game.\nYou can also press keyboard cursors left and right to move."
 		}
 	}
 }

games/mariobros/metadata/gameinfo.json

@@ -16,7 +16,7 @@
 			"game A", "game B"
 		],
 		"instructions": {
-			"en": "Move Mario and Luigi up and down the bottling factory to safely get the crates into the truck. Fill the truck with 8 crates to complete the level."
+			"en": "Move Mario and Luigi up and down the bottling factory to safely get the crates into the truck. Fill the truck with 8 crates to complete the level.\n\nPress [Game A] or [Game B] to start the game.\nPress [Q]/[A] to move Luigi and [P]/[L] to move Mario."
 		}
 	}
 }

games/searanger/metadata/gameinfo.json

@@ -16,7 +16,7 @@
 			"pro 1", "pro 2"
 		],
 		"instructions": {
-			"en": "Move left and right to avoid coconuts, boats, sharks and birds. When lifesaver drops down, move to the right to escape on the boat."
+			"en": "Move left and right to avoid coconuts, boats, sharks and birds. When lifesaver drops down, move to the right to escape on the boat.\n\nPress [Mode] and then [Game A/B] to select 'pro1' or 'pro2', then press [Start] to start the game. You can also press keyboard cursors left and right to move."
 		}
 	}
 }

src/Game.js

@@ -311,6 +311,28 @@ LCDGame.Game.prototype = {
 		xhr.send();
 	},
 
+	tinyMarkDown: function(str) {
+		// \n => <br/>
+		str = str.replace(/\n/gi, "<br/>");
+
+		// *bold* => <b>bold</b>
+		str = str.replace(/\*.*?\*/g, function(foo){
+			return "<b>"+foo.slice(1, -1)+"</b>";
+		});
+		
+		// _italic_ => <i>italic</i>
+		str = str.replace(/\_.*?\_/g, function(foo){
+			return "<i>"+foo.slice(1, -1)+"</i>";
+		});
+		
+		// [button] => <btn>button</btn>
+		str = str.replace(/\[.*?\]/g, function(foo){
+			return "<btn>"+foo.slice(1, -1)+"</btn>";
+		});
+		
+		return str;
+	},
+
 	// -------------------------------------
 	// metadata load JSON file
 	// -------------------------------------
@@ -319,7 +341,8 @@ LCDGame.Game.prototype = {
 		this.metadata = data;
 
 		// infobox content
-		this.infocontent.innerHTML = "<h1>" + data.gameinfo.device.title + "</h1><br/>" + data.gameinfo.instructions.en;
+		var instr = this.tinyMarkDown(data.gameinfo.instructions.en);
+		this.infocontent.innerHTML = "<h1>" + data.gameinfo.device.title + "</h1><br/>" + instr;
 
 		// get info from metadata
 		var title = data.gameinfo.device.title
@@ -789,6 +812,24 @@ LCDGame.Game.prototype = {
 		//this.context2d.fillText(index, this.gamedata.frames[index].xpos, this.gamedata.frames[index].ypos);
 	},
 
+	debugText: function(str, x, y) {
+		// set font
+		this.context2d.font = "bold 12px sans-serif";
+
+		var lineheight = 15;		
+		var lines = str.split('\n');
+
+		for (var i = 0; i<lines.length; i++) {
+			// shadow text
+			this.context2d.fillStyle = "#000";
+			this.context2d.fillText(lines[i], x+2, y+2);
+			// white text
+			this.context2d.fillStyle = "#fff";
+			this.context2d.fillText(lines[i], x, y);
+			y = y + lineheight;
+		};
+	},
+
 	// -------------------------------------
 	// buttons input through keyboard
 	// -------------------------------------