Fix: show typing text background color

src/game/typing/examination/game.js

@@ -55,19 +55,50 @@ var TypingExamination = {
 
 
 		// typing content
+		var CONTENT_TEXT_WIDTH	= 800;
+		var CONTENT_UNDERLINE_OFFSET = 16;
+		var TYPING_CONTENT_UNDERLINE_OFFSET = 2;
+
+		var graphics = game.add.graphics(0, 0);
+		// graphics.beginFill(0xFF3300);
+		graphics.lineStyle(1, 0x303030, 1);
+
+
 		var TYPING_CONTENT_X = 50;
-		var TYPING_CONTENT_Y = 340;
+		var TYPING_CONTENT_Y = 320;
-		var RECORD_POSITION_X = 970;
+		var RECORD_POSITION_X = 990;
+
+		var INPUT_TEXT_OFFSET_X = 10;
+		var INPUT_TEXT_OFFSET_Y = 60;
 
 		var FONT_SIZE = 32;
-		var TYPING_TEXT_OFFSET_HEIGHT = 40;
+		var TYPING_TEXT_OFFSET_HEIGHT = 52;
 
 		// textStyleBasic.font = "bold 38px Arial";
 		// textStyleBasic.backgroundColor = "rgba(0, 0, 0, 0.25)";
 
 
 		// current text
+		graphics.moveTo(
+			TYPING_CONTENT_X,
+			TYPING_CONTENT_Y + CONTENT_UNDERLINE_OFFSET + TYPING_CONTENT_UNDERLINE_OFFSET
+		);
+		graphics.lineTo(
+			TYPING_CONTENT_X + CONTENT_TEXT_WIDTH,
+			TYPING_CONTENT_Y + CONTENT_UNDERLINE_OFFSET + TYPING_CONTENT_UNDERLINE_OFFSET
+		);
+
 		textStyleBasic.font = "38px Courier New";
+		this.textTypingContentBack = game.add.text(
+			TYPING_CONTENT_X, TYPING_CONTENT_Y,
+			"", textStyleBasic
+		)
+			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+			// .addColor(TypingExamination.COLOR_CONTENT_INPUT, 0);
+		this.textTypingContentBack.anchor.set(0, 0.5);
+		this.textTypingContentBack.fontSize = FONT_SIZE;
+		this.textTypingContentBack.style.backgroundColor = TypingExamination.BACKGROUND_COLOR_CONTENT_INPUT;
+
 		this.textTypingContent = game.add.text(
 			TYPING_CONTENT_X, TYPING_CONTENT_Y,
 			"", textStyleBasic
@@ -77,6 +108,7 @@ var TypingExamination = {
 		this.textTypingContent.anchor.set(0, 0.5);
 		this.textTypingContent.fontSize = FONT_SIZE;
 
+		// current text line number / total line number
 		textStyleBasic.font = "38px Arial";
 		textStyleBasic.backgroundColor = null;
 		this.textTypingLine = game.add.text(
@@ -89,7 +121,7 @@ var TypingExamination = {
 
 
 
-		var TYPING_OFFSET_Y = 70;
+		var TYPING_OFFSET_Y = 60;
 		var TYPING_PREVIEW_OFFSET_Y = 70;
 		// textStyleBasic.font = "38px Arial";
 		textStyleBasic.backgroundColor = null;
@@ -101,6 +133,15 @@ var TypingExamination = {
 		this.textTypingContentsDone = [];
 		this.textTypingRecordsDone = [];
 		for(var i = 0; i < TypingExamination.TYPING_CONTENT_DONE_COUNT; i++) {
+			graphics.moveTo(
+				TYPING_CONTENT_X,
+				TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * TYPING_TEXT_OFFSET_HEIGHT + CONTENT_UNDERLINE_OFFSET
+			);
+			graphics.lineTo(
+				TYPING_CONTENT_X + CONTENT_TEXT_WIDTH,
+				TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * TYPING_TEXT_OFFSET_HEIGHT + CONTENT_UNDERLINE_OFFSET
+			);
+
 			textStyleBasic.font = "38px Courier New";
 			this.textTypingContentsDone[i] = game.add.text(
 				TYPING_CONTENT_X, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * TYPING_TEXT_OFFSET_HEIGHT,
@@ -127,6 +168,15 @@ var TypingExamination = {
 		// var textPreviewColor = [ '#999999', '#999999', '#999999', '#999999' ];
 		this.textTypingContentPreview = [];
 		for(var i = 0; i < TypingExamination.TYPING_CONTENT_PREVIEW_COUNT; i++) {
+			graphics.moveTo(
+				TYPING_CONTENT_X,
+				TYPING_CONTENT_Y + TYPING_OFFSET_Y + TYPING_PREVIEW_OFFSET_Y + i * TYPING_TEXT_OFFSET_HEIGHT + CONTENT_UNDERLINE_OFFSET
+			);
+			graphics.lineTo(
+				TYPING_CONTENT_X + CONTENT_TEXT_WIDTH,
+				TYPING_CONTENT_Y + TYPING_OFFSET_Y + TYPING_PREVIEW_OFFSET_Y + i * TYPING_TEXT_OFFSET_HEIGHT + CONTENT_UNDERLINE_OFFSET
+			);
+
 			textStyleBasic.font = "38px Courier New";
 			this.textTypingContentPreview[i] = game.add.text(
 				TYPING_CONTENT_X,
@@ -141,7 +191,11 @@ var TypingExamination = {
 
 
 		// input text
-		this.inputTextContent = new InputText(TYPING_CONTENT_X - 10, TYPING_CONTENT_Y + 70, 800, 50);
+		this.inputTextContent = new InputText(
+			TYPING_CONTENT_X - INPUT_TEXT_OFFSET_X,
+			TYPING_CONTENT_Y + INPUT_TEXT_OFFSET_Y,
+			CONTENT_TEXT_WIDTH + INPUT_TEXT_OFFSET_X * 2,
+			50);
 		this.inputTextContent.anchor.set(0, 0.5);
 		this.inputTextContent.canvasInput.value('');
 		this.inputTextContent.canvasInput.focus();
@@ -313,6 +367,14 @@ var TypingExamination = {
 		return text.replace(/ /g, TypingExamination.SPACE_INDICATOR);
 	},
 
+	setTypingContentText: function(text) {
+		this.textTypingContent.text = text;
+	},
+
+	setTypingContentBackText: function(text) {
+		this.textTypingContentBack.text = text;
+	},
+
 	showTypingExaminationContents: function() {
 		for(var i = 0; i < TypingExamination.TYPING_CONTENT_DONE_COUNT; i++) {
 			var doneIndex = this.typingIndex - i - 1;
@@ -326,12 +388,13 @@ var TypingExamination = {
 		}
 
 		if(this.typingIndex == this.typingContentLength) {
-			this.textTypingContent.text = "";
+			this.setTypingContentText("");
+			this.setTypingContentBackText("");
 			return;
 		}
 
 		var contentText = this.typingExaminationContents[this.typingIndex];
-		this.textTypingContent.text = this.replaceSpaceWithSpaceIndicator(contentText);
+		this.setTypingContentText(this.replaceSpaceWithSpaceIndicator(contentText));
 
 		for(var i = 0; i < TypingExamination.TYPING_CONTENT_PREVIEW_COUNT; i++) {
 			var previewIndex = this.typingIndex + i + 1;
@@ -346,6 +409,9 @@ var TypingExamination = {
 	resetTypingContent: function() {
 		this.textTypingContent.clearColors();
 		this.textTypingContent.addColor(TypingExamination.COLOR_CONTENT_INPUT, 0);
+
+		this.setTypingContentBackText("");
+
 		this.inputTextContent.canvasInput.value('');
 	},
 
@@ -403,13 +469,22 @@ var TypingExamination = {
 		// var replaceSpaceIndicatorInputContent = inputContent.replace(/ /g, TypingExamination.SPACE_INDICATOR);
 		var typingContentLength = typingContent.length;
 		for(var i = 0; i < typingContentLength; i++) {
-			// console.log("typingContent.charAt(i) : " + typingContent.charAt(i));
+			var typingChar = typingContent.charAt(i);
-			// console.log("inputContent.charAt(i) : " + inputContent.charAt(i));
+			var inputChar = inputContent.charAt(i);
+			// console.log("typingChar : " + typingChar);
+			// console.log("inputChar : " + inputChar);
 
-			if(typingContent.charAt(i) != inputContent.charAt(i)) {
+			// when typingChar is the last letter
-				// console.log("inputContent.charAt(" + i + ") : " + inputContent.charCodeAt(i).toString(16) + ", " + inputContent.charAt(i));
+			if(isNaN(inputChar)) {
-				// console.log("typingContent.charAt(" + i + ") : " + typingContent.charCodeAt(i).toString(16) + ", " + typingContent.charAt(i));
+				// console.log("NaN : " + i);
+				this.setTypingContentBackText(this.textTypingContent.text.substring(0, i + 1));
+			}
+
+			if(typingChar != inputChar) {
+				// console.log("inputContent.charAt(" + i + ") : " + inputContent.charCodeAt(i).toString(16) + ", " + inputChar);
+				// console.log("typingContent.charAt(" + i + ") : " + typingContent.charCodeAt(i).toString(16) + ", " + typingChar);
 				this.textTypingContent.addColor(TypingExamination.COLOR_CONTENT_INPUT, i);
+				this.setTypingContentBackText(this.textTypingContent.text.substring(0, i));
 				return;
 			}
 		}
@@ -507,4 +582,6 @@ TypingExamination.OFFSET_RIGHT_ALIGN			= 10;
 TypingExamination.WORD_COUNT_FOR_STAGE			= 10;
 
 TypingExamination.COLOR_CONTENT_INPUT			= "#dddddd";
-TypingExamination.COLOR_CONTENT_RIGHT			= "#ffff4d";
+TypingExamination.COLOR_CONTENT_RIGHT			= "#ffff4d";
+
+TypingExamination.BACKGROUND_COLOR_CONTENT_INPUT	= "#333333";