jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: refactoring appButton

Browse Source
This commit is contained in:
Jisang Park
2018-06-02 22:12:19 +09:00
parent 73bdb38c56
commit e3bcd3bb12
13 changed files with 216 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/app_button.js
+17 -15
View File
@@ -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) {
src/game/lib/back_button.js
+4 -1
View File
@@ -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);
}
src/game/lib/fullscreen_button.js
+4 -1
View File
@@ -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');
src/game/lib/game_app_button.js
+73
View File
@@ -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);
}
}
src/game/lib/round_rect_button.js
+22 -4
View File
@@ -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 = "";
src/game/lib/typing_practice_button.js
+76
View File
@@ -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 = "영문";
src/game/login/login.js
+1 -1
View File
@@ -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);
}
src/game/menu/menu_app.js
+2 -2
View File
@@ -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';
src/game/menu/menu_typing_practice.js
+13 -11
View File
@@ -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';
}
);
}
src/game/result/result.js
+1 -1
View File
@@ -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);
}
src/game/start/start.js
+1 -1
View File
@@ -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);
}
src/web/client/menu_app.html
+1
View File
@@ -20,6 +20,7 @@
<script src="../../game/lib/back_button.js"></script>
<script src="../../game/lib/fullscreen_button.js"></script>
<script src="../../game/lib/app_button.js"></script>
<script src="../../game/lib/game_app_button.js"></script>
<script src="../../game/lib/screen_bottom.js"></script>
<script src="../../game/lib/db_connect_manager.js"></script>
src/web/client/menu_typing_practice.html
+1
View File
@@ -20,6 +20,7 @@
<script src="../../game/lib/back_button.js"></script>
<script src="../../game/lib/fullscreen_button.js"></script>
<script src="../../game/lib/app_button.js"></script>
<script src="../../game/lib/typing_practice_button.js"></script>
<script src="../../game/lib/screen_bottom.js"></script>
<script src="../../game/lib/db_connect_manager.js"></script>