Add: How To Play text, graph for record/date

src/game/start/start.js

@@ -19,7 +19,9 @@ let Start = {
 
 
 		// contents
+		this.printHowToPlay(appInfoManager.getHowToPlayText(sessionStorageManager.playingAppName));
 		this.makeStartButton();
+		this.printRecordHistory();
 
 
 		// bottom
@@ -33,6 +35,14 @@ let Start = {
 		// this.loadTypingStageData();
 	},
 
+	printHowToPlay(text) {
+		const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
+		howToPlayText = game.add.text(0, 0, appInfoManager.getHowToPlayText(sessionStorageManager.playingAppName), style);
+		howToPlayText.setTextBounds(100, 100, game.world.width - 100, 200);
+		howToPlayText.stroke = "#333";
+		howToPlayText.strokeThickness = 5;
+	},
+
 	makeStartButton: function() {
 		let setting = new RoundRectButtonSetting(200, 100);
 		setting.fontStyle.fontWeight = "bold";
@@ -41,6 +51,32 @@ let Start = {
 		startButton.move(game.world.centerX, game.world.centerY);
 	},
 
+	printRecordHistory: function() {
+		let graphics = game.add.graphics(100, game.world.height - 120);
+
+		const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
+		date = game.add.text(100, game.world.height - 140, "05/10", style);
+		date.setTextBounds(0, 0, 100, 100);
+		date.stroke = "#333";
+		date.strokeThickness = 1;
+
+		record = game.add.text(100, game.world.height - 300, "15,460", style);
+		record.setTextBounds(0, 0, 100, 100);
+		record.stroke = "#333";
+		record.strokeThickness = 1;
+
+		let  = game.add.graphics(100, game.world.height - 120);
+		graphics.lineStyle(50, 0xffffff, 1);
+		graphics.beginFill(0xdddddd, 1);
+		// graphics.drawRect(50, 250, 100, 100);
+		graphics.moveTo(50, 0);
+		graphics.lineTo(50, -100);
+		graphics.endFill();
+
+		graphics.lineStyle(3, 0xffd900, 1);
+		graphics.moveTo(0, 0);
+		graphics.lineTo(game.world.width - 200, 0);
+	},
 
 
 	loadTypingStageData: function() {