Add: Chart, HowToPlay UI class

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;

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;

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();
-
+		this.loadChart();
-		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);
-				}
-			}
-		);
 
 
 		// 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");
+				let howToPlayText = jsonData["HowToPlay"].replace(/\\n/g, "\n");
-				this.printHowToPlay(howToPlay);
+				this.howToPlay.printHowToPlay(howToPlayText);
 			},
 			(jsonData) => {
-				this.printHowToPlay("No data");
+				this.howToPlay.printHowToPlay("No data");
 			}
 		);
 
 	}
 
-	printHowToPlay(text) {
+	loadChart() {
-		const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
+		let today = new Date();
-		let howToPlayText = game.add.text(0, 0, text, style);
+		let date = DateUtil.getYYYYMMDD(today);
-		howToPlayText.setTextBounds(100, 100, game.world.width - 200, 200);
+		this.dbConnectManager.requestPlayerHistory(
-		// howToPlayText.stroke = "#333";
+			sessionStorageManager.maestroID,
-		// howToPlayText.strokeThickness = 5;
+			date,
-		howToPlayText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+			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())

src/web/client/start.html

@@ -24,6 +24,8 @@
 		<script src="../../game/lib/back_button.js"></script>
 		<script src="../../game/lib/fullscreen_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
+		<script src="../../game/lib/chart.js"></script>
+		<script src="../../game/lib/how_to_play.js"></script>
 
 		<!-- source files -->
 		<script src="../../game/start/start.js"></script>