Fix: prev / next ranking list button function

src/game/ranking/ranking.js

@@ -11,6 +11,9 @@ var Ranking = {
 		this.mode = Ranking.MODE_HOUR;
 		this.refreshTimeSec = Ranking.REFRESH_TIME_SEC;
 
+		this.showingPageIndex = 0;
+		this.recordArray = null;
+
 		// bg
 		this.game.stage.backgroundColor = '#4d4d4d';
 
@@ -53,7 +56,6 @@ var Ranking = {
 			"2019년 06월 05일, 14시",
 			resultTextStyle
 		);
-		console.log(this.textDateTime);
 		this.textDateTime.fontSize = 34;
 		this.textDateTime.fontWeight = "normal";
 		this.textDateTime.stroke = "#333333";
@@ -64,65 +66,69 @@ var Ranking = {
 
 
 		// rank
-		var rankAreaPositionX = 100;
+		var rankAreaPositionX = 120;
-		var rankAreaPositionY = 160;
+		var rankAreaPositionY = 150;
-		var style = { font: "34px Arial", fill: "#fff", tabs: [ 60, 200, 160 ] };
+		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 + 500, rankAreaPositionY, '', style)
+		this.textRanking11to20 = game.add.text(rankAreaPositionX + 460, rankAreaPositionY, '', style)
 			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 
 
 		var buttonPositionY = 100;
 		var buttonOffsetX = 30;
-		var buttonPrevRanking = this.makeArrowButton(
+		this.buttonPrevDate = this.makeArrowButton(
 			buttonOffsetX, buttonPositionY,
+			50, 50,
 			"<",
 			(function() { console.log("prev date time"); }).bind(this)
 		);
-		// buttonPrevRanking.inputEnabled = false;
+		// this.buttonPrevDate.inputEnabled = false;
-		var buttonNextRanking = this.makeArrowButton(
+		this.buttonNextDate = this.makeArrowButton(
 			GAME_SCREEN_SIZE.x - buttonOffsetX, buttonPositionY,
+			50, 50,
 			">",
 			(function() { console.log("next date time"); }).bind(this)
 		);
-		// buttonNextRanking.inputEnabled = false;
+		// this.buttonNextDate.inputEnabled = false;
 
 
-		buttonPositionY = 364;
+		buttonPositionY = 370;
-		var buttonPrevRanking = this.makeArrowButton(
+		this.buttonPrevRanking = this.makeArrowButton(
 			buttonOffsetX, buttonPositionY,
+			50, 400,
 			"<",
-			(function() { console.log("prev ranking"); }).bind(this)
+			(function() { this.onClickPrevRanking(); }).bind(this)
 		);
-		// buttonPrevRanking.inputEnabled = false;
+		// this.buttonPrevRanking.setInputEnabled(false);
-		var buttonNextRanking = this.makeArrowButton(
+		this.buttonNextRanking = this.makeArrowButton(
 			GAME_SCREEN_SIZE.x - buttonOffsetX, buttonPositionY,
+			50, 400,
 			">",
-			(function() { console.log("next ranking"); }).bind(this)
+			(function() { this.onClickNextRanking() }).bind(this)
 		);
-		// buttonNextRanking.inputEnabled = false;
+		// this.buttonNextRanking.setInputEnabled(false);
 
 
-		buttonPositionY = 640;
+		buttonPositionY = 650;
 		var buttonHour = this.makeTextButton(
 			game.world.centerX - 220, buttonPositionY,
 			"수업시간 순위",
 			(function() { this.showRankingHour(); }).bind(this)
 		);
-		// buttonHour.inputEnabled = false;
+		// buttonHour.setInputEnabled(false);
 		var buttonDay = this.makeTextButton(
 			game.world.centerX, buttonPositionY,
 			"오늘의 순위",
 			(function() { this.showRankingDay(); }).bind(this)
 		);
-		// buttonDay.inputEnabled = false;
+		// buttonDay.setInputEnabled(false);
 		var buttonMonth = this.makeTextButton(
 			game.world.centerX + 220, buttonPositionY,
 			"이달의 순위",
 			(function() { this.showRankingMonth(); }).bind(this)
 		);
-		// buttonMonth.inputEnabled = false;
+		// buttonMonth.setInputEnabled(false);
 
 
 		// bottom ui
@@ -142,23 +148,23 @@ var Ranking = {
 		location.href = '../../web/client/start.html';
 	},
 
-	makeArrowButton: function(x, y, buttonText, eventListener) {
+	makeArrowButton: function(x, y, width, height, buttonText, eventListener) {
-		var setting = new RoundRectButtonSetting(x, y, 50, 50);
+		var setting = new RoundRectButtonSetting(x, y, width, height);
 		setting.fontStyle.fontWeight = "bold";
 		setting.strokeColors = {
-			out: 0xdddddd,
+			out: 0x444444,	// 0xdddddd,
-			over: 0xcccccc,
+			over: 0x333333,	// 0xcccccc,
-			down: 0xbbbbbb,
+			down: 0x222222,	// 0xbbbbbb,
 			disabled: 0x333333
 		};
 		setting.buttonColors = {
-			out: 0xffffff,
+			out: 0x666666,	// 0xffffff,
-			over: 0xdddddd,
+			over: 0x444444,	// 0xdddddd,
-			down: 0xcccccc,
+			down: 0x333333,	// 0xcccccc,
 			disabled: 0x333333
 		};
 		setting.textColors = {
-			out: "#000",
+			out: "#fff",	// "#000",
 			over: "#000",
 			down: "#000",
 			disabled: "#999"
@@ -274,8 +280,8 @@ var Ranking = {
 		// console.log(jsonRankingData);
 
 		if(sessionStorageManager.getMaestroAccountType() == 101) {
-			var recordArray = this.getDummyRankList();
+			this.recordArray = this.getDummyRankList();
-			this.printRanking(recordArray);
+			this.printRanking();
 
 			return;
 		}
@@ -304,27 +310,39 @@ var Ranking = {
 			return;
 		}
 
-		var recordArray = this.getRankingArrayFromJSON(jsonRankingList);
+		this.recordArray = this.getRankingArrayFromJSON(jsonRankingList);
-		this.printRanking(recordArray);
+		this.printRanking();
 	},
 
 
-	printRanking: function(recordArray) {
+	printRanking: function() {
 		var recordTop10 = [];
 		var recordTop20 = [];
+
 		for(var i = 0; i < 10; i++) {
-			if(i < recordArray.length)
+			var index = this.showingPageIndex * 20 + i;
-				recordTop10.push(recordArray[i]);
+			if(index < this.recordArray.length)
-			if(i + 10 < recordArray.length)
+				recordTop10.push(this.recordArray[index]);
-				recordTop20.push(recordArray[i + 10]);
+			if(index + 10 < this.recordArray.length)
+				recordTop20.push(this.recordArray[index + 10]);
 		}
 		this.textRanking1to10.parseList(recordTop10);
 		this.textRanking11to20.parseList(recordTop20);
+
+		if(this.showingPageIndex > 0)
+			this.buttonPrevRanking.text.text = "<";
+		else
+			this.buttonPrevRanking.text.text = "X";
+
+		if((this.showingPageIndex + 1) * 20 < this.recordArray.length)
+			this.buttonNextRanking.text.text = ">";
+		else
+			this.buttonNextRanking.text.text = "X";
 	},
 
 	getRankingArrayFromJSON: function(jsonRankingList) {
-		// if(isDebugMode())
+		if(isDebugMode())
-		//	return this.getDummyRankList();
+			return this.getDummyRankList();
 
 		var rankingListCount = jsonRankingList.length;
 
@@ -370,10 +388,33 @@ var Ranking = {
 			[ '20', 'test20', '3' ],
 			[ '21', 'test21', '2' ],
 			[ '22', 'test22', '1' ],
+			[ '23', 'test23', '1' ],
+			[ '24', 'test24', '1' ],
+			[ '25', 'test25', '1' ],
+			[ '26', 'test26', '1' ],
+			[ '27', 'test27', '1' ],
+			[ '28', 'test28', '1' ],
+			[ '29', 'test29', '1' ],
+			[ '30', 'test30', '1' ],
+			[ '31', 'test31', '1' ],
+			[ '32', 'test32', '1' ],
 		];
 		return dummyRankList;
-	}
+	},
 
+	onClickPrevRanking: function() {
+		this.showingPageIndex--;
+		if(this.showingPageIndex < 0)
+			this.showingPageIndex = 0;
+
+		this.printRanking();
+	},
+
+	onClickNextRanking: function() {
+		if((this.showingPageIndex + 1) * 20 < this.recordArray.length)
+			this.showingPageIndex++;
+		this.printRanking();
+	},
 }
 
 Ranking.MODE_HOUR	= "mode_hour";