jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: show typing text background color

Browse Source
This commit is contained in:
Jisang Park
2019-06-25 17:54:02 +09:00
parent 037ee407d2
commit 81550bb5d5
1 changed files with 90 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/typing/examination/game.js
+90 -13
View File
@@ -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";
TypingExamination.COLOR_CONTENT_RIGHT = "#ffff4d";
TypingExamination.BACKGROUND_COLOR_CONTENT_INPUT = "#333333";