From 147f740622fe6fca0280e307a83f18f56d43cfb5 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: Thu, 7 Jun 2018 14:12:09 +0900 Subject: [PATCH] Fix: show typing speed and content progress --- src/game/typing/test/average_typing_speed.js | 41 +++++ src/game/typing/test/content_progress.js | 39 +++++ src/game/typing/test/game.js | 164 ++++--------------- src/game/typing/word_list/korean_sentence.js | 2 +- src/web/client/korean_sentence.html | 2 + src/web/client/korean_word.html | 2 + 6 files changed, 119 insertions(+), 131 deletions(-) create mode 100644 src/game/typing/test/average_typing_speed.js create mode 100644 src/game/typing/test/content_progress.js diff --git a/src/game/typing/test/average_typing_speed.js b/src/game/typing/test/average_typing_speed.js new file mode 100644 index 0000000..997b0b0 --- /dev/null +++ b/src/game/typing/test/average_typing_speed.js @@ -0,0 +1,41 @@ +class AverageTypingSpeed { + + constructor() { + let fontStyle = AverageTypingSpeed.DEFAULT_TEXT_FONT; + + fontStyle.align = "right"; + fontStyle.boundsAlignH = "right"; + this.label = game.add.text(0, 0, "현재 타수 : ", fontStyle) + .setTextBounds(0, 0, game.world.width / 2, AverageTypingSpeed.FONT_HEIGHT_PX); + + fontStyle.align = "left"; + fontStyle.boundsAlignH = "left"; + this.typingSpeedText = game.add.text(game.world.width / 2, 0, "0", fontStyle) + .setTextBounds(0, 0, game.world.width / 2, AverageTypingSpeed.FONT_HEIGHT_PX); + + // var grd = this.label.context.createLinearGradient(0, 0, 0, AverageTypingSpeed.FONT_HEIGHT_PX); + // grd.addColorStop(0, '#8ED6FF'); + // grd.addColorStop(1, '#004CB3'); + // this.label.fill = grd; + // this.scoreText.fill = grd; + + // this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + // this.label.stroke = '#000'; + // this.label.strokeThickness = 3; + }; + + print(typingSpeed) { + this.typingSpeedText.text = typingSpeed; + } + +} + +AverageTypingSpeed.FONT_HEIGHT_PX = 70; + +AverageTypingSpeed.DEFAULT_TEXT_FONT = { + font: "38px Arial", + align: "center", + boundsAlignH: "center", // left, center. right + boundsAlignV: "middle", // top, middle, bottom + fill: "#fff" +}; \ No newline at end of file diff --git a/src/game/typing/test/content_progress.js b/src/game/typing/test/content_progress.js new file mode 100644 index 0000000..5f3e1e8 --- /dev/null +++ b/src/game/typing/test/content_progress.js @@ -0,0 +1,39 @@ +class ContentProgress { + + constructor() { + let fontStyle = ContentProgress.DEFAULT_TEXT_FONT; + + fontStyle.align = "right"; + fontStyle.boundsAlignH = "right"; + this.typingSpeedText = game.add.text(game.world.width - 300, 0, "", fontStyle) + .setTextBounds(0, 0, 200, ContentProgress.FONT_HEIGHT_PX); + + // var grd = this.label.context.createLinearGradient(0, 0, 0, ContentProgress.FONT_HEIGHT_PX); + // grd.addColorStop(0, '#8ED6FF'); + // grd.addColorStop(1, '#004CB3'); + // this.label.fill = grd; + // this.scoreText.fill = grd; + + // this.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + // this.label.stroke = '#000'; + // this.label.strokeThickness = 3; + }; + + print(playingNumber, totalCount) { + if(playingNumber > totalCount) + return; + + this.typingSpeedText.text = playingNumber + " / " + totalCount; + } + +} + +ContentProgress.FONT_HEIGHT_PX = 70; + +ContentProgress.DEFAULT_TEXT_FONT = { + font: "38px Arial", + align: "center", + boundsAlignH: "center", // left, center. right + boundsAlignV: "middle", // top, middle, bottom + fill: "#fff" +}; \ No newline at end of file diff --git a/src/game/typing/test/game.js b/src/game/typing/test/game.js index ef27244..9b64571 100644 --- a/src/game/typing/test/game.js +++ b/src/game/typing/test/game.js @@ -6,44 +6,38 @@ class Test { create() { self = this; - this.game.stage.backgroundColor = '#4d4d4d'; - + this.initTypingData(); sessionStorageManager.isNewBestRecrd = false; + this.game.stage.backgroundColor = '#4d4d4d'; + // top let backButton = new BackButton( () => { sessionStorageManager.resetPlayingAppData(); location.href = '../../web/client/menu_app.html'; }); + this.averageTypingSpeedText = new AverageTypingSpeed(); + this.contentProgressText = new ContentProgress(); + + // var scoreboardAreaPositionY = 2; + // this.textPlayingWordNumber = game.add.text(900, scoreboardAreaPositionY, "0", textStyleBasic) + // .setTextBounds(0, 0, 300, 80) + // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + let fullscreenButton = new FullscreenButton(this.game); - // record - var scoreboardAreaPositionY = 2; - game.add.text(340 - Test.OFFSET_RIGHT_ALIGN, scoreboardAreaPositionY, "현재 타수 :", textStyleBasic) - .setTextBounds(0, 0, 200, 80) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - - this.textTypingRecordTotal = game.add.text(540, scoreboardAreaPositionY, "", textStyleBasic) - .setTextBounds(0, 0, 200, 80) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - - this.textPlayingWordNumber = game.add.text(900, scoreboardAreaPositionY, "0", textStyleBasic) - .setTextBounds(0, 0, 300, 80) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - - // typing content var typingAreaPositionY = 260; var bar = game.add.graphics(); bar.beginFill(0x000000, 0.2); bar.drawRect(0, typingAreaPositionY, GAME_SCREEN_SIZE.x, 120); - // if(playingStageData.level == "10") - // textStyleBasic.font = "bold 48px Arial"; - // else - // textStyleBasic.font = "bold 84px Arial"; + if(this.isWordStage()) + 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) @@ -61,9 +55,9 @@ class Test { .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) .addColor(textDoneColor[i], 0); - var scorePositionX = 600; - // if(playingStageData.level == "10") - // scorePositionX = 740; + var scorePositionX = 780; + if(this.isWordStage()) + scorePositionX = 600; this.textTypingRecordsDone[i] = game.add.text(0, 2, "", textStyleBasic) .setTextBounds(scorePositionX, typingAreaPositionY - 50 - i * 50, 200, 40) @@ -106,9 +100,6 @@ class Test { // this.countDown(); } - initListeners() { - } - /* countDown() { const style = { font: "bold 200px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" }; @@ -141,8 +132,6 @@ class Test { */ startGame() { - this.initTypingData(); - this.initStage(); this.showTypingTestContents(); @@ -162,8 +151,10 @@ class Test { initTypingData() { this.typingTestContents = this.getTypingTestContents(); var randomContents = Phaser.ArrayUtils.shuffle(this.typingTestContents); - this.typingRandomContents = randomContents.slice(1, Test.WORD_COUNT_FOR_STAGE + 1); // start Num, end Num (not index) - console.log(this.typingRandomContents); + this.wordCountForStage = Test.WORD_COUNT_FOR_STAGE; + if(isDebugMode()) + this.wordCountForStage = 3; + this.typingRandomContents = randomContents.slice(1, this.wordCountForStage + 1); // start Num, end Num (not index) this.typingContentLength = this.typingTestContents.length; this.typingIndex = 0; @@ -172,14 +163,11 @@ class Test { this.timeTypingEnd = 0; this.typingLetterCountTotal = 0; - - // this.typingRecordTotal = 0; - // bestRecord = 0; } initStage() { // this.textBestRecord.text = Math.floor(sessionStorageManager.bestRecord); - this.textTypingRecordTotal.text = 0; + this.averageTypingSpeedText.print(0); } getTypingTestContents() { @@ -216,96 +204,10 @@ class Test { } return testContent; - - // if(playingStageData.language == LANGUAGE_KOREAN) - // return this.loadKoreanTestContent(); - // else - // return this.loadEnglishTestContent(); } - loadKoreanTestContent() { - var testContent = []; - switch(Number(playingStageData.level)) { - case 1: - testContent = koreanBasicWordList; - break; - case 2: - testContent = koreanLeftUpperWordList; - break; - case 3: - testContent = koreanSecondFingerWordList; - break; - case 4: - testContent = koreanRightUpperWordList; - break; - case 5: - testContent = koreanLeftLowerWordList; - break; - case 6: - testContent = koreanRightLowerWordList; - break; - case 7: - testContent = koreanLeftUpperDoubleWordList; - break; - case 8: - testContent = koreanRightUpperDoubleWordList; - break; - case 9: - testContent = koreanWordList; - break; - case 10: - testContent = koreanSentenceList; - break; - default: - testContent = koreanBasicWordList; - } - - return testContent; - } - - loadEnglishTestContent() { - - /* - var testContent = [ - "보리밭 사잇길로 걸어가면", - "뉘 부르는 소리 있어", - "입에 들어가는 밥술도 제가", - "떠 넣어야 한다", - "큰 방죽도 개미 구멍으로 무너진다.", - ]; - */ - - var testContent = []; - switch(Number(playingStageData.level)) { - case 1: - testContent = englishBasicWordList; - break; - case 2: - testContent = englishLeftUpperWordList; - break; - case 3: - testContent = englishSecondFingerWordList; - break; - case 4: - testContent = englishRightUpperWordList; - break; - case 5: - testContent = englishLeftLowerWordList; - break; - case 6: - testContent = englishRightLowerWordList; - break; - case 9: - testContent = englishWordList; - break; - case 10: - testContent = englishSentenceList; - break; - default: - testContent = englishBasicWordList; - } - - return testContent; + isWordStage() { + return ( (sessionStorageManager.playingAppID % 10) === 0 ); } showTypingTestContents() { @@ -320,7 +222,7 @@ class Test { } } - if(this.typingIndex == Test.WORD_COUNT_FOR_STAGE) { + if(this.typingIndex == this.wordCountForStage) { this.textTypingContent.text = ""; return; } @@ -352,7 +254,7 @@ class Test { this.calculateTypingRecord(typingContent); this.playNextContent(); - if(this.typingIndex == Test.WORD_COUNT_FOR_STAGE) + if(this.typingIndex == this.wordCountForStage) this.state.start('TypingTestResult'); } } @@ -419,7 +321,8 @@ class Test { console.log(this.typingLetterCountTotal); console.log(typingElapsedTimeTotal); console.log(typingRecordTotal); - this.textTypingRecordTotal.text = Math.floor(typingRecordTotal); + // this.textTypingRecordTotal.text = Math.floor(typingRecordTotal); + this.averageTypingSpeedText.print(Math.floor(typingRecordTotal)); // console.log('-------------- total --------------'); // console.log('typingLetterCountTotal : ' + this.typingLetterCountTotal); // console.log('typingElapsedTimeTotal : ' + typingElapsedTimeTotal); @@ -435,7 +338,8 @@ class Test { } showPlayingWordNumber() { - this.textPlayingWordNumber.text = (this.typingIndex + 1) + " / " + Test.WORD_COUNT_FOR_STAGE; + // this.textPlayingWordNumber.text = (this.typingIndex + 1) + " / " + this.wordCountForStage; + this.contentProgressText.print(this.typingIndex + 1, this.wordCountForStage); } setTimeTypingStart() { @@ -457,7 +361,7 @@ class Test { Test.TYPING_CONTENT_PREVIEW_COUNT = 3; Test.TYPING_CONTENT_DONE_COUNT = 3; -Test.TYPING_COUNT_PLUS_ENTER = 1; +Test.TYPING_COUNT_PLUS_ENTER = 1; Test.OFFSET_RIGHT_ALIGN = 10; @@ -465,7 +369,7 @@ Test.WORD_COUNT_FOR_STAGE = 10; // if(isDebugMode()) // WORD_COUNT_FOR_STAGE = 3; -Test.COLOR_CONTENT_WRONG = "#aaaaaa"; -Test.COLOR_CONTENT_RIGHT = "#ffff4d"; +Test.COLOR_CONTENT_WRONG = "#aaaaaa"; +Test.COLOR_CONTENT_RIGHT = "#ffff4d"; diff --git a/src/game/typing/word_list/korean_sentence.js b/src/game/typing/word_list/korean_sentence.js index 5c48c41..36e2bf1 100644 --- a/src/game/typing/word_list/korean_sentence.js +++ b/src/game/typing/word_list/korean_sentence.js @@ -42,7 +42,7 @@ var koreanSentenceList = [ "백지장도 맞들면 낫다", "뱁새가 황새 따라가면 다리가 찢어진다", "번데기 앞에서 주름잡기", - "부뚜막의 소금도 집어 넣아야 짜다", + "부뚜막의 소금도 집어 넣어야 짜다", "비온 뒤 땅이 굳는다", "빈 수레가 더 요란하다", "빈대 잡다 초가삼간 태운다", diff --git a/src/web/client/korean_sentence.html b/src/web/client/korean_sentence.html index 8ea2a4f..2695db0 100644 --- a/src/web/client/korean_sentence.html +++ b/src/web/client/korean_sentence.html @@ -54,6 +54,8 @@ + + diff --git a/src/web/client/korean_word.html b/src/web/client/korean_word.html index 8ea2a4f..8cdd739 100644 --- a/src/web/client/korean_word.html +++ b/src/web/client/korean_word.html @@ -54,8 +54,10 @@ + +