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 @@
+