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