Fix: refactoring appButton

src/game/lib/app_button.js

@@ -1,6 +1,7 @@
 class AppButton {
 
-	constructor(x, y, type, iconName, appText, clickEvent) {
+	constructor(x, y, setting, iconName, buttonText, clickEvent) {
+		/*
 		let setting = new RoundRectButtonSetting(150, 150);
 		setting.fontStyle.boundsAlignH = "center";	// left, center. right
 		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
@@ -45,24 +46,25 @@ class AppButton {
 				"#333"
 			);
 		}
+		*/
 
-		this.button = new RoundRectButton(setting, "", clickEvent);
+		this.button = new RoundRectButton(setting, iconName, buttonText, clickEvent);
 		this.move(x, y);
 
-		if(iconName.length > 0) {
+		// if(iconName.length > 0) {
-			let icon_fullscreen = game.add.sprite(0, 0, iconName);
+		// 	let icon_fullscreen = game.add.sprite(0, 0, iconName);
-			icon_fullscreen.width = 80;
+		// 	icon_fullscreen.width = 80;
-			icon_fullscreen.height = 80;
+		// 	icon_fullscreen.height = 80;
-			this.button.setIcon(icon_fullscreen);
+		// 	this.button.setIcon(icon_fullscreen);
-		}
+		// }
 
-		if(appText.length > 0) {
+		// if(buttonText.length > 0) {
-			const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
+		// 	const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
-			let icon_text = game.add.text(0, 0, appText, style);
+		// 	let icon_text = game.add.text(0, 0, buttonText, style);
-			icon_text.setTextBounds(x - 50, y - 50, 100, 100);
+		// 	icon_text.setTextBounds(x - 50, y - 50, 100, 100);
-			icon_text.stroke = "#333";
+		// 	icon_text.stroke = "#333";
-			icon_text.strokeThickness = 5;
+		// 	icon_text.strokeThickness = 5;
-		}
+		// }
 	}
 
 	move(x, y) {

src/game/lib/back_button.js

@@ -24,7 +24,10 @@ class BackButton {
 			"#333"
 		);
 
-		let button = new RoundRectButton(setting, "<", clickEvent);
+		let button = new RoundRectButton(
+			setting,
+			RoundRectButton.NONE_ICON, "<", clickEvent
+		);
 		button.move(30, 30);
 	}
 

src/game/lib/fullscreen_button.js

@@ -28,7 +28,10 @@ class FullscreenButton {
 			"#333"
 		);
 
-		let button = new RoundRectButton(setting, "", () => this.clickEvent());
+		let button = new RoundRectButton(
+			setting, RoundRectButton.NONE_ICON, RoundRectButton.NONE_BUTTON_TEXT,
+			() => this.clickEvent()
+		);
 		button.move(this.game.world.width - 30, 30);
 
 		let icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen');

src/game/lib/game_app_button.js

@@ -0,0 +1,73 @@
+class GameAppButton extends AppButton {
+
+	constructor(x, y, type, iconName, buttonText, clickEvent) {
+		let setting = new RoundRectButtonSetting(150, 150);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 5;
+
+		if(type === AppButton.TYPE_MOUSE) {
+			setting.setStrokeColor(
+				0xaa6666,
+				0x884444,
+				0x884444,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xffdddd,
+				0xddaaaa,
+				0xddaaaa,
+				0x666666
+			);
+			setting.setTextColor(
+				"#a66",
+				"#844",
+				"#844",
+				"#333"
+			);
+		} else {	// TYPE_TYPING
+			setting.setStrokeColor(
+				0x444488,
+				0x6666aa,
+				0x6666aa,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xaaaadd,
+				0xddddff,
+				0xddddff,
+				0x666666
+			);
+			setting.setTextColor(
+				"#844",
+				"#a66",
+				"#a66",
+				"#333"
+			);
+		}
+
+		// this.button = new RoundRectButton(setting, buttonText, clickEvent);
+		super(x, y, setting, iconName, buttonText, clickEvent);
+		this.move(x, y);
+
+		// if(iconName.length > 0) {
+		// 	let icon_fullscreen = game.add.sprite(0, 0, iconName);
+		// 	icon_fullscreen.width = 80;
+		// 	icon_fullscreen.height = 80;
+		// 	this.button.setIcon(icon_fullscreen);
+		// }
+
+		// if(appText.length > 0) {
+		// 	const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
+		// 	let icon_text = game.add.text(0, 0, appText, style);
+		// 	icon_text.setTextBounds(x - 50, y - 50, 100, 100);
+		// 	icon_text.stroke = "#333";
+		// 	icon_text.strokeThickness = 5;
+		// }
+	}
+
+	move(x, y) {
+		this.button.move(x, y);
+	}
+
+}

src/game/lib/round_rect_button.js

@@ -79,7 +79,7 @@ RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX		= 5;	// in pixel
 
 
 class RoundRectButton {
-	constructor(roundRectSetting, buttonText, clickEvent) {
+	constructor(roundRectSetting, iconName, buttonText, clickEvent) {
 		this.setting = roundRectSetting;
 		this.clickEvent = clickEvent;
 
@@ -88,10 +88,18 @@ class RoundRectButton {
 		this.buttonStroke.inputEnabled = true;
 		this.setEventMethod(this.buttonStroke);
 
-		this.text = this.makeText(buttonText);
-
 		this.button = this.makeButtonSprite();
-		this.button.addChild(this.text);
+
+		this.text = this.makeText(buttonText);
+		if(buttonText.length > 0) {
+			this.button.addChild(this.text);
+		}
+
+		if(iconName.length > 0) {
+			this.icon = this.makeIcon(iconName);
+			this.setIcon(this.icon);
+		}
+
 		// this.button.anchor.setTo(0.5, 0.5);
 		this.button.inputEnabled = true;
 		this.setEventMethod(this.button);
@@ -136,6 +144,14 @@ class RoundRectButton {
 		return game.add.sprite(0, 0, btnTexture);
 	}
 
+	makeIcon(iconName) {
+		let icon = game.add.sprite(0, 0, iconName);
+		icon.width = 80;
+		icon.height = 80;
+
+		return icon;
+	}
+
 	makeText(textContent) {
 		let width = this.setting.width - this.setting.strokeWidthPx * 2;
 		let height = this.setting.height - this.setting.strokeWidthPx * 2;
@@ -225,3 +241,5 @@ class RoundRectButton {
 	}
 }
 
+RoundRectButton.NONE_ICON			= "";
+RoundRectButton.NONE_BUTTON_TEXT	= "";

src/game/lib/typing_practice_button.js

@@ -0,0 +1,76 @@
+class TypingPracticeButton extends AppButton {
+
+	constructor(x, y, type, iconName, buttonText, clickEvent) {
+		let setting = new RoundRectButtonSetting(200, 100);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 5;
+
+		if(type === TypingPracticeButton.TYPE_KOREAN) {
+			setting.setStrokeColor(
+				0xaa6666,
+				0x884444,
+				0x884444,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xffdddd,
+				0xddaaaa,
+				0xddaaaa,
+				0x666666
+			);
+			setting.setTextColor(
+				"#a66",
+				"#844",
+				"#844",
+				"#333"
+			);
+		} else {	// TYPE_ENGLISH
+			setting.setStrokeColor(
+				0x444488,
+				0x6666aa,
+				0x6666aa,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xaaaadd,
+				0xddddff,
+				0xddddff,
+				0x666666
+			);
+			setting.setTextColor(
+				"#844",
+				"#a66",
+				"#a66",
+				"#333"
+			);
+		}
+
+		// this.button = new RoundRectButton(setting, buttonText, clickEvent);
+		super(x, y, setting, iconName, buttonText, clickEvent);
+		this.move(x, y);
+
+		if(iconName.length > 0) {
+			let icon_fullscreen = game.add.sprite(0, 0, iconName);
+			icon_fullscreen.width = 80;
+			icon_fullscreen.height = 80;
+			this.button.setIcon(icon_fullscreen);
+		}
+
+		// if(appText.length > 0) {
+		// 	const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
+		// 	let icon_text = game.add.text(0, 0, appText, style);
+		// 	icon_text.setTextBounds(x - 50, y - 50, 100, 100);
+		// 	icon_text.stroke = "#333";
+		// 	icon_text.strokeThickness = 5;
+		// }
+	}
+
+	move(x, y) {
+		this.button.move(x, y);
+	}
+
+}
+
+TypingPracticeButton.TYPE_KOREAN		= "한글";
+TypingPracticeButton.TYPE_ENGLISH	= "영문";

src/game/login/login.js

@@ -71,7 +71,7 @@ class Login {
 		let setting = new RoundRectButtonSetting(200, 100);
 		setting.fontStyle.fontWeight = "bold";
 
-		let startButton = new RoundRectButton(setting, "시작", this.startMenu);
+		let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startMenu);
 		startButton.move(x, y);
 	}
 

src/game/menu/menu_app.js

@@ -55,7 +55,7 @@ class MenuApp {
 			let activeApp = replyJSON[i];
 			if(self.isMouseApp(activeApp)) {
 				mouseAppIndex++;
-				new AppButton(startX + 150 * mouseAppIndex, 300, AppButton.TYPE_MOUSE,
+				new GameAppButton(startX + 150 * mouseAppIndex, 300, AppButton.TYPE_MOUSE,
 					activeApp.AppName, AppButton.NONE_BUTTON_TEXT,
 					() => {
 						sessionStorageManager.playingAppID = activeApp.AppID;
@@ -67,7 +67,7 @@ class MenuApp {
 		}
 
 		if(typingPracticeAppCount > 0) {
-			new AppButton(game.world.width / 2, 500, AppButton.TYPE_TYPING,
+			new GameAppButton(game.world.width / 2, 500, AppButton.TYPE_TYPING,
 				"icon_fullscreen", "타자 연습\n(임시)",
 				() => {
 					location.href = '../../web/client/menu_typing_practice.html';

src/game/menu/menu_typing_practice.js

@@ -45,17 +45,17 @@ class MenuTypingPractice {
 	loginSucceeded(replyJSON) {
 		// console.log(replyJSON);
 
-		let mouseAppCount = self.getAppCount(replyJSON, AppButton.TYPE_MOUSE);
+		let koreanTypingPracticeAppCount = 1;	// self.getAppCount(replyJSON, AppButton.TYPE_MOUSE);
-		let typingAppCount = self.getAppCount(replyJSON, AppButton.TYPE_TYPING);
+		let englishTypingPracticeAppCount = 1;	// self.getAppCount(replyJSON, AppButton.TYPE_TYPING);
 
-		let startX = game.world.width / 2 - (150 * mouseAppCount / 2) - (150 / 2);
+		let startX = game.world.width / 2 - (150 * koreanTypingPracticeAppCount / 2) - (150 / 2);
-		let mouseAppIndex = 0;
+		let koreanTypingPracticeAppIndex = 0;
 		for(let i = 0; i < replyJSON.length; i++) {
 			let activeApp = replyJSON[i];
 			if(self.isMouseApp(activeApp)) {
-				mouseAppIndex++;
+				koreanTypingPracticeAppIndex++;
-				new AppButton(startX + 150 * mouseAppIndex, 300, AppButton.TYPE_MOUSE,
+				new TypingPracticeButton(startX + 150 * koreanTypingPracticeAppIndex, 300, TypingPracticeButton.TYPE_ENGLISH,
-					AppButton.NONE_ICON, "양손 기본",
+					TypingPracticeButton.NONE_ICON, "양손 기본",
 					() => {
 						sessionStorageManager.playingAppID = activeApp.AppID;
 						sessionStorageManager.playingAppName = activeApp.AppName;
@@ -65,11 +65,13 @@ class MenuTypingPractice {
 			}
 		}
 
-		if(typingAppCount > 0) {
+		if(englishTypingPracticeAppCount > 0) {
-			new AppButton(game.world.width / 2, 500, AppButton.TYPE_TYPING,
+			new TypingPracticeButton(game.world.width / 2, 500, TypingPracticeButton.TYPE_KOREAN,
-				AppButton.NONE_ICON, "검지 글쇠",
+				TypingPracticeButton.NONE_ICON, "검지 글쇠",
 				() => {
-					location.href = '../../web/client/menu_typing_app.html';
+						sessionStorageManager.playingAppID = activeApp.AppID;
+						sessionStorageManager.playingAppName = activeApp.AppName;
+						location.href = '../../web/client/start.html';
 				}
 			);
 		}

src/game/result/result.js

@@ -71,7 +71,7 @@ class Result {
 		let setting = new RoundRectButtonSetting(200, 100);
 		setting.fontStyle.fontWeight = "bold";
 
-		let startButton = new RoundRectButton(setting, "다시 시작", this.startStage);
+		let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "다시 시작", this.startStage);
 		startButton.move(game.world.centerX, game.world.height / 2 - 70);
 	}
 

src/game/start/start.js

@@ -75,7 +75,7 @@ class Start {
 		let setting = new RoundRectButtonSetting(200, 100);
 		setting.fontStyle.fontWeight = "bold";
 
-		let startButton = new RoundRectButton(setting, "시작", this.startStage);
+		let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startStage);
 		startButton.move(game.world.centerX, game.world.centerY);
 	}
 

src/web/client/menu_app.html

@@ -20,6 +20,7 @@
 		<script src="../../game/lib/back_button.js"></script>
 		<script src="../../game/lib/fullscreen_button.js"></script>
 		<script src="../../game/lib/app_button.js"></script>
+		<script src="../../game/lib/game_app_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>
 

src/web/client/menu_typing_practice.html

@@ -20,6 +20,7 @@
 		<script src="../../game/lib/back_button.js"></script>
 		<script src="../../game/lib/fullscreen_button.js"></script>
 		<script src="../../game/lib/app_button.js"></script>
+		<script src="../../game/lib/typing_practice_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>