Fix: align menu app buttons

2018-06-05 09:05:07 +09:00
parent ed03e57b34
commit c50015a991
3 changed files with 127 additions and 75 deletions
@@ -48,73 +48,115 @@ class MenuApp {

 		self.makeMouseAppButtons(replyJSON.MouseAppList);
 		self.makeTypingButtons(replyJSON.TypingPracticeAppCount, replyJSON.TypingAppList);
-
-		/*
-
-		let mouseAppCount = self.getAppCount(replyJSON, AppButton.TYPE_MOUSE);
-		let typingPracticeAppCount = self.getAppCount(replyJSON, AppButton.TYPE_TYPING);
-
-		let startX = game.world.width / 2 - (150 * mouseAppCount / 2) - (150 / 2);
-		let mouseAppIndex = 0;
-		for(let i = 0; i < replyJSON.length; i++) {
-			let activeApp = replyJSON[i];
-			if(self.isMouseApp(activeApp)) {
-				mouseAppIndex++;
-				new GameAppButton(startX + 150 * mouseAppIndex, 300, AppButton.TYPE_MOUSE,
-					activeApp.AppName, AppButton.NONE_BUTTON_TEXT,
-					() => {
-						sessionStorageManager.playingAppID = activeApp.AppID;
-						sessionStorageManager.playingAppName = activeApp.AppName;
-						location.href = '../../web/client/start.html';
-					}
-				);
-			}
-		}
-
-		if(typingPracticeAppCount > 0) {
-			new GameAppButton(game.world.width / 2, 500, AppButton.TYPE_TYPING,
-				"icon_fullscreen", "타자 연습\n(임시)",
-				() => {
-					location.href = '../../web/client/menu_typing_practice.html';
-				}
-			);
-		}
-		*/
 	}

 	makeMouseAppButtons(mouseAppJSON) {
-		console.log(mouseAppJSON);
+		// console.log(mouseAppJSON);

+		let mouseAppCount = Object.keys(mouseAppJSON).length;
+
+		for(let i = 0; i < mouseAppCount; i++) {
+			let posX = self.getButtonPosX(i, mouseAppCount);
+			let posY = self.getButtonPosY(i, mouseAppCount, GameAppButton.BUTTON_UPPER_POS_Y);
+
+			let app = mouseAppJSON[i];
+			new GameAppButton(
+				posX, posY, AppButton.TYPE_MOUSE_APP,
+				"icon_fullscreen", app.KoreanName,
+				() => {
+					sessionStorageManager.playingAppID = app.AppID;
+					sessionStorageManager.playingAppName = app.AppName;
+					location.href = '../../web/client/start.html';
+				}
+			);
+		}
 	}

 	makeTypingButtons(typingPracticeAppCount, typingAppJSON) {
-		console.log(typingPracticeAppCount);
-		console.log(typingAppJSON);
+		// console.log(typingPracticeAppCount);
+		// console.log(typingAppJSON);

-	}
+		let isTypingPracticeAppExist = typingPracticeAppCount > 0 ? true : false;
+		let typingAppTotalCount = Object.keys(typingAppJSON).length + (isTypingPracticeAppExist ? 1 : 0);
+		let typingAppIndex = 0;

-	isMouseApp(app) {
-		if(app.AppType > 100)
-			return true;
+		for(let typingButtonIndex = 0; typingButtonIndex < typingAppTotalCount; typingButtonIndex++) {

-		return false;
-	}
+			let posX = self.getButtonPosX(
+				typingButtonIndex, typingAppTotalCount
+			);
+			let posY = self.getButtonPosY(
+				typingButtonIndex, typingAppTotalCount, GameAppButton.BUTTON_LOWER_POS_Y
+			);

-	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++;
+			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++;
+			}
 		}
+	}

-		return appCount;
+	getButtonPosX(index, buttonCount) {
+		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;
+	}
+
+	getButtonPosY(index, buttonCount, startPosY) {
+		let gap = GameAppButton.BUTTON_HEIGHT + 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 rowIndex = Math.floor(index / maxColumnNum);
+		// console.log("rowIndex : " + rowIndex);
+
+		let startY = startPosY - ( (gap / 2) * (rowCount - 1) );
+		return startY + gap * rowIndex;
 	}

 	loadFailed(replyJSON) {
 		// console.log('login failed, jsonData : ' + JSON.stringify(replyJSON));
 	}

-}
+}
+
+MenuApp.MARGIN_VERTICAL		= 100;