diff --git a/src/game/typing/lib/typing_content_bg.js b/src/game/typing/lib/typing_content_bg.js
new file mode 100644
index 0000000..954afd1
--- /dev/null
+++ b/src/game/typing/lib/typing_content_bg.js
@@ -0,0 +1,43 @@
+class TypingContentBG {
+
+ constructor() {
+ }
+
+ makePracticeContentBG() {
+ let CONTENT_Y = 140;
+
+ let bar = game.add.graphics();
+ if(sessionStorageManager.playingAppName.indexOf("korean") > -1) {
+ bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+ bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 120);
+ } else {
+ bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+ bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 40);
+ bar.beginFill(TypingContentBG.COLOR_CONTENT_ALPHABET_BG, 1);
+ bar.drawRect(0, CONTENT_Y + 40, GAME_SCREEN_SIZE.x, 50);
+ bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+ bar.drawRect(0, CONTENT_Y + 90, GAME_SCREEN_SIZE.x, 30);
+ }
+ }
+
+ makeTestContentBG() {
+ let CONTENT_Y = 260;
+
+ let bar = game.add.graphics();
+ if(sessionStorageManager.playingAppName.indexOf("korean") > -1) {
+ bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+ bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 120);
+ } else {
+ bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+ bar.drawRect(0, CONTENT_Y, GAME_SCREEN_SIZE.x, 40);
+ bar.beginFill(TypingContentBG.COLOR_CONTENT_ALPHABET_BG, 1);
+ bar.drawRect(0, CONTENT_Y + 40, GAME_SCREEN_SIZE.x, 50);
+ bar.beginFill(TypingContentBG.COLOR_CONTENT_BG, 1);
+ bar.drawRect(0, CONTENT_Y + 90, GAME_SCREEN_SIZE.x, 30);
+ }
+ }
+
+};
+
+TypingContentBG.COLOR_CONTENT_BG = 0x444444;
+TypingContentBG.COLOR_CONTENT_ALPHABET_BG = 0x3d3d3d;
\ No newline at end of file
diff --git a/src/game/typing/practice/game.js b/src/game/typing/practice/game.js
index 189286e..3959083 100644
--- a/src/game/typing/practice/game.js
+++ b/src/game/typing/practice/game.js
@@ -25,32 +25,41 @@ class TypingPractice {
// typing content
- let typingAreaPositionY = 140;
- let bar = game.add.graphics();
- bar.beginFill(0x000000, 0.2);
- bar.drawRect(0, typingAreaPositionY, GAME_SCREEN_SIZE.x, 120);
+ let typingContentBG = new TypingContentBG();
+ typingContentBG.makePracticeContentBG();
+
+ let TYPING_CONTENT_Y = 200;
textStyleBasic.font = "bold 84px Arial";
+ this.textTypingContent = game.add.text(game.world.centerX, TYPING_CONTENT_Y, "", textStyleBasic)
+ .setShadow(3, 3, 'rgba(0, 0, 0, 1)', 2)
+ .addColor(TypingPractice.COLOR_CONTENT_INPUT, 0);
+ this.textTypingContent.anchor.set(0.5);
- this.textTypingContent = game.add.text(0, 2, "test", textStyleBasic)
- .setTextBounds(0, typingAreaPositionY, GAME_SCREEN_SIZE.x, 120)
+ this.textTypingBracket = game.add.text(game.world.centerX, TYPING_CONTENT_Y, "[ ]", textStyleBasic)
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
- .addColor(TypingPractice.COLOR_CONTENT_WRONG, 0);
+ .addColor(TypingPractice.COLOR_BRACKET, 0);
+ this.textTypingBracket.anchor.set(0.5);
- textStyleBasic.font = "32px Arial";
+
+ // textStyleBasic.font = "32px Arial";
+ let OFFSET_WORD_X = 70;
let textDoneColor = [ '#99994d', '#77774d', '#66664d' ];
- this.textTypingContentsDone = game.add.text(0, 2, "test", textStyleBasic)
- .setTextBounds(0, typingAreaPositionY - 50, GAME_SCREEN_SIZE.x, 40)
- .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
- .addColor(textDoneColor[0], 0);
-
- let textPreviewColor = [ '#999999', '#888888', '#777777' ];
- this.textTypingContentPreview = game.add.text(0, 2, "test", textStyleBasic)
- .setTextBounds(0, typingAreaPositionY + 130, GAME_SCREEN_SIZE.x, 40)
- .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
- .addColor(textPreviewColor[0], 0);
+ this.textTypingContentsDone = [];
+ for(let i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
+ this.textTypingContentsDone[i] = game.add.text(game.world.centerX - 200 - i * OFFSET_WORD_X, TYPING_CONTENT_Y, "", textStyleBasic)
+ .addColor(textDoneColor[0], 0);
+ this.textTypingContentsDone[i].anchor.set(0.5);
+ }
+ let textPreviewColor = [ '#666666', '#888888', '#777777' ];
+ this.textTypingContentPreview = [];
+ for(let i = 0; i < TypingPractice.TYPING_CONTENT_PREVIEW_COUNT; i++) {
+ this.textTypingContentPreview[i] = game.add.text(game.world.centerX + 200 + i * OFFSET_WORD_X, TYPING_CONTENT_Y, "", textStyleBasic)
+ .addColor(textPreviewColor[0], 0);
+ this.textTypingContentPreview[i].anchor.set(0.5);
+ }
// keyboard
this.keyMapper = new KeyMapper();
@@ -97,6 +106,12 @@ class TypingPractice {
}
goResult() {
+ for(let i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
+ this.textTypingContentsDone[i].text = "";
+ }
+
+ this.textTypingBracket.text = "";
+
this.textTypingContent.clearColors();
this.textTypingContent.addColor(TypingPractice.COLOR_CONTENT_RIGHT, 0);
this.textTypingContent.text = "= 연습 끝 =";
@@ -217,29 +232,29 @@ class TypingPractice {
}
showTypingPracticeContents() {
- // done
- let doneIndex = this.typingIndex - 1;
- if(doneIndex < 0)
- this.textTypingContentsDone.text = "";
- else
- this.textTypingContentsDone.text = this.typingRandomContents[doneIndex];
+ for(let i = 0; i < TypingPractice.TYPING_CONTENT_DONE_COUNT; i++) {
+ let doneIndex = this.typingIndex - i - 1;
+ if(doneIndex < 0) {
+ this.textTypingContentsDone[i].text = "";
+ } else {
+ this.textTypingContentsDone[i].text = this.typingRandomContents[doneIndex];
+ }
+ }
- if(this.typingIndex === this.typingContentLength) {
+ if(this.typingIndex == this.typingContentLength) {
this.textTypingContent.text = "";
return;
}
+ this.textTypingContent.text = this.typingRandomContents[this.typingIndex];
- // typing
- let typingText = this.typingRandomContents[this.typingIndex];
- this.textTypingContent.text = typingText;
-
- // preview
- let previewIndex = this.typingIndex + 1;
- if(previewIndex > this.typingRandomContents.length - 1)
- this.textTypingContentPreview.text = "";
- else
- this.textTypingContentPreview.text = this.typingRandomContents[previewIndex];
+ for(let i = 0; i < TypingPractice.TYPING_CONTENT_PREVIEW_COUNT; i++) {
+ let previewIndex = this.typingIndex + i + 1;
+ if(previewIndex < this.typingRandomContents.length)
+ this.textTypingContentPreview[i].text = this.typingRandomContents[previewIndex];
+ else
+ this.textTypingContentPreview[i].text = "";
+ }
}
hideHighlightKey() {
@@ -349,5 +364,6 @@ TypingPractice.OFFSET_RIGHT_ALIGN = 10;
TypingPractice.WORD_COUNT_FOR_STAGE = 10;
-TypingPractice.COLOR_CONTENT_WRONG = "#aaaaaa";
+TypingPractice.COLOR_CONTENT_INPUT = "#dddddd";
+TypingPractice.COLOR_BRACKET = "#dddd70";
TypingPractice.COLOR_CONTENT_RIGHT = "#ffff4d";
\ No newline at end of file
diff --git a/src/game/typing/practice/hand.js b/src/game/typing/practice/hand.js
index 7650d59..129eb93 100644
--- a/src/game/typing/practice/hand.js
+++ b/src/game/typing/practice/hand.js
@@ -31,7 +31,7 @@ class Hand {
let mask = game.add.graphics();
mask.beginFill(0xffffff);
- mask.drawRect(100, 300, 1028, 400);
+ mask.drawRect(100, 300, 1028, 360);
this.hand.mask = mask;
}
@@ -84,8 +84,7 @@ class Hand {
}
highlightOnFinger(fingerNo) {
- console.log(fingerNo);
- console.log(this);
+ // console.log(fingerNo);
let pressingFingerSprite = this.getFingerSprite(fingerNo);
if(pressingFingerSprite === this.prevFingerSprite)
return;
@@ -94,7 +93,7 @@ class Hand {
this.unhighlightOffFinger();
if(pressingFingerSprite !== null) {
- console.log(pressingFingerSprite);
+ // console.log(pressingFingerSprite);
pressingFingerSprite.tint = 0xffff00;
pressingFingerSprite.alpha = 1;
}
@@ -113,7 +112,8 @@ class Hand {
}
-Hand.DEFAULT_Y_PX = 580; // 680;
+Hand.DEFAULT_Y_PX = 540; // 680;
+
class LeftHand extends Hand {
diff --git a/src/game/typing/practice/key_button.js b/src/game/typing/practice/key_button.js
index 7f65c85..50253a9 100644
--- a/src/game/typing/practice/key_button.js
+++ b/src/game/typing/practice/key_button.js
@@ -94,39 +94,58 @@ class KeyButton {
}
makeText(setting, textContent) {
- let offsetX_px = 4;
- let offsetY_px = 5;
-
- let width = setting.width - setting.strokeWidthPx * 2 - offsetX_px;
- let height = setting.height - setting.strokeWidthPx * 2;
-
+ let fontStyle = { };
if(this.alignType === KeyButton.NORMAL_KEY)
setting.fontStyle.font = "20px Courier New";
else
setting.fontStyle.font = "11px Courier New";
- let btnText = game.add.text(offsetX_px, offsetY_px, textContent, setting.fontStyle)
- .setTextBounds(setting.strokeWidthPx, setting.strokeWidthPx, width, height);
+ let OFFSET_X = 4, OFFSET_Y = 3;
+ let textPosX = 0, textPosY = 0;
+ switch(this.alignType) {
+ case KeyButton.NORMAL_KEY:
+ case KeyButton.NORMAL_FUNCTION_KEY:
+ textPosX = setting.strokeWidthPx + setting.width / 2;
+ textPosY = setting.strokeWidthPx + setting.height / 2 + OFFSET_Y;
+ break;
- if(this.alignType === KeyButton.NORMAL_KEY) {
- btnText.boundsAlignH = "center";
- btnText.boundsAlignV = "middle";
- } else if(this.alignType === KeyButton.LEFT_FUNCTION_KEY) {
- btnText.boundsAlignH = "left";
- btnText.boundsAlignV = "bottom";
- } else if(this.alignType === KeyButton.CENTER_FUNCTION_KEY) {
- btnText.boundsAlignH = "center";
- btnText.boundsAlignV = "bottom";
- } else if(this.alignType === KeyButton.RIGHT_FUNCTION_KEY) {
- btnText.boundsAlignH = "right";
- btnText.boundsAlignV = "bottom";
+ case KeyButton.LEFT_FUNCTION_KEY:
+ textPosX = setting.strokeWidthPx + OFFSET_X;
+ textPosY = setting.strokeWidthPx + setting.height;
+ break;
+
+ case KeyButton.CENTER_FUNCTION_KEY:
+ textPosX = setting.strokeWidthPx + setting.width / 2;
+ textPosY = setting.strokeWidthPx + setting.height;
+ break;
+
+ case KeyButton.RIGHT_FUNCTION_KEY:
+ textPosX = setting.strokeWidthPx + setting.width - OFFSET_X;
+ textPosY = setting.strokeWidthPx + setting.height;
+ break;
}
- // btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+ let buttonText = game.add.text(textPosX, textPosY, textContent, setting.fontStyle);
+ switch(this.alignType) {
+ case KeyButton.NORMAL_KEY:
+ case KeyButton.NORMAL_FUNCTION_KEY:
+ buttonText.anchor.set(0.5);
+ break;
- btnText.text = textContent;
+ case KeyButton.LEFT_FUNCTION_KEY:
+ buttonText.anchor.set(0, 1);
+ break;
- return btnText;
+ case KeyButton.CENTER_FUNCTION_KEY:
+ buttonText.anchor.set(0.5, 1);
+ break;
+
+ case KeyButton.RIGHT_FUNCTION_KEY:
+ buttonText.anchor.set(1, 1);
+ break;
+ }
+
+ return buttonText;
}
diff --git a/src/game/typing/practice/keyboard.js b/src/game/typing/practice/keyboard.js
index acef5b6..a38055f 100644
--- a/src/game/typing/practice/keyboard.js
+++ b/src/game/typing/practice/keyboard.js
@@ -129,7 +129,7 @@ class Keyboard {
keyPress(char) {
// self.checkTypingContents(event);
- console.log(char);
+ // console.log(char);
if(game.input.keyboard.isDown(Phaser.Keyboard.SHIFT))
console.log("shift is pressed");
}
@@ -438,7 +438,7 @@ Keyboard.KOREAN_ENGLISH_KEY_WIDTH_PX = Keyboard.DEFAULT_KEY_SIZE_PX;
Keyboard.KEY_GAP_PX = 6;
Keyboard.KEYBOARD_OFFSET_POX_X = 150;
-Keyboard.ROW_1_POX_Y = 360;
+Keyboard.ROW_1_POX_Y = 320;
Keyboard.ROW_2_POX_Y = Keyboard.ROW_1_POX_Y + Keyboard.DEFAULT_KEY_SIZE_PX + Keyboard.KEY_GAP_PX;
Keyboard.ROW_3_POX_Y = Keyboard.ROW_2_POX_Y + Keyboard.DEFAULT_KEY_SIZE_PX + Keyboard.KEY_GAP_PX;
Keyboard.ROW_4_POX_Y = Keyboard.ROW_3_POX_Y + Keyboard.DEFAULT_KEY_SIZE_PX + Keyboard.KEY_GAP_PX;
diff --git a/src/game/typing/test/game.js b/src/game/typing/test/game.js
index b2a6754..c6d89c8 100644
--- a/src/game/typing/test/game.js
+++ b/src/game/typing/test/game.js
@@ -25,55 +25,67 @@ class TypingTest {
// typing content
- let typingAreaPositionY = 260;
- let bar = game.add.graphics();
- bar.beginFill(0x000000, 0.2);
- bar.drawRect(0, typingAreaPositionY, GAME_SCREEN_SIZE.x, 120);
+ let typingContentBG = new TypingContentBG();
+ typingContentBG.makeTestContentBG();
+
+ let TYPING_CONTENT_Y = 320;
if(isTypingWordStage())
textStyleBasic.font = "bold 84px Arial";
else // Sentence stage
textStyleBasic.font = "bold 48px Arial";
- this.textTypingContent = game.add.text(0, 2, "test", textStyleBasic)
- .setTextBounds(0, typingAreaPositionY, GAME_SCREEN_SIZE.x, 120)
- .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
- .addColor(TypingTest.COLOR_CONTENT_WRONG, 0);
+ this.textTypingContent = game.add.text(
+ game.world.centerX, TYPING_CONTENT_Y,
+ "", textStyleBasic
+ )
+ .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+ .addColor(TypingTest.COLOR_CONTENT_INPUT, 0);
+ this.textTypingContent.anchor.set(0.5);
+ let TYPING_OFFSET_Y = 100;
textStyleBasic.font = "32px Arial";
let textDoneColor = [ '#99994d', '#77774d', '#66664d' ];
this.textTypingContentsDone = [];
this.textTypingRecordsDone = [];
for(let i = 0; i < TypingTest.TYPING_CONTENT_DONE_COUNT; i++) {
- this.textTypingContentsDone[i] = game.add.text(0, 2, "test", textStyleBasic)
- .setTextBounds(0, typingAreaPositionY - 50 - i * 50, GAME_SCREEN_SIZE.x, 40)
- .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+ this.textTypingContentsDone[i] = game.add.text(
+ game.world.centerX, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * 50,
+ "", textStyleBasic
+ )
+ // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
.addColor(textDoneColor[i], 0);
+ this.textTypingContentsDone[i].anchor.set(0.5);
- let scorePositionX = 780;
+ let SCORE_POSITION_X = 900;
if(isTypingWordStage())
- scorePositionX = 600;
+ SCORE_POSITION_X = 700;
- this.textTypingRecordsDone[i] = game.add.text(0, 2, "", textStyleBasic)
- .setTextBounds(scorePositionX, typingAreaPositionY - 50 - i * 50, 200, 40)
- .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+ this.textTypingRecordsDone[i] = game.add.text(
+ SCORE_POSITION_X, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * 50,
+ "", textStyleBasic
+ )
+ // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
.addColor(textDoneColor[i], 0);
-
+ this.textTypingRecordsDone[i].anchor.set(0.5);
}
let textPreviewColor = [ '#999999', '#888888', '#777777' ];
this.textTypingContentPreview = [];
for(let i = 0; i < TypingTest.TYPING_CONTENT_PREVIEW_COUNT; i++) {
- this.textTypingContentPreview[i] = game.add.text(0, 2, "test", textStyleBasic)
- .setTextBounds(0, typingAreaPositionY + 130 + i * 50, GAME_SCREEN_SIZE.x, 40)
- .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+ this.textTypingContentPreview[i] = game.add.text(
+ game.world.centerX, TYPING_CONTENT_Y + TYPING_OFFSET_Y + i * 50,
+ "", textStyleBasic
+ )
+ // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
.addColor(textPreviewColor[i], 0);
+ this.textTypingContentPreview[i].anchor.set(0.5);
}
// input text
- this.inputTextContent = new InputTypeText(game.world.centerX, typingAreaPositionY + 360);
+ this.inputTextContent = new InputTypeText(game.world.centerX, TYPING_CONTENT_Y + 260);
this.inputTextContent.anchor.set(0.5);
this.inputTextContent.canvasInput.value('');
this.inputTextContent.canvasInput.focus();
@@ -288,7 +300,7 @@ class TypingTest {
resetTypingContent() {
this.textTypingContent.clearColors();
- this.textTypingContent.addColor(TypingTest.COLOR_CONTENT_WRONG, 0);
+ this.textTypingContent.addColor(TypingTest.COLOR_CONTENT_INPUT, 0);
this.inputTextContent.canvasInput.value('');
}
@@ -334,7 +346,7 @@ class TypingTest {
// console.log("inputContent.charAt(i) : " + inputContent.charAt(i));
if(typingContent.charAt(i) != inputContent.charAt(i)) {
- this.textTypingContent.addColor(TypingTest.COLOR_CONTENT_WRONG, i);
+ this.textTypingContent.addColor(TypingTest.COLOR_CONTENT_INPUT, i);
return;
}
}
@@ -415,5 +427,5 @@ TypingTest.OFFSET_RIGHT_ALIGN = 10;
TypingTest.WORD_COUNT_FOR_STAGE = 10;
-TypingTest.COLOR_CONTENT_WRONG = "#aaaaaa";
+TypingTest.COLOR_CONTENT_INPUT = "#dddddd";
TypingTest.COLOR_CONTENT_RIGHT = "#ffff4d";
\ No newline at end of file
diff --git a/src/web/client/typing_practice.html b/src/web/client/typing_practice.html
index c61bd18..895b075 100644
--- a/src/web/client/typing_practice.html
+++ b/src/web/client/typing_practice.html
@@ -51,6 +51,7 @@
+
diff --git a/src/web/client/typing_test.html b/src/web/client/typing_test.html
index f8b3812..6e60ad5 100644
--- a/src/web/client/typing_test.html
+++ b/src/web/client/typing_test.html
@@ -51,6 +51,7 @@
+