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

src/game/lib/app_info_manager.js

@@ -1,10 +1,11 @@
 class AppInfo {
 
-	constructor(name, nameKorean) {
+	constructor(name, nameKorean, howToPlay) {
 		this.name = name;
 
 		this.nameKorean = nameKorean;
 		this.isActivated = false;
+		this.howToPlay = howToPlay;
 	}
 
 }
@@ -19,19 +20,31 @@ class AppInfoManager {
 	}
 
 	registerAppInfoList() {
-		this.registerAppInfo(new AppInfo("login", "로그인"));
-		this.registerAppInfo(new AppInfo("menu", "메뉴"));
-		this.registerAppInfo(new AppInfo("test", "테스트"));
-		this.registerAppInfo(new AppInfo("space_invaders", "외계인 침공"));
-		this.registerAppInfo(new AppInfo("card_matching", "카드 짝 맞추기"));
+		this.registerAppInfo(new AppInfo("test", "테스트", ""));
+		this.registerAppInfo(new AppInfo("login", "로그인", ""));
+		this.registerAppInfo(new AppInfo("menu", "메뉴", ""));
+		this.registerAppInfo(new AppInfo("space_invaders", "외계인 침공",
+			"외계인이 나타났다 사라집니다.\n마우스 왼쪽 버튼으로 외계인을 클릭해서\n물리쳐 주세요."
+		));
+		this.registerAppInfo(new AppInfo("card_matching", "카드 짝 맞추기",
+			"외계인이 나타났다 사라집니다.\n\n마우스 왼쪽 버튼으로 외계인을 클릭해서\n\n물리쳐 주세요."
+		));
+	}
+
+	setHowToPlay(name, text) {
+		this.appInfoMap[name].howToPlay = text;
 	}
 
 	registerAppInfo(appInfo) {
-		this.appInfoMap[appInfo.name] = appInfo;
+		return this.appInfoMap[appInfo.name] = appInfo;
 	}
 
 	getAppNameKorean(name) {
 		return this.appInfoMap[name].nameKorean;
 	}
 
+	getHowToPlayText(name) {
+		return this.appInfoMap[name].howToPlay;
+	}
+
 }

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() {