Fix: font, font family

src/game/lib/text/input_type_text.js

@@ -1,3 +1,35 @@
+function InputText(x, y, width, height) {
+	var bmd = game.add.bitmapData(width, height);
+	var myInput = game.add.sprite(x, y, bmd);
+
+	var contentWidth = width - 20;
+	myInput.canvasInput = new CanvasInput({
+		canvas: bmd.canvas,
+		fontSize: 30,
+		fontFamily: 'Arial',
+		fontColor: '#212121',
+		fontWeight: 'bold',
+		width: contentWidth,
+		padding: 8,
+		borderWidth: 1,
+		borderColor: '#000',
+		borderRadius: 3,
+		boxShadow: '1px 1px 0px #fff',
+		innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
+		placeHolder: 'Enter message here...'
+	});
+	myInput.inputEnabled = true;
+	myInput.input.useHandCursor = true;
+	myInput.events.onInputUp.add(
+		(function(sprite) {
+			sprite.canvasInput.focus();
+		}).bind(this),
+		this
+	);
+
+	return myInput;
+}
+
 function InputTypeText(x, y) {
 	var bmd = game.add.bitmapData(420, 50);
 	var myInput = game.add.sprite(x, y, bmd);

src/game/typing/examination/game.js

@@ -74,10 +74,9 @@ var TypingExamination = {
 
 		var TYPING_CONTENT_X = 60;
 		var TYPING_CONTENT_Y = 340;
-		var RECORD_POSITION_X = 900;
+		var RECORD_POSITION_X = 960;
 
-		var FONT_SIZE = 24;
+		var FONT_SIZE = 32;
-		var BIG_FONT_SIZE = 32;
 		var TYPING_TEXT_OFFSET_HEIGHT = 40;
 
 		// textStyleBasic.font = "bold 38px Arial";
@@ -85,6 +84,7 @@ var TypingExamination = {
 
 
 		// current text
+		textStyleBasic.font = "38px Courier New";
 		this.textTypingContent = game.add.text(
 			TYPING_CONTENT_X, TYPING_CONTENT_Y,
 			"", textStyleBasic
@@ -92,31 +92,33 @@ 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 = BIG_FONT_SIZE;
+		this.textTypingContent.fontSize = FONT_SIZE;
 
+		textStyleBasic.font = "38px Arial";
 		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)
+			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 			// .addColor(TypingExamination.COLOR_CONTENT_INPUT, 0);
-		this.textTypingLine.anchor.set(0.5);
+		this.textTypingLine.anchor.set(1, 0.5);
 
 
 
 		var TYPING_OFFSET_Y = 70;
 		var TYPING_PREVIEW_OFFSET_Y = 70;
-		textStyleBasic.font = "38px Arial";
+		// textStyleBasic.font = "38px Arial";
 		textStyleBasic.backgroundColor = null;
 
 
 		// done text
-		// var textDoneColor = [ '#99994d', '#88884d', '#77774d', '#66664d' ];
+		var textDoneColor = [ '#99994d', '#88884d', '#77774d', '#66664d' ];
-		var textDoneColor = [ '#dddd4d', '#dddd4d', '#dddd4d', '#dddd4d' ];
+		// var textDoneColor = [ '#99994d', '#99994d', '#99994d', '#99994d' ];
 		this.textTypingContentsDone = [];
 		this.textTypingRecordsDone = [];
 		for(var i = 0; i < TypingExamination.TYPING_CONTENT_DONE_COUNT; i++) {
+			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,
 				"", textStyleBasic
@@ -126,21 +128,23 @@ var TypingExamination = {
 			this.textTypingContentsDone[i].anchor.set(0, 0.5);
 			this.textTypingContentsDone[i].fontSize = FONT_SIZE;
 
+			textStyleBasic.font = "38px Arial";
 			this.textTypingRecordsDone[i] = game.add.text(
 				RECORD_POSITION_X, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * TYPING_TEXT_OFFSET_HEIGHT,
 				"", textStyleBasic
 			)
 				.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
 				.addColor(textDoneColor[i], 0);
-			this.textTypingRecordsDone[i].anchor.set(0.5);
+			this.textTypingRecordsDone[i].anchor.set(1, 0.5);
 			this.textTypingRecordsDone[i].fontSize = FONT_SIZE;
 		}
 
 		// preview text
-		// var textPreviewColor = [ '#999999', '#888888', '#777777', '#666666' ];
+		var textPreviewColor = [ '#999999', '#888888', '#777777', '#666666' ];
-		var textPreviewColor = [ '#dddddd', '#dddddd', '#dddddd', '#dddddd' ];
+		// var textPreviewColor = [ '#999999', '#999999', '#999999', '#999999' ];
 		this.textTypingContentPreview = [];
 		for(var i = 0; i < TypingExamination.TYPING_CONTENT_PREVIEW_COUNT; i++) {
+			textStyleBasic.font = "38px Courier New";
 			this.textTypingContentPreview[i] = game.add.text(
 				TYPING_CONTENT_X,
 				TYPING_CONTENT_Y + TYPING_OFFSET_Y + TYPING_PREVIEW_OFFSET_Y + i * TYPING_TEXT_OFFSET_HEIGHT,
@@ -154,11 +158,14 @@ var TypingExamination = {
 
 
 		// input text
-		this.inputTextContent = new InputTypeText(TYPING_CONTENT_X - 10, TYPING_CONTENT_Y + 70);
+		this.inputTextContent = new InputText(TYPING_CONTENT_X - 10, TYPING_CONTENT_Y + 70, 800, 50);
 		this.inputTextContent.anchor.set(0, 0.5);
 		this.inputTextContent.canvasInput.value('');
 		this.inputTextContent.canvasInput.focus();
-		this.inputTextContent.canvasInput.fontSize(BIG_FONT_SIZE);
+		this.inputTextContent.canvasInput.fontSize(FONT_SIZE);
+		// this.inputTextContent.canvasInput.fontWeight("");
+		this.inputTextContent.canvasInput.fontFamily("Courier New");
+		// this.inputTextContent.canvasInput.fontFamily("Courier New");
 		this.inputTextContent.canvasInput.placeHolder("");
 		// inputTextContent.canvasInput._onkeydown = this.checkInputText;
 		// inputTextContent.canvasInput._onkeyup = function() {

src/game/typing/examination/loading.js

@@ -31,7 +31,6 @@ var Loading = {
 
 		// Hand.loadResources();
 		Animal.loadResources();
-		// game.load.text("literature", "./../../game/typing/literature_list/korean_national_anthem.txt");
 
 
 		// game.load.image('a', '../../../resources/image/icon/fullscreen_white.png');

src/game/typing/lib/typing_text_manager.js

@@ -128,7 +128,31 @@ TypingTextManager.prototype.makeShortSentences = function(sentence) {
 	for(var i = 0; i < wordCount; i++) {
 		// console.log(words[i]);
 		// console.log(shortSentences[sentenceIndex].length);
-		// console.log(words[i]);
+
+
+
+		var wordLength = words[i].length;
+		if(wordLength > TypingTextManager.SENTENCE_MAX_CHARACTER) {
+			console.log(words[i]);
+			if(shortSentences[sentenceIndex].legnth > 0)
+				sentenceIndex++;
+
+			var loopCount = Math.ceil(wordLength / TypingTextManager.SENTENCE_MAX_CHARACTER);
+
+			for(var j = 0; j < loopCount; j++) {
+				var startIndex = j * TypingTextManager.SENTENCE_MAX_CHARACTER;
+				var endIndex = (j + 1) * TypingTextManager.SENTENCE_MAX_CHARACTER;
+				var partialText = words[i].substring(startIndex, endIndex);
+				// console.log(partialText);
+				shortSentences[sentenceIndex] = partialText;
+				sentenceIndex++;
+			}
+
+			continue;
+		}
+
+
+
 		if(shortSentences[sentenceIndex].length + words[i].length < TypingTextManager.SENTENCE_MAX_CHARACTER)
 			if(i < wordCount - 1)
 				shortSentences[sentenceIndex] = shortSentences[sentenceIndex].concat(words[i], " ");
@@ -181,4 +205,4 @@ TypingTextManager.ENGLISH_LETTER_RIGHT = [
 ];
 
 
-TypingTextManager.SENTENCE_MAX_CHARACTER	= 35;	// 27;
+TypingTextManager.SENTENCE_MAX_CHARACTER	= 28;

test/tdd.js

@@ -310,19 +310,24 @@ QUnit.test( "TypingTextManager - makeExaminationContents", function( assert ) {
 	var sentences = [
 		"냉면 / 김남천",
 		"",
-		"'냉면'이라는 말에 '평양'이 붙어서 '평양냉면'이라야 비로소 어울리는 격에 맞는 말이 되듯이 냉면은 평양에 있어 대표적인 음식이다. 언제부터 이 냉면이 평양에 들어왔으며 언제부터 냉면이 평안도 사람의 입에 가장 많이 기호에 맞는 음식물이 되었는지는 나 같은 무식쟁이에게는 알 수도 없고 또 알려고도 아니한다."
+		"'냉면'이라는 말에 '평양'이 붙어서 '평양냉면'이라야 비로소 어울리는 격에 맞는 말이 되듯이 냉면은 평양에 있어 대표적인 음식이다. 언제부터 이 냉면이 평양에 들어왔으며 언제부터 냉면이 평안도 사람의 입에 가장 많이 기호에 맞는 음식물이 되었는지는 나 같은 무식쟁이에게는 알 수도 없고 또 알려고도 아니한다.",
+		"가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하"
 	];
 	typingTextMan.init();
 	typingTextMan.makeExaminationContents(sentences);
 	let contents = typingTextMan.getContents();
 
-	assert.equal(contents[0], "냉면 / 김남천", "addTextArray - 1st line");
+	assert.equal(contents[0], "냉면 / 김남천", "addTextArray - line #1");
-	assert.equal(contents[1], "'냉면'이라는 말에 '평양'이 붙어서 '평양냉면'이라야 비로소 ", "addTextArray - 2nd line");
+	assert.equal(contents[1], "'냉면'이라는 말에 '평양'이 붙어서 ", "addTextArray - line #2");
-	assert.equal(contents[2], "어울리는 격에 맞는 말이 되듯이 냉면은 평양에 있어 대표적인 ", "addTextArray - 3rd line");
+	assert.equal(contents[2], "'평양냉면'이라야 비로소 어울리는 격에 맞는 말이 ", "addTextArray - line #3");
-	assert.equal(contents[3], "음식이다. 언제부터 이 냉면이 평양에 들어왔으며 언제부터 ", "addTextArray - 4th line");
+	assert.equal(contents[3], "되듯이 냉면은 평양에 있어 대표적인 음식이다. ", "addTextArray - line #4");
-	assert.equal(contents[4], "냉면이 평안도 사람의 입에 가장 많이 기호에 맞는 음식물이 ", "addTextArray - 5th line");
+	assert.equal(contents[4], "언제부터 이 냉면이 평양에 들어왔으며 언제부터 ", "addTextArray - line #5");
-	assert.equal(contents[5], "되었는지는 나 같은 무식쟁이에게는 알 수도 없고 또 알려고도 ", "addTextArray - 6th line");
+	assert.equal(contents[5], "냉면이 평안도 사람의 입에 가장 많이 기호에 맞는 ", "addTextArray - line #6");
-	assert.equal(contents[6], "아니한다.", "addTextArray - 7th line");
+	assert.equal(contents[6], "음식물이 되었는지는 나 같은 무식쟁이에게는 알 ", "addTextArray - line #7");
+	assert.equal(contents[7], "수도 없고 또 알려고도 아니한다.", "addTextArray - line #8");
+	assert.equal(contents[8], "가나다라마바사아자차카타파하가나다라마바사아자차카타파하", "addTextArray - line #9");
+	assert.equal(contents[9], "가나다라마바사아자차카타파하가나다라마바사아자차카타파하", "addTextArray - line #10");
+	assert.equal(contents[10], "가나다라마바사아자차카타파하가나다라마바사아자차카타파하", "addTextArray - line #11");
 });
 
 QUnit.test( "TypingTextManager - add", function( assert ) {