From c50015a991e1f5a961b3ec71bb09647337d6d93b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Tue, 5 Jun 2018 09:05:07 +0900 Subject: [PATCH] Fix: align menu app buttons --- src/game/lib/app_button.js | 5 +- src/game/lib/game_app_button.js | 53 +++++++----- src/game/menu/menu_app.js | 144 +++++++++++++++++++++----------- 3 files changed, 127 insertions(+), 75 deletions(-) diff --git a/src/game/lib/app_button.js b/src/game/lib/app_button.js index 1f2c6bb..19991e1 100644 --- a/src/game/lib/app_button.js +++ b/src/game/lib/app_button.js @@ -73,8 +73,9 @@ class AppButton { } -AppButton.TYPE_MOUSE = 0; -AppButton.TYPE_TYPING = 1; +AppButton.TYPE_MOUSE_APP = 0; +AppButton.TYPE_TYPING_PRACTICE = 1; +AppButton.TYPE_TYPING_APP = 2; AppButton.NONE_ICON = ""; AppButton.NONE_BUTTON_TEXT = ""; \ No newline at end of file diff --git a/src/game/lib/game_app_button.js b/src/game/lib/game_app_button.js index 9aa2fa3..2b407fb 100644 --- a/src/game/lib/game_app_button.js +++ b/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) { - setting.setStrokeColor( - 0xaa6666, - 0x884444, - 0x884444, - 0x333333 - ); - setting.setButtonColor( - 0xffdddd, - 0xddaaaa, - 0xddaaaa, - 0x666666 - ); - setting.setTextColor( - "#a66", - "#844", - "#844", - "#333" - ); - } else { // TYPE_TYPING + if(type === AppButton.TYPE_MOUSE_APP) { + } if(type === AppButton.TYPE_TYPING_PRACTICE) { 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); @@ -70,4 +71,12 @@ class GameAppButton extends AppButton { this.button.move(x, y); } -} \ No newline at end of file +} + +GameAppButton.BUTTON_WIDTH = 150; +GameAppButton.BUTTON_HEIGHT = 150; + +GameAppButton.BUTTON_GAP = 20; + +GameAppButton.BUTTON_UPPER_POS_Y = 200; +GameAppButton.BUTTON_LOWER_POS_Y = 540; \ No newline at end of file diff --git a/src/game/menu/menu_app.js b/src/game/menu/menu_app.js index 6eee9ba..70eeea5 100644 --- a/src/game/menu/menu_app.js +++ b/src/game/menu/menu_app.js @@ -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)); } -} \ No newline at end of file +} + +MenuApp.MARGIN_VERTICAL = 100; \ No newline at end of file