From 1f5f87c3612e9489ad3403cac2d76960a9c7c934 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Sun, 9 Jun 2019 00:21:03 +0900 Subject: [PATCH] Add: HistoryText Fix: ranking.js, result.js --- src/game/lib/text/history_text.js | 53 ++++++++++++++++++++++++++++++ src/game/lib/text/ranking_text.js | 14 ++++---- src/game/lib/util/date_util.js | 11 +++++++ src/game/lib/util/string_util.js | 11 ------- src/game/result/history_board.js | 32 ++++++------------ src/game/result/ranking_board.js | 54 +++++++++++++++++++------------ src/game/result/record_board.js | 22 ++++++------- src/web/client/result.html | 2 ++ 8 files changed, 127 insertions(+), 72 deletions(-) create mode 100644 src/game/lib/text/history_text.js diff --git a/src/game/lib/text/history_text.js b/src/game/lib/text/history_text.js new file mode 100644 index 0000000..c72f3f9 --- /dev/null +++ b/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" +}; \ No newline at end of file diff --git a/src/game/lib/text/ranking_text.js b/src/game/lib/text/ranking_text.js index 1666452..d79f6e7 100644 --- a/src/game/lib/text/ranking_text.js +++ b/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" }; diff --git a/src/game/lib/util/date_util.js b/src/game/lib/util/date_util.js index 8f99c9e..e99c983 100644 --- a/src/game/lib/util/date_util.js +++ b/src/game/lib/util/date_util.js @@ -38,4 +38,15 @@ DateUtil.getHHMMSS = function(date) { return DateUtil.getFullHours(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) + "일"; } \ No newline at end of file diff --git a/src/game/lib/util/string_util.js b/src/game/lib/util/string_util.js index b61730d..6816f7a 100644 --- a/src/game/lib/util/string_util.js +++ b/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); diff --git a/src/game/result/history_board.js b/src/game/result/history_board.js index 0fb4953..0cd3f46 100644 --- a/src/game/result/history_board.js +++ b/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; - 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); + this.historyTexts[index].setContents(date, bestRecord); } HistoryBoard.prototype.printSample = function() { diff --git a/src/game/result/ranking_board.js b/src/game/result/ranking_board.js index c91dc1a..c6c2db4 100644 --- a/src/game/result/ranking_board.js +++ b/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 - // style.boundsAlignH = "right"; - var rankText = game.add.text(this.getPosX(type), this.getPosY(index), data.rank, style); - rankText.anchor.set(1, 0); - rankText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + case DBConnectManager.TYPE_MY_RANKING_DAY: + targetText = this.rankingDayTexts; + break; - // player name - var playerNameText = game.add.text(this.getPosX(type) + 20, this.getPosY(index), data.playerName, style); - playerNameText.anchor.set(0, 0); - playerNameText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + case DBConnectManager.TYPE_MY_RANKING_MONTH: + targetText = this.rankingMonthTexts; + break; + } - // 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); + targetText[index].setContents(data.playerID, data.rank, data.playerName, data.bestRecord); } RankingBoard.prototype.getPosX = function(type) { @@ -263,4 +275,6 @@ RankingBoard.prototype.showMedal = function(medal, myRank) { 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); -} \ No newline at end of file +} + +RankingBoard.RANK_COUNT = 7; \ No newline at end of file diff --git a/src/game/result/record_board.js b/src/game/result/record_board.js index 567aec2..e4f59d6 100644 --- a/src/game/result/record_board.js +++ b/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() { - var posX = 290; - var posY = 480; - +RecordBoard.prototype.printSeperator = function(x, y) { this.chartGraphics.lineStyle(3, 0x444444, 1); - this.chartGraphics.moveTo(posX, posY); - this.chartGraphics.lineTo(posX, posY + 200); + this.chartGraphics.moveTo(x, y); + this.chartGraphics.lineTo(x, y + 200); } diff --git a/src/web/client/result.html b/src/web/client/result.html index 6ca6b7d..fe1f87d 100644 --- a/src/web/client/result.html +++ b/src/web/client/result.html @@ -26,6 +26,8 @@ + +