Fix: typing text width, typing text background color

src/game/typing/examination/game.js

@@ -30,7 +30,7 @@ var TypingExamination = {
 			(function() { this.timeOver(); }).bind(this)
 		);
 
-		game.stage.backgroundColor = '#4d4d4d';
+		game.stage.backgroundColor = TypingExamination.STAGE_BACKGROUND_COLOR;
 
 		/*
 		// keyboard shortcut - useless. this.keyboard is chargning for ESC event
@@ -54,10 +54,12 @@ var TypingExamination = {
 
 
 
+		this.animalList = new AnimalList(90);
+
 		// typing content
 		var CONTENT_TEXT_WIDTH	= 800;
-		var CONTENT_UNDERLINE_OFFSET = 16;
+		var CONTENT_UNDERLINE_OFFSET = 13;
-		var TYPING_CONTENT_UNDERLINE_OFFSET = 2;
+		var TYPING_CONTENT_UNDERLINE_OFFSET = 5;
 
 		var graphics = game.add.graphics(0, 0);
 		// graphics.beginFill(0xFF3300);
@@ -65,30 +67,32 @@ var TypingExamination = {
 
 
 		var TYPING_CONTENT_X = 50;
-		var TYPING_CONTENT_Y = 320;
+		var TYPING_CONTENT_Y = 390;
 		var RECORD_POSITION_X = 990;
 
 		var INPUT_TEXT_OFFSET_X = 10;
 		var INPUT_TEXT_OFFSET_Y = 60;
 
-		var FONT_SIZE = 32;
+		var FONT_SIZE = 26;
-		var TYPING_TEXT_OFFSET_HEIGHT = 52;
+		var BIG_FONT_SIZE = 28;
+		var TYPING_TEXT_OFFSET_HEIGHT = 46;
 
 		// 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.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
@@ -96,8 +100,8 @@ var TypingExamination = {
 			// .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.fontSize = BIG_FONT_SIZE;
-		this.textTypingContentBack.style.backgroundColor = TypingExamination.BACKGROUND_COLOR_CONTENT_INPUT;
+		this.textTypingContentBack.style.backgroundColor = TypingExamination.STAGE_BACKGROUND_COLOR;
 
 		this.textTypingContent = game.add.text(
 			TYPING_CONTENT_X, TYPING_CONTENT_Y,
@@ -106,7 +110,16 @@ var TypingExamination = {
 			.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 = FONT_SIZE;
+		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";
@@ -199,7 +212,7 @@ var TypingExamination = {
 		this.inputTextContent.anchor.set(0, 0.5);
 		this.inputTextContent.canvasInput.value('');
 		this.inputTextContent.canvasInput.focus();
-		this.inputTextContent.canvasInput.fontSize(FONT_SIZE);
+		this.inputTextContent.canvasInput.fontSize(BIG_FONT_SIZE);
 		// this.inputTextContent.canvasInput.fontWeight("");
 		this.inputTextContent.canvasInput.fontFamily("Courier New");
 		// this.inputTextContent.canvasInput.fontFamily("Courier New");
@@ -214,8 +227,6 @@ var TypingExamination = {
 
 
 
-		this.animalList = new AnimalList(670);
-
 		// bottom ui
 		var screenBottomUI = new ScreenBottomUI();
 		screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord());
@@ -223,7 +234,9 @@ var TypingExamination = {
 		screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
 
 
-		this.loadExaminationContent();
+		// var url = "./../../game/typing/literature_list/korean_national_anthem.txt";
+		var url = "./../../game/typing/literature_list/korean_cold_noodle.txt";
+		this.loadExaminationContent(url);
 		// this.countDown();
 	},
 
@@ -321,11 +334,10 @@ var TypingExamination = {
 	},
 
 
-	loadExaminationContent: function() {
+	loadExaminationContent: function(url) {
 		game.load.onLoadComplete.add(this.literatureLoadComplete, this);
 
-		game.load.text("literature", "./../../game/typing/literature_list/korean_national_anthem.txt");
+		game.load.text("literature", url);
-		game.load.text("cold_noodle", "./../../game/typing/literature_list/korean_cold_noodle.txt");
 
 		game.load.start();
 	},
@@ -334,8 +346,7 @@ var TypingExamination = {
 		game.load.onFileComplete.remove(this.loadExaminationContent, this);
 		game.load.onLoadComplete.remove(this.literatureLoadComplete, this);
 
-		// var literature = game.cache.getText("literature");
+		var literature = game.cache.getText("literature");
-		var literature = game.cache.getText("cold_noodle");
 		var examinationContent = literature.split("\n");
 
 		for(var i = 0; i < examinationContent.length; i++) {
@@ -363,12 +374,9 @@ var TypingExamination = {
 		this.startGame();
 	},
 
-	replaceSpaceWithSpaceIndicator: function(text) {
-		return text.replace(/ /g, TypingExamination.SPACE_INDICATOR);
-	},
-
 	setTypingContentText: function(text) {
 		this.textTypingContent.text = text;
+		this.textTypedContentBack.text = text;
 	},
 
 	setTypingContentBackText: function(text) {
@@ -394,13 +402,13 @@ var TypingExamination = {
 		}
 
 		var contentText = this.typingExaminationContents[this.typingIndex];
-		this.setTypingContentText(this.replaceSpaceWithSpaceIndicator(contentText));
+		this.setTypingContentText(contentText);
 
 		for(var i = 0; i < TypingExamination.TYPING_CONTENT_PREVIEW_COUNT; i++) {
 			var previewIndex = this.typingIndex + i + 1;
 			if(previewIndex < this.typingExaminationContents.length) {
 				var previewText = this.typingExaminationContents[previewIndex];
-				this.textTypingContentPreview[i].text = this.replaceSpaceWithSpaceIndicator(previewText);
+				this.textTypingContentPreview[i].text = previewText;
 			} else
 				this.textTypingContentPreview[i].text = "";
 		}
@@ -584,4 +592,7 @@ TypingExamination.WORD_COUNT_FOR_STAGE			= 10;
 TypingExamination.COLOR_CONTENT_INPUT			= "#dddddd";
 TypingExamination.COLOR_CONTENT_RIGHT			= "#ffff4d";
 
-TypingExamination.BACKGROUND_COLOR_CONTENT_INPUT	= "#333333";
+TypingExamination.STAGE_BACKGROUND_COLOR			= "#4d4d4d";
+TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR	= "#333333";
+TypingExamination.STAGE_BACKGROUND_COLOR_HEX			= 0x4d4d4d;
+TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR_HEX	= 0x333333;

src/game/typing/lib/typing_text_manager.js

@@ -236,4 +236,4 @@ TypingTextManager.ENGLISH_LETTER_RIGHT = [
 ];
 
 
-TypingTextManager.SENTENCE_MAX_CHARACTER	= 40;
+TypingTextManager.SENTENCE_MAX_CHARACTER	= 48;

test/tdd.js

@@ -352,10 +352,10 @@ QUnit.test( "TypingTextManager - makeExaminationContents", function( assert ) {
 
 	assert.equal(contents[0], "냉면 / 김남천", "addTextArray - line 1");
 	assert.equal(contents[1], "'냉면'이라는 말에 '평양'이 붙어서 ", "addTextArray - line 2");
-	assert.equal(contents[2], "'평양냉면'이라야 비로소 어울리는 격에 ", "addTextArray - line 3");
+	assert.equal(contents[2], "'평양냉면'이라야 비로소 어울리는 격에 맞는 말이 ", "addTextArray - line 3");
-	assert.equal(contents[3], "맞는 말이 되듯이 냉면은 평양에 있어 ", "addTextArray - line 4");
+	assert.equal(contents[3], "되듯이 냉면은 평양에 있어 대표적인 음식이다. ", "addTextArray - line 4");
-	assert.equal(contents[10], "가나다라마바사아자차카타파하가나다라마바", "addTextArray - line 5");
+	assert.equal(contents[10], "사아자차카타파하가나다라마바사아자차카타파하가나", "addTextArray - line 5");
-	assert.equal(contents[11], "사아자차카타파하가나다라마바사아자차카타", "addTextArray - line 6");
+	assert.equal(contents[11], "다라마바사아자차카타파하", "addTextArray - line 6");
 });
 
 QUnit.test( "TypingTextManager - add", function( assert ) {