Add: HistoryText

Fix: ranking.js, result.js

src/game/lib/text/history_text.js

@@ -0,0 +1,53 @@
+function HistoryText(x, y) {
+
+	this.textDate = this.makeDateText(x, y);
+	this.textDate.anchor.x = 1;
+	this.textRecord = this.makeRecordText(x, y);
+	this.textRecord.anchor.x = 1;
+
+};
+
+HistoryText.prototype.makeText = function(x, y, fontStyle) {
+	var text = game.add.text(x, y, "", fontStyle);
+	text.anchor.y = 0.5;
+	text.inputEnabled = false;
+	text.setShadow(1, 1, 'rgba(32, 32, 32, 1)', 2);
+
+	return text;
+};
+
+HistoryText.prototype.makeDateText = function(x, y) {
+	var offsetX = 50;
+	return this.makeText(x + offsetX, y, HistoryText.FONT_STYLE);
+};
+
+HistoryText.prototype.makeRecordText = function(x, y) {
+	var offsetX = 150;
+	return this.makeText(x + offsetX, y, HistoryText.FONT_STYLE);
+};
+
+HistoryText.prototype.resetText = function(text) {
+	text.text = "";
+	text.fill = "#ffffcc";
+	text.stroke = "#888888";
+	text.strokeThickness = 2;
+};
+
+HistoryText.prototype.reset = function() {
+	this.resetText(this.textDate);
+	this.resetText(this.textRecord);
+};
+
+HistoryText.prototype.setContents = function(date, record) {
+	this.reset();
+
+	this.textDate.text = DateUtil.printMonthDay(date);
+	this.textRecord.text = RecordUtil.getRecordValueWithUnit(record, sessionStorageManager.getPlayingAppID());
+};
+
+
+
+HistoryText.FONT_STYLE = {
+	font: "19px Arial",
+	fill: "#ffc"
+};

src/game/lib/text/ranking_text.js

