From 81550bb5d556c58e5e44a47a9a7a74f674a8a7db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Tue, 25 Jun 2019 17:54:02 +0900 Subject: [PATCH] Fix: show typing text background color --- src/game/typing/examination/game.js | 103 ++++++++++++++++++++++++---- 1 file changed, 90 insertions(+), 13 deletions(-) diff --git a/src/game/typing/examination/game.js b/src/game/typing/examination/game.js index 530494e..9991e63 100644 --- a/src/game/typing/examination/game.js +++ b/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 RECORD_POSITION_X = 970; + var TYPING_CONTENT_Y = 320; + 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)); - // console.log("inputContent.charAt(i) : " + inputContent.charAt(i)); + var typingChar = typingContent.charAt(i); + var inputChar = inputContent.charAt(i); + // console.log("typingChar : " + typingChar); + // console.log("inputChar : " + inputChar); - if(typingContent.charAt(i) != inputContent.charAt(i)) { - // console.log("inputContent.charAt(" + i + ") : " + inputContent.charCodeAt(i).toString(16) + ", " + inputContent.charAt(i)); - // console.log("typingContent.charAt(" + i + ") : " + typingContent.charCodeAt(i).toString(16) + ", " + typingContent.charAt(i)); + // when typingChar is the last letter + if(isNaN(inputChar)) { + // 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"; \ No newline at end of file +TypingExamination.COLOR_CONTENT_RIGHT = "#ffff4d"; + +TypingExamination.BACKGROUND_COLOR_CONTENT_INPUT = "#333333"; \ No newline at end of file