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 @@
+
+