TypingExamination.prototype = Object.create(Phaser.State.prototype); TypingExamination.constructor = TypingExamination; function TypingExamination() { } TypingExamination.prototype.preload = function() { game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png'); Animal.loadResources(); game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); } TypingExamination.prototype.create = function() { // for developing // sessionStorageManager.setMaestroName("삼화초"); // sessionStorageManager.setMaestroID(3); // sessionStorageManager.setMaestroAccountType(4); // sessionStorageManager.setPlayerName("박지상"); // sessionStorageManager.setPlayerID(35); // sessionStorageManager.setPlayerAccountType(0); // sessionStorageManager.setPlayingAppID(100); // sessionStorageManager.setPlayingAppName("examination_korean"); // sessionStorageManager.setPlayingAppKoreanName("타자 검정"); // sessionStorageManager.setRecord(0); // sessionStorageManager.setAppHighestRecord(100.123); this.dbService = new DBService(); this.dbService.setMaestroID(sessionStorageManager.getMaestroID()); this.dbService.setPlayerID(sessionStorageManager.getPlayerID()); sessionStorageManager.setRecord(0); this.initTypingData(); sessionStorageManager.setIsNewAppHighestRecord(false); var experienceAppTimer = new ExperienceAppTimer(); experienceAppTimer.setTimeOverListener( (function() { this.timeOver(); }).bind(this) ); game.stage.backgroundColor = TypingExamination.STAGE_BACKGROUND_COLOR; // keyboard shortcut - useless. this.keyboard is chargning for ESC event this.keyboardShortcut = new KeyboardShortcut(); this.keyboardShortcut.addCallback( Phaser.KeyCode.ESC, // keyCode null, // keyDownHandler (function() { this.back(); }).bind(this), // keyUpHandler "typing_examination" // callerClassName ); // top ui var screenTopUI = new ScreenTopUI(); screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) ); screenTopUI.makeFullScreenButton(); this.averageTypingSpeedText = new AverageTypingSpeed(); // bottom ui var screenBottomUI = new ScreenBottomUI(); screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord()); screenBottomUI.printCenterText(sessionStorageManager.getPlayingAppKoreanName()); screenBottomUI.printRightText(sessionStorageManager.getPlayerName()); // this.countDown(); } TypingExamination.prototype.fontLoaded = function() { // this.animalList = new AnimalList(90); this.makeAnimalRecordList(); // this.animalRecordList.hide(); this.animalRecordList.applyLoadedFont(); // typing content var CONTENT_TEXT_WIDTH = 800; var CONTENT_UNDERLINE_OFFSET = 13; var TYPING_CONTENT_UNDERLINE_OFFSET = 5; var graphics = game.add.graphics(0, 0); // graphics.beginFill(0xFF3300); graphics.lineStyle(1, 0x303030, 1); var TYPING_CONTENT_X = 50; var TYPING_CONTENT_Y = 320; // 390; var RECORD_POSITION_X = 990; var INPUT_TEXT_OFFSET_X = 10; var INPUT_TEXT_OFFSET_Y = 60; var FONT_SIZE = 26; var BIG_FONT_SIZE = 28; var TYPING_TEXT_OFFSET_HEIGHT = 46; // textStyleBasic.font = "bold 38px Arial"; // textStyleBasic.backgroundColor = "rgba(0, 0, 0, 0.25)"; // current text textStyleBasic.font = "38px Nanum Gothic Coding"; this.textTypedContentBack = 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.textTypedContentBack.anchor.set(0, 0.5); this.textTypedContentBack.fontSize = BIG_FONT_SIZE; this.textTypedContentBack.style.backgroundColor = TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR; 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 = BIG_FONT_SIZE; this.textTypingContentBack.style.backgroundColor = TypingExamination.STAGE_BACKGROUND_COLOR; this.textTypingContent = 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.textTypingContent.anchor.set(0, 0.5); this.textTypingContent.fontSize = BIG_FONT_SIZE; 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 ); // current text line number / total line number textStyleBasic.font = "38px Arial"; textStyleBasic.backgroundColor = null; this.textTypingLine = game.add.text( RECORD_POSITION_X, TYPING_CONTENT_Y, "", textStyleBasic ) .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); // .addColor(TypingExamination.COLOR_CONTENT_INPUT, 0); this.textTypingLine.anchor.set(1, 0.5); var TYPING_OFFSET_Y = 60; var TYPING_PREVIEW_OFFSET_Y = 70; // textStyleBasic.font = "38px Arial"; textStyleBasic.backgroundColor = null; // done text var textDoneColor = [ '#99994d', '#88884d', '#77774d', '#66664d' ]; // var textDoneColor = [ '#99994d', '#99994d', '#99994d', '#99994d' ]; 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 Nanum Gothic Coding"; this.textTypingContentsDone[i] = game.add.text( 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) .addColor(textDoneColor[i], 0); this.textTypingContentsDone[i].anchor.set(0, 0.5); this.textTypingContentsDone[i].fontSize = FONT_SIZE; textStyleBasic.font = "38px Arial"; 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) .addColor(textDoneColor[i], 0); this.textTypingRecordsDone[i].anchor.set(1, 0.5); this.textTypingRecordsDone[i].fontSize = FONT_SIZE; } // preview text var textPreviewColor = [ '#999999', '#888888', '#777777', '#666666' ]; // 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 Nanum Gothic Coding"; this.textTypingContentPreview[i] = game.add.text( TYPING_CONTENT_X, 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) .addColor(textPreviewColor[i], 0); this.textTypingContentPreview[i].anchor.set(0, 0.5); this.textTypingContentPreview[i].fontSize = FONT_SIZE; } // input text 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(); this.inputTextContent.canvasInput.fontSize(BIG_FONT_SIZE); // this.inputTextContent.canvasInput.fontWeight(""); this.inputTextContent.canvasInput.fontFamily("Nanum Gothic Coding"); // this.inputTextContent.canvasInput.fontFamily("Nanum Gothic Coding"); this.inputTextContent.canvasInput.placeHolder(""); // inputTextContent.canvasInput._onkeydown = this.checkInputText; // inputTextContent.canvasInput._onkeyup = function() { this.inputTextContent.canvasInput._onkeyup = (function() { this.checkTypingContents(event); // warning // : checkTypingContents is called onkeyup and onkeydown }).bind(this); this.loadExaminationContent(); } /* countDown() { var style = { font: "bold 200px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" }; this.countDownText = game.add.text(0, 0, "", style); this.countDownText.setTextBounds(0, 0, game.world.width, game.world.height); this.countDownText.stroke = "#333"; this.countDownText.strokeThickness = 50; this.countDownNumber = 3; if(isDebugMode()) this.countDownNumber = 1; this.tweenCountDown(); } tweenCountDown() { if(this.countDownNumber === 0) { this.startGame(); return; } this.countDownText.text = this.countDownNumber.toString(); this.countDownText.alpha = 1; var countDownTween = game.add.tween(this.countDownText); countDownTween.to( { alpha: 0 }, GAME_SCREEN_SIZE.x, Phaser.Easing.Linear.None, true); countDownTween.onComplete.add(this.tweenCountDown, this); this.countDownNumber--; } */ TypingExamination.prototype.makeAnimalRecordList = function() { this.animalRecordList = new AnimalRecordList(AnimalRecordList.TYPE_MENU); this.animalRecordList.printScore(Animal.TYPE_PRACTICE); } TypingExamination.prototype.back = function() { sessionStorageManager.resetPlayingAppData(); // location.href = '../../web/client/menu_typing_exam.html'; location.href = '../../web/client/main_menu.html'; } TypingExamination.prototype.startGame = function() { this.averageTypingSpeedText.print(0); this.showTypingExaminationContents(); this.showPlayingWordNumber(); } TypingExamination.prototype.timeOver = function() { var timeOverText = new TimeOverText(); // this.stopAndGoResult(); } TypingExamination.prototype.gameOver = function() { var missionClearText = new MissionClearText(); this.stopAndGoResult(); } TypingExamination.prototype.stopAndGoResult = function() { this.animalList.stopAnimation(); sessionStorageManager.setRecord(this.typingRecordTotal); if(!isExperienceMaestroAccount()) this.updateResultRecord(); game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this); } TypingExamination.prototype.updateResultRecord = function() { if(sessionStorageManager.getMaestroAccountType() < 100) { // experience account this.dbService.updateTypingExamRecord( sessionStorageManager.getWritingID(), sessionStorageManager.getRecord(), (function(replyJSON) { console.log(replyJSON); }).bind(this), (function(replyJSON) { console.log(replyJSON); }).bind(this) ); } } TypingExamination.prototype.goResult = function() { location.href = '../../web/client/result.html'; } TypingExamination.prototype.initTypingData = function() { this.typingIndex = 0; this.isGameOver = false; this.isTyping = false; this.timeTypingStart = 0; this.timeTypingEnd = 0; this.typingLetterCountTotal = 0; this.typingRecordTotal = 0; } TypingExamination.prototype.loadExaminationContent = function() { this.dbService.requestWritingInfo( sessionStorageManager.getWritingID(), (function(jsonData) { // onSucceeded this.downloadListSucceeded(jsonData); }).bind(this), (function(jsonData) { // onFailed this.downloadListFailed(jsonData); }).bind(this) ); } TypingExamination.prototype.downloadListSucceeded = function(jsonData) { // console.log(jsonData); var writingInfo = jsonData["writingInfo"]; // console.log(writingInfo); var writer = writingInfo["writer"]; var writerID = ""; writingInfo["writerID"] == null ? writerID = "" : writerID = writingInfo["writerID"]; var path = "./../../../resources/file/typing_exam/"; var directory = writer + writerID + "/"; var filename = writingInfo["filename"]; var url = path + directory + filename; // if(isDebugMode()) { // url = path + "system/sample.txt"; // console.log(url); // } game.load.onLoadComplete.add(this.completeLoadingWriting, this); game.load.text("writing", url); game.load.start(); } TypingExamination.prototype.downloadListFailed = function(jsonData) { console.log(jsonData); } TypingExamination.prototype.completeLoadingWriting = function() { game.load.onFileComplete.remove(this.loadExaminationContent, this); game.load.onLoadComplete.remove(this.completeLoadingWriting, this); var writing = game.cache.getText("writing"); var examinationContent = writing.split("\n"); for(var i = 0; i < examinationContent.length; i++) { examinationContent[i] = examinationContent[i].replace(/\r/g, ""); // examinationContent[i] = examinationContent[i].replace(/ /g, TypingExamination.SPACE_INDICATOR); } // console.log('playingStageData.language : ' + playingStageData.language); // console.log('playingStageData.level : ' + playingStageData.level); // console.log('examinationContent : ' + examinationContent); var typingTextMan = new TypingTextManager(); typingTextMan.makeExaminationContents(examinationContent); this.typingExaminationContents = typingTextMan.getContents(); // console.log(this.typingExaminationContents); this.typingContentLength = this.typingExaminationContents.length; this.typingRecordForLines = []; this.typingElapsedTime = []; for(var i = 0; i < this.typingContentLength; i++) { this.typingRecordForLines[i] = 0; this.typingElapsedTime[i] = 0; } this.startGame(); } TypingExamination.prototype.setTypingContentText = function(text) { this.textTypingContent.text = text; this.textTypedContentBack.text = text; } TypingExamination.prototype.setTypingContentBackText = function(text) { this.textTypingContentBack.text = text; } TypingExamination.prototype.showTypingExaminationContents = function() { for(var i = 0; i < TypingExamination.TYPING_CONTENT_DONE_COUNT; i++) { var doneIndex = this.typingIndex - i - 1; if(doneIndex < 0) { this.textTypingContentsDone[i].text = ""; this.textTypingRecordsDone[i].text = ""; } else { this.textTypingContentsDone[i].text = this.typingExaminationContents[doneIndex]; this.textTypingRecordsDone[i].text = Math.floor(this.typingRecordForLines[doneIndex]); } } if(this.typingIndex == this.typingContentLength) { this.setTypingContentText(""); this.setTypingContentBackText(""); return; } var contentText = this.typingExaminationContents[this.typingIndex]; this.setTypingContentText(contentText); for(var i = 0; i < TypingExamination.TYPING_CONTENT_PREVIEW_COUNT; i++) { var previewIndex = this.typingIndex + i + 1; if(previewIndex < this.typingExaminationContents.length) { var previewText = this.typingExaminationContents[previewIndex]; this.textTypingContentPreview[i].text = previewText; } else this.textTypingContentPreview[i].text = ""; } } TypingExamination.prototype.resetTypingContent = function() { this.textTypingContent.clearColors(); this.textTypingContent.addColor(TypingExamination.COLOR_CONTENT_INPUT, 0); this.setTypingContentBackText(""); this.inputTextContent.canvasInput.value(''); } TypingExamination.prototype.checkTypingContents = function(event) { if(this.isGameOver) return; // var inputContent = inputText.replace(/ /g, TypingExamination.SPACE_INDICATOR); var inputContent = this.inputTextContent.canvasInput.value(); var trimmedInputContent = inputContent.trim(); var typingContent = this.typingExaminationContents[this.typingIndex].trim(); if(event.keyCode == Phaser.Keyboard.ENTER || event.keyCode == Phaser.Keyboard.SPACEBAR) { // console.log("### enter ###"); // console.log("this.typingIndex : " + this.typingIndex); // console.log("trimmedInputContent : [" + trimmedInputContent + "], length : " + trimmedInputContent.length); // console.log("typingContent : [" + typingContent + "], length : " + typingContent.length); if(trimmedInputContent === typingContent) { // console.log("input completed"); this.calculateTypingRecord(typingContent); // console.log("this.typingIndex : " + this.typingIndex); // console.log("this.typingContentLength : " + this.typingContentLength); if(this.typingIndex == this.typingContentLength - 1) { this.isGameOver = true; this.gameOver(); return; } this.playNextContent(); return; } } if(this.isTyping == false) { // console.log(event); this.setTimeTypingStart(); } this.showTypingContentHighlight(inputContent, typingContent); } TypingExamination.prototype.showTypingContentHighlight = function(inputContent, typingContent) { // console.log(inputContent + "="); // console.log(typingContent + "="); this.textTypingContent.clearColors(); this.textTypingContent.addColor(TypingExamination.COLOR_CONTENT_RIGHT, 0); if(typingContent == null) return; // var replaceSpaceIndicatorInputContent = inputContent.replace(/ /g, TypingExamination.SPACE_INDICATOR); var typingContentLength = typingContent.length; for(var i = 0; i < typingContentLength; i++) { var typingChar = typingContent.charAt(i); var inputChar = inputContent.charAt(i); // console.log("typingChar : " + typingChar); // console.log("inputChar : " + inputChar); // 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; } } } TypingExamination.prototype.calculateTypingRecord = function(typingContent) { // console.log('입력 단어 : ' + this.typingExaminationContents[this.typingIndex]); this.isTyping = false; this.timeTypingEnd = game.time.elapsedSince(0); // console.log('this.timeTypingEnd : ' + this.timeTypingEnd); var elapsedTimeMS = this.timeTypingEnd - this.timeTypingStart; // console.log('elapsedTimeMS : ' + elapsedTimeMS); var typingContentLength = StringUtil.getUnicodeAlphabetCount(typingContent); // console.log('typingContentLength : ' + typingContentLength); var typingContentPlusEnterCount = typingContentLength + TypingExamination.TYPING_COUNT_PLUS_ENTER; var typingRecord = (typingContentPlusEnterCount + TypingExamination.TYPING_COUNT_PLUS_ENTER) * 60000 / elapsedTimeMS; this.typingElapsedTime[this.typingIndex] = elapsedTimeMS; this.typingLetterCountTotal += typingContentPlusEnterCount; this.typingRecordForLines[this.typingIndex] = typingRecord; // console.log(this.typingRecordForLines[this.typingIndex]); var typingElapsedTimeTotal = 0; for(var i = 0; i <= this.typingIndex; i++) { // console.log('i : ' + i + ' - time : ' + this.typingElapsedTime[i]); typingElapsedTimeTotal += this.typingElapsedTime[i]; } this.typingRecordTotal = this.typingLetterCountTotal * 60000 / typingElapsedTimeTotal; // console.log(this.typingElapsedTime); // console.log(this.typingLetterCountTotal); // console.log(typingElapsedTimeTotal); // console.log(typingRecordTotal); var typingRecordTotalInteger = Math.floor(this.typingRecordTotal); this.averageTypingSpeedText.print(typingRecordTotalInteger); // console.log('-------------- total --------------'); // console.log('typingLetterCountTotal : ' + this.typingLetterCountTotal); // console.log('typingElapsedTimeTotal : ' + typingElapsedTimeTotal); // console.log('typingRecordTotal : ' + this.typingRecordTotal); // console.log('-----------------------------------'); var animalLevelID = Animal.animalLevelIDByRecord(typingRecordTotalInteger, Animal.TYPE_TEST); this.animalList.activate(animalLevelID); this.animalList.tweenAnimation(Animal.ANIMATION_TYPE_CHANGE); } TypingExamination.prototype.playNextContent = function() { this.typingIndex++; this.showTypingExaminationContents(); this.showPlayingWordNumber(); this.resetTypingContent(); } TypingExamination.prototype.showPlayingWordNumber = function() { var currentLine = this.typingIndex + 1; this.textTypingLine.text = currentLine + " / " + this.typingContentLength; } TypingExamination.prototype.setTimeTypingStart = function() { if(this.inputTextContent.canvasInput.value() == "") return; this.timeTypingStart = game.time.elapsedSince(0); var timeGap = this.timeTypingStart - this.timeTypingEnd; if(timeGap < 50) return; this.isTyping = true; // console.log('last End : ' + this.timeTypingEnd); // console.log('this.timeTypingStart : ' + this.timeTypingStart); // console.log('time gap : ' + (this.timeTypingStart - this.timeTypingEnd)); } TypingExamination.GAME_TIME_SEC = 60 * 5; // 5 minutes TypingExamination.SPACE_INDICATOR = "ˇ"; // "ᵔ"; // "ᵕ"; // "ˣ"; // "ᵛ"; // " · "; 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; TypingExamination.WORD_COUNT_FOR_STAGE = 10; TypingExamination.COLOR_CONTENT_INPUT = "#dddddd"; TypingExamination.COLOR_CONTENT_RIGHT = "#ffff4d"; TypingExamination.STAGE_BACKGROUND_COLOR = "#4d4d4d"; TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR = "#333333"; TypingExamination.STAGE_BACKGROUND_COLOR_HEX = 0x4d4d4d; TypingExamination.INPUT_CONTENT_BACKGROUND_COLOR_HEX = 0x333333;