diff --git a/src/game/lib/app_button.js b/src/game/lib/app_button.js new file mode 100644 index 0000000..c0b5d56 --- /dev/null +++ b/src/game/lib/app_button.js @@ -0,0 +1,64 @@ +class AppButton { + + constructor(type, iconName, 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" + ); + } + + let icon_fullscreen = game.add.sprite(0, 0, iconName); + icon_fullscreen.width = 80; + icon_fullscreen.height = 80; + + this.button = new RoundRectButton(setting, "", clickEvent); + this.button.setIcon(icon_fullscreen); + } + + move(x, y) { + this.button.move(x, y); + } + +} + +AppButton.TYPE_MOUSE = 0; +AppButton.TYPE_TYPING = 1; \ No newline at end of file diff --git a/src/game/lib/back_button.js b/src/game/lib/back_button.js index 1f8d400..e473137 100644 --- a/src/game/lib/back_button.js +++ b/src/game/lib/back_button.js @@ -24,8 +24,8 @@ class BackButton { "#333" ); - this.button = new RoundRectButton(setting, "<", clickEvent); - this.button.move(30, 30); + let button = new RoundRectButton(setting, "<", clickEvent); + button.move(30, 30); } } \ No newline at end of file diff --git a/src/game/menu/menu_app.js b/src/game/menu/menu_app.js index e1f08e8..f74cdb2 100644 --- a/src/game/menu/menu_app.js +++ b/src/game/menu/menu_app.js @@ -10,6 +10,7 @@ let MenuApp = { create: function() { this.game.stage.backgroundColor = '#4d4d4d'; + // top let backButton = new BackButton( () => { sessionStorage.removeItem("playerName"); sessionStorage.removeItem("playerUserID"); @@ -19,6 +20,24 @@ let MenuApp = { let fullscreenButton = new FullscreenButton(this.game); + + // app icons + let space_invaders = new AppButton(AppButton.TYPE_MOUSE, "icon_fullscreen", + () => { + console.log("space invaders"); + } + ); + space_invaders.move(400, 400); + + let typing_practice = new AppButton(AppButton.TYPE_TYPING, "icon_fullscreen", + () => { + console.log("typing practice"); + } + ); + typing_practice.move(600, 400); + + + // bottom let screenBottom = new ScreenBottom(game); screenBottom.makeBottomLine(); // screenBottom.printBottomLeftText("게임 진행 정보"); diff --git a/src/web/client/menu_app.html b/src/web/client/menu_app.html index 98bf0db..17ae4ca 100644 --- a/src/web/client/menu_app.html +++ b/src/web/client/menu_app.html @@ -16,6 +16,7 @@ +