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

Fix: remove setTextBound for keybutton

Browse Source 
Fix: word practice text
Fix: move keyboard, hands position
Fix: typing content bg
This commit is contained in:
Jisang Park
2018-08-23 14:35:45 +09:00
parent c7641ee2b4
commit 9963a28d17
8 changed files with 182 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/typing/lib/typing_content_bg.js
+43
View File
@@ -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;
src/game/typing/practice/game.js
+52 -36
View File
@@ -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";
src/game/typing/practice/hand.js
+5 -5
View File
@@ -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 {
src/game/typing/practice/key_button.js
+42 -23
View File
@@ -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;
}
src/game/typing/practice/keyboard.js
+2 -2
View File
@@ -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;
src/game/typing/test/game.js
+36 -24
View File
@@ -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";
src/web/client/typing_practice.html
+1
View File
@@ -51,6 +51,7 @@
<!-- Test typing : source files -->
<script src="../../game/typing/lib/content_progress.js"></script>
<script src="../../game/typing/lib/typing_text_manager.js"></script>
<script src="../../game/typing/lib/typing_content_bg.js"></script>
<script src="../../game/typing/practice/define_variables.js"></script>
<script src="../../game/typing/practice/miss_typing_score.js"></script>
src/web/client/typing_test.html
+1
View File
@@ -51,6 +51,7 @@
<!-- Test typing : source files -->
<script src="../../game/typing/lib/content_progress.js"></script>
<script src="../../game/typing/lib/typing_text_manager.js"></script>
<script src="../../game/typing/lib/typing_content_bg.js"></script>
<script src="../../game/typing/test/define_variables.js"></script>
<script src="../../game/typing/test/loading.js"></script>