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 = "영문";