From be02c06f3d7ec12a4cc06c8859b66ad39770597c 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: Thu, 9 Aug 2018 17:58:34 +0900 Subject: [PATCH] Add: Chart, HowToPlay UI class --- src/game/lib/chart.js | 68 ++++++++++++++++++++++ src/game/lib/how_to_play.js | 27 +++++++++ src/game/start/start.js | 112 +++++++++++++----------------------- src/web/client/start.html | 2 + 4 files changed, 138 insertions(+), 71 deletions(-) create mode 100644 src/game/lib/chart.js create mode 100644 src/game/lib/how_to_play.js diff --git a/src/game/lib/chart.js b/src/game/lib/chart.js new file mode 100644 index 0000000..55fcb8e --- /dev/null +++ b/src/game/lib/chart.js @@ -0,0 +1,68 @@ +///////////////////////////// +// Chart + +class Chart { + + constructor() { + this.chartGraphics = game.add.graphics(0, 0); + } + + printChartBaseLine() { + this.chartGraphics.lineStyle(3, 0xffd900, 1); + this.chartGraphics.moveTo(100, Chart.CHART_LINE_Y); + this.chartGraphics.lineTo(game.world.width - 100, Chart.CHART_LINE_Y); + } + + drawRecordGraph(index, date, bestRecord, min, max) { + let reverseIndex = (Chart.CHART_COUNT - 1) - index; + let posX = Chart.CHART_LINE_START_X + Chart.CHART_GRAPH_OFFSET_X + reverseIndex * Chart.CHART_GAP_PX; + let posY = Chart.CHART_LINE_Y; + + this.drawText( + posX, posY + Chart.CHART_DATE_OFFSET_Y, + date === "-" ? "-" : StringUtil.printMonthDay(date) + ); + + if(bestRecord === "") + return; + + this.drawText( + posX, posY - Chart.CHART_HEIGHT - Chart.CHART_RECORD_OFFSET_Y, + StringUtil.getRecordTextWithUnit(bestRecord) + ); + + // chart + this.chartGraphics.lineStyle(50, 0xdddddd, 1); + this.chartGraphics.moveTo(posX, posY); + this.chartGraphics.lineTo(posX, posY - Chart.CHART_HEIGHT * ( (bestRecord - min) / (max - min) )); + } + + drawText(posX, posY, text) { + const style = { font: "24px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" }; + + let textObject = game.add.text( + posX, posY, + text, style + ); + textObject.anchor.set(0.5); + textObject.stroke = "#333"; + textObject.strokeThickness = 3; + } + + getFontStyle() { + return { font: "32px Arial", fill: "#fff" }; + } + +} + +Chart.CHART_COUNT = 7; + +Chart.CHART_LINE_START_X = 100; +Chart.CHART_LINE_Y = 648; + +Chart.CHART_GAP_PX = 120; +Chart.CHART_HEIGHT = 120; + +Chart.CHART_GRAPH_OFFSET_X = 50; +Chart.CHART_DATE_OFFSET_Y = 20; +Chart.CHART_RECORD_OFFSET_Y = 30; \ No newline at end of file diff --git a/src/game/lib/how_to_play.js b/src/game/lib/how_to_play.js new file mode 100644 index 0000000..a58a981 --- /dev/null +++ b/src/game/lib/how_to_play.js @@ -0,0 +1,27 @@ +///////////////////////////// +// How to play text + +class HowToPlay { + + constructor() { + this.howToPlayText = game.add.text( + game.world.centerX, game.world.centerY - HowToPlay.TEXT_OFFSET_X, + "", this.getFontStyle() + ); + this.howToPlayText.anchor.set(0.5); + this.howToPlayText.stroke = "#333"; + this.howToPlayText.strokeThickness = 3; + this.howToPlayText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + } + + printHowToPlay(text) { + this.howToPlayText.text = text; + } + + getFontStyle() { + return { font: "32px Arial", fill: "#fff" }; + } + +} + +HowToPlay.TEXT_OFFSET_X = 200; \ No newline at end of file diff --git a/src/game/start/start.js b/src/game/start/start.js index 005b010..0063ca4 100644 --- a/src/game/start/start.js +++ b/src/game/start/start.js @@ -11,7 +11,8 @@ class Start { this.dbConnectManager = new DBConnectManager(); this.game.stage.backgroundColor = '#4d4d4d'; - this.chartGraphics = game.add.graphics(100, game.world.height - 120); + this.chart = new Chart(); + this.howToPlay = new HowToPlay(); // top @@ -30,37 +31,9 @@ class Start { // contents - // this.printHowToPlay(appInfoManager.getHowToPlayText(sessionStorageManager.playingAppName)); this.loadHowToPlay(sessionStorageManager.playingAppID); this.makeStartButton(); - - let today = new Date(); - let date = DateUtil.getYYYYMMDD(today); - this.dbConnectManager.requestPlayerHistory( - sessionStorageManager.maestroID, - date, - historyRecordManager => { - this.printChartBaseLine(); - - if(historyRecordManager.count == 0) { - console.log("start - history record : no data"); - return; - } - - let underValue = historyRecordManager.underValueForGraph(); - let upperValue = historyRecordManager.upperValueForGraph(); - - let minValue = underValue - (upperValue - underValue) / 10; - let maxValue = upperValue;// + (upperValue - underValue) / 10; - for(let i = 0; i < historyRecordManager.count; i++) { - if(i > 6) - break; - - let data = historyRecordManager.getAt(i); - this.drawRecordGraph(i, data.date, data.bestRecord, minValue, maxValue); - } - } - ); + this.loadChart(); // bottom @@ -89,23 +62,51 @@ class Start { this.dbConnectManager.requestHowToPlay( sessionStorageManager.playingAppID, // space_invaders app ID (jsonData) => { - let howToPlay = jsonData["HowToPlay"].replace(/\\n/g, "\n"); - this.printHowToPlay(howToPlay); + let howToPlayText = jsonData["HowToPlay"].replace(/\\n/g, "\n"); + this.howToPlay.printHowToPlay(howToPlayText); }, (jsonData) => { - this.printHowToPlay("No data"); + this.howToPlay.printHowToPlay("No data"); } ); } - printHowToPlay(text) { - const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" }; - let howToPlayText = game.add.text(0, 0, text, style); - howToPlayText.setTextBounds(100, 100, game.world.width - 200, 200); - // howToPlayText.stroke = "#333"; - // howToPlayText.strokeThickness = 5; - howToPlayText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + loadChart() { + let today = new Date(); + let date = DateUtil.getYYYYMMDD(today); + this.dbConnectManager.requestPlayerHistory( + sessionStorageManager.maestroID, + date, + historyRecordManager => { + this.chart.printChartBaseLine(); + + if(historyRecordManager.count == 0) { + console.log("start - history record : no data"); + return; + } + + let underValue = historyRecordManager.underValueForGraph(); + let upperValue = historyRecordManager.upperValueForGraph(); + + let minValue = underValue - (upperValue - underValue) / 10; + let maxValue = upperValue;// + (upperValue - underValue) / 10; + + let countRecord = historyRecordManager.count; + for(let i = 0; i < Chart.CHART_COUNT; i++) { + // if(i > 6) + // break; + + let historyRecord = historyRecordManager.getAt(i); + this.chart.drawRecordGraph( + i, + historyRecord === undefined ? "-" : historyRecord.date, + historyRecord === undefined ? "" : historyRecord.bestRecord, + minValue, maxValue + ); + } + } + ); } makeStartButton() { @@ -115,37 +116,6 @@ class Start { let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startStage); } - printChartBaseLine() { - this.chartGraphics.lineStyle(3, 0xffd900, 1); - this.chartGraphics.moveTo(0, 0); - this.chartGraphics.lineTo(game.world.width - 200, 0); - } - - drawRecordGraph(index, date, bestRecord, min, max) { - const CHART_GAP_PX = 120; - const CHART_HEIGHT = 120; - const style = { font: "24px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" }; - - let dateText = game.add.text( - 100 + index * CHART_GAP_PX, game.world.height - 140, - StringUtil.printMonthDay(date), style - ); - dateText.setTextBounds(0, 0, 100, 100); - dateText.stroke = "#333"; - dateText.strokeThickness = 1; - - let bestRecordText = game.add.text( - 100 + index * CHART_GAP_PX, game.world.height - 300, - StringUtil.getRecordTextWithUnit(bestRecord), style - ); - bestRecordText.setTextBounds(0, 0, 100, 100); - bestRecordText.stroke = "#333"; - bestRecordText.strokeThickness = 1; - - this.chartGraphics.lineStyle(50, 0xdddddd, 1); - this.chartGraphics.moveTo(50 + index * CHART_GAP_PX, 0); - this.chartGraphics.lineTo(50 + index * CHART_GAP_PX, -1 * CHART_HEIGHT * ( (bestRecord - min) / (max - min) )); - } startStage() { if(isTypingPracticeStage()) diff --git a/src/web/client/start.html b/src/web/client/start.html index 933d8bf..9ac8ddd 100644 --- a/src/web/client/start.html +++ b/src/web/client/start.html @@ -24,6 +24,8 @@ + +