Fix: Input text color, background color

src/game/lib/color/main_color.js

@@ -13,8 +13,8 @@ MainColor.LIGHT_CHOCO_STRING	= "#BF8763";
 MainColor.LIGHTER_CHOCO_STRING	= "#E6A277";
 
 MainColor.CHOCO_HEX				= 0x805A42;
-MainColor.DARKER_CHOCO_HEX		= 0x604031;
+MainColor.DARK_CHOCO_HEX		= 0x604031;
-MainColor.DARK_CHOCO_HEX		= 0x402D21;
+MainColor.DARKER_CHOCO_HEX		= 0x402D21;
 MainColor.LIGHT_CHOCO_HEX		= 0xBF8763;
 MainColor.LIGHTER_CHOCO_HEX		= 0xE6A277;
 

src/game/typing/examination/game.js

@@ -13,19 +13,6 @@ TypingExamination.prototype.preload = function() {
 }
 
 TypingExamination.prototype.create = function() {
-	// for developing
-	// sessionStorageManager.setMaestroName("삼화초");
-	// sessionStorageManager.setMaestroID(3);
-	// sessionStorageManager.setMaestroAccountType(4);
-	// sessionStorageManager.setPlayerName("박지상");
-	// sessionStorageManager.setPlayerID(35);
-	// sessionStorageManager.setPlayerAccountType(0);
-	// sessionStorageManager.setPlayingAppID(100);
-	// sessionStorageManager.setPlayingAppName("examination_korean");
-	// sessionStorageManager.setPlayingAppKoreanName("타자 검정");
-	// sessionStorageManager.setRecord(0);
-	// sessionStorageManager.setAppHighestRecord(100.123);
-
 	this.dbService = new DBService();
 	this.dbService.setMaestroID(sessionStorageManager.getMaestroID());
 	this.dbService.setPlayerID(sessionStorageManager.getPlayerID());
@@ -85,6 +72,17 @@ TypingExamination.prototype.fontLoaded = function() {
 	this.makeTextContents();
 }
 
+TypingExamination.prototype.makeDefaultText = function(x, y) {
+	var defaultText = game.add.text(x, y, "");
+	defaultText.anchor.set(0, 0.5);
+	defaultText.font = "Nanum Gothic Coding";
+	defaultText.fontSize = 26;
+	defaultText.fontWeight = "normal";
+	defaultText.style.fill = "white";
+
+	return defaultText;
+}
+
 TypingExamination.prototype.makeUnderlineText = function(x, y) {
 	var CONTENT_TEXT_WIDTH	= 800;
 	var CONTENT_UNDERLINE_OFFSET_Y = 17;
@@ -94,38 +92,53 @@ TypingExamination.prototype.makeUnderlineText = function(x, y) {
 	graphics.moveTo(x, y + CONTENT_UNDERLINE_OFFSET_Y);
 	graphics.lineTo(x + CONTENT_TEXT_WIDTH, y + CONTENT_UNDERLINE_OFFSET_Y);
 
-	var underlineText = game.add.text(x, y, "");
+	var underlineText = this.makeDefaultText(x, y);
 	underlineText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
-	underlineText.anchor.set(0, 0.5);
-	underlineText.font = "Nanum Gothic Coding";
-	underlineText.fontSize = 26;
-	underlineText.fontWeight = "normal";
-	underlineText.style.fill = "white";
 
 	return underlineText;
 }
 
 TypingExamination.prototype.makeLineText = function(x, y) {
-	var lineText = game.add.text(x, y, "");
+	var lineText = this.makeDefaultText(x, y);
 	lineText.anchor.set(1, 0.5);
-	lineText.font = "Nanum Gothic Coding";
-	lineText.fontSize = 26;
-	lineText.fontWeight = "normal";
-	lineText.style.fill = "white";
 
 	return lineText;
 }
 
+TypingExamination.prototype.makeInputlineText = function(x, y) {
+	var CONTENT_TEXT_WIDTH	= 800;
+	var CONTENT_UNDERLINE_OFFSET_Y = 17;
+	var TYPING_CONTENT_UNDERLINE_OFFSET_Y = 5;
+	var BIG_FONT_SIZE = 28;
+
+	// current text
+	this.textBackTextOnly = this.makeDefaultText(x, y);
+	this.textBackTextOnly.fontSize = BIG_FONT_SIZE;
+	this.textBackTextOnly.style.fill = TypingExamination.COLOR_NOT_INPUT_STRING;
+	this.textBackTextOnly.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+
+	this.textNextLetterIndicator = this.makeDefaultText(x, y);
+	this.textNextLetterIndicator.fontSize = BIG_FONT_SIZE;
+	this.textNextLetterIndicator.style.fill = TypingExamination.COLOR_NEXT_INPUT_STRING;
+	this.textNextLetterIndicator.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+	this.textNextLetterIndicator.style.backgroundColor = TypingExamination.COLOR_NEXT_INPUT_BACKGROUND_STRING;
+
+	this.textCorrectText = this.makeDefaultText(x, y);
+	this.textCorrectText.fontSize = BIG_FONT_SIZE;
+	this.textCorrectText.style.fill = TypingExamination.COLOR_CORRECT_INPUT_STRING;
+	this.textCorrectText.style.backgroundColor = TypingExamination.COLOR_CORRECT_INPUT_BACKGROUND_STRING;
+
+
+	var graphics = game.add.graphics(0, 0);
+	graphics.lineStyle(1, 0x303030, 1);
+	graphics.moveTo(x, y + CONTENT_UNDERLINE_OFFSET_Y + TYPING_CONTENT_UNDERLINE_OFFSET_Y);
+	graphics.lineTo(x + CONTENT_TEXT_WIDTH, y + CONTENT_UNDERLINE_OFFSET_Y + TYPING_CONTENT_UNDERLINE_OFFSET_Y);
+
+}
+
 TypingExamination.prototype.makeTextContents = function() {
 	// typing content
 	var CONTENT_TEXT_WIDTH	= 800;
-	var CONTENT_UNDERLINE_OFFSET = 17;
-	var TYPING_CONTENT_UNDERLINE_OFFSET = 5;
-
-	var graphics = game.add.graphics(0, 0);
-	// graphics.beginFill(0xFF3300);
-	graphics.lineStyle(1, 0x303030, 1);
-
 
 	var TYPING_CONTENT_X = 150;	// 50;
 	var TYPING_CONTENT_Y = 380;
@@ -134,76 +147,19 @@ TypingExamination.prototype.makeTextContents = function() {
 	var INPUT_TEXT_OFFSET_X = 10;
 	var INPUT_TEXT_OFFSET_Y = 60;
 
-	var FONT_SIZE = 26;
 	var BIG_FONT_SIZE = 28;
 	var TYPING_TEXT_OFFSET_HEIGHT = 50; //46;
 
 	var TYPING_OFFSET_Y = 60;
 	var TYPING_PREVIEW_OFFSET_Y = 70;
 
-	// textStyleBasic.font = "bold 38px Arial";
+
-	// textStyleBasic.backgroundColor = "rgba(0, 0, 0, 0.25)";
+	// input content
+	this.makeInputlineText(TYPING_CONTENT_X, TYPING_CONTENT_Y);
+	this.textTypingLine = this.makeLineText(RECORD_POSITION_X, TYPING_CONTENT_Y);
 
 
-	// current text
+	// typed done contents
-	textStyleBasic.font = "38px Nanum Gothic Coding";
-	this.textTypedContentBack = 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.textTypedContentBack.anchor.set(0, 0.5);
-	this.textTypedContentBack.fontSize = BIG_FONT_SIZE;
-	this.textTypedContentBack.style.backgroundColor = TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR;
-
-	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 = BIG_FONT_SIZE;
-	this.textTypingContentBack.style.backgroundColor = TypingExamination.STAGE_BACKGROUND_COLOR;
-
-	this.textTypingContent = 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.textTypingContent.anchor.set(0, 0.5);
-	this.textTypingContent.fontSize = BIG_FONT_SIZE;
-
-	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
-	);
-
-	// current text line number / total line number
-	// textStyleBasic.font = "38px Arial";
-	textStyleBasic.font = "26px Nanum Gothic Coding";
-	textStyleBasic.backgroundColor = null;
-	this.textTypingLine = game.add.text(
-		RECORD_POSITION_X, TYPING_CONTENT_Y,
-		"", textStyleBasic
-	)
-		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-		// .addColor(TypingExamination.COLOR_CONTENT_INPUT, 0);
-	this.textTypingLine.anchor.set(1, 0.5);
-
-
-
-	// textStyleBasic.font = "38px Arial";
-	textStyleBasic.backgroundColor = null;
-
-
-	// done text
 	var textDoneColor = [ '#99994d', '#88884d', '#77774d', '#66664d' ];
 	// var textDoneColor = [ '#99994d', '#99994d', '#99994d', '#99994d' ];
 	this.textTypingContentsDone = [];
@@ -213,7 +169,8 @@ TypingExamination.prototype.makeTextContents = function() {
 			TYPING_CONTENT_X,
 			TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * TYPING_TEXT_OFFSET_HEIGHT,
 		);
-		this.textTypingContentsDone[i].style.backgroundColor = TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR;
+		this.textTypingContentsDone[i].style.fill = TypingExamination.COLOR_CORRECT_INPUT_STRING;
+		this.textTypingContentsDone[i].style.backgroundColor = TypingExamination.COLOR_CORRECT_INPUT_BACKGROUND_STRING;
 
 		this.textTypingRecordsDone[i] = this.makeLineText(
 			RECORD_POSITION_X,
@@ -221,7 +178,7 @@ TypingExamination.prototype.makeTextContents = function() {
 		);
 	}
 
-	// preview text
+	// preview contents
 	var textPreviewColor = [ '#999999', '#888888', '#777777', '#666666' ];
 	// var textPreviewColor = [ '#999999', '#999999', '#999999', '#999999' ];
 	this.textTypingContentPreview = [];
@@ -231,6 +188,7 @@ TypingExamination.prototype.makeTextContents = function() {
 			TYPING_CONTENT_X,
 			TYPING_CONTENT_Y + TYPING_OFFSET_Y + TYPING_PREVIEW_OFFSET_Y + i * TYPING_TEXT_OFFSET_HEIGHT,
 		);
+		this.textTypingContentPreview[i].style.fill = TypingExamination.COLOR_NOT_INPUT_STRING;
 
 		this.textLineNumber[i] = this.makeLineText(
 			RECORD_POSITION_X,
@@ -251,10 +209,8 @@ TypingExamination.prototype.makeTextContents = function() {
 	this.inputTextContent.canvasInput.fontSize(BIG_FONT_SIZE);
 	// this.inputTextContent.canvasInput.fontWeight("");
 	this.inputTextContent.canvasInput.fontFamily("Nanum Gothic Coding");
-	// this.inputTextContent.canvasInput.fontFamily("Nanum Gothic Coding");
 	this.inputTextContent.canvasInput.placeHolder("");
 	// inputTextContent.canvasInput._onkeydown = this.checkInputText;
-	// inputTextContent.canvasInput._onkeyup = function() {
 	this.inputTextContent.canvasInput._onkeyup = (function() {
 		this.checkTypingContents(event);
 		// warning
@@ -443,12 +399,12 @@ TypingExamination.prototype.completeLoadingWriting = function() {
 }
 
 TypingExamination.prototype.setTypingContentText = function(text) {
-	this.textTypingContent.text = text;
+	this.textBackTextOnly.text = text;
-	this.textTypedContentBack.text = text;
+	this.textNextLetterIndicator.text = text.substring(0, 1);
 }
 
-TypingExamination.prototype.setTypingContentBackText = function(text) {
+TypingExamination.prototype.setCorrectText = function(text) {
-	this.textTypingContentBack.text = text;
+	this.textCorrectText.text = text;
 }
 
 TypingExamination.prototype.showTypingExaminationContents = function() {
@@ -468,7 +424,7 @@ TypingExamination.prototype.showTypingExaminationContents = function() {
 
 	if(this.typingIndex == this.typingContentLength) {
 		this.setTypingContentText("");
-		this.setTypingContentBackText("");
+		this.setCorrectText("");
 		return;
 	}
 
@@ -491,10 +447,7 @@ TypingExamination.prototype.showTypingExaminationContents = function() {
 }
 
 TypingExamination.prototype.resetTypingContent = function() {
-	this.textTypingContent.clearColors();
+	this.setCorrectText("");
-	this.textTypingContent.addColor(TypingExamination.COLOR_CONTENT_INPUT, 0);
-
-	this.setTypingContentBackText("");
 
 	this.inputTextContent.canvasInput.value('');
 }
@@ -544,9 +497,6 @@ TypingExamination.prototype.showTypingContentHighlight = function(inputContent,
 	// console.log(inputContent + "=");
 	// console.log(typingContent + "=");
 
-	this.textTypingContent.clearColors();
-	this.textTypingContent.addColor(TypingExamination.COLOR_CONTENT_RIGHT, 0);
-
 	if(typingContent == null)
 		return;
 
@@ -555,20 +505,21 @@ TypingExamination.prototype.showTypingContentHighlight = function(inputContent,
 	for(var i = 0; i < typingContentLength; i++) {
 		var typingChar = typingContent.charAt(i);
 		var inputChar = inputContent.charAt(i);
-		// console.log("typingChar : " + typingChar);
+		console.log("typingChar : " + typingChar);
-		// console.log("inputChar : " + inputChar);
+		console.log("inputChar : " + inputChar);
 
 		// when typingChar is the last letter
 		if(isNaN(inputChar)) {
 			// console.log("NaN : " + i);
-			this.setTypingContentBackText(this.textTypingContent.text.substring(0, i + 1));
+			this.setCorrectText(typingContent.substring(0, i + 1));
 		}
 
 		if(typingChar != inputChar) {
-			// console.log("inputContent.charAt(" + i + ") : " + inputContent.charCodeAt(i).toString(16) + ", " + inputChar);
+			console.log("inputContent.charAt(" + i + ") : " + inputContent.charCodeAt(i).toString(16) + ", " + inputChar);
-			// console.log("typingContent.charAt(" + i + ") : " + typingContent.charCodeAt(i).toString(16) + ", " + typingChar);
+			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));
+			this.textNextLetterIndicator.text = typingContent.substring(0, i + 1);
+			this.setCorrectText(typingContent.substring(0, i));
 			return;
 		}
 	}
@@ -663,10 +614,13 @@ TypingExamination.OFFSET_RIGHT_ALIGN			= 10;
 
 TypingExamination.WORD_COUNT_FOR_STAGE			= 10;
 
-TypingExamination.COLOR_CONTENT_INPUT			= "#dddddd";
+TypingExamination.COLOR_CONTENT_INPUT_STRING	= "#dddddd";
-TypingExamination.COLOR_CONTENT_RIGHT			= "#ffff4d";
+TypingExamination.COLOR_CORRECT_INPUT			= "#ffff4d";
 
-TypingExamination.STAGE_BACKGROUND_COLOR				= "#4d4d4d";
+TypingExamination.COLOR_NOT_INPUT_STRING		= MainColor.DARK_GRAY_STRING;
-TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR		= "#333333";
+TypingExamination.COLOR_NEXT_INPUT_STRING		= MainColor.GOLD_STRING;	// MainColor.LIGHT_CHOCO_STRING;
-TypingExamination.STAGE_BACKGROUND_COLOR_HEX			= 0x4d4d4d;
+TypingExamination.COLOR_CORRECT_INPUT_STRING	= MainColor.YELLOW_STRING;	// MainColor.CYAN_STRING;
-TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR_HEX	= 0x333333;
+
+TypingExamination.STAGE_BACKGROUND_COLOR			= "#4d4d4d";
+TypingExamination.COLOR_NEXT_INPUT_BACKGROUND_STRING	= MainColor.DARKER_CHOCO_STRING;
+TypingExamination.COLOR_CORRECT_INPUT_BACKGROUND_STRING	= MainColor.DARK_CHOCO_STRING;	// MainColor.DARK_CYAN_STRING;	// "#333333";