From f9d5008afc73a0f7e6bf550112385db77a29d9d2 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: Fri, 21 Jun 2019 21:27:49 +0900 Subject: [PATCH] Add: StageTimer --- src/game/lib/stage_timer.js | 42 ++++++++++++++++++- src/game/typing/examination/game.js | 47 ++++++++++++++++------ src/game/typing/lib/typing_text_manager.js | 2 +- src/web/client/typing_examination.html | 22 +--------- test/tdd.js | 13 +++--- 5 files changed, 84 insertions(+), 42 deletions(-) diff --git a/src/game/lib/stage_timer.js b/src/game/lib/stage_timer.js index 57693a0..78df41d 100644 --- a/src/game/lib/stage_timer.js +++ b/src/game/lib/stage_timer.js @@ -33,6 +33,10 @@ function StageTimer(stageTimerSec, onTimeOver) { this.bonusTimeText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); }; +StageTimer.prototype.setDisplayType = function(type) { + this.displayType = type; +} + StageTimer.prototype.start = function() { this.timeLeft = this.stageTimerSec; this.printTime(); @@ -68,7 +72,40 @@ StageTimer.prototype.updateTimer = function() { } StageTimer.prototype.printTime = function() { - this.timerText.text = this.timeLeft.toString() + "초"; + if(this.displayType == StageTimer.DISPLAY_TYPE_SEC) { + this.timerText.text = this.timeLeft.toString() + "초"; + return; + } + + var hours = Math.floor(this.timeLeft / 60 / 60); + var minutes = Math.floor(this.timeLeft / 60); + var seconds = this.timeLeft % 60; + + // console.log("hours : " + hours); + // console.log("minutes : " + minutes); + // console.log("seconds : " + seconds); + + this.timerText.text = ""; + var timeText = ""; + + if(hours > 0) + timeText = hours + "시간"; + + if(minutes > 0) { + if(timeText != "") + timeText += " "; + + timeText = minutes + "분"; + } + + if(seconds > 0) { + if(timeText != "") + timeText += " "; + + timeText += seconds + "초"; + } + + this.timerText.text = timeText; } StageTimer.prototype.removeTimer = function() { @@ -94,6 +131,9 @@ StageTimer.prototype.addBonusTime = function(timeSec) { } +StageTimer.DISPLAY_TYPE_NON_SEC = 0; +StageTimer.DISPLAY_TYPE_SEC = 1; + StageTimer.FONT_HEIGHT_PX = 70; StageTimer.DEFAULT_TEXT_FONT = { diff --git a/src/game/typing/examination/game.js b/src/game/typing/examination/game.js index 19722c9..866237d 100644 --- a/src/game/typing/examination/game.js +++ b/src/game/typing/examination/game.js @@ -52,6 +52,16 @@ var TypingExamination = { this.averageTypingSpeedText = new AverageTypingSpeed(); // this.contentProgressText = new ContentProgress(); + this.stageTimer = new StageTimer( + TypingExamination.GAME_TIME_SEC, + (function() { + this.setClickEnable(false); + this.timeOver(); + }).bind(this) + ); + this.stageTimer.setDisplayType(StageTimer.DISPLAY_TYPE_NON_SEC); + + // typing content var typingContentBG = new TypingContentBG(); @@ -66,7 +76,11 @@ var TypingExamination = { var TYPING_CONTENT_Y = 340; var RECORD_POSITION_X = 900; - textStyleBasic.font = "bold 38px Arial"; + var FONT_SIZE = 24; + var BIG_FONT_SIZE = 32; + var TYPING_TEXT_OFFSET_HEIGHT = 40; + + // textStyleBasic.font = "bold 38px Arial"; // textStyleBasic.backgroundColor = "rgba(0, 0, 0, 0.25)"; @@ -78,6 +92,7 @@ var TypingExamination = { .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; textStyleBasic.backgroundColor = null; this.textTypingLine = game.add.text( @@ -92,13 +107,13 @@ var TypingExamination = { var TYPING_OFFSET_Y = 70; var TYPING_PREVIEW_OFFSET_Y = 70; - var TYPING_TEXT_OFFSET_HEIGHT = 50; textStyleBasic.font = "38px Arial"; textStyleBasic.backgroundColor = null; // done text - var textDoneColor = [ '#99994d', '#77774d', '#66664d' ]; + // var textDoneColor = [ '#99994d', '#88884d', '#77774d', '#66664d' ]; + var textDoneColor = [ '#dddd4d', '#dddd4d', '#dddd4d', '#dddd4d' ]; this.textTypingContentsDone = []; this.textTypingRecordsDone = []; for(var i = 0; i < TypingExamination.TYPING_CONTENT_DONE_COUNT; i++) { @@ -106,21 +121,24 @@ var TypingExamination = { TYPING_CONTENT_X, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * TYPING_TEXT_OFFSET_HEIGHT, "", textStyleBasic ) - // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) + .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) .addColor(textDoneColor[i], 0); this.textTypingContentsDone[i].anchor.set(0, 0.5); + this.textTypingContentsDone[i].fontSize = FONT_SIZE; this.textTypingRecordsDone[i] = game.add.text( RECORD_POSITION_X, TYPING_CONTENT_Y - TYPING_OFFSET_Y - i * TYPING_TEXT_OFFSET_HEIGHT, "", textStyleBasic ) - // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) + .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) .addColor(textDoneColor[i], 0); this.textTypingRecordsDone[i].anchor.set(0.5); + this.textTypingRecordsDone[i].fontSize = FONT_SIZE; } // preview text - var textPreviewColor = [ '#999999', '#888888', '#777777' ]; + // var textPreviewColor = [ '#999999', '#888888', '#777777', '#666666' ]; + var textPreviewColor = [ '#dddddd', '#dddddd', '#dddddd', '#dddddd' ]; this.textTypingContentPreview = []; for(var i = 0; i < TypingExamination.TYPING_CONTENT_PREVIEW_COUNT; i++) { this.textTypingContentPreview[i] = game.add.text( @@ -128,18 +146,19 @@ var TypingExamination = { TYPING_CONTENT_Y + TYPING_OFFSET_Y + TYPING_PREVIEW_OFFSET_Y + i * TYPING_TEXT_OFFSET_HEIGHT, "", textStyleBasic ) - // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) + .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) .addColor(textPreviewColor[i], 0); this.textTypingContentPreview[i].anchor.set(0, 0.5); + this.textTypingContentPreview[i].fontSize = FONT_SIZE; } // input text - this.inputTextContent = new InputTypeText(TYPING_CONTENT_X, TYPING_CONTENT_Y + 70); + this.inputTextContent = new InputTypeText(TYPING_CONTENT_X - 10, TYPING_CONTENT_Y + 70); this.inputTextContent.anchor.set(0, 0.5); this.inputTextContent.canvasInput.value(''); this.inputTextContent.canvasInput.focus(); - this.inputTextContent.canvasInput.fontSize(38); + this.inputTextContent.canvasInput.fontSize(BIG_FONT_SIZE); this.inputTextContent.canvasInput.placeHolder(""); // inputTextContent.canvasInput._onkeydown = this.checkInputText; // inputTextContent.canvasInput._onkeyup = function() { @@ -226,11 +245,13 @@ var TypingExamination = { this.showTypingExaminationContents(); this.showPlayingWordNumber(); // this.updateKeyboard(); + + this.stageTimer.start(); }, timeOver: function() { var timeOverText = new TimeOverText(); - this.stopAndGoResult(); + // this.stopAndGoResult(); }, gameOver: function() { @@ -826,10 +847,12 @@ var TypingExamination = { } +TypingExamination.GAME_TIME_SEC = 60 * 5; // 5 minutes + TypingExamination.SPACE_INDICATOR = " · "; -TypingExamination.TYPING_CONTENT_PREVIEW_COUNT = 3; // 3; -TypingExamination.TYPING_CONTENT_DONE_COUNT = 3; // 3; +TypingExamination.TYPING_CONTENT_PREVIEW_COUNT = 4; // 3; +TypingExamination.TYPING_CONTENT_DONE_COUNT = 4; // 3; TypingExamination.TYPING_COUNT_PLUS_ENTER = 1; TypingExamination.OFFSET_RIGHT_ALIGN = 10; diff --git a/src/game/typing/lib/typing_text_manager.js b/src/game/typing/lib/typing_text_manager.js index 3845cd7..b08ed9e 100644 --- a/src/game/typing/lib/typing_text_manager.js +++ b/src/game/typing/lib/typing_text_manager.js @@ -181,4 +181,4 @@ TypingTextManager.ENGLISH_LETTER_RIGHT = [ ]; -TypingTextManager.SENTENCE_MAX_CHARACTER = 27; \ No newline at end of file +TypingTextManager.SENTENCE_MAX_CHARACTER = 35; // 27; \ No newline at end of file diff --git a/src/web/client/typing_examination.html b/src/web/client/typing_examination.html index ab87aa8..c751348 100644 --- a/src/web/client/typing_examination.html +++ b/src/web/client/typing_examination.html @@ -58,27 +58,7 @@ - - - - - - - - - - - - - - - - - - - - - + diff --git a/test/tdd.js b/test/tdd.js index f5f0d9b..a76ebb8 100644 --- a/test/tdd.js +++ b/test/tdd.js @@ -317,13 +317,12 @@ QUnit.test( "TypingTextManager - makeExaminationContents", function( assert ) { let contents = typingTextMan.getContents(); assert.equal(contents[0], "냉면 / 김남천", "addTextArray - 1st line"); - assert.equal(contents[1], "'냉면'이라는 말에 '평양'이 붙어서 ", "addTextArray - 2nd line"); - assert.equal(contents[2], "'평양냉면'이라야 비로소 어울리는 격에 맞는 말이 ", "addTextArray - 3rd line"); - assert.equal(contents[3], "되듯이 냉면은 평양에 있어 대표적인 음식이다. ", "addTextArray - 4th line"); - assert.equal(contents[4], "언제부터 이 냉면이 평양에 들어왔으며 언제부터 냉면이 ", "addTextArray - 5th line"); - assert.equal(contents[5], "평안도 사람의 입에 가장 많이 기호에 맞는 음식물이 ", "addTextArray - 6th line"); - assert.equal(contents[6], "되었는지는 나 같은 무식쟁이에게는 알 수도 없고 또 ", "addTextArray - 7th line"); - assert.equal(contents[7], "알려고도 아니한다.", "addTextArray - 8th line"); + assert.equal(contents[1], "'냉면'이라는 말에 '평양'이 붙어서 '평양냉면'이라야 비로소 ", "addTextArray - 2nd line"); + assert.equal(contents[2], "어울리는 격에 맞는 말이 되듯이 냉면은 평양에 있어 대표적인 ", "addTextArray - 3rd line"); + assert.equal(contents[3], "음식이다. 언제부터 이 냉면이 평양에 들어왔으며 언제부터 ", "addTextArray - 4th line"); + assert.equal(contents[4], "냉면이 평안도 사람의 입에 가장 많이 기호에 맞는 음식물이 ", "addTextArray - 5th line"); + assert.equal(contents[5], "되었는지는 나 같은 무식쟁이에게는 알 수도 없고 또 알려고도 ", "addTextArray - 6th line"); + assert.equal(contents[6], "아니한다.", "addTextArray - 7th line"); }); QUnit.test( "TypingTextManager - add", function( assert ) {