diff --git a/src/game/lib/button/game_app_button.js b/src/game/lib/button/game_app_button.js index c295a01..bb70837 100644 --- a/src/game/lib/button/game_app_button.js +++ b/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_HEIGHT = 150; +GameAppButton.BUTTON_WIDTH = 120; +GameAppButton.BUTTON_HEIGHT = 120; GameAppButton.BUTTON_GAP = 20; GameAppButton.MARGIN_VERTICAL = 100; diff --git a/src/game/lib/button/typing_app_button.js b/src/game/lib/button/typing_app_button.js new file mode 100644 index 0000000..1e61dfc --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/game/lib/button/typing_practice_button.js b/src/game/lib/button/typing_practice_button.js deleted file mode 100644 index 09f7510..0000000 --- a/src/game/lib/button/typing_practice_button.js +++ /dev/null @@ -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; \ No newline at end of file diff --git a/src/game/menu/menu_app.js b/src/game/menu/menu_app.js index 8880d64..7fffe9b 100644 --- a/src/game/menu/menu_app.js +++ b/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, () => { diff --git a/src/game/menu/menu_typing_practice.js b/src/game/menu/menu_typing_practice.js index 94a7b6f..253e429 100644 --- a/src/game/menu/menu_typing_practice.js +++ b/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 maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / gap ); + let gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_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 maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / columnGap ); + let columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP; + 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); diff --git a/src/game/menu/menu_typing_test.js b/src/game/menu/menu_typing_test.js index 5cfd2cf..27f580b 100644 --- a/src/game/menu/menu_typing_test.js +++ b/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 maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / gap ); + let gap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_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 maxColumnNum = Math.floor( (game.world.width - TypingPracticeButton.MARGIN_VERTICAL) / columnGap ); + let columnGap = TypingAppButton.BUTTON_WIDTH + TypingAppButton.BUTTON_GAP; + 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); diff --git a/src/web/client/menu_typing_practice.html b/src/web/client/menu_typing_practice.html index 9b3b389..ff82632 100644 --- a/src/web/client/menu_typing_practice.html +++ b/src/web/client/menu_typing_practice.html @@ -18,7 +18,7 @@ - + diff --git a/src/web/client/menu_typing_test.html b/src/web/client/menu_typing_test.html index 0061775..68d0a09 100644 --- a/src/web/client/menu_typing_test.html +++ b/src/web/client/menu_typing_test.html @@ -18,7 +18,7 @@ - +