jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add: Chart, HowToPlay UI class

Browse Source
This commit is contained in:
Jisang Park
2018-08-09 17:58:34 +09:00
parent 9e0dcb6860
commit be02c06f3d
4 changed files with 138 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/chart.js
+68
View File
@@ -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;
src/game/lib/how_to_play.js
+27
View File
@@ -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;
src/game/start/start.js
+41 -71
View File
@@ -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())