From e3bcd3bb12ec419be588d1557b419d97edf6e5a2 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: Sat, 2 Jun 2018 22:12:19 +0900 Subject: [PATCH] Fix: refactoring appButton --- src/game/lib/app_button.js | 32 +++++----- src/game/lib/back_button.js | 5 +- src/game/lib/fullscreen_button.js | 5 +- src/game/lib/game_app_button.js | 73 +++++++++++++++++++++++ src/game/lib/round_rect_button.js | 26 ++++++-- src/game/lib/typing_practice_button.js | 76 ++++++++++++++++++++++++ src/game/login/login.js | 2 +- src/game/menu/menu_app.js | 4 +- src/game/menu/menu_typing_practice.js | 24 ++++---- src/game/result/result.js | 2 +- src/game/start/start.js | 2 +- src/web/client/menu_app.html | 1 + src/web/client/menu_typing_practice.html | 1 + 13 files changed, 216 insertions(+), 37 deletions(-) create mode 100644 src/game/lib/game_app_button.js create mode 100644 src/game/lib/typing_practice_button.js diff --git a/src/game/lib/app_button.js b/src/game/lib/app_button.js index 8c36b01..1f2c6bb 100644 --- a/src/game/lib/app_button.js +++ b/src/game/lib/app_button.js @@ -1,6 +1,7 @@ class AppButton { - constructor(x, y, type, iconName, appText, clickEvent) { + constructor(x, y, setting, iconName, buttonText, clickEvent) { + /* let setting = new RoundRectButtonSetting(150, 150); setting.fontStyle.boundsAlignH = "center"; // left, center. right setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom @@ -45,24 +46,25 @@ class AppButton { "#333" ); } + */ - this.button = new RoundRectButton(setting, "", clickEvent); + this.button = new RoundRectButton(setting, iconName, buttonText, clickEvent); this.move(x, y); - 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); - } + // 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); + // } - if(appText.length > 0) { - const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" }; - let icon_text = game.add.text(0, 0, appText, style); - icon_text.setTextBounds(x - 50, y - 50, 100, 100); - icon_text.stroke = "#333"; - icon_text.strokeThickness = 5; - } + // if(buttonText.length > 0) { + // const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" }; + // let icon_text = game.add.text(0, 0, buttonText, style); + // icon_text.setTextBounds(x - 50, y - 50, 100, 100); + // icon_text.stroke = "#333"; + // icon_text.strokeThickness = 5; + // } } move(x, y) { diff --git a/src/game/lib/back_button.js b/src/game/lib/back_button.js index e473137..7a72570 100644 --- a/src/game/lib/back_button.js +++ b/src/game/lib/back_button.js @@ -24,7 +24,10 @@ class BackButton { "#333" ); - let button = new RoundRectButton(setting, "<", clickEvent); + let button = new RoundRectButton( + setting, + RoundRectButton.NONE_ICON, "<", clickEvent + ); button.move(30, 30); } diff --git a/src/game/lib/fullscreen_button.js b/src/game/lib/fullscreen_button.js index e55a990..cf72739 100644 --- a/src/game/lib/fullscreen_button.js +++ b/src/game/lib/fullscreen_button.js @@ -28,7 +28,10 @@ class FullscreenButton { "#333" ); - let button = new RoundRectButton(setting, "", () => this.clickEvent()); + let button = new RoundRectButton( + setting, RoundRectButton.NONE_ICON, RoundRectButton.NONE_BUTTON_TEXT, + () => this.clickEvent() + ); button.move(this.game.world.width - 30, 30); let icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen'); diff --git a/src/game/lib/game_app_button.js b/src/game/lib/game_app_button.js new file mode 100644 index 0000000..9aa2fa3 --- /dev/null +++ b/src/game/lib/game_app_button.js @@ -0,0 +1,73 @@ +class GameAppButton extends AppButton { + + constructor(x, y, type, iconName, buttonText, clickEvent) { + let setting = new RoundRectButtonSetting(150, 150); + 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 + setting.setStrokeColor( + 0x444488, + 0x6666aa, + 0x6666aa, + 0x333333 + ); + setting.setButtonColor( + 0xaaaadd, + 0xddddff, + 0xddddff, + 0x666666 + ); + setting.setTextColor( + "#844", + "#a66", + "#a66", + "#333" + ); + } + + // this.button = new RoundRectButton(setting, buttonText, clickEvent); + super(x, y, setting, iconName, buttonText, clickEvent); + this.move(x, y); + + // 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); + // } + + // if(appText.length > 0) { + // const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" }; + // let icon_text = game.add.text(0, 0, appText, style); + // icon_text.setTextBounds(x - 50, y - 50, 100, 100); + // icon_text.stroke = "#333"; + // icon_text.strokeThickness = 5; + // } + } + + move(x, y) { + this.button.move(x, y); + } + +} \ No newline at end of file diff --git a/src/game/lib/round_rect_button.js b/src/game/lib/round_rect_button.js index eda4a1a..137dddc 100644 --- a/src/game/lib/round_rect_button.js +++ b/src/game/lib/round_rect_button.js @@ -79,7 +79,7 @@ RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel class RoundRectButton { - constructor(roundRectSetting, buttonText, clickEvent) { + constructor(roundRectSetting, iconName, buttonText, clickEvent) { this.setting = roundRectSetting; this.clickEvent = clickEvent; @@ -88,10 +88,18 @@ class RoundRectButton { this.buttonStroke.inputEnabled = true; this.setEventMethod(this.buttonStroke); - this.text = this.makeText(buttonText); - this.button = this.makeButtonSprite(); - this.button.addChild(this.text); + + this.text = this.makeText(buttonText); + if(buttonText.length > 0) { + this.button.addChild(this.text); + } + + if(iconName.length > 0) { + this.icon = this.makeIcon(iconName); + this.setIcon(this.icon); + } + // this.button.anchor.setTo(0.5, 0.5); this.button.inputEnabled = true; this.setEventMethod(this.button); @@ -136,6 +144,14 @@ class RoundRectButton { return game.add.sprite(0, 0, btnTexture); } + makeIcon(iconName) { + let icon = game.add.sprite(0, 0, iconName); + icon.width = 80; + icon.height = 80; + + return icon; + } + makeText(textContent) { let width = this.setting.width - this.setting.strokeWidthPx * 2; let height = this.setting.height - this.setting.strokeWidthPx * 2; @@ -225,3 +241,5 @@ class RoundRectButton { } } +RoundRectButton.NONE_ICON = ""; +RoundRectButton.NONE_BUTTON_TEXT = ""; \ No newline at end of file diff --git a/src/game/lib/typing_practice_button.js b/src/game/lib/typing_practice_button.js new file mode 100644 index 0000000..ffeccae --- /dev/null +++ b/src/game/lib/typing_practice_button.js @@ -0,0 +1,76 @@ +class TypingPracticeButton extends AppButton { + + constructor(x, y, type, iconName, buttonText, clickEvent) { + let setting = new RoundRectButtonSetting(200, 100); + setting.fontStyle.boundsAlignH = "center"; // left, center. right + setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom + setting.strokeWidthPx = 5; + + if(type === TypingPracticeButton.TYPE_KOREAN) { + setting.setStrokeColor( + 0xaa6666, + 0x884444, + 0x884444, + 0x333333 + ); + setting.setButtonColor( + 0xffdddd, + 0xddaaaa, + 0xddaaaa, + 0x666666 + ); + setting.setTextColor( + "#a66", + "#844", + "#844", + "#333" + ); + } else { // TYPE_ENGLISH + setting.setStrokeColor( + 0x444488, + 0x6666aa, + 0x6666aa, + 0x333333 + ); + setting.setButtonColor( + 0xaaaadd, + 0xddddff, + 0xddddff, + 0x666666 + ); + setting.setTextColor( + "#844", + "#a66", + "#a66", + "#333" + ); + } + + // this.button = new RoundRectButton(setting, buttonText, clickEvent); + super(x, y, setting, iconName, buttonText, clickEvent); + this.move(x, y); + + 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); + } + + // if(appText.length > 0) { + // const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" }; + // let icon_text = game.add.text(0, 0, appText, style); + // icon_text.setTextBounds(x - 50, y - 50, 100, 100); + // icon_text.stroke = "#333"; + // icon_text.strokeThickness = 5; + // } + } + + move(x, y) { + this.button.move(x, y); + } + +} + +TypingPracticeButton.TYPE_KOREAN = "한글"; +TypingPracticeButton.TYPE_ENGLISH = "영문"; diff --git a/src/game/login/login.js b/src/game/login/login.js index 303fb50..466cd09 100644 --- a/src/game/login/login.js +++ b/src/game/login/login.js @@ -71,7 +71,7 @@ class Login { let setting = new RoundRectButtonSetting(200, 100); setting.fontStyle.fontWeight = "bold"; - let startButton = new RoundRectButton(setting, "시작", this.startMenu); + let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startMenu); startButton.move(x, y); } diff --git a/src/game/menu/menu_app.js b/src/game/menu/menu_app.js index 5bbd987..d5ad97c 100644 --- a/src/game/menu/menu_app.js +++ b/src/game/menu/menu_app.js @@ -55,7 +55,7 @@ class MenuApp { let activeApp = replyJSON[i]; if(self.isMouseApp(activeApp)) { mouseAppIndex++; - new AppButton(startX + 150 * mouseAppIndex, 300, AppButton.TYPE_MOUSE, + new GameAppButton(startX + 150 * mouseAppIndex, 300, AppButton.TYPE_MOUSE, activeApp.AppName, AppButton.NONE_BUTTON_TEXT, () => { sessionStorageManager.playingAppID = activeApp.AppID; @@ -67,7 +67,7 @@ class MenuApp { } if(typingPracticeAppCount > 0) { - new AppButton(game.world.width / 2, 500, AppButton.TYPE_TYPING, + new GameAppButton(game.world.width / 2, 500, AppButton.TYPE_TYPING, "icon_fullscreen", "타자 연습\n(임시)", () => { location.href = '../../web/client/menu_typing_practice.html'; diff --git a/src/game/menu/menu_typing_practice.js b/src/game/menu/menu_typing_practice.js index 1479e69..660ace4 100644 --- a/src/game/menu/menu_typing_practice.js +++ b/src/game/menu/menu_typing_practice.js @@ -45,17 +45,17 @@ class MenuTypingPractice { loginSucceeded(replyJSON) { // console.log(replyJSON); - let mouseAppCount = self.getAppCount(replyJSON, AppButton.TYPE_MOUSE); - let typingAppCount = self.getAppCount(replyJSON, AppButton.TYPE_TYPING); + let koreanTypingPracticeAppCount = 1; // self.getAppCount(replyJSON, AppButton.TYPE_MOUSE); + let englishTypingPracticeAppCount = 1; // self.getAppCount(replyJSON, AppButton.TYPE_TYPING); - let startX = game.world.width / 2 - (150 * mouseAppCount / 2) - (150 / 2); - let mouseAppIndex = 0; + let startX = game.world.width / 2 - (150 * koreanTypingPracticeAppCount / 2) - (150 / 2); + let koreanTypingPracticeAppIndex = 0; for(let i = 0; i < replyJSON.length; i++) { let activeApp = replyJSON[i]; if(self.isMouseApp(activeApp)) { - mouseAppIndex++; - new AppButton(startX + 150 * mouseAppIndex, 300, AppButton.TYPE_MOUSE, - AppButton.NONE_ICON, "양손 기본", + koreanTypingPracticeAppIndex++; + new TypingPracticeButton(startX + 150 * koreanTypingPracticeAppIndex, 300, TypingPracticeButton.TYPE_ENGLISH, + TypingPracticeButton.NONE_ICON, "양손 기본", () => { sessionStorageManager.playingAppID = activeApp.AppID; sessionStorageManager.playingAppName = activeApp.AppName; @@ -65,11 +65,13 @@ class MenuTypingPractice { } } - if(typingAppCount > 0) { - new AppButton(game.world.width / 2, 500, AppButton.TYPE_TYPING, - AppButton.NONE_ICON, "검지 글쇠", + if(englishTypingPracticeAppCount > 0) { + new TypingPracticeButton(game.world.width / 2, 500, TypingPracticeButton.TYPE_KOREAN, + TypingPracticeButton.NONE_ICON, "검지 글쇠", () => { - location.href = '../../web/client/menu_typing_app.html'; + sessionStorageManager.playingAppID = activeApp.AppID; + sessionStorageManager.playingAppName = activeApp.AppName; + location.href = '../../web/client/start.html'; } ); } diff --git a/src/game/result/result.js b/src/game/result/result.js index 9442a0c..8ac3e8b 100644 --- a/src/game/result/result.js +++ b/src/game/result/result.js @@ -71,7 +71,7 @@ class Result { let setting = new RoundRectButtonSetting(200, 100); setting.fontStyle.fontWeight = "bold"; - let startButton = new RoundRectButton(setting, "다시 시작", this.startStage); + let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "다시 시작", this.startStage); startButton.move(game.world.centerX, game.world.height / 2 - 70); } diff --git a/src/game/start/start.js b/src/game/start/start.js index 2ab8f10..510133e 100644 --- a/src/game/start/start.js +++ b/src/game/start/start.js @@ -75,7 +75,7 @@ class Start { let setting = new RoundRectButtonSetting(200, 100); setting.fontStyle.fontWeight = "bold"; - let startButton = new RoundRectButton(setting, "시작", this.startStage); + let startButton = new RoundRectButton(setting, RoundRectButton.NONE_ICON, "시작", this.startStage); startButton.move(game.world.centerX, game.world.centerY); } diff --git a/src/web/client/menu_app.html b/src/web/client/menu_app.html index 857c079..720b65a 100644 --- a/src/web/client/menu_app.html +++ b/src/web/client/menu_app.html @@ -20,6 +20,7 @@ + diff --git a/src/web/client/menu_typing_practice.html b/src/web/client/menu_typing_practice.html index 459cfd5..b3522d0 100644 --- a/src/web/client/menu_typing_practice.html +++ b/src/web/client/menu_typing_practice.html @@ -20,6 +20,7 @@ +