Fix: change inputText class

resources/file/typing_exam/system/korean_fishing_tiger.txt

@@ -22,5 +22,5 @@
 겨울바람이 쌩쌩 불었어요. 그래도 호랑이는 꼬리를 얼음 구멍에 집어넣고 오래도록 기다렸습니다.
 '꼬리가 묵직해지는 것으로 보아 이제 물고기가 많이 걸렸나 봐'
 호랑이는 꼬리를 낚아챘습니다. 하지만 꼬리가 얼음에 꽁꽁 얼어 움직이지 않았습니다. 아무리 잡아당겨도 꼬리만 아플 뿐이었습니다.
-"헤헤헤~ 호랑이 아저씨! 열심히 고기를 낚으세요."
+"헤헤헤~ 호랑이 아저씨! 열심히 고기를 낚야 보세요."
 목숨을 건진 토끼는 산으로 뛰어갔습니다.

resources/file/typing_exam/system/korean_magpie.txt

@@ -1,15 +1,15 @@
 은혜 갚은 까치
 전래동화
 
-옛날 한 선비가 과거를 보러 한양를 가기 위해 산을 오르다 구렁이에게 잡혀먹을 뻔한 새끼 까치를 발견했습니다. 그래서 선비는 새끼 까치를 구해주기 위해 구렁이를 죽였습니다.
+옛날 한 선비가 과거를 보러 한양을 가기 위해 산을 오르다 구렁이에게 잡혀먹힐 뻔한 새끼 까치를 발견했습니다. 그래서 선비는 새끼 까치를 구해주기 위해 구렁이를 죽였습니다.
 
 그리고 계속 산을 건너는데 어느덧 깜깜한 밤이 되어 선비는 하룻 밤 신세질 곳을 찾다가 집 한채를 발견하게 되었습니다. 선비가 그 집을 찾아가자 아름다운 여인이 나와서 선비가 하룻 밤 머물 수 있도록 허락해 주었습니다.
 
-한밤 중 잠을 자던 선비는 갑자기 몸이 답답함을 느꼈습니다. 잠에서 깨어나 보니 커다란 구렁이 한마리가 자신의 몸을 칭칭 감고 있었습니다. 선비는 놀라서 왜 나를 공격하는 것이냐고 하자 이 구렁이는 아까 낮에 선비가 죽인 구렁이의 아내였고 하룻밤만 지나면 용이 되어 승천할 수 있었는데, 선비가 까치를 구하기 위해 죽이는 바람에 혼자남게 되어 원한을 품게 되었다고 하였습니다.
+한밤 중 잠을 자던 선비는 갑자기 몸이 답답함을 느꼈습니다. 잠에서 깨어나 보니 커다란 구렁이 한마리가 자신의 몸을 칭칭 감고 있었습니다. 선비는 놀라서 왜 나를 공격하는 것이냐고 묻자 이 구렁이는 아까 낮에 선비가 죽인 구렁이의 아내였고 하룻 밤만 지나면 용이 되어 승천할 수 있었는데, 선비가 까치를 구하기 위해 죽이는 바람에 혼자 남게 되어 원한을 품게 되었다고 하였습니다.
 
 선비는 구렁이에게 한번만 자비를 베풀어 달라고 했지만 이미 남편을 잃은 원한을 가진 구렁이는 선비를 풀어주지 않았습니다. 대신 구렁이는 날이 새기 전에 종이 세 번 울리면 선비를 풀어주겠다고 약속을 했습니다.
 
-구렁이에게 묶인 선비는 종을 칠 방법이 없어서 '구렁이에게 꼼짝없이 죽는구나...' 라며 포기를 했습니다. 새벽이 지나고 아침해가 뜨기 전까지 종이 안쳐지자 구렁이는 선비를 잡아먹으려고 했습니다. 이때 멀리선가 종 치는 소리가 들려 왔습니다.
+구렁이에게 묶인 선비는 종을 칠 방법이 없어서 '구렁이에게 꼼짝없이 죽는구나...' 라며 포기를 했습니다. 새벽이 지나고 아침해가 뜨기 전까지 종이 안울리자 구렁이는 선비를 잡아먹으려고 했습니다. 이때 멀리선가 종 치는 소리가 들려 왔습니다.
 
 종이 세 번 울리자 구렁이는 남편의 복수를 하지 못한 것에 분해 하며 용이 되어 승천하게 되었습니다.
 

