From 60a00056bbcf5a47b2906768742610f40737a64f 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, 17 May 2018 15:47:15 +0900 Subject: [PATCH] Fix: draw history graph with ranking record --- src/game/lib/db_connect_manager.js | 26 +- src/game/lib/ranking_record_manager.js | 3 - src/game/result/result.js | 332 ------------------------- src/game/start/start.js | 66 ++--- src/web/client/start.html | 1 + 5 files changed, 22 insertions(+), 406 deletions(-) diff --git a/src/game/lib/db_connect_manager.js b/src/game/lib/db_connect_manager.js index ca6a698..fd9e47c 100644 --- a/src/game/lib/db_connect_manager.js +++ b/src/game/lib/db_connect_manager.js @@ -72,31 +72,6 @@ class DBConnectManager { return; listener(rankingRecordManager); - /* - let jsonRankingList = [ - { "UserID":"17", "Name":"강경모", 4400" }, - { "UserID":"2", "Name":"강성태", 3400" }, - { "UserID":"3", "Name":"김기덕", 2400" }, - { "UserID":"4", "Name":"김남희", 1400" }, - { "UserID":"5", "Name":"고봉순", 900" }, - { "UserID":"6", "Name":"파르마", 800" }, - { "UserID":"1", "Name":"박지상", 700" }, - { "UserID":"8", "Name":"신현주", 600" }, - { "UserID":"9", "Name":"꼬봉이", 500" }, - { "UserID":"10", "Name":"거북이", 400" }, - { "UserID":"11", "Name":"다람쥐", 300" }, - { "UserID":"12", "Name":"사시미", 200" }, - { "UserID":"13", "Name":"태권도", 100" }, - { "UserID":"14", "Name":"합기도", 40" }, - { "UserID":"15", "Name":"우습지", 10" }, - { "UserID":"16", "Name":"하하하", 4" }, - ]; - - if(listener === null) - return; - - listener(); - */ } } @@ -104,6 +79,7 @@ class DBConnectManager { DBConnectManager.TYPE_MY_RANKING_HOUR = 0; DBConnectManager.TYPE_MY_RANKING_DAY = 1; DBConnectManager.TYPE_MY_RANKING_MONTH = 2; + DBConnectManager.TYPE_ALL_RANKING_HOUR = 3; DBConnectManager.TYPE_ALL_RANKING_DAY = 4; DBConnectManager.TYPE_ALL_RANKING_MONTH = 5; \ No newline at end of file diff --git a/src/game/lib/ranking_record_manager.js b/src/game/lib/ranking_record_manager.js index a421f58..9fc98b6 100644 --- a/src/game/lib/ranking_record_manager.js +++ b/src/game/lib/ranking_record_manager.js @@ -21,9 +21,6 @@ class RankingRecordManager { clear() { this.rankingRecords = []; - - this.minValueOfRecord = 0; - this.maxValueOfRecord = 0; } get count() { diff --git a/src/game/result/result.js b/src/game/result/result.js index d6a0cf4..e348c68 100644 --- a/src/game/result/result.js +++ b/src/game/result/result.js @@ -36,11 +36,6 @@ class Result { let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName); screenBottom.printBottomCenterText(playingAppName); screenBottom.printBottomRightText(sessionStorageManager.playerName); - - // this.loadHistoryRecords(); - - // this.loadTypingStageData(); - // this.loadRanking(); } printScore() { @@ -76,333 +71,6 @@ class Result { startButton.move(game.world.centerX, game.world.height / 2 - 70); } - loadHistoryRecords() { - this.historyRecordManager.clear(); - - this.historyRecordManager.push(new HistoryRecordData("05/10", 15460)); - this.historyRecordManager.push(new HistoryRecordData("05/11", 3040)); - this.historyRecordManager.push(new HistoryRecordData("05/12", 460)); - this.historyRecordManager.push(new HistoryRecordData("05/13", 60)); - this.historyRecordManager.push(new HistoryRecordData("05/14", 8)); - - this.printHistoryRecords(); - } - - printHistoryRecords(historyRecords) { - for(let i = 0; i < this.historyRecordManager.count; i++) { - let data = this.historyRecordManager.getAt(i); - this.printRecord(i, data.date, data.record); - } - - // this.chartGraphics.lineStyle(3, 0xffd900, 1); - // this.chartGraphics.moveTo(0, 0); - // this.chartGraphics.lineTo(game.world.width - 200, 0); - } - - printRecord(index, date, record) { - if(sessionStorageManager.playingAppName.indexOf("typing") > -1) - this.printMouseAppHistory(index, date, record); - else - this.printMouseAppHistory(index, date, record); - } - - printTypingAppHistory(index, date, record) { - let posX = 60; - let posY = game.world.height / 2 + 90 + 30 * index; - - var style = { font: "20px Arial", fill: "#ffc", align: "right", boundsAlignH: "right", boundsAlignV: "top" }; - - style.boundsAlignH = "center"; - game.add.text(posX, posY, date, style) - .setTextBounds(0, 0, 40, 40) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - - game.add.text(posX + 60, posY, "(한)단어", style) - .setTextBounds(0, 0, 60, 60) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - - let numberWithCommas = NumberUtil.numberWithCommas(record); - style.boundsAlignH = "right"; - game.add.text(posX + 120, posY, numberWithCommas, style) - .setTextBounds(0, 0, 80, 60) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - } - - printMouseAppHistory(index, date, record) { - let posX = 60; - let posY = game.world.height / 2 + 90 + 30 * index; - - var style = { font: "20px Arial", fill: "#ffc", align: "right", boundsAlignH: "right", boundsAlignV: "top" }; - - style.boundsAlignH = "center"; - game.add.text(posX, posY, date, style) - .setTextBounds(0, 0, 100, 60) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - - let numberWithCommas = NumberUtil.numberWithCommas(record); - style.boundsAlignH = "right"; - game.add.text(posX + 80, posY, numberWithCommas, style) - .setTextBounds(0, 0, 100, 60) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - } - - loadRanking() { - - } - - printRanking() { - let posY = game.world.height / 2 + 20; - var bar = game.add.graphics(); - bar.beginFill(0x000000, 0.1); - bar.drawRect(0, posY, 1000, 60); - - const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" }; - - let posX = 40; - posY -= 30; - style.fill = "#ffc"; - game.add.text(posX + 20, 4, "최근의 내 기록", style) - .setTextBounds(0, posY, 200, 120) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - - var arrayTabStyle = { font: "20px Arial", fill: "#ffc", align: "left", tabs: [ 80, 60, 60 ] }; - this.textMyRanking = game.add.text(posX, posY + 100, '', arrayTabStyle) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - - posX = 340; - style.fill = "#fff"; - arrayTabStyle.tabs = [ 40, 80, 120 ]; - arrayTabStyle.fill = "#fff"; - - this.printRankingHeader(posX, posY, "수업시간 순위", style); - this.textHourRanking = this.printRankingContent(posX, posY + 100, arrayTabStyle); - - posX = 560; - this.printRankingHeader(posX, posY, "오늘의 순위", style); - this.textDayRanking = this.printRankingContent(posX, posY + 100, arrayTabStyle); - - posX = 780; - this.printRankingHeader(posX, posY, "이달의 순위", style); - this.textMonthRanking = this.printRankingContent(posX, posY + 100, arrayTabStyle); - - // this.showMyRanking(this.makeTemporaryJsonRankingList()); - this.showRankingHour(this.makeTemporaryJsonRankingList()); - this.showRankingDay(this.makeTemporaryJsonRankingList()); - this.showRankingMonth(this.makeTemporaryJsonRankingList()); - } - - printRankingHeader(x, y, title, style) { - game.add.text(x, 4, title, style) - .setTextBounds(0, y, 200, 120) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - } - - printRankingContent(x, y, style) { - return game.add.text(x, y, '', style) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - } - - showMyRanking(jsonRankingList) { - if(jsonRankingList == null) { - var rankEmpty = [ ]; - this.textMyRanking.parseList(rankEmpty); - - return; - } - - var recordArray = this.getMyRankingArrayFromJSON(jsonRankingList); - - var recordCnt = recordArray.length; - var startIndex = 0; - if(recordCnt > 7) - startIndex = recordCnt - 7; - - recordArray = recordArray.slice(startIndex); - - // console.log("Ranking Hour : " + recordArray); - this.textMyRanking.parseList(recordArray); - } - - makeTemporaryJsonRankingList() { - let jsonRankingList = [ - { "UserID":"17", "Name":"강경모", "BestRecord":"4400" }, - { "UserID":"2", "Name":"강성태", "BestRecord":"3400" }, - { "UserID":"3", "Name":"김기덕", "BestRecord":"2400" }, - { "UserID":"4", "Name":"김남희", "BestRecord":"1400" }, - { "UserID":"5", "Name":"고봉순", "BestRecord":"900" }, - { "UserID":"6", "Name":"파르마", "BestRecord":"800" }, - { "UserID":"1", "Name":"박지상", "BestRecord":"700" }, - { "UserID":"8", "Name":"신현주", "BestRecord":"600" }, - { "UserID":"9", "Name":"꼬봉이", "BestRecord":"500" }, - { "UserID":"10", "Name":"거북이", "BestRecord":"400" }, - { "UserID":"11", "Name":"다람쥐", "BestRecord":"300" }, - { "UserID":"12", "Name":"사시미", "BestRecord":"200" }, - { "UserID":"13", "Name":"태권도", "BestRecord":"100" }, - { "UserID":"14", "Name":"합기도", "BestRecord":"40" }, - { "UserID":"15", "Name":"우습지", "BestRecord":"10" }, - { "UserID":"16", "Name":"하하하", "BestRecord":"4" }, - ]; - - return jsonRankingList; - } - - showRankingHour(jsonRankingList) { - if(jsonRankingList == null) { - var rankEmpty = [ ]; - this.textHourRanking.parseList(rankEmpty); - - return; - } - - /* - var recordArray = this.getRankingArrayFromJSON(jsonRankingList2); - */ - var recordArray = this.getRankingArrayFromJSON(jsonRankingList); - // console.log("Ranking Hour : " + recordArray); - this.textHourRanking.parseList(recordArray); - this.showMedal(this.medalHour, this.getMyRankFromJSON(jsonRankingList)); - } - - showRankingDay(jsonRankingList) { - // console.log("Ranking Day : " + jsonRankingList); - if(jsonRankingList == null) { - var rankEmpty = [ ]; - this.textDayRanking.parseList(rankEmpty); - - return; - } - - var recordArray = this.getRankingArrayFromJSON(jsonRankingList); - // console.log("Ranking Day : " + recordArray); - this.textDayRanking.parseList(recordArray); - this.showMedal(this.medalDay, this.getMyRankFromJSON(jsonRankingList)); - } - - showRankingMonth(jsonRankingList) { - if(jsonRankingList == null) { - var rankEmpty = [ ]; - this.textMonthRanking.parseList(rankEmpty); - - return; - } - - var recordArray = this.getRankingArrayFromJSON(jsonRankingList); - // console.log("Ranking Month : " + recordArray); - this.textMonthRanking.parseList(recordArray); - this.showMedal(this.medalMonth, this.getMyRankFromJSON(jsonRankingList)); - } - - getMyRankingArrayFromJSON(jsonRankingList) { - var startIndex = 0; - var endIndex = jsonRankingList.length; - - var recordArray = []; - for(var i = startIndex; i < endIndex; i++) { - var bestRecordRow = []; - var strDate = jsonRankingList[i]['Date']; - var dateArray = strDate.split("-"); - var recordDate = new Date(dateArray[0], dateArray[1], dateArray[2]); - bestRecordRow[0] = recordDate.getMonth() + "월 " + recordDate.getDate() + "일"; - bestRecordRow[1] = Math.floor(jsonRankingList[i]['BestRecord']); - bestRecordRow[2] = getStageNameForKorean(jsonRankingList[i]['StageName']); - // console.log("$BestRecordRow : " + bestRecordRow[0] + ", " + bestRecordRow[1] + ", " + bestRecordRow[2]); - - recordArray.push(bestRecordRow); - } - - return recordArray; - } - - getRankingArrayFromJSON(jsonRankingList) { - var rankingListCount = jsonRankingList.length; - var myRank = this.getMyRankFromJSON(jsonRankingList); - var myRankIndex = myRank - 1; - // console.log("myRankIndex : " + myRankIndex); - - var startIndex = 0; - var endIndex = rankingListCount; - - if(rankingListCount > 7) { - if(myRank < rankingListCount - 3) { // my rank is better than the worst 3 - if(myRank < 5) { - startIndex = 0; - endIndex = rankingListCount > 7 ? 7 : rankingListCount; - } else { - startIndex = myRankIndex - 3; - endIndex = myRankIndex + 4; - } - } else { // my rank is in the worst 3 - startIndex = rankingListCount > 7 ? rankingListCount - 7 : 0; - endIndex = rankingListCount; - } - } - - var recordArray = []; - for(var i = startIndex; i < endIndex; i++) { - var bestRecordRow = []; - // bestRecordRow[0] = jsonRankingList[i]['UserID']; - bestRecordRow[0] = i + 1; - bestRecordRow[1] = jsonRankingList[i]['Name']; - bestRecordRow[2] = NumberUtil.numberWithCommas(Math.floor(jsonRankingList[i]['BestRecord'])); - // console.log("$BestRecordRow : " + bestRecordRow[0] + ", " + bestRecordRow[1] + ", " + bestRecordRow[2]); - - recordArray.push(bestRecordRow); - } - - return recordArray; - } - - getMyRankFromJSON(jsonRankingList) { - var myRank = -1; - for(var i = 0; i < jsonRankingList.length; i++) { - if(jsonRankingList[i]['UserID'] == sessionStorageManager.playerUserID) { - myRank = i + 1; - } - } - - return myRank; - } - - showMedal(medal, myRank) { - /* - if(myRank > 3) { - medal.alpha = 0; - return; - } - - if(myRank == 1) - medal.loadTexture("medal_gold"); - else if(myRank == 2) - medal.loadTexture("medal_silver"); - else if(myRank == 3) - medal.loadTexture("medal_bronze"); - - medal.alpha = 1; - medal.scale.setTo(0.5); - game.add.tween(medal.scale).to( {x: 0.7, y: 0.7}, 1000, Phaser.Easing.Bounce.Out, true); - */ - } - - - loadTypingStageData() { - var self = this; - - xhr = new XMLHttpRequest(); - xhr.onreadystatechange = function() { - // console.log("onreadystatechange : " + xhr); - // console.log("xhr.readyState : " + xhr.readyState); - // console.log("xhr.status : " + xhr.status); - if(xhr.readyState == 4 && xhr.status == 200) { - // console.log(xhr.responseText); - var jsonData = JSON.parse(xhr.responseText); - self.updateStageButton(jsonData); - } - } - xhr.open('GET', 'activated_stage_list.php', true); - xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - xhr.send(); - } - startStage() { location.href = "../../web/client/" + sessionStorageManager.playingAppName + ".html"; } diff --git a/src/game/start/start.js b/src/game/start/start.js index ad3bc64..fccab8d 100644 --- a/src/game/start/start.js +++ b/src/game/start/start.js @@ -8,7 +8,7 @@ class Start { } create() { - this.historyRecordManager = new HistoryRecordManager(); + this.dbConnectManager = new DBConnectManager(); this.game.stage.backgroundColor = '#4d4d4d'; this.chartGraphics = game.add.graphics(100, game.world.height - 120); @@ -26,8 +26,22 @@ class Start { this.printHowToPlay(appInfoManager.getHowToPlayText(sessionStorageManager.playingAppName)); this.makeStartButton(); - this.loadHistoryRecords(); - this.printHistoryRecords(); + this.printChartBaseLine(); + + let self = this; + this.dbConnectManager.requestTempPlayerHistory( historyRecordManager => { + let underValue = historyRecordManager.underValueForGraph(); + let upperValue = historyRecordManager.upperValueForGraph(); + + for(let i = 0; i < historyRecordManager.count; i++) { + if(i > 6) + break; + + let data = historyRecordManager.getAt(i); + this.drawRecordGraph(i, data.date, data.score, underValue, upperValue); + } + + }); // bottom @@ -37,8 +51,6 @@ class Start { let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName); screenBottom.printBottomCenterText(playingAppName); screenBottom.printBottomRightText(sessionStorageManager.playerName); - - // this.loadTypingStageData(); } printHowToPlay(text) { @@ -57,32 +69,14 @@ class Start { startButton.move(game.world.centerX, game.world.centerY); } - loadHistoryRecords() { - this.historyRecordManager.clear(); - - this.historyRecordManager.push(new HistoryRecord("05/10", 15460)); - this.historyRecordManager.push(new HistoryRecord("05/11", 13040)); - this.historyRecordManager.push(new HistoryRecord("05/12", 16460)); - this.historyRecordManager.push(new HistoryRecord("05/13", 15060)); - this.historyRecordManager.push(new HistoryRecord("05/14", 19800)); - } - - printHistoryRecords(historyRecords) { - let underValue = this.historyRecordManager.underValueForGraph(); - let upperValue = this.historyRecordManager.upperValueForGraph(); - - for(let i = 0; i < this.historyRecordManager.count; i++) { - let data = this.historyRecordManager.getAt(i); - this.printRecord(i, data.date, data.score, underValue, upperValue); - } - + printChartBaseLine() { this.chartGraphics.lineStyle(3, 0xffd900, 1); this.chartGraphics.moveTo(0, 0); this.chartGraphics.lineTo(game.world.width - 200, 0); } - printRecord(index, date, score, min, max) { - const CHART_GAP_PX = 180; + drawRecordGraph(index, date, score, min, max) { + const CHART_GAP_PX = 120; const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" }; let dateText = game.add.text(100 + index * CHART_GAP_PX, game.world.height - 140, date, style); @@ -101,26 +95,6 @@ class Start { this.chartGraphics.lineTo(50 + index * CHART_GAP_PX, -100 * ( (score - min) / (max - min) )); } - - loadTypingStageData() { - var self = this; - - xhr = new XMLHttpRequest(); - xhr.onreadystatechange = function() { - // console.log("onreadystatechange : " + xhr); - // console.log("xhr.readyState : " + xhr.readyState); - // console.log("xhr.status : " + xhr.status); - if(xhr.readyState == 4 && xhr.status == 200) { - // console.log(xhr.responseText); - var jsonData = JSON.parse(xhr.responseText); - self.updateStageButton(jsonData); - } - } - xhr.open('GET', 'activated_stage_list.php', true); - xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - xhr.send(); - } - startStage() { location.href = "../../web/client/" + sessionStorageManager.playingAppName + ".html"; } diff --git a/src/web/client/start.html b/src/web/client/start.html index ba7f190..21f8d6c 100644 --- a/src/web/client/start.html +++ b/src/web/client/start.html @@ -17,6 +17,7 @@ +