Add: RankingText

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;

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
+		// ranking text
-		var rankAreaPositionX = 120;
+		var rankingTextOffsetY = 190;
-		var rankAreaPositionY = 150;
+		this.rankingTexts = new Array();
-		var style = { font: "32px Arial", fill: "#fff", tabs: [ 60, 200, 160 ] };
+		for(var i = 0; i < Ranking.RANK_COUNT; i++) {
-		this.textRanking1to10 = game.add.text(rankAreaPositionX, rankAreaPositionY , '', style)
+			var posX = ( (i < 10) ? 120 : 80 + (GAME_SCREEN_SIZE.x / 2) );
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+			var posY = rankingTextOffsetY + (i % 10) * 40;
-		this.textRanking11to20 = game.add.text(rankAreaPositionX + 460, rankAreaPositionY, '', style)
+			this.rankingTexts[i] = new RankingText(
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+				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.printRanking();
-			this.textRanking1to10.parseList(rankEmpty);
-			this.textRanking11to20.parseList(rankEmpty);
-
 			return;
 		}
 
-		var rankingListCount = rankingRecordManager.rankingRecords.length;
+		var rankingListCount = rankingRecordManager.getCount();
-		this.recordArray = [];
 		for(var i = 0; i < rankingListCount; i++) {
-			var bestRecordRow = [];
+			var record = [];
-			// bestRecordRow[0] = jsonRankingList[i]['UserID'];
+			// record[0] = jsonRankingList[i]['UserID'];
-			bestRecordRow[0] = i + 1;
+			record[0] = rankingRecordManager.getPlayerIDAt(i);	// playerID
-			bestRecordRow[1] = rankingRecordManager.rankingRecords[i]['playerName'];
+			record[1] = i + 1;	// ranking
-			bestRecordRow[2] = RecordUtil.getRecordValueWithUnit(
+			record[2] = rankingRecordManager.getPlayerNameAt(i);
-				rankingRecordManager.rankingRecords[i]['bestRecord'],
+			record[3] = rankingRecordManager.getBestRecordAt(i);
-				sessionStorageManager.getPlayingAppID()
+			// console.log("record : " + record[0] + ", "  + record[1] + ", "  + record[2]);
-			);
-			// console.log("$BestRecordRow : " + bestRecordRow[0] + ", "  + bestRecordRow[1] + ", "  + bestRecordRow[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 = [];
+		this.emptyRanking();
-		var recordTop20 = [];
+		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);
+		for(var i = 0; i < Ranking.RANK_COUNT; i++) {
-		this.textRanking11to20.parseList(recordTop20);
+			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.length == 0) {
-
-		if(this.recordArray == null) {
 			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;
+Ranking.REFRESH_TIME_SEC	= 5;
+
+Ranking.RANK_COUNT	= 20;

src/web/client/ranking.html

@@ -47,6 +47,7 @@
 
 		<script src="../../game/lib/text/input_type_text.js?update_date=191224"></script>
 		<script src="../../game/lib/text/game_over_text.js?update_date=191224"></script>
+		<script src="../../game/lib/text/ranking_text.js"></script>
 		<script src="../../game/lib/text/screen_top_ui.js?update_date=191224"></script>
 		<script src="../../game/lib/text/screen_bottom_ui.js?update_date=191224"></script>