diff --git a/src/game/lib/back_button.js b/src/game/lib/back_button.js
new file mode 100644
index 0000000..748eba1
--- /dev/null
+++ b/src/game/lib/back_button.js
@@ -0,0 +1,28 @@
+class BackButton {
+
+ constructor(clickEvent) {
+ let setting = new RoundRectButtonSetting(50, 50);
+ setting.setStrokeColor(
+ 0x884444,
+ 0xaa6666,
+ 0xaa6666,
+ 0x333333
+ );
+ setting.setButtonColor(
+ 0xddaaaa,
+ 0xffdddd,
+ 0xffdddd,
+ 0x666666
+ );
+ setting.setTextColor(
+ "#844",
+ "#a66",
+ "#a66",
+ "#333"
+ );
+
+ this.button = new RoundRectButton(setting, "<", clickEvent);
+ this.button.move(30, 30);
+ }
+
+}
\ 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 8da274f..9b2ae6c 100644
--- a/src/game/lib/round_rect_button.js
+++ b/src/game/lib/round_rect_button.js
@@ -10,14 +10,45 @@ class RoundRectButtonSetting {
} else {
this.roundAmount = roundAmount;
}
+ this.strokeWidth = RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX;
+
+ this.strokeColors = RoundRectButtonSetting.DEFAULT_STROKE_COLORS;
this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
};
+ setStrokeColor(out, over, down, disabled) {
+ this.strokeColors.out = out;
+ this.strokeColors.over = over;
+ this.strokeColors.odownut = down;
+ this.strokeColors.disabled = disabled;
+ }
+
+ setButtonColor(out, over, down, disabled) {
+ this.buttonColors.out = out;
+ this.buttonColors.over = over;
+ this.buttonColors.odownut = down;
+ this.buttonColors.disabled = disabled;
+ }
+
+ setTextColor(out, over, down, disabled) {
+ this.textColors.out = out;
+ this.textColors.over = over;
+ this.textColors.odownut = down;
+ this.textColors.disabled = disabled;
+ }
+
}
+RoundRectButtonSetting.DEFAULT_STROKE_COLORS = {
+ out: 0x666666,
+ over: 0x333333,
+ down: 0x333333,
+ disabled: 0x666666
+};
+
RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
out: 0xffffff,
over: 0xddffdd,
@@ -34,11 +65,13 @@ RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
font: "30px Arial",
- align: "center",
+ boundsAlignH: "center", // left, center. right
+ boundsAlignV: "middle", // top, middle, bottom
fill: "#fff"
};
-RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX = -10; // pixels
+RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel
+RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel
@@ -47,54 +80,52 @@ class RoundRectButton {
this.setting = roundRectSetting;
this.clickEvent = clickEvent;
- this.button = this.makeSprite();
+ this.buttonStroke = this.makeButtonStroke();
+ // this.buttonStroke.anchor.setTo(0.5, 0.5);
+ this.buttonStroke.inputEnabled = true;
+ this.setEventMethod(this.buttonStroke);
+
this.text = this.makeText(buttonText);
+ this.button = this.makeButtonSprite();
this.button.addChild(this.text);
- this.button.anchor.setTo(0.5, 0.5);
-
- this.inputEnabled = true;
- this.setEventMethod();
+ // this.button.anchor.setTo(0.5, 0.5);
+ this.button.inputEnabled = true;
+ this.setEventMethod(this.button);
this.mouseOut();
}
- setEventMethod() {
- this.button.events.onInputOver.add(function() {
- this.mouseOver();
- }, this);
-
- this.button.events.onInputOut.add(function() {
- this.mouseOut();
- }, this);
-
- this.button.events.onInputDown.add(function() {
+ setEventMethod(target) {
+ target.events.onInputOver.add(function() { this.mouseOver(); }, this);
+ target.events.onInputOut.add(function() { this.mouseOut(); }, this);
+ target.events.onInputDown.add(function() {
this.mouseDown();
if(this.clickEvent) {
this.clickEvent();
}
}, this);
-
- this.button.events.onInputUp.add(function() {
- this.mouseOver();
- }, this);
+ target.events.onInputUp.add(function() { this.mouseOver(); }, this);
}
- makeSprite() {
- const STROKE_WIDTH_PX = 5;
-
- let width = this.setting.width - STROKE_WIDTH_PX * 2;
- let height = this.setting.height - STROKE_WIDTH_PX * 2;
- let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width);
- console.log("this.setting.roundAmount " + this.setting.roundAmount);
- console.log("innerRoundAmount " + innerRoundAmount);
+ makeButtonStroke() {
let btnTexture = new Phaser.Graphics()
- .beginFill(0xaaaaaa)
+ .beginFill(0xffffff)
.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
.endFill()
+ .generateTexture();
+
+ return game.add.sprite(0, 0, btnTexture);
+ }
+
+ makeButtonSprite() {
+ let width = this.setting.width - this.setting.strokeWidth * 2;
+ let height = this.setting.height - this.setting.strokeWidth * 2;
+ let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width);
+ let btnTexture = new Phaser.Graphics()
.beginFill(0xffffff)
- .drawRoundedRect(STROKE_WIDTH_PX, STROKE_WIDTH_PX, width, height, innerRoundAmount)
+ .drawRoundedRect(this.setting.strokeWidth, this.setting.strokeWidth, width, height, innerRoundAmount)
.endFill()
.generateTexture();
@@ -102,39 +133,48 @@ class RoundRectButton {
}
makeText(textContent) {
- let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle);
- btnText.anchor.setTo(0.5);
- btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX;
+ let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle)
+ .setTextBounds(0, 0, this.setting.width, this.setting.height);
+
+ btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+ // btnText.anchor.setTo(0.5);
return btnText;
}
mouseOut() {
- this.button.tint = this.setting.buttonColors.out;
this.text.fill = this.setting.textColors.out;
+ this.buttonStroke.tint = this.setting.strokeColors.out;
+ this.button.tint = this.setting.buttonColors.out;
}
mouseOver() {
- this.button.tint = this.setting.buttonColors.over;
this.text.fill = this.setting.textColors.over;
+ this.buttonStroke.tint = this.setting.strokeColors.over;
+ this.button.tint = this.setting.buttonColors.over;
}
mouseDown() {
- this.button.tint = this.setting.buttonColors.down;
this.text.fill = this.setting.textColors.down;
+ this.buttonStroke.tint = this.setting.strokeColors.down;
+ this.button.tint = this.setting.buttonColors.down;
}
buttonDisabled() {
- this.button.tint = this.setting.buttonColors.disabled;
this.text.fill = this.setting.textColors.disabled;
+ this.buttonStroke.tint = this.setting.strokeColors.disabled;
+ this.button.tint = this.setting.buttonColors.disabled;
}
move(x, y) {
- this.button.x = x;
- this.button.y = y;
+ this.buttonStroke.x = x - this.setting.width / 2;
+ this.buttonStroke.y = y - this.setting.height / 2;
+
+ this.button.x = x - this.setting.width / 2+ this.setting.strokeWidth;
+ this.button.y = y - this.setting.height / 2+ this.setting.strokeWidth;
}
get inputEnabled() {
@@ -142,6 +182,7 @@ class RoundRectButton {
}
set inputEnabled(isEnabled) {
+ this.buttonStroke.inputEnabled = isEnabled;
this.button.inputEnabled = isEnabled;
if(isEnabled === true) {
diff --git a/src/game/lib/screen_bottom.js b/src/game/lib/screen_bottom.js
index bb09966..284d9a0 100644
--- a/src/game/lib/screen_bottom.js
+++ b/src/game/lib/screen_bottom.js
@@ -18,11 +18,6 @@ class ScreenBottom {
.beginFill(0xffffff, 0.1)
.drawRect(0, this.bottomAreaPositionY, game.world.width, this.BOTTOM_BAR_HEIGHT);
-
- this.printBottomLeftText(playerName);
- this.printBottomCenterText("메뉴");
- this.printBottomRightText(playerName);
-
let textStyleInfo = textStyleBasic; //$.extend( {}, textStyleBasic);
textStyleInfo.font = "32px Arial";
textStyleInfo.align = "right";
diff --git a/src/game/menu/menu_app.js b/src/game/menu/menu_app.js
index afa3bae..cec401e 100644
--- a/src/game/menu/menu_app.js
+++ b/src/game/menu/menu_app.js
@@ -6,9 +6,13 @@ let MenuApp = {
create: function() {
this.game.stage.backgroundColor = '#4d4d4d';
+ let backButton = new BackButton( () => {
+ location.href = '../../web/client/login.html';
+ });
+
let screenBottom = new ScreenBottom(game);
screenBottom.makeBottomLine();
- screenBottom.printBottomLeftText(playerName);
+ screenBottom.printBottomLeftText("게임 진행 정보");
screenBottom.printBottomCenterText("메뉴");
screenBottom.printBottomRightText(playerName);
@@ -81,8 +85,8 @@ let MenuApp = {
playingStageData = new StageData(language, level);
// console.log(playingStageData);
-
+
this.startState('TypingTestStage');
- }
+ },
}
\ No newline at end of file
diff --git a/src/web/client/menu_app.html b/src/web/client/menu_app.html
index a8da087..062ddd1 100644
--- a/src/web/client/menu_app.html
+++ b/src/web/client/menu_app.html
@@ -14,6 +14,7 @@
+