From ef2b199cd5dc555775cf189d7ce8f7b89a181d3a 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: Mon, 26 Aug 2019 09:26:58 +0900 Subject: [PATCH] Fix: Input text color, background color --- src/game/lib/color/main_color.js | 4 +- src/game/typing/examination/game.js | 198 +++++++++++----------------- 2 files changed, 78 insertions(+), 124 deletions(-) diff --git a/src/game/lib/color/main_color.js b/src/game/lib/color/main_color.js index 47e4166..67b978d 100644 --- a/src/game/lib/color/main_color.js +++ b/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 = 0x402D21; +MainColor.DARK_CHOCO_HEX = 0x604031; +MainColor.DARKER_CHOCO_HEX = 0x402D21; MainColor.LIGHT_CHOCO_HEX = 0xBF8763; MainColor.LIGHTER_CHOCO_HEX = 0xE6A277; diff --git a/src/game/typing/examination/game.js b/src/game/typing/examination/game.js index 68b190d..047156b 100644 --- a/src/game/typing/examination/game.js +++ b/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 - 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 + // typed done contents 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.textTypedContentBack.text = text; + this.textBackTextOnly.text = text; + this.textNextLetterIndicator.text = text.substring(0, 1); } -TypingExamination.prototype.setTypingContentBackText = function(text) { - this.textTypingContentBack.text = text; +TypingExamination.prototype.setCorrectText = function(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.textTypingContent.addColor(TypingExamination.COLOR_CONTENT_INPUT, 0); - - this.setTypingContentBackText(""); + this.setCorrectText(""); 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("inputChar : " + inputChar); + console.log("typingChar : " + typingChar); + 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("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)); + console.log("inputContent.charAt(" + i + ") : " + inputContent.charCodeAt(i).toString(16) + ", " + inputChar); + console.log("typingContent.charAt(" + i + ") : " + typingContent.charCodeAt(i).toString(16) + ", " + typingChar); + + 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_RIGHT = "#ffff4d"; +TypingExamination.COLOR_CONTENT_INPUT_STRING = "#dddddd"; +TypingExamination.COLOR_CORRECT_INPUT = "#ffff4d"; -TypingExamination.STAGE_BACKGROUND_COLOR = "#4d4d4d"; -TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR = "#333333"; -TypingExamination.STAGE_BACKGROUND_COLOR_HEX = 0x4d4d4d; -TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR_HEX = 0x333333; \ No newline at end of file +TypingExamination.COLOR_NOT_INPUT_STRING = MainColor.DARK_GRAY_STRING; +TypingExamination.COLOR_NEXT_INPUT_STRING = MainColor.GOLD_STRING; // MainColor.LIGHT_CHOCO_STRING; +TypingExamination.COLOR_CORRECT_INPUT_STRING = MainColor.YELLOW_STRING; // MainColor.CYAN_STRING; + +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";