From 3d4852c42cf3bba3c263ef877a6ea55699464fb5 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: Wed, 5 Sep 2018 09:21:48 +0900 Subject: [PATCH] Add: ranking for app --- src/game/global/global_variables.js | 31 +-- src/game/lib/db_connect_manager.js | 20 ++ src/game/ranking/main.js | 13 ++ src/game/ranking/ranking.js | 316 ++++++++++++++++++++++++++ src/game/start/start.js | 18 ++ src/web/client/ranking.html | 53 +++++ src/web/server/record/app_ranking.php | 97 ++++++++ 7 files changed, 529 insertions(+), 19 deletions(-) create mode 100644 src/game/ranking/main.js create mode 100644 src/game/ranking/ranking.js create mode 100644 src/web/client/ranking.html create mode 100644 src/web/server/record/app_ranking.php diff --git a/src/game/global/global_variables.js b/src/game/global/global_variables.js index cad9f89..b749ede 100644 --- a/src/game/global/global_variables.js +++ b/src/game/global/global_variables.js @@ -22,25 +22,18 @@ const GAME_SCREEN_SIZE = { x: 1024, y: 768 } let sessionStorageManager = new SessionStorageManager(); { - // if(isDebugMode()) { - // sessionStorageManager.playerName = "부현율"; - // sessionStorageManager.playerID = 8; - // sessionStorageManager.playingAppID = 101; - // sessionStorageManager.playingAppName = "space_invaders"; - // sessionStorageManager.score = 1000; - // sessionStorageManager.highScore = 2000; - // } - - console.log("maestroID : " + sessionStorageManager.maestroID); - console.log("maestroAccountType : " + sessionStorageManager.maestroAccountType); - console.log("playerName : " + sessionStorageManager.playerName); - console.log("playerID : " + sessionStorageManager.playerID); - console.log("playerAccountType : " + sessionStorageManager.playerAccountType); - console.log("playingAppID : " + sessionStorageManager.playingAppID); - console.log("playingAppName : " + sessionStorageManager.playingAppName); - console.log("playingAppKoreanName : " + sessionStorageManager.playingAppKoreanName); - console.log("record : " + sessionStorageManager.record); - console.log("bestRecord : " + sessionStorageManager.bestRecord); + if(isDebugMode()) { + console.log("maestroID : " + sessionStorageManager.maestroID); + console.log("maestroAccountType : " + sessionStorageManager.maestroAccountType); + console.log("playerName : " + sessionStorageManager.playerName); + console.log("playerID : " + sessionStorageManager.playerID); + console.log("playerAccountType : " + sessionStorageManager.playerAccountType); + console.log("playingAppID : " + sessionStorageManager.playingAppID); + console.log("playingAppName : " + sessionStorageManager.playingAppName); + console.log("playingAppKoreanName : " + sessionStorageManager.playingAppKoreanName); + console.log("record : " + sessionStorageManager.record); + console.log("bestRecord : " + sessionStorageManager.bestRecord); + } if(sessionStorageManager.maestroID === null && !isLogin()) { goLogin(); diff --git a/src/game/lib/db_connect_manager.js b/src/game/lib/db_connect_manager.js index 989623b..d255ce3 100644 --- a/src/game/lib/db_connect_manager.js +++ b/src/game/lib/db_connect_manager.js @@ -402,6 +402,26 @@ class DBConnectManager { ); } + requestAppRanking(maestroID, appID, onSucceededListener, onFailedListener) { + let xhr = new XMLHttpRequest(); + xhr.open("POST", this.phpPath + "server/record/app_ranking.php", true); + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + xhr.onreadystatechange = function() { + if(xhr.readyState == 4 && xhr.status == 200) { + let replyJSON = JSON.parse(xhr.responseText); + + if(replyJSON != null) + onSucceededListener(replyJSON); + else + onFailedListener(replyJSON); + } + }; + xhr.send( + "MaestroID=" + maestroID + + "&AppID=" + appID + ); + } + loadTempPlayerHistory(historyRecordManager) { diff --git a/src/game/ranking/main.js b/src/game/ranking/main.js new file mode 100644 index 0000000..0dc89ee --- /dev/null +++ b/src/game/ranking/main.js @@ -0,0 +1,13 @@ +///////////////////////////// +// Main game + +const CONTENT_ID = "Ranking"; + +let game = new Phaser.Game( + GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y, + Phaser.CANVAS, CONTENT_ID, + this, false, false +); + +game.state.add('Ranking', Ranking); +game.state.start('Ranking'); diff --git a/src/game/ranking/ranking.js b/src/game/ranking/ranking.js new file mode 100644 index 0000000..0c414f1 --- /dev/null +++ b/src/game/ranking/ranking.js @@ -0,0 +1,316 @@ +///////////////////////////// +// Ranking + +class Ranking { + + preload() { + game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png'); + } + + create() { + self = this; + + this.dbConnectManager = new DBConnectManager(); + + this.jsonData = null; + this.mode = Ranking.MODE_HOUR; + + this.game.stage.backgroundColor = '#4d4d4d'; + + // let phaser = game.add.image(game.world.centerX, game.world.centerY, 'phaser'); + // phaser.anchor.set(0.5); + // phaser.alpha = 0.1; + + + // top ui + let screenTopUI = new ScreenTopUI(); + screenTopUI.makeBackButton( () => { + location.href = '../../web/client/start.html'; + }); + screenTopUI.makeFullScreenButton(); + + + let resultTextStyle = textStyleBasic; + resultTextStyle.font = "bold 42px Arial"; + + this.textTitle = game.add.text(GAME_SCREEN_SIZE.x / 2, 32, "수업시간 순위", resultTextStyle) + .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + this.textTitle.anchor.set(0.5); + this.textTitle.addColor("#ff6666", 0); + + // let typingRecordTextStyle = textStyleBasic; + // typingRecordTextStyle.font = "bold 62px Arial"; + + // let bestRecordTextStyle = textStyleBasic; + // bestRecordTextStyle.font = "32px Arial"; + + // rank + let rankAreaPositionY = 280; + + let typingTextStyle = textStyleBasic; + // typingTextStyle.font = "bold 84px Arial"; + + rankAreaPositionY = 90; + + let style = { font: "34px Arial", fill: "#fff", tabs: [ 60, 160, 160 ] }; + let rankAreaPositionX = 160; + this.textRanking1to10 = game.add.text(rankAreaPositionX, rankAreaPositionY , '', style) + .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + this.textRanking11to20 = game.add.text(rankAreaPositionX + 420, rankAreaPositionY, '', style) + .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + + + let buttonPositionY = 640; + let buttonHour = this.makeTextButton(game.world.centerX - 220, buttonPositionY, "수업시간 순위", this.showRankingHour); + // buttonHour.startButton.inputEnabled = false; + let buttonDay = this.makeTextButton(game.world.centerX, buttonPositionY, "오늘의 순위", this.showRankingDay); + // buttonDay.startButton.inputEnabled = false; + let buttonMonth = this.makeTextButton(game.world.centerX + 220, buttonPositionY, "이달의 순위", this.showRankingMonth); + // buttonMonth.startButton.inputEnabled = false; + + + // bottom ui + let screenBottomUI = new ScreenBottomUI(); + // ScreenBottomUI.printLeftText("게임 진행 정보"); + // let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName); + // ScreenBottomUI.printCenterText(playingAppName); + screenBottomUI.printCenterText("랭킹"); + screenBottomUI.printRightText(sessionStorageManager.playerName); + + this.getRecordToRankingServer(); + game.time.events.loop(Phaser.Timer.SECOND * 10, this.getRecordToRankingServer, this); + } + + makeTextButton(x, y, buttonText, eventListener) { + let setting = new RoundRectButtonSetting(x, y, 200, 100); + setting.fontStyle.fontWeight = "bold"; + switch(buttonText) { + case "수업시간 순위": + setting.strokeColors = { + out: 0xddcccc, + over: 0xccaaaa, + down: 0xbb9999, + disabled: 0x333333 + }; + setting.buttonColors = { + out: 0xffeeee, + over: 0xddcccc, + down: 0xccaaaa, + disabled: 0x333333 + }; + setting.textColors = { + out: "#f00", + over: "#f00", + down: "#f00", + disabled: "#999" + }; + break; + + case "오늘의 순위": + setting.strokeColors = { + out: 0xccccdd, + over: 0xaaaacc, + down: 0x9999bb, + disabled: 0x333333 + }; + setting.buttonColors = { + out: 0xeeeeff, + over: 0xccccdd, + down: 0xaaaacc, + disabled: 0x333333 + }; + setting.textColors = { + out: "#00f", + over: "#00f", + down: "#00f", + disabled: "#999" + }; + break; + + case "이달의 순위": + setting.strokeColors = { + out: 0xccddcc, + over: 0xaaccaa, + down: 0x99bb99, + disabled: 0x333333 + }; + setting.buttonColors = { + out: 0xeeffee, + over: 0xccddcc, + down: 0xaaccaa, + disabled: 0x333333 + }; + setting.textColors = { + out: "#0f0", + over: "#0f0", + down: "#0f0", + disabled: "#999" + }; + break; + + } + + return new RoundRectButton(setting, RoundRectButton.NONE_ICON, buttonText, eventListener); + } + + getRecordToRankingServer() { + // console.log("getRecordToRankingServer : " + this.mode); + let self = this; + + this.showRanking(null); + + // let totalInfo = new Object(); + // this.showRanking(totalInfo); + + this.dbConnectManager.requestAppRanking( + sessionStorageManager.maestroID, + sessionStorageManager.playingAppID, + (jsonData) => { + self.showRanking(jsonData); + }, + (jsonData) => { + self.showRanking(null); + } + ); + // console.log('playerUserID : ' + playerUserID); + // console.log('playerName : ' + playerName); + // console.log('playingStageData.language : ' + playingStageData.language); + // console.log('playingStageData.level : ' + playingStageData.level + ", " + getStageCodeByStageNo(playingStageData.level)); + + // let 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); + // self.jsonData = JSON.parse(xhr.responseText); + // // console.log(JSON.stringify(jsonData)); + + // self.showRanking(self.jsonData); + // } + // } + // xhr.open('POST', 'stage_ranking.php', true); + // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + // let param = 'maestro_id=' + sessionStorageManager.maestroID + 'app_id=' + sessionStorageManager.playingAppID; + // // console.log(param); + // xhr.send(param); + } + + showRankingHour() { + self.mode = Ranking.MODE_HOUR; + self.textTitle.text = "수업시간 순위"; + self.textTitle.addColor("#ff6666", 0); + self.getRecordToRankingServer(); + } + + showRankingDay() { + self.mode = Ranking.MODE_DAY; + self.textTitle.text = "오늘의 순위"; + self.textTitle.addColor("#9999ff", 0); + self.getRecordToRankingServer(); + } + + showRankingMonth() { + self.mode = Ranking.MODE_MONTH; + self.textTitle.text = "이달의 순위"; + self.textTitle.addColor("#99ff99", 0); + self.getRecordToRankingServer(); + } + + showRanking(jsonRankingData) { + // console.log(jsonRankingData); + + if(jsonRankingData === null) { + let rankEmpty = [ ]; + this.textRanking1to10.parseList(rankEmpty); + this.textRanking11to20.parseList(rankEmpty); + + return; + } + + let jsonRankingList = null; + if(this.mode === Ranking.MODE_HOUR) + jsonRankingList = jsonRankingData.rankingHour; + else if(this.mode === Ranking.MODE_DAY) + jsonRankingList = jsonRankingData.rankingDay; + else if(this.mode === Ranking.MODE_MONTH) + jsonRankingList = jsonRankingData.rankingMonth; + + if(jsonRankingList === null) { + let rankEmpty = [ ]; + this.textRanking1to10.parseList(rankEmpty); + this.textRanking11to20.parseList(rankEmpty); + + return; + } + + let recordArray = this.getRankingArrayFromJSON(jsonRankingList); + let recordTop10 = []; + let recordTop20 = []; + for(let i = 0; i < 10; i++) { + if(i < recordArray.length) + recordTop10.push(recordArray[i]); + if(i + 10 < recordArray.length) + recordTop20.push(recordArray[i + 10]); + } + this.textRanking1to10.parseList(recordTop10); + this.textRanking11to20.parseList(recordTop20); + } + + getRankingArrayFromJSON(jsonRankingList) { + // if(isDebugMode()) + // return this.getDummyArray(); + + let rankingListCount = jsonRankingList.length; + + let recordArray = []; + for(let i = 0; i < rankingListCount; i++) { + let bestRecordRow = []; + // bestRecordRow[0] = jsonRankingList[i]['UserID']; + bestRecordRow[0] = i + 1; + bestRecordRow[1] = jsonRankingList[i]['Name']; + bestRecordRow[2] = Math.floor(jsonRankingList[i]['BestRecord']); + // console.log("$BestRecordRow : " + bestRecordRow[0] + ", " + bestRecordRow[1] + ", " + bestRecordRow[2]); + + recordArray.push(bestRecordRow); + } + + return recordArray; + } + + getDummyArray() { + let recordArray2 = [ + [ '1', '박지상', '22' ], + [ '2', '박지상', '21' ], + [ '3', '박지상', '20' ], + [ '4', '박지상', '19' ], + [ '5', '박지상', '18' ], + [ '6', '박지상', '17' ], + [ '7', '박지상', '16' ], + [ '8', '박지상', '15' ], + [ '9', '박지상', '14' ], + [ '10', '박지상', '13' ], + [ '11', '박지상', '12' ], + [ '12', '박지상', '11' ], + [ '13', '박지상', '10' ], + [ '14', '박지상', '9' ], + [ '15', '박지상', '8' ], + [ '16', '박지상', '7' ], + [ '17', '박지상', '6' ], + [ '18', '박지상', '5' ], + [ '19', '박지상', '4' ], + [ '20', '박지상', '3' ], + [ '21', '박지상', '2' ], + [ '22', '박지상', '1' ], + ]; + return recordArray2; + } + +} + +Ranking.MODE_HOUR = "mode_hour"; +Ranking.MODE_DAY = "mode_day"; +Ranking.MODE_MONTH = "mode_month"; + +Ranking.OFFSET_RIGHT_ALIGN = 10; \ No newline at end of file diff --git a/src/game/start/start.js b/src/game/start/start.js index c7de1de..508694c 100644 --- a/src/game/start/start.js +++ b/src/game/start/start.js @@ -33,6 +33,8 @@ class Start { // contents this.loadHowToPlay(sessionStorageManager.playingAppID); this.makeStartButton(); + this.makeRankingButton(); + if(sessionStorageManager.maestroAccountType >= 100) { // experience account this.printSampleChart(); this.announceBox = new AnnounceBox(50, 648); @@ -141,6 +143,22 @@ class Start { let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startStage); } + makeRankingButton() { + let setting = new RoundRectButtonSetting(game.world.centerX + 160, game.world.centerY, 60, 60); + setting.fontStyle = { + font: "18px Arial", + boundsAlignH: "center", // left, center. right + boundsAlignV: "middle", // top, middle, bottom + fill: "#fff" + }; + + let rankingButton = new RoundRectButton( + setting, RoundRectButton.NONE_ICON, "순위\n보기", + () => { + location.href = '../../web/client/ranking.html'; + }); + } + startStage() { if(isTypingPracticeStage()) diff --git a/src/web/client/ranking.html b/src/web/client/ranking.html new file mode 100644 index 0000000..15a78ff --- /dev/null +++ b/src/web/client/ranking.html @@ -0,0 +1,53 @@ + + + + + Ranking + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/src/web/server/record/app_ranking.php b/src/web/server/record/app_ranking.php new file mode 100644 index 0000000..6479d30 --- /dev/null +++ b/src/web/server/record/app_ranking.php @@ -0,0 +1,97 @@ +prepare($query); + $stmt->bind_param('ii', $maestroID, $appID); + $stmt->execute(); + $stmt->bind_result($playerID, $name, $bestRecord); + + $bestRecordArray = array(); + while($stmt->fetch()) { + $best_record['PlayerID'] = $playerID; + $best_record['Name'] = $name; + $best_record['BestRecord'] = $bestRecord; + array_push($bestRecordArray, $best_record); + } + return $bestRecordArray; +} + +function get_ranking_day($maestroID, $appID) { + global $db_conn; + + $query = " + SELECT BR.PlayerID As PlayerID, P.Name AS Name, MAX(BR.BestRecord) AS BestRecord + FROM best_record BR, player P + WHERE BR.PlayerID = P.PlayerID AND DATE(BR.RecordDateTime) = DATE(NOW()) AND BR.MaestroID = ? AND BR.AppID = ? + GROUP BY BR.PlayerID + ORDER BY max(BR.BestRecord) DESC; + "; + $stmt = $db_conn->prepare($query); + $stmt->bind_param('ii', $maestroID, $appID); + $stmt->execute(); + $stmt->bind_result($playerID, $name, $bestRecord); + + $bestRecordArray = array(); + while($stmt->fetch()) { + $best_record['PlayerID'] = $playerID; + $best_record['Name'] = $name; + $best_record['BestRecord'] = $bestRecord; + array_push($bestRecordArray, $best_record); + } + return $bestRecordArray; +} + +function get_ranking_month($maestroID, $appID) { + global $db_conn; + + $query = " + SELECT BR.PlayerID As PlayerID, P.Name AS Name, MAX(BR.BestRecord) AS BestRecord + FROM best_record BR, player P + WHERE BR.PlayerID = P.PlayerID AND MONTH(BR.RecordDateTime) = MONTH(NOW()) AND BR.MaestroID = ? AND BR.AppID = ? + GROUP BY BR.PlayerID + ORDER BY max(BR.BestRecord) DESC; + "; + $stmt = $db_conn->prepare($query); + $stmt->bind_param('ii', $maestroID, $appID); + $stmt->execute(); + $stmt->bind_result($playerID, $name, $bestRecord); + + $bestRecordArray = array(); + while($stmt->fetch()) { + $best_record['PlayerID'] = $playerID; + $best_record['Name'] = $name; + $best_record['BestRecord'] = $bestRecord; + array_push($bestRecordArray, $best_record); + } + return $bestRecordArray; +} + +?> \ No newline at end of file