Add: ranking navigation buttons

src/game/ranking/ranking.js

@@ -11,8 +11,15 @@ var Ranking = {
 		this.mode = Ranking.MODE_HOUR;
 		this.refreshTimeSec = Ranking.REFRESH_TIME_SEC;
 
+		// bg
 		this.game.stage.backgroundColor = '#4d4d4d';
 
+		var posY = 100;
+		var bg = game.add.graphics();
+		bg.beginFill(0x545454, 1);
+		bg.drawRect(0, 60, GAME_SCREEN_SIZE.x, 80);
+
+
 		// keyboard shortcut
 		this.keyboardShortcut = new KeyboardShortcut();
 		this.keyboardShortcut.addCallback(
@@ -40,11 +47,25 @@ var Ranking = {
 		this.textTitle.addColor("#ff6666", 0);
 
 
-		// contents
+		// date time
+		this.textDateTime = game.add.text(
+			GAME_SCREEN_SIZE.x / 2, 104,
+			"2019년 06월 05일, 14시",
+			resultTextStyle
+		);
+		console.log(this.textDateTime);
+		this.textDateTime.fontSize = 34;
+		this.textDateTime.fontWeight = "normal";
+		this.textDateTime.stroke = "#333333";
+		this.textDateTime.strokeThickness = 3;
+		//.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+		this.textDateTime.anchor.set(0.5);
+		// this.textDateTime.addColor("#ff6666", 0);
+
 
 		// rank
 		var rankAreaPositionX = 100;
-		var rankAreaPositionY = 90;
+		var rankAreaPositionY = 160;
 		var style = { font: "34px 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);
@@ -52,7 +73,38 @@ var Ranking = {
 			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 
 
-		var buttonPositionY = 640;
+		var buttonPositionY = 100;
+		var buttonOffsetX = 30;
+		var buttonPrevRanking = this.makeArrowButton(
+			buttonOffsetX, buttonPositionY,
+			"<",
+			(function() { console.log("prev date time"); }).bind(this)
+		);
+		// buttonPrevRanking.inputEnabled = false;
+		var buttonNextRanking = this.makeArrowButton(
+			GAME_SCREEN_SIZE.x - buttonOffsetX, buttonPositionY,
+			">",
+			(function() { console.log("next date time"); }).bind(this)
+		);
+		// buttonNextRanking.inputEnabled = false;
+
+
+		buttonPositionY = 364;
+		var buttonPrevRanking = this.makeArrowButton(
+			buttonOffsetX, buttonPositionY,
+			"<",
+			(function() { console.log("prev ranking"); }).bind(this)
+		);
+		// buttonPrevRanking.inputEnabled = false;
+		var buttonNextRanking = this.makeArrowButton(
+			GAME_SCREEN_SIZE.x - buttonOffsetX, buttonPositionY,
+			">",
+			(function() { console.log("next ranking"); }).bind(this)
+		);
+		// buttonNextRanking.inputEnabled = false;
+
+
+		buttonPositionY = 640;
 		var buttonHour = this.makeTextButton(
 			game.world.centerX - 220, buttonPositionY,
 			"수업시간 순위",
@@ -90,6 +142,31 @@ var Ranking = {
 		location.href = '../../web/client/start.html';
 	},
 
+	makeArrowButton: function(x, y, buttonText, eventListener) {
+		var setting = new RoundRectButtonSetting(x, y, 50, 50);
+		setting.fontStyle.fontWeight = "bold";
+		setting.strokeColors = {
+			out: 0xdddddd,
+			over: 0xcccccc,
+			down: 0xbbbbbb,
+			disabled: 0x333333
+		};
+		setting.buttonColors = {
+			out: 0xffffff,
+			over: 0xdddddd,
+			down: 0xcccccc,
+			disabled: 0x333333
+		};
+		setting.textColors = {
+			out: "#000",
+			over: "#000",
+			down: "#000",
+			disabled: "#999"
+		};
+
+		return new RoundRectButton(setting, RoundRectButton.NONE_ICON, buttonText, eventListener);
+	},
+
 	makeTextButton: function(x, y, buttonText, eventListener) {
 		var setting = new RoundRectButtonSetting(x, y, 200, 100);
 		setting.fontStyle.fontWeight = "bold";