Fix: make game app button and typing app button smaller

src/game/lib/button/game_app_button.js

@@ -53,6 +53,21 @@ class GameAppButton extends RoundRectButton {
 			break;
 		}
 
+		setting.fontStyle = {
+			font: "24px Arial",
+			boundsAlignH: "center",		// left, center. right
+			boundsAlignV: "middle", 	// top, middle, bottom
+			fill: "#fff"
+		};
+
+		let textCount = buttonText.length;
+		if(textCount > 7)
+			setting.fontStyle.font = "18px Arial";
+		else if(textCount > 5)
+			setting.fontStyle.font = "22px Arial";
+		else
+			setting.fontStyle.font = "24px Arial";
+
 		super(setting, iconName, buttonText, clickEvent);
 	}
 
@@ -62,8 +77,8 @@ GameAppButton.TYPE_MOUSE_APP		= 0;
 GameAppButton.TYPE_TYPING_PRACTICE	= 1;
 GameAppButton.TYPE_TYPING_APP		= 2;
 
-GameAppButton.BUTTON_WIDTH			= 150;
+GameAppButton.BUTTON_WIDTH			= 120;
-GameAppButton.BUTTON_HEIGHT			= 150;
+GameAppButton.BUTTON_HEIGHT			= 120;
 
 GameAppButton.BUTTON_GAP			= 20;
 GameAppButton.MARGIN_VERTICAL		= 100;

src/game/lib/button/typing_app_button.js

@@ -0,0 +1,54 @@
+class TypingAppButton extends RoundRectButton {
+
+	constructor(x, y, iconName, buttonText, clickEvent) {
+		let setting = new RoundRectButtonSetting(x, y, TypingAppButton.BUTTON_WIDTH, TypingAppButton.BUTTON_HEIGHT);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 5;
+
+		setting.setStrokeColor(
+			0x444488,
+			0x6666aa,
+			0x6666aa,
+			0x333333
+		);
+		setting.setButtonColor(
+			0xaaaadd,
+			0xddddff,
+			0xddddff,
+			0x666666
+		);
+		setting.setTextColor(
+			"#844",
+			"#a66",
+			"#a66",
+			"#333"
+		);
+
+		setting.fontStyle = {
+			font: "22px Arial",
+			boundsAlignH: "center",		// left, center. right
+			boundsAlignV: "middle", 	// top, middle, bottom
+			fill: "#fff"
+		};
+
+		super(setting, iconName, buttonText, clickEvent);
+
+		if(iconName.length > 0) {
+			let iconImage = game.add.sprite(0, 0, iconName);
+			iconImage.width = 80;
+			iconImage.height = 80;
+			this.button.setIcon(iconImage);
+		}
+	}
+
+}
+
+TypingAppButton.BUTTON_WIDTH		= 160;
+TypingAppButton.BUTTON_HEIGHT		= 80;
+
+TypingAppButton.BUTTON_GAP			= 10;
+TypingAppButton.MARGIN_VERTICAL	= 100;
+
+TypingAppButton.BUTTON_UPPER_POS_Y	= 200;
+TypingAppButton.BUTTON_LOWER_POS_Y	= 480;

src/game/lib/button/typing_practice_button.js

@@ -1,48 +0,0 @@
-class TypingPracticeButton extends RoundRectButton {
-
-	constructor(x, y, iconName, buttonText, clickEvent) {
-		let setting = new RoundRectButtonSetting(x, y, TypingPracticeButton.BUTTON_WIDTH, TypingPracticeButton.BUTTON_HEIGHT);
-		setting.fontStyle.boundsAlignH = "center";	// left, center. right
-		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-		setting.strokeWidthPx = 5;
-
-		setting.setStrokeColor(
-			0x444488,
-			0x6666aa,
-			0x6666aa,
-			0x333333
-		);
-		setting.setButtonColor(
-			0xaaaadd,
-			0xddddff,
-			0xddddff,
-			0x666666
-		);
-		setting.setTextColor(
-			"#844",
-			"#a66",
-			"#a66",
-			"#333"
-		);
-
-
-		super(setting, iconName, buttonText, clickEvent);
-
-		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);
-		}
-	}
-
-}
-
-TypingPracticeButton.BUTTON_WIDTH		= 200;
-TypingPracticeButton.BUTTON_HEIGHT		= 100;
-
-TypingPracticeButton.BUTTON_GAP			= 10;
-TypingPracticeButton.MARGIN_VERTICAL	= 100;
-
-TypingPracticeButton.BUTTON_UPPER_POS_Y	= 200;
-TypingPracticeButton.BUTTON_LOWER_POS_Y	= 480;

