From eb8ed13e8e329eb7697ff86eb4cf0941cbbdf340 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: Sat, 8 Jun 2019 00:20:15 +0900 Subject: [PATCH] Add: RankingText --- src/game/lib/text/ranking_text.js | 103 ++++++++++++++++++++++++++++ src/game/ranking/ranking.js | 110 ++++++++++++++++-------------- src/web/client/ranking.html | 1 + 3 files changed, 161 insertions(+), 53 deletions(-) create mode 100644 src/game/lib/text/ranking_text.js diff --git a/src/game/lib/text/ranking_text.js b/src/game/lib/text/ranking_text.js new file mode 100644 index 0000000..19064f0 --- /dev/null +++ b/src/game/lib/text/ranking_text.js @@ -0,0 +1,103 @@ +function RankingText(type, x, y, appID) { + + this.type = type; + this.appID = appID; + this.playerID = -1; + + this.textRanking = this.makeRankingText(x, y); + this.textRanking.anchor.x = 1; + this.textPlayerName = this.makePlayerNameText(x, y); + this.textPlayerName.anchor.x = 0; + this.textRecord = this.makeRecordText(x, y); + this.textRecord.anchor.x = 1; + +}; + +RankingText.prototype.makeText = function(x, y, fontStyle) { + var text = game.add.text(x, y, "", fontStyle); + text.anchor.y = 0.5; + text.inputEnabled = false; + text.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + + return text; +}; + +RankingText.prototype.makeRankingText = function(x, y) { + var fontStyle = null; + var offsetX = 0; + if(this.type == RankingText.PLACE_FOR_RANKING) { + fontStyle = RankingText.FONT_STYLE_FOR_RANKING; + offsetX = 40; + } + else { + fontStyle = RankingText.FONT_STYLE_FOR_RESULT; + offsetX = 10; + } + + return this.makeText(x + offsetX, y, fontStyle); +}; + +RankingText.prototype.makePlayerNameText = function(x, y) { + var fontStyle = null; + var offsetX = 0; + if(this.type == RankingText.PLACE_FOR_RANKING) { + fontStyle = RankingText.FONT_STYLE_FOR_RANKING; + offsetX = 70; + } + else { + fontStyle = RankingText.FONT_STYLE_FOR_RESULT; + offsetX = 20; + } + + return this.makeText(x + offsetX, y, fontStyle); +}; + +RankingText.prototype.makeRecordText = function(x, y) { + var fontStyle = null; + var offsetX = 0; + if(this.type == RankingText.PLACE_FOR_RANKING) { + fontStyle = RankingText.FONT_STYLE_FOR_RANKING; + offsetX = 340; + } + else { + fontStyle = RankingText.FONT_STYLE_FOR_RESULT; + offsetX = 200; + } + + return this.makeText(x + offsetX, y, fontStyle); +}; + +RankingText.prototype.reset = function() { + this.playerID = -1; + this.textRanking.text = ""; + this.textPlayerName.text = ""; + this.textRecord.text = ""; +}; + +RankingText.prototype.setContents = function(playerID, ranking, playerName, record) { + this.reset(); + + this.playerID = playerID; + this.textRanking.text = ranking + "등"; + this.textPlayerName.text = playerName; + this.setRecord(record, this.appID); +}; + +RankingText.prototype.setRecord = function(record, appID) { + this.textRecord.text = RecordUtil.getRecordValueWithUnit(record, appID); +}; + + + +RankingText.FONT_STYLE_FOR_RANKING = { + font: "32px Arial", + fill: "#fff" +}; + +RankingText.FONT_STYLE_FOR_RESULT = { + font: "30px Arial", + fill: "#fff" +}; + +RankingText.PLACE_FOR_RANKING = 0; +RankingText.PLACE_FOR_RESULT = 1; \ No newline at end of file diff --git a/src/game/ranking/ranking.js b/src/game/ranking/ranking.js index 6a80567..6b3b083 100644 --- a/src/game/ranking/ranking.js +++ b/src/game/ranking/ranking.js @@ -13,7 +13,7 @@ var Ranking = { this.refreshTimeSec = Ranking.REFRESH_TIME_SEC; this.showingPageIndex = 0; - this.recordArray = null; + this.recordArray = []; this.dateTime = null; this.date = ""; @@ -69,14 +69,19 @@ var Ranking = { this.printDateTime(this.dateTime); - // rank - var rankAreaPositionX = 120; - var rankAreaPositionY = 150; - var style = { font: "32px Arial", fill: "#fff", tabs: [ 60, 200, 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 + 460, rankAreaPositionY, '', style) - .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + // ranking text + var rankingTextOffsetY = 190; + this.rankingTexts = new Array(); + for(var i = 0; i < Ranking.RANK_COUNT; i++) { + var posX = ( (i < 10) ? 120 : 80 + (GAME_SCREEN_SIZE.x / 2) ); + var posY = rankingTextOffsetY + (i % 10) * 40; + this.rankingTexts[i] = new RankingText( + RankingText.PLACE_FOR_RANKING, + posX, posY, + sessionStorageManager.getPlayingAppID() + ); + this.rankingTexts[i].setContents(i, (i + 1), "박지삳", 100); + } var buttonOffsetX = 320; @@ -135,19 +140,19 @@ var Ranking = { var buttonHour = this.makeTextButton( game.world.centerX - 220, buttonPositionY, "수업시간 순위", - (function() { this.showRankingHour(); }).bind(this) + (function() { this.onClickRankingHour(); }).bind(this) ); // buttonHour.setInputEnabled(false); var buttonDay = this.makeTextButton( game.world.centerX, buttonPositionY, "오늘의 순위", - (function() { this.showRankingDay(); }).bind(this) + (function() { this.onClickRankingDay(); }).bind(this) ); // buttonDay.setInputEnabled(false); var buttonMonth = this.makeTextButton( game.world.centerX + 220, buttonPositionY, "이달의 순위", - (function() { this.showRankingMonth(); }).bind(this) + (function() { this.onClickRankingMonth(); }).bind(this) ); // buttonMonth.setInputEnabled(false); @@ -286,6 +291,8 @@ var Ranking = { }, getRecordToRankingServer: function() { + this.recordArray == []; + this.dbConnectManager.requestRanking( this.getDateTimeType(), sessionStorageManager.getMaestroID(), @@ -297,7 +304,7 @@ var Ranking = { ); }, - showRankingHour: function() { + onClickRankingHour: function() { this.timeType = Ranking.MODE_HOUR; this.textTitle.text = sessionStorageManager.getPlayingAppKoreanName() + " - 수업시간 순위"; this.textTitle.addColor("#ff6666", 0); @@ -309,7 +316,7 @@ var Ranking = { this.setBgColor(this.timeType); }, - showRankingDay: function() { + onClickRankingDay: function() { this.timeType = Ranking.MODE_DAY; this.textTitle.text = sessionStorageManager.getPlayingAppKoreanName() + " - 오늘의 순위"; this.textTitle.addColor("#9999ff", 0); @@ -321,7 +328,7 @@ var Ranking = { this.setBgColor(this.timeType); }, - showRankingMonth: function() { + onClickRankingMonth: function() { this.timeType = Ranking.MODE_MONTH; this.textTitle.text = sessionStorageManager.getPlayingAppKoreanName() + " - 이달의 순위"; this.textTitle.addColor("#99ff99", 0); @@ -334,73 +341,68 @@ var Ranking = { }, showRanking: function(rankingRecordManager) { - // console.log(rankingRecordManager); + this.recordArray = []; if(sessionStorageManager.getMaestroAccountType() == 101) { this.recordArray = this.getDummyRankList(); this.printRanking(); - return; } - if(rankingRecordManager.rankingRecords.length === 0) { + if(rankingRecordManager.getCount() == 0) { this.setFirstPageIndex(); - var rankEmpty = [ ]; - this.textRanking1to10.parseList(rankEmpty); - this.textRanking11to20.parseList(rankEmpty); - + this.printRanking(); return; } - var rankingListCount = rankingRecordManager.rankingRecords.length; - this.recordArray = []; + var rankingListCount = rankingRecordManager.getCount(); for(var i = 0; i < rankingListCount; i++) { - var bestRecordRow = []; - // bestRecordRow[0] = jsonRankingList[i]['UserID']; - bestRecordRow[0] = i + 1; - bestRecordRow[1] = rankingRecordManager.rankingRecords[i]['playerName']; - bestRecordRow[2] = RecordUtil.getRecordValueWithUnit( - rankingRecordManager.rankingRecords[i]['bestRecord'], - sessionStorageManager.getPlayingAppID() - ); - // console.log("$BestRecordRow : " + bestRecordRow[0] + ", " + bestRecordRow[1] + ", " + bestRecordRow[2]); + var record = []; + // record[0] = jsonRankingList[i]['UserID']; + record[0] = rankingRecordManager.getPlayerIDAt(i); // playerID + record[1] = i + 1; // ranking + record[2] = rankingRecordManager.getPlayerNameAt(i); + record[3] = rankingRecordManager.getBestRecordAt(i); + // console.log("record : " + record[0] + ", " + record[1] + ", " + record[2]); - this.recordArray.push(bestRecordRow); + this.recordArray.push(record); } this.printDateTime(this.dateTime); this.printRanking(); }, + emptyRanking: function() { + for(var i = 0; i < Ranking.RANK_COUNT; i++) { + this.rankingTexts[i].reset(); + } + }, printRanking: function() { - var recordTop10 = []; - var recordTop20 = []; + this.emptyRanking(); + this.updateRankingNavigationButtons(); + + if(this.recordArray.length == 0) + return; // timezone changed (ex: 2pm -> 3pm) if(this.showingPageIndex * 20 > this.recordArray.length) this.setFirstPageIndex(); - // prepare ranking list - top10 / top20 - for(var i = 0; i < 10; i++) { - var index = this.showingPageIndex * 20 + i; - if(index < this.recordArray.length) - recordTop10.push(this.recordArray[index]); - if(index + 10 < this.recordArray.length) - recordTop20.push(this.recordArray[index + 10]); - } - // print - this.textRanking1to10.parseList(recordTop10); - this.textRanking11to20.parseList(recordTop20); + for(var i = 0; i < Ranking.RANK_COUNT; i++) { + var index = this.showingPageIndex * 20 + i; + var record = this.recordArray[index]; + if(typeof record == "undefined") + break; + this.rankingTexts[i].setContents(record[0], record[1], record[2], record[3]); + } this.updateRankingNavigationButtons(); }, updateRankingNavigationButtons: function() { - // console.log(this.recordArray); - - if(this.recordArray == null) { + if(this.recordArray.length == 0) { this.buttonPrevRanking.text.text = "X"; this.buttonNextRanking.text.text = "X"; return; @@ -553,7 +555,7 @@ var Ranking = { }, onClickPrevRanking: function() { - if(this.recordArray == null) + if(this.recordArray.length == 0) return; this.showingPageIndex--; @@ -564,7 +566,7 @@ var Ranking = { }, onClickNextRanking: function() { - if(this.recordArray == null) + if(this.recordArray.length == 0) return; if((this.showingPageIndex + 1) * 20 < this.recordArray.length) @@ -597,4 +599,6 @@ Ranking.MODE_HOUR = "mode_hour"; Ranking.MODE_DAY = "mode_day"; Ranking.MODE_MONTH = "mode_month"; -Ranking.REFRESH_TIME_SEC = 5; \ No newline at end of file +Ranking.REFRESH_TIME_SEC = 5; + +Ranking.RANK_COUNT = 20; \ No newline at end of file diff --git a/src/web/client/ranking.html b/src/web/client/ranking.html index c05559f..4c7ec8c 100644 --- a/src/web/client/ranking.html +++ b/src/web/client/ranking.html @@ -47,6 +47,7 @@ +