Fix: align menu app buttons

src/game/lib/app_button.js

@@ -73,8 +73,9 @@ class AppButton {
 
 }
 
-AppButton.TYPE_MOUSE	= 0;
+AppButton.TYPE_MOUSE_APP		= 0;
-AppButton.TYPE_TYPING	= 1;
+AppButton.TYPE_TYPING_PRACTICE	= 1;
+AppButton.TYPE_TYPING_APP		= 2;
 
 AppButton.NONE_ICON			= "";
 AppButton.NONE_BUTTON_TEXT	= "";

src/game/lib/game_app_button.js

@@ -1,31 +1,13 @@
 class GameAppButton extends AppButton {
 
 	constructor(x, y, type, iconName, buttonText, clickEvent) {
-		let setting = new RoundRectButtonSetting(150, 150);
+		let setting = new RoundRectButtonSetting(GameAppButton.BUTTON_WIDTH, GameAppButton.BUTTON_HEIGHT);
 		setting.fontStyle.boundsAlignH = "center";	// left, center. right
 		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
 		setting.strokeWidthPx = 5;
 
-		if(type === AppButton.TYPE_MOUSE) {
+		if(type === AppButton.TYPE_MOUSE_APP) {
-			setting.setStrokeColor(
+		} if(type === AppButton.TYPE_TYPING_PRACTICE) {
-				0xaa6666,
-				0x884444,
-				0x884444,
-				0x333333
-			);
-			setting.setButtonColor(
-				0xffdddd,
-				0xddaaaa,
-				0xddaaaa,
-				0x666666
-			);
-			setting.setTextColor(
-				"#a66",
-				"#844",
-				"#844",
-				"#333"
-			);
-		} else {	// TYPE_TYPING
 			setting.setStrokeColor(
 				0x444488,
 				0x6666aa,
@@ -44,6 +26,25 @@ class GameAppButton extends AppButton {
 				"#a66",
 				"#333"
 			);
+		} else {	// TYPE_TYPING_APP
+			setting.setStrokeColor(
+				0xaa6666,
+				0x884444,
+				0x884444,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xffdddd,
+				0xddaaaa,
+				0xddaaaa,
+				0x666666
+			);
+			setting.setTextColor(
+				"#a66",
+				"#844",
+				"#844",
+				"#333"
+			);
 		}
 
 		// this.button = new RoundRectButton(setting, buttonText, clickEvent);
@@ -71,3 +72,11 @@ class GameAppButton extends AppButton {
 	}
 
 }
+
+GameAppButton.BUTTON_WIDTH		= 150;
+GameAppButton.BUTTON_HEIGHT		= 150;
+
+GameAppButton.BUTTON_GAP		= 20;
+
+GameAppButton.BUTTON_UPPER_POS_Y	= 200;
+GameAppButton.BUTTON_LOWER_POS_Y	= 540;

src/game/menu/menu_app.js

@@ -48,69 +48,109 @@ class MenuApp {
 
 		self.makeMouseAppButtons(replyJSON.MouseAppList);
 		self.makeTypingButtons(replyJSON.TypingPracticeAppCount, replyJSON.TypingAppList);
+	}
 
-		/*
+	makeMouseAppButtons(mouseAppJSON) {
+		// console.log(mouseAppJSON);
 
-		let mouseAppCount = self.getAppCount(replyJSON, AppButton.TYPE_MOUSE);
+		let mouseAppCount = Object.keys(mouseAppJSON).length;
-		let typingPracticeAppCount = self.getAppCount(replyJSON, AppButton.TYPE_TYPING);
 
-		let startX = game.world.width / 2 - (150 * mouseAppCount / 2) - (150 / 2);
+		for(let i = 0; i < mouseAppCount; i++) {
-		let mouseAppIndex = 0;
+			let posX = self.getButtonPosX(i, mouseAppCount);
-		for(let i = 0; i < replyJSON.length; i++) {
+			let posY = self.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y);
-			let activeApp = replyJSON[i];
+
-			if(self.isMouseApp(activeApp)) {
+			let app = mouseAppJSON[i];
-				mouseAppIndex++;
+			new GameAppButton(
-				new GameAppButton(startX + 150 * mouseAppIndex, 300, AppButton.TYPE_MOUSE,
+				posX, posY, AppButton.TYPE_MOUSE_APP,
-					activeApp.AppName, AppButton.NONE_BUTTON_TEXT,
+				"icon_fullscreen", app.KoreanName,
 				() => {
-						sessionStorageManager.playingAppID = activeApp.AppID;
+					sessionStorageManager.playingAppID = app.AppID;
-						sessionStorageManager.playingAppName = activeApp.AppName;
+					sessionStorageManager.playingAppName = app.AppName;
 					location.href = '../../web/client/start.html';
 				}
 			);
 		}
 	}
 
-		if(typingPracticeAppCount > 0) {
+	makeTypingButtons(typingPracticeAppCount, typingAppJSON) {
-			new GameAppButton(game.world.width / 2, 500, AppButton.TYPE_TYPING,
+		// console.log(typingPracticeAppCount);
-				"icon_fullscreen", "타자 연습\n(임시)",
+		// console.log(typingAppJSON);
+
+		let isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false;
+		let typingAppTotalCount = Object.keys(typingAppJSON).length + (isTypingPracticeAppExist ? 1 : 0);
+		let typingAppIndex = 0;
+
+		for(let typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) {
+
+			let posX = self.getButtonPosX(
+				typingButtonIndex, typingAppTotalCount
+			);
+			let posY = self.getButtonPosY(
+				typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y
+			);
+
+			if(typingButtonIndex == 0 && isTypingPracticeAppExist) {
+				new GameAppButton(
+					posX, posY, AppButton.TYPE_TYPING_PRACTICE,
+					"", "타자 연습\n(임시)",
 					() => {
 						location.href = '../../web/client/menu_typing_practice.html';
 					}
 				);
+			} else {
+				let app = typingAppJSON[typingAppIndex];
+				let isKoreanTypingApp = app.AppID < 32 ? true : false;
+
+				new GameAppButton(
+					posX, posY, AppButton.TYPE_TYPING_APP,
+					"icon_fullscreen",
+					(isKoreanTypingApp ? "(한글)" : "(영문)") + "\n" + app.KoreanName,
+					() => {
+						sessionStorageManager.playingAppID = app.AppID;
+						sessionStorageManager.playingAppName = app.AppName;
+						location.href = '../../web/client/start.html';
+					}
+				);
+				typingAppIndex++;
+			}
 		}
-		*/
 	}
 
-	makeMouseAppButtons(mouseAppJSON) {
+	getButtonPosX(index, buttonCount) {
-		console.log(mouseAppJSON);
+		let gap = GameAppButton.BUTTON_WIDTH + GameAppButton.BUTTON_GAP;
+		let maxColumnNum = Math.floor( (game.world.width - MenuApp.MARGIN_VERTICAL) / gap );
+		// console.log("maxColumnNum : " + maxColumnNum);
+		let rowCount = Math.ceil(buttonCount / maxColumnNum);
+		// console.log("rowCount : " + rowCount);
 
+		let columnIndex = index % maxColumnNum;
+		// console.log("columnIndex : " + columnIndex);
+		let rowIndex = Math.floor(index / maxColumnNum);
+		// console.log("rowIndex : " + rowIndex);
+
+		let columnCountForThisRow = 0;
+		if(rowIndex < rowCount - 1)
+			columnCountForThisRow = maxColumnNum;
+		else
+			columnCountForThisRow = buttonCount - (maxColumnNum * rowIndex);
+		// console.log("columnCountForThisRow : " + columnCountForThisRow);
+
+		let startX = game.world.width / 2 - ( (gap / 2) * (columnCountForThisRow - 1) );
+		return startX + gap * columnIndex;
 	}
 
-	makeTypingButtons(typingPracticeAppCount, typingAppJSON) {
+	getButtonPosY(index, buttonCount, startPosY) {
-		console.log(typingPracticeAppCount);
+		let gap = GameAppButton.BUTTON_HEIGHT + GameAppButton.BUTTON_GAP;
-		console.log(typingAppJSON);
+		let maxColumnNum = Math.floor( (game.world.width - MenuApp.MARGIN_VERTICAL) / gap );
+		// console.log("maxColumnNum : " + maxColumnNum);
+		let rowCount = Math.ceil(buttonCount / maxColumnNum);
+		// console.log("rowCount : " + rowCount);
 
-	}
+		let rowIndex = Math.floor(index / maxColumnNum);
+		// console.log("rowIndex : " + rowIndex);
 
-	isMouseApp(app) {
+		let startY = startPosY - ( (gap / 2) * (rowCount - 1) );
-		if(app.AppType > 100)
+		return startY + gap * rowIndex;
-			return true;
-
-		return false;
-	}
-
-	getAppCount(replyJSON, type) {
-		let appCount = 0;
-		for(let i = 0; i < replyJSON.length; i++) {
-			let activeApp = replyJSON[i];
-			if(type == AppButton.TYPE_TYPING && activeApp.AppType <= 100)
-				appCount++;
-			else if(type == AppButton.TYPE_MOUSE && activeApp.AppType > 100)
-				appCount++;
-		}
-
-		return appCount;
 	}
 
 	loadFailed(replyJSON) {
@@ -118,3 +158,5 @@ class MenuApp {
 	}
 
 }
+
+MenuApp.MARGIN_VERTICAL		= 100;