src/game/menu/menu_app.js

@@ -82,7 +82,8 @@ class MenuApp {
 			let app = appList[i];
 			let gameAppButton = new GameAppButton(
 				posX, posY, GameAppButton.TYPE_MOUSE_APP,
-				"icon_fullscreen", app.KoreanName,
+				RoundRectButton.NONE_ICON,	// "icon_fullscreen",
+				app.KoreanName,
 				() => {
 					sessionStorageManager.playingAppID = app.AppID;
 					sessionStorageManager.playingAppName = app.AppName;
@@ -145,7 +146,7 @@ class MenuApp {
 
 			let gameAppButton = new GameAppButton(
 				posX, posY, GameAppButton.TYPE_TYPING_APP,
-				"icon_fullscreen",
+				RoundRectButton.NONE_ICON,	// "icon_fullscreen",
 				// (isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName,
 				app.KoreanName,
 				() => {

src/game/menu/menu_typing_practice.js

@@ -72,7 +72,7 @@ class MenuTypingPractice {
 	downloadListSucceeded(replyJSON) {
 		// console.log(replyJSON);
 
-		let buttonWidthGap = TypingPracticeButton.BUTTON_WIDTH + MenuTypingPractice.BUTTON_GAP;
+		let buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingPractice.BUTTON_GAP;
 
 		let koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length;
 		let englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length;
@@ -82,12 +82,12 @@ class MenuTypingPractice {
 
 			let posX = self.getButtonPosX(i, koreanTypingPracticeAppCount);
 			let posY = self.getButtonPosY(i, koreanTypingPracticeAppCount,
-				TypingPracticeButton.BUTTON_UPPER_POS_Y
+				TypingAppButton.BUTTON_UPPER_POS_Y
 			);
 
-			let typingPracticeButton = new TypingPracticeButton(
+			let typingPracticeButton = new TypingAppButton(
 				posX, posY,
-				TypingPracticeButton.NONE_ICON,
+				TypingAppButton.NONE_ICON,
 				activeApp.KoreanName,
 				() => {
 					sessionStorageManager.playingAppID = activeApp.AppID;
@@ -106,12 +106,12 @@ class MenuTypingPractice {
 
 			let posX = self.getButtonPosX(i, englishTypingPracticeAppCount);
 			let posY = self.getButtonPosY(i, englishTypingPracticeAppCount,
-				TypingPracticeButton.BUTTON_LOWER_POS_Y
+				TypingAppButton.BUTTON_LOWER_POS_Y
 			);
 
-			let typingPracticeButton = new TypingPracticeButton(
+			let typingPracticeButton = new TypingAppButton(
 				posX, posY,
-				TypingPracticeButton.NONE_ICON,
+				TypingAppButton.NONE_ICON,
 				activeApp.KoreanName,
 				() => {
 					sessionStorageManager.playingAppID = activeApp.AppID;
@@ -127,8 +127,8 @@ class MenuTypingPractice {
 	}
 
 	getButtonPosX(index, buttonCount) {
-		let gap = TypingPracticeButton.BUTTON_WIDTH + TypingPracticeButton.BUTTON_GAP;
+		let gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
-		let maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / gap );
+		let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap );
 		// console.log("maxColumnNum : " + maxColumnNum);
 		let rowCount = Math.ceil(buttonCount / maxColumnNum);
 		// console.log("rowCount : " + rowCount);
@@ -150,10 +150,10 @@ class MenuTypingPractice {
 	}
 
 	getButtonPosY(index, buttonCount, startPosY) {
-		let rowGap = TypingPracticeButton.BUTTON_HEIGHT + TypingPracticeButton.BUTTON_GAP;
+		let rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP;
 
-		let columnGap = TypingPracticeButton.BUTTON_WIDTH + TypingPracticeButton.BUTTON_GAP;
+		let columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
-		let maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / columnGap );
+		let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap );
 		// console.log("maxColumnNum : " + maxColumnNum);
 		// console.log("buttonCount : " + buttonCount);
 		let rowCount = Math.ceil(buttonCount / maxColumnNum);

src/game/menu/menu_typing_test.js

@@ -71,7 +71,7 @@ class MenuTypingTest {
 	downloadListSucceeded(replyJSON) {
 		// console.log(replyJSON);
 
-		let buttonWidthGap = TypingPracticeButton.BUTTON_WIDTH + MenuTypingTest.BUTTON_GAP;
+		let buttonWidthGap = TypingAppButton.BUTTON_WIDTH + MenuTypingTest.BUTTON_GAP;
 
 		let koreanTypingPracticeAppCount = Object.keys(replyJSON.KoreanAppList).length;
 		let englishTypingPracticeAppCount = Object.keys(replyJSON.EnglishAppList).length;
@@ -81,12 +81,12 @@ class MenuTypingTest {
 
 			let posX = self.getButtonPosX(i, koreanTypingPracticeAppCount);
 			let posY = self.getButtonPosY(i, koreanTypingPracticeAppCount,
-				TypingPracticeButton.BUTTON_UPPER_POS_Y
+				TypingAppButton.BUTTON_UPPER_POS_Y
 			);
 
-			let typingTestButton = new TypingPracticeButton(
+			let typingTestButton = new TypingAppButton(
 				posX, posY,
-				TypingPracticeButton.NONE_ICON,
+				TypingAppButton.NONE_ICON,
 				activeApp.KoreanName,
 				() => {
 					sessionStorageManager.playingAppID = activeApp.AppID;
@@ -105,12 +105,12 @@ class MenuTypingTest {
 
 			let posX = self.getButtonPosX(i, englishTypingPracticeAppCount);
 			let posY = self.getButtonPosY(i, englishTypingPracticeAppCount,
-				TypingPracticeButton.BUTTON_LOWER_POS_Y
+				TypingAppButton.BUTTON_LOWER_POS_Y
 			);
 
-			let typingTestButton = new TypingPracticeButton(
+			let typingTestButton = new TypingAppButton(
 				posX, posY,
-				TypingPracticeButton.NONE_ICON,
+				TypingAppButton.NONE_ICON,
 				activeApp.KoreanName,
 				() => {
 					sessionStorageManager.playingAppID = activeApp.AppID;
@@ -126,8 +126,8 @@ class MenuTypingTest {
 	}
 
 	getButtonPosX(index, buttonCount) {
-		let gap = TypingPracticeButton.BUTTON_WIDTH + TypingPracticeButton.BUTTON_GAP;
+		let gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
-		let maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / gap );
+		let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / gap );
 		// console.log("maxColumnNum : " + maxColumnNum);
 		let rowCount = Math.ceil(buttonCount / maxColumnNum);
 		// console.log("rowCount : " + rowCount);
@@ -149,10 +149,10 @@ class MenuTypingTest {
 	}
 
 	getButtonPosY(index, buttonCount, startPosY) {
-		let rowGap = TypingPracticeButton.BUTTON_HEIGHT + TypingPracticeButton.BUTTON_GAP;
+		let rowGap = TypingAppButton.BUTTON_HEIGHT + TypingAppButton.BUTTON_GAP;
 
-		let columnGap = TypingPracticeButton.BUTTON_WIDTH + TypingPracticeButton.BUTTON_GAP;
+		let columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP;
-		let maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / columnGap );
+		let maxColumnNum = Math.floor( (game.world.width - TypingAppButton.MARGIN_VERTICAL) / columnGap );
 		// console.log("maxColumnNum : " + maxColumnNum);
 		// console.log("buttonCount : " + buttonCount);
 		let rowCount = Math.ceil(buttonCount / maxColumnNum);

src/web/client/menu_typing_practice.html

@@ -18,7 +18,7 @@
 		<script src="../../game/lib/button/round_rect_button.js"></script>
 		<script src="../../game/lib/button/back_button.js"></script>
 		<script src="../../game/lib/button/fullscreen_button.js"></script>
-		<script src="../../game/lib/button/typing_practice_button.js"></script>
+		<script src="../../game/lib/button/typing_app_button.js"></script>
 		<script src="../../game/lib/button/typing_tab_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_test.html

@@ -18,7 +18,7 @@
 		<script src="../../game/lib/button/round_rect_button.js"></script>
 		<script src="../../game/lib/button/back_button.js"></script>
 		<script src="../../game/lib/button/fullscreen_button.js"></script>
-		<script src="../../game/lib/button/typing_practice_button.js"></script>
+		<script src="../../game/lib/button/typing_app_button.js"></script>
 		<script src="../../game/lib/button/typing_tab_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 		<script src="../../game/lib/db_connect_manager.js"></script>