Fix: Input text color, background color
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
@@ -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.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.INPUT_CONTENT_BACKGROUND_COLOR = "#333333";
|
||||
TypingExamination.STAGE_BACKGROUND_COLOR_HEX = 0x4d4d4d;
|
||||
TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR_HEX = 0x333333;
|
||||
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";
|
||||
|
||||
Reference in New Issue
Block a user