Add: Chart, HowToPlay UI class
This commit is contained in:
+41
-71
@@ -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())
|
||||
|
||||
Reference in New Issue
Block a user