Add: result ranking

src/game/result/result.js

@@ -62,9 +62,12 @@ class Result {
 		let highscore = NumberUtil.numberWithCommas(sessionStorageManager.highscore);
 		console.log(highscore);
 		style.font = "32px Arial";
-		game.add.text(0, 0, "오늘 최고 기록 : " + highscore, style)
+		let highscoreText = game.add.text(0, 0, "오늘 최고 기록 : " + highscore, style)
 			.setTextBounds(0, posY + 80, game.world.width, 40);
 			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+		highscoreText.stroke = "#333";
+		highscoreText.strokeThickness = 5;
+
 	}
 
 	printHowToPlay(text) {
@@ -80,7 +83,7 @@ class Result {
 		setting.fontStyle.fontWeight = "bold";
 
 		let startButton = new RoundRectButton(setting, "다시 시작", this.startStage);
-		startButton.move(game.world.centerX, game.world.height / 2 - 100);
+		startButton.move(game.world.centerX, game.world.height / 2 - 60);
 	}
 
 	loadHistoryRecords() {
@@ -130,8 +133,9 @@ class Result {
 	loadRanking() {
 
 	}
+
 	printRanking() {
-		let posY = game.world.height / 2 - 20;
+		let posY = game.world.height / 2 + 20;
 		var bar = game.add.graphics();
 		bar.beginFill(0x000000, 0.1);
 		bar.drawRect(0, posY, 1000, 60);
@@ -145,38 +149,224 @@ class Result {
 			.setTextBounds(0, posY, 200, 120)
 			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 
-		var arrayTabStyle = { font: "20px Arial", fill: "#ffc", tabs: [ 80, 60, 60 ] };
+		var arrayTabStyle = { font: "20px Arial", fill: "#ffc", align: "left", tabs: [ 80, 60, 60 ] };
 		this.textMyRanking = game.add.text(posX, posY + 100, '', arrayTabStyle)
 			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 
 		posX = 340;
 		style.fill = "#fff";
-		game.add.text(posX, 4, "수업시간 순위", style)
+		arrayTabStyle.tabs = [ 40, 80, 120 ];
-			.setTextBounds(0, posY, 200, 120)
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		arrayTabStyle.tabs = [ 40, 100, 100 ];
 		arrayTabStyle.fill = "#fff";
-		this.textHourRanking = game.add.text(posX, posY + 100, '', arrayTabStyle)
+
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+		this.printRankingHeader(posX, posY, "수업시간 순위", style);
+		this.textHourRanking = this.printRankingContent(posX, posY + 100, arrayTabStyle);
 
 		posX = 560;
-		game.add.text(posX - 10, 4, "오늘의 순위", style)
+		this.printRankingHeader(posX, posY, "오늘의 순위", style);
-			.setTextBounds(0, posY, 200, 120)
+		this.textDayRanking = this.printRankingContent(posX, posY + 100, arrayTabStyle);
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
-		this.textDayRanking = game.add.text(posX, posY + 100, '', arrayTabStyle)
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 
 		posX = 780;
-		game.add.text(posX - 10, 4, "이달의 순위", style)
+		this.printRankingHeader(posX, posY, "이달의 순위", style);
-			.setTextBounds(0, posY, 200, 120)
+		this.textMonthRanking = this.printRankingContent(posX, posY + 100, arrayTabStyle);
-			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 
-		this.textMonthRanking = game.add.text(posX, posY + 100, '', arrayTabStyle)
+		// this.showMyRanking(this.makeTemporaryJsonRankingList());
+		this.showRankingHour(this.makeTemporaryJsonRankingList());
+		this.showRankingDay(this.makeTemporaryJsonRankingList());
+		this.showRankingMonth(this.makeTemporaryJsonRankingList());
+	}
+
+	printRankingHeader(x, y, title, style) {
+		game.add.text(x, 4, title, style)
+			.setTextBounds(0, y, 200, 120)
 			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 	}
 
+	printRankingContent(x, y, style) {
+		return game.add.text(x, y, '', style)
+			.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	}
+
+	showMyRanking(jsonRankingList) {
+		if(jsonRankingList == null) {
+			var rankEmpty = [ ];
+			this.textMyRanking.parseList(rankEmpty);
+
+			return;
+		}
+
+		var recordArray = this.getMyRankingArrayFromJSON(jsonRankingList);
+
+		var recordCnt = recordArray.length;
+		var startIndex = 0;
+		if(recordCnt > 7)
+			startIndex = recordCnt - 7;
+
+		recordArray = recordArray.slice(startIndex);
+
+		// console.log("Ranking Hour : " + recordArray);
+		this.textMyRanking.parseList(recordArray);
+	}
+
+	makeTemporaryJsonRankingList() {
+		let jsonRankingList = [
+			{ "UserID":"17", "Name":"강경모", "BestRecord":"4400" },
+			{ "UserID":"2", "Name":"강성태", "BestRecord":"3400" },
+			{ "UserID":"3", "Name":"김기덕", "BestRecord":"2400" },
+			{ "UserID":"4", "Name":"김남희", "BestRecord":"1400" },
+			{ "UserID":"5", "Name":"고봉순", "BestRecord":"900" },
+			{ "UserID":"6", "Name":"파르마", "BestRecord":"800" },
+			{ "UserID":"1", "Name":"박지상", "BestRecord":"700" },
+			{ "UserID":"8", "Name":"신현주", "BestRecord":"600" },
+			{ "UserID":"9", "Name":"꼬봉이", "BestRecord":"500" },
+			{ "UserID":"10", "Name":"거북이", "BestRecord":"400" },
+			{ "UserID":"11", "Name":"다람쥐", "BestRecord":"300" },
+			{ "UserID":"12", "Name":"사시미", "BestRecord":"200" },
+			{ "UserID":"13", "Name":"태권도", "BestRecord":"100" },
+			{ "UserID":"14", "Name":"합기도", "BestRecord":"40" },
+			{ "UserID":"15", "Name":"우습지", "BestRecord":"10" },
+			{ "UserID":"16", "Name":"하하하", "BestRecord":"4" },
+		];
+
+		return jsonRankingList;
+	}
+
+	showRankingHour(jsonRankingList) {
+		if(jsonRankingList == null) {
+			var rankEmpty = [ ];
+			this.textHourRanking.parseList(rankEmpty);
+
+			return;
+		}
+
+		/*
+		var recordArray = this.getRankingArrayFromJSON(jsonRankingList2);
+		*/
+		var recordArray = this.getRankingArrayFromJSON(jsonRankingList);
+		// console.log("Ranking Hour : " + recordArray);
+		this.textHourRanking.parseList(recordArray);
+		this.showMedal(this.medalHour, this.getMyRankFromJSON(jsonRankingList));
+	}
+
+	showRankingDay(jsonRankingList) {
+		// console.log("Ranking Day : " + jsonRankingList);
+		if(jsonRankingList == null) {
+			var rankEmpty = [ ];
+			this.textDayRanking.parseList(rankEmpty);
+
+			return;
+		}
+
+		var recordArray = this.getRankingArrayFromJSON(jsonRankingList);
+		// console.log("Ranking Day : " + recordArray);
+		this.textDayRanking.parseList(recordArray);
+		this.showMedal(this.medalDay, this.getMyRankFromJSON(jsonRankingList));
+	}
+
+	showRankingMonth(jsonRankingList) {
+		if(jsonRankingList == null) {
+			var rankEmpty = [ ];
+			this.textMonthRanking.parseList(rankEmpty);
+
+			return;
+		}
+
+		var recordArray = this.getRankingArrayFromJSON(jsonRankingList);
+		// console.log("Ranking Month : " + recordArray);
+		this.textMonthRanking.parseList(recordArray);
+		this.showMedal(this.medalMonth, this.getMyRankFromJSON(jsonRankingList));
+	}
+
+	getMyRankingArrayFromJSON(jsonRankingList) {
+		var startIndex = 0;
+		var endIndex = jsonRankingList.length;
+
+		var recordArray = [];
+		for(var i = startIndex; i < endIndex; i++) {
+			var bestRecordRow = [];
+			var strDate = jsonRankingList[i]['Date'];
+			var dateArray = strDate.split("-");
+			var recordDate = new Date(dateArray[0], dateArray[1], dateArray[2]);
+			bestRecordRow[0] = recordDate.getMonth() + "월 " + recordDate.getDate() + "일";
+			bestRecordRow[1] = Math.floor(jsonRankingList[i]['BestRecord']);
+			bestRecordRow[2] = getStageNameForKorean(jsonRankingList[i]['StageName']);
+			// console.log("$BestRecordRow : " + bestRecordRow[0] + ", "  + bestRecordRow[1] + ", "  + bestRecordRow[2]);
+
+			recordArray.push(bestRecordRow);
+		}
+
+		return recordArray;
+	}
+
+	getRankingArrayFromJSON(jsonRankingList) {
+		var rankingListCount = jsonRankingList.length;
+		var myRank = this.getMyRankFromJSON(jsonRankingList);
+		var myRankIndex = myRank - 1;
+		// console.log("myRankIndex : " + myRankIndex);
+
+		var startIndex = 0;
+		var endIndex = rankingListCount;
+
+		if(rankingListCount > 7) {
+			if(myRank < rankingListCount - 3) {		// my rank is better than the worst 3
+				if(myRank < 5) {
+					startIndex = 0;
+					endIndex = rankingListCount > 7 ? 7 : rankingListCount;
+				} else {
+					startIndex = myRankIndex - 3;
+					endIndex = myRankIndex + 4;
+				}
+			} else {		// my rank is in the worst 3
+				startIndex = rankingListCount > 7 ? rankingListCount - 7 : 0;
+				endIndex = rankingListCount;
+			}
+		}
+
+		var recordArray = [];
+		for(var i = startIndex; i < endIndex; i++) {
+			var bestRecordRow = [];
+			// bestRecordRow[0] = jsonRankingList[i]['UserID'];
+			bestRecordRow[0] = i + 1;
+			bestRecordRow[1] = jsonRankingList[i]['Name'];
+			bestRecordRow[2] = NumberUtil.numberWithCommas(Math.floor(jsonRankingList[i]['BestRecord']));
+			// console.log("$BestRecordRow : " + bestRecordRow[0] + ", "  + bestRecordRow[1] + ", "  + bestRecordRow[2]);
+
+			recordArray.push(bestRecordRow);
+		}
+
+		return recordArray;
+	}
+
+	getMyRankFromJSON(jsonRankingList) {
+		var myRank = -1;
+		for(var i = 0; i < jsonRankingList.length; i++) {
+			if(jsonRankingList[i]['UserID'] == sessionStorageManager.playerUserID) {
+				myRank = i + 1;
+			}
+		}
+
+		return myRank;
+	}
+
+	showMedal(medal, myRank) {
+		/*
+		if(myRank > 3) {
+			medal.alpha = 0;
+			return;
+		}
+
+		if(myRank == 1)
+			medal.loadTexture("medal_gold");
+		else if(myRank == 2)
+			medal.loadTexture("medal_silver");
+		else if(myRank == 3)
+			medal.loadTexture("medal_bronze");
+
+		medal.alpha = 1;
+		medal.scale.setTo(0.5);
+		game.add.tween(medal.scale).to( {x: 0.7, y: 0.7}, 1000, Phaser.Easing.Bounce.Out, true);
+		*/
+	}
+
 
 	loadTypingStageData() {
 		var self = this;

src/web/client/result.html

@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<meta charset="UTF-8">
-		<title>준비</title>
+		<title>결과</title>
 
 
 		<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> -->