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;