src/game/lib/flat_button/typing_exam_button.js

@@ -45,7 +45,6 @@ function TypingExamButton(x, y) {
 
 	this.mainText.anchor.set(0, 0.5);
 	this.mainText.x = 100;
-	console.log(this.mainText.width);
 	// this.mainText.width = 100;
 	// this.setMainText("");
 	// this.addIcon("tile_choco");

src/game/typing/examination/game.js

@@ -13,6 +13,10 @@ TypingExamination.prototype.preload = function() {
 }
 
 TypingExamination.prototype.create = function() {
+	Phaser.Device.whenReady(function () {
+		game.plugins.add(PhaserInput.Plugin);
+	});
+
 	this.dbService = new DBService();
 	this.dbService.setMaestroID(sessionStorageManager.getMaestroID());
 	this.dbService.setPlayerID(sessionStorageManager.getPlayerID());
@@ -163,7 +167,6 @@ TypingExamination.prototype.makeInputlineText = function(x, y) {
 	this.textBackTextOnly.fontSize = TypingExamination.DEFAULT_FONT_SIZE;
 	this.textBackTextOnly.style.fill = TypingExamination.COLOR_NOT_INPUT_STRING;
 	this.textBackTextOnly.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
-	console.log(this.textBackTextOnly);
 
 	this.textNextLetterIndicator = this.makeDefaultText(x, y);
 	this.textNextLetterIndicator.fontSize = TypingExamination.DEFAULT_FONT_SIZE;
@@ -176,7 +179,6 @@ TypingExamination.prototype.makeInputlineText = function(x, y) {
 	this.textCorrectText.style.fill = TypingExamination.COLOR_CORRECT_INPUT_STRING;
 	this.textCorrectText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
 	this.textCorrectText.style.backgroundColor = TypingExamination.COLOR_CORRECT_INPUT_BACKGROUND_STRING;
-	console.log(this.textCorrectText);
 
 	var graphics = game.add.graphics(0, 0);
 	graphics.lineStyle(1, 0x303030, 1);
@@ -244,27 +246,67 @@ TypingExamination.prototype.makeTextContents = function() {
 
 
 	// input text
-	this.inputTextContent = new InputText(
+	var setting = {
-		TYPING_CONTENT_X - INPUT_TEXT_OFFSET_X,
+		// font: "26px Arial",
-		TYPING_CONTENT_Y + INPUT_TEXT_OFFSET_Y,
+		font: "26px Nanum Gothic Coding",
-		CONTENT_TEXT_WIDTH + INPUT_TEXT_OFFSET_X * 2,
+		// fontSize: TypingExamination.DEFAULT_FONT_SIZE,
-		50);
+		// fontFamily: "Nanum Gothic Coding",
-	this.inputTextContent.anchor.set(0, 0.5);
+		fill: "#000000",
-	this.inputTextContent.canvasInput.value('');
+		fillAlpha: 1,
-	this.inputTextContent.canvasInput.focus();
+		fontWeight: "bold",
-	this.inputTextContent.canvasInput.fontSize(TypingExamination.DEFAULT_FONT_SIZE);
+		forceCase: "",	// PhaserInput.ForceCase.upper,
-	// this.inputTextContent.canvasInput.fontWeight("");
+		width: 800,
-	this.inputTextContent.canvasInput.fontFamily("Nanum Gothic Coding");
+		max: 100,
-	this.inputTextContent.canvasInput.placeHolder("");
+		padding: 8,
-	// inputTextContent.canvasInput._onkeydown = this.checkInputText;
+		borderWidth: 1,
-	this.inputTextContent.canvasInput._onkeyup = (function() {
+		borderColor: "#000",	// "#aaa",
-		if(this.isGameOver)
+		borderRadius: 6,
+		placeHolder: "",	// "입력이 없을 때 출력될 내용",
+		textAlign: "left",	// "center",
+		zoom: true
+	};
+	this.inputText = game.add.inputField(
+		TYPING_CONTENT_X - INPUT_TEXT_OFFSET_X + 2,
+		TYPING_CONTENT_Y + INPUT_TEXT_OFFSET_Y - 18,
+		// TYPING_CONTENT_Y + INPUT_TEXT_OFFSET_Y - 100,
+		setting
+	);
+	this.inputText.keyListener = (function(evt) {
+		// onKeyDown x 2 (?)
+		// onKeyUp
+
+		this.value = this.getFormattedText(this.domElement.value);
+		// console.log(this.value + "|");
+
+		// if (evt.keyCode === 13) {
+		// 	if (this.focusOutOnEnter) {
+		// 		this.endFocus();
+		// 	}
+		// 	return;
+		// }
+
+		this.updateText();
+		this.updateCursor();
+		this.updateSelection();
+
+		if(typingExamination.isGameOver)
 			return;
 
-		this.onKeyUp(event);
+		// console.log(evt);
-		// warning
+		if(typeof evt.keyCode === "undefined"){
-		// 	 : onKeyUp is called onkeyup and onkeydown
+			// console.log("undefined");
-	}).bind(this);
+			typingExamination.onKeyDown2(this.value);
+		} else {
+			// console.log(evt);
+			typingExamination.onKeyDown(evt, this.value);
+		}
+
+		evt.preventDefault();
+	});//.bind(this);
+	this.inputText.setText('');
+	this.inputText.blockInput = true;
+	this.inputText.startFocus();
+
 
 	this.loadExaminationContent();
 }
@@ -505,7 +547,87 @@ TypingExamination.prototype.showTypingExaminationContents = function() {
 TypingExamination.prototype.resetTypingContent = function() {
 	this.setCorrectText("");
 
-	this.inputTextContent.canvasInput.value('');
+	this.inputText.setText('');
+}
+
+TypingExamination.prototype.onKeyDown2 = function(inputTextValue) {
+	// console.log(inputTextValue);
+	if(this.isTyping === false) {
+		// console.log("isTyping is false");
+		this.startTyping();
+	}
+
+	if(this.isTypingLine === false) {
+		// console.log("isTyping is isTypingLine");
+		this.setTimeTypingStart();
+	}
+
+	//not trimmed contents
+	var notTrimmedInputContent = inputTextValue;
+	var notTrimmedTypingContent = this.typingExaminationContents[this.typingIndex];
+
+	// trimmed contents
+	// var inputContent = inputText.replace(/ /g, TypingExamination.SPACE_INDICATOR);
+	var inputContent = inputTextValue;
+	var trimmedInputContent = inputContent.trim();
+	var trimmedTypingContent = this.typingExaminationContents[this.typingIndex].trim();
+	trimmedTypingContent = trimmedTypingContent.replace(TypingExamination.ENTER_INDICATOR, "");
+	// console.log(notTrimmedInputContent + "]");
+	// console.log(notTrimmedTypingContent + "]");
+	// console.log(trimmedInputContent + "]");
+	// console.log(trimmedTypingContent + "]");
+
+	this.highlightTypingContent(notTrimmedInputContent, notTrimmedTypingContent);
+
+	this.updateCorrectUnicodeLetterCount();
+	this.updateTypingRecord();
+
+	var lastInputTextChar = "";
+	if(inputTextValue.length > 0)
+		lastInputTextChar = inputTextValue[inputTextValue.length - 1];
+	// console.log("[" + lastInputTextChar + "]");
+	if(trimmedInputContent === trimmedTypingContent && lastInputTextChar === " ") {
+		// console.log("last space");
+		this.onKeyEnter(trimmedInputContent, trimmedTypingContent, notTrimmedTypingContent);
+	}
+}
+
+TypingExamination.prototype.onKeyDown = function(event, inputTextValue) {
+	// console.log(event);
+	// console.log(inputTextValue);
+	if(this.isTyping === false) {
+		// console.log("isTyping is false");
+		this.startTyping();
+	}
+
+	if(this.isTypingLine === false) {
+		// console.log("isTyping is isTypingLine");
+		this.setTimeTypingStart();
+	}
+
+	//not trimmed contents
+	var notTrimmedInputContent = inputTextValue;
+	var notTrimmedTypingContent = this.typingExaminationContents[this.typingIndex];
+
+	// trimmed contents
+	// var inputContent = inputText.replace(/ /g, TypingExamination.SPACE_INDICATOR);
+	var inputContent = inputTextValue;
+	var trimmedInputContent = inputContent.trim();
+	var trimmedTypingContent = this.typingExaminationContents[this.typingIndex].trim();
+	trimmedTypingContent = trimmedTypingContent.replace(TypingExamination.ENTER_INDICATOR, "");
+
+	this.highlightTypingContent(notTrimmedInputContent, notTrimmedTypingContent);
+
+	this.updateCorrectUnicodeLetterCount();
+	this.updateTypingRecord();
+
+	if(event.keyCode == Phaser.Keyboard.ENTER)
+		this.onKeyEnter(trimmedInputContent, trimmedTypingContent, notTrimmedTypingContent);
+
+	if(event.keyCode == Phaser.Keyboard.SPACEBAR)
+		this.onKeyEnter(trimmedInputContent, trimmedTypingContent, notTrimmedTypingContent);
+
+	// console.log(event.keyCode);
 }
 
 TypingExamination.prototype.onKeyUp = function(event) {
@@ -520,12 +642,12 @@ TypingExamination.prototype.onKeyUp = function(event) {
 	}
 
 	//not trimmed contents
-	var notTrimmedInputContent = this.inputTextContent.canvasInput.value();
+	var notTrimmedInputContent = this.inputText.value;
 	var notTrimmedTypingContent = this.typingExaminationContents[this.typingIndex];
 
 	// trimmed contents
 	// var inputContent = inputText.replace(/ /g, TypingExamination.SPACE_INDICATOR);
-	var inputContent = this.inputTextContent.canvasInput.value();
+	var inputContent = this.inputText.value;
 	var trimmedInputContent = inputContent.trim();
 	var trimmedTypingContent = this.typingExaminationContents[this.typingIndex].trim();
 	trimmedTypingContent = trimmedTypingContent.replace(TypingExamination.ENTER_INDICATOR, "");
@@ -543,7 +665,7 @@ TypingExamination.prototype.onKeyUp = function(event) {
 }
 
 TypingExamination.prototype.setTimeTypingStart = function() {
-	if(this.inputTextContent.canvasInput.value() == "")
+	if(this.inputText.value == "")
 		return;
 
 	this.isTypingLine = true;
@@ -581,7 +703,7 @@ TypingExamination.prototype.calculateTypingRecord = function(typingContent) {
 
 
 TypingExamination.prototype.updateCorrectUnicodeLetterCount = function() {
-	var notTrimmedInputContent = this.inputTextContent.canvasInput.value();
+	var notTrimmedInputContent = this.inputText.value;
 	var notTrimmedTypingContent = this.typingExaminationContents[this.typingIndex];
 
 	var correctLetterCount = this.getCorrectLetterCount(notTrimmedInputContent, notTrimmedTypingContent);
@@ -721,6 +843,7 @@ TypingExamination.prototype.playNextContent = function() {
 	this.showTypingExaminationContents();
 	this.showPlayingWordNumber();
 	this.resetTypingContent();
+	this.inputText.startFocus();
 }
 
 TypingExamination.prototype.showPlayingWordNumber = function() {
@@ -729,7 +852,7 @@ TypingExamination.prototype.showPlayingWordNumber = function() {
 }
 
 TypingExamination.prototype.startTyping = function() {
-	if(this.inputTextContent.canvasInput.value() == "")
+	if(this.inputText.value == "")
 		return;
 
 	this.realtimeStageTimer.start();

src/web/client/typing_exam.html

@@ -33,6 +33,7 @@
 
 		<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
 		<script src="../../../resources/js/phaser.min.js"></script>
+		<script type="text/javascript" src="../../util/phaser-input-master/build/phaser-input.min.js"></script>
 
 		<!-- global source files -->
 		<script src="../../game/lib/session_storage_manager.js"></script>