@@ -1,5 +1,4 @@
 function RankingText(type, x, y, appID) {
-
 	this.type = type;
 	this.appID = appID;
 	this.playerID = -1;
@@ -10,14 +9,16 @@ function RankingText(type, x, y, appID) {
 	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(32, 32, 32, 1)', 2);
+	if(this.type == RankingText.PLACE_FOR_RANKING)
+		text.setShadow(3, 3, 'rgba(32, 32, 32, 1)', 2);
+	else
+		text.setShadow(1, 1, 'rgba(32, 32, 32, 1)', 2);
 
 	return text;
 };
@@ -31,7 +32,7 @@ RankingText.prototype.makeRankingText = function(x, y) {
 	}
 	else {
 		fontStyle = RankingText.FONT_STYLE_FOR_RESULT;
-		offsetX = 10;
+		offsetX = 30;
 	}
 
 	return this.makeText(x + offsetX, y, fontStyle);
@@ -46,7 +47,7 @@ RankingText.prototype.makePlayerNameText = function(x, y) {
 	}
 	else {
 		fontStyle = RankingText.FONT_STYLE_FOR_RESULT;
-		offsetX = 20;
+		offsetX = 40;
 	}
 
 	return this.makeText(x + offsetX, y, fontStyle);
@@ -117,7 +118,6 @@ RankingText.prototype.setMyRankingTextColor = function() {
 	if(sessionStorageManager.getPlayerID() != this.playerID)
 		return;
 
-	console.log(this.playerID);
 	var fillColor = "#9acd32";	// yellowgreen
 	var strokeColor = "#2e8b57";	// seagreen
 	this.textRanking.fill = fillColor;
@@ -154,7 +154,7 @@ RankingText.FONT_STYLE_FOR_RANKING = {
 };
 
 RankingText.FONT_STYLE_FOR_RESULT = {
-	font: "30px Arial",
+	font: "19px Arial",
 	fill: "#fff"
 };
 

src/game/lib/util/date_util.js

@@ -39,3 +39,14 @@ DateUtil.getHHMMSS = function(date) {
 		+ DateUtil.getFullMinutes(date) + ":"
 		+ DateUtil.getFullSeconds(date);
 }
+
+DateUtil.printMonthDay = function(date) {
+	// var dateTime = new Date(date);
+	var a = date.split(" ");
+	var d = a[0].split("-");
+	var t = "0:0:0".split(":");
+	if(a.count > 0)
+		var t = a[1].split(":");
+	var dateTime = new Date(d[0],(d[1]-1),d[2],t[0],t[1],t[2]);
+	return DateUtil.getFullMonth(dateTime) + "월 " + DateUtil.getFullDate(dateTime) + "일";
+}

src/game/lib/util/string_util.js

@@ -1,17 +1,6 @@
 function StringUtil() {
 }
 
-StringUtil.printMonthDay = function(date) {
-	// var dateTime = new Date(date);
-	var a = date.split(" ");
-	var d = a[0].split("-");
-	var t = "0:0:0".split(":");
-	if(a.count > 0)
-		var t = a[1].split(":");
-	var dateTime = new Date(d[0],(d[1]-1),d[2],t[0],t[1],t[2]);
-	return (dateTime.getMonth() + 1) + "월 " + dateTime.getDate() + "일";
-}
-
 StringUtil.getRecordTextWithoutUnit = function(value) {
 	var number = Math.floor(value);
 	return NumberUtil.numberWithCommas(number);

src/game/result/history_board.js

@@ -4,17 +4,18 @@ function HistoryBoard(dataType) {
 		return;
 	}
 
+	var rankingTextOffsetY = game.world.height / 2 + 105;
+	this.historyTexts = new Array();
+	for(var i = 0; i < RankingBoard.RANK_COUNT; i++) {
+		var posY = rankingTextOffsetY + (i % 10) * 30;
+		this.historyTexts[i] = new HistoryText(80, posY);
+	}
+
+
 	this.todayBestRecord = 0;
 
 	this.dbConnectManager = new DBConnectManager();
 
-	var arrayTabStyle = { font: "20px Arial", fill: "#fff", align: "left", tabs: [ 40, 80, 120 ] };
-
-	var posX = 40;
-	var posY = game.world.height / 2 - 10;
-	this.textMyRanking = game.add.text(posX, posY + 100, '', arrayTabStyle)
-		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-
 	setTimeout(
 		(function() {
 			var today = new Date();
@@ -51,22 +52,7 @@ HistoryBoard.prototype.calcDate = function(daysBefore) {
 
 
 HistoryBoard.prototype.printRecord = function(index, date, bestRecord) {
-	var posX = 130;
+	this.historyTexts[index].setContents(date, bestRecord);
-	var posY = game.world.height / 2 + 90 + 30 * index;
-
-	var style = { font: "20px Arial", fill: "#ffc", align: "right", boundsAlignH: "right", boundsAlignV: "top" };
-
-	var dateText = game.add.text(posX, posY, StringUtil.printMonthDay(date), style);
-	dateText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
-	dateText.anchor.set(1, 0);
-
-	var recordText = game.add.text(
-		posX + 120, posY,
-		RecordUtil.getRecordValueWithUnit(bestRecord, sessionStorageManager.getPlayingAppID()),
-		style
-	);
-	recordText.anchor.set(1, 0);
-	recordText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 }
 
 HistoryBoard.prototype.printSample = function() {

src/game/result/ranking_board.js

@@ -1,4 +1,17 @@
 function RankingBoard(type) {
+	// ranking text
+	var playingAppID = sessionStorageManager.getPlayingAppID();
+	var rankingTextOffsetY = game.world.height / 2 + 105;
+	this.rankingHourTexts = new Array();
+	this.rankingDayTexts = new Array();
+	this.rankingMonthTexts = new Array();
+	for(var i = 0; i < RankingBoard.RANK_COUNT; i++) {
+		var posY = rankingTextOffsetY + (i % 10) * 30;
+		this.rankingHourTexts[i] = new RankingText(RankingText.PLACE_FOR_RESULT, 290, posY, playingAppID);
+		this.rankingDayTexts[i] = new RankingText(RankingText.PLACE_FOR_RESULT, 530, posY, playingAppID);
+		this.rankingMonthTexts[i] = new RankingText(RankingText.PLACE_FOR_RESULT, 770, posY, playingAppID);
+	}
+
 	if(type === RecordBoard.TYPE_SAMPLE) {
 		this.printSample();
 		return;
@@ -23,8 +36,12 @@ RankingBoard.prototype.requestRanking = function(type) {
 	var today = new Date();
 	var date = DateUtil.getYYYYMMDD(today);
 	var time = DateUtil.getHHMMSS(today);
+
 	this.dbConnectManager.requestRanking(
-		type, sessionStorageManager.getMaestroID(), date, time,
+		type,
+		sessionStorageManager.getMaestroID(),
+		date,
+		time,
 		(function(type, rankingRecordManager) {
 			if(rankingRecordManager.getCount() == 0) {
 				console.log("ranking board - no data");
@@ -123,27 +140,22 @@ RankingBoard.prototype.getEndIndex = function(rankingRecordManager) {
 
 
 RankingBoard.prototype.printRecord = function(type, index, data) {
-	var style = { font: "20px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "top" };
+	var targetText = null;
+	switch(type) {
+		case DBConnectManager.TYPE_MY_RANKING_HOUR:
+		targetText = this.rankingHourTexts;
+		break;
 
-	// rank
+		case DBConnectManager.TYPE_MY_RANKING_DAY:
-	// style.boundsAlignH = "right";
+		targetText = this.rankingDayTexts;
-	var rankText = game.add.text(this.getPosX(type), this.getPosY(index), data.rank, style);
+		break;
-	rankText.anchor.set(1, 0);
-	rankText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 
-	// player name
+		case DBConnectManager.TYPE_MY_RANKING_MONTH:
-	var playerNameText = game.add.text(this.getPosX(type) + 20, this.getPosY(index), data.playerName, style);
+		targetText = this.rankingMonthTexts;
-	playerNameText.anchor.set(0, 0);
+		break;
-	playerNameText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	}
 
-	// bestRecord
+	targetText[index].setContents(data.playerID, data.rank, data.playerName, data.bestRecord);
-	var recordText = game.add.text(
-		this.getPosX(type) + 180, this.getPosY(index),
-		RecordUtil.getRecordValueWithUnit(data.bestRecord, sessionStorageManager.getPlayingAppID()),
-		style
-	);
-	recordText.anchor.set(1, 0);
-	recordText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 }
 
 RankingBoard.prototype.getPosX = function(type) {
@@ -264,3 +276,5 @@ RankingBoard.prototype.showMedal = function(medal, myRank) {
 	medal.scale.setTo(0.5);
 	game.add.tween(medal.scale).to( {x: 0.7, y: 0.7}, 1000, Phaser.Easing.Bounce.Out, true);
 }
+
+RankingBoard.RANK_COUNT	= 7;

src/game/result/record_board.js

@@ -2,7 +2,10 @@ function RecordBoard(dataType) {
 	this.chartGraphics = game.add.graphics(0, 0);
 
 	this.printRecordBoardHeader();
-	this.printSeperator();
+
+	this.printSeperator(265, 480);
+	this.printSeperator(505, 480);
+	this.printSeperator(745, 480);
 
 	var historyBoard = new HistoryBoard(dataType);
 	var rankingBoard = new RankingBoard(dataType);
@@ -10,7 +13,7 @@ function RecordBoard(dataType) {
 
 
 RecordBoard.prototype.printRecordBoardHeader = function() {
-	var posX = 60;
+	var posX = 40;
 	var posY = game.world.height / 2 + 20;
 
 	var bar = game.add.graphics();
@@ -20,14 +23,14 @@ RecordBoard.prototype.printRecordBoardHeader = function() {
 	var style = { font: "32px Arial", fill: "#ffc", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
 	this.printHeader(posX, posY, "최근의 내 기록", style);
 
-	posX = 320;
+	posX = 285;
 	style.fill = "#fff";
 	this.printHeader(posX, posY, "수업시간 순위", style);
 
-	posX = 550;
+	posX = 520;
 	this.printHeader(posX, posY, "오늘의 순위", style);
 
-	posX = 770;
+	posX = 765;
 	this.printHeader(posX, posY, "이달의 순위", style);
 }
 
@@ -37,13 +40,10 @@ RecordBoard.prototype.printHeader = function(x, y, title, style) {
 		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 }
 
-RecordBoard.prototype.printSeperator = function() {
+RecordBoard.prototype.printSeperator = function(x, y) {
-	var posX = 290;
-	var posY = 480;
-
 	this.chartGraphics.lineStyle(3, 0x444444, 1);
-	this.chartGraphics.moveTo(posX, posY);
+	this.chartGraphics.moveTo(x, y);
-	this.chartGraphics.lineTo(posX, posY + 200);
+	this.chartGraphics.lineTo(x, y + 200);
 }
 
 

src/web/client/result.html

@@ -26,6 +26,8 @@
 
 		<script src="../../game/lib/text/input_type_text.js?update_date=191224"></script>
 		<script src="../../game/lib/text/announce_box.js?update_date=191224"></script>
+		<script src="../../game/lib/text/history_text.js"></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>