diff --git a/src/game/lib/flat_button/app_group_tab.js b/src/game/lib/flat_button/app_group_tab.js
new file mode 100644
index 0000000..0989f35
--- /dev/null
+++ b/src/game/lib/flat_button/app_group_tab.js
@@ -0,0 +1,58 @@
+AppGroupTab.prototype = Object.create(BasicTab.prototype);
+AppGroupTab.constructor = AppGroupTab;
+
+function AppGroupTab(clickEvent) {
+ var setting = new TabSetting(150, MainMenu.MAIN_MENU_HEIGHT / 2, 140, MainMenu.MAIN_MENU_HEIGHT);
+ setting.setFont("Nanum Gothic");
+ setting.setFontSize(20);
+ setting.setButtonColor(
+ AppGroupTab.BUTTON_COLOR_OUT_HEX,
+ AppGroupTab.BUTTON_COLOR_OVER_HEX,
+ AppGroupTab.BUTTON_COLOR_DOWN_HEX,
+ AppGroupTab.BUTTON_COLOR_DISABLED_HEX
+ );
+ setting.setIconColor(
+ AppGroupTab.STROKE_COLOR_OUT_HEX,
+ AppGroupTab.STROKE_COLOR_OVER_HEX,
+ AppGroupTab.STROKE_COLOR_DOWN_HEX,
+ AppGroupTab.STROKE_COLOR_DISABLED_HEX
+ );
+ setting.setActiveColor(
+ MainColor.DARK_CHOCO_HEX,
+ MainColor.DARK_CHOCO_HEX,
+ MainColor.DARK_CHOCO_HEX,
+ MainColor.DARK_CHOCO_HEX
+ );
+ setting.setTextColor(
+ AppGroupTab.TEXT_COLOR_OUT_HEX,
+ AppGroupTab.TEXT_COLOR_OVER_HEX,
+ AppGroupTab.TEXT_COLOR_DOWN_HEX,
+ AppGroupTab.TEXT_COLOR_DISABLED_HEX
+ );
+
+
+ BasicTab.call(this, setting, clickEvent);
+
+ // this.setMainTextFontWeight("bold");
+ this.setMainText("마우스 MOU");
+ this.setMainTextFontWeight("800");
+ // this.addIcon("home");
+ // this.setIconSize(30);
+ this.setShortcutText("MOUSE");
+}
+
+
+AppGroupTab.STROKE_COLOR_OUT_HEX = 0xAA6666;
+AppGroupTab.STROKE_COLOR_OVER_HEX = 0x884444;
+AppGroupTab.STROKE_COLOR_DOWN_HEX = 0x884444;
+AppGroupTab.STROKE_COLOR_DISABLED_HEX = 0x333333;
+
+AppGroupTab.BUTTON_COLOR_OUT_HEX = 0xffdddd;
+AppGroupTab.BUTTON_COLOR_OVER_HEX = 0xddaaaa;
+AppGroupTab.BUTTON_COLOR_DOWN_HEX = 0xddaaaa;
+AppGroupTab.BUTTON_COLOR_DISABLED_HEX = 0x666666;
+
+AppGroupTab.TEXT_COLOR_OUT_HEX = "#aa6666";
+AppGroupTab.TEXT_COLOR_OVER_HEX = "#884444";
+AppGroupTab.TEXT_COLOR_DOWN_HEX = "#884444";
+AppGroupTab.TEXT_COLOR_DISABLED_HEX = "#333333";
\ No newline at end of file
diff --git a/src/game/lib/flat_button/back_button.js b/src/game/lib/flat_button/back_button.js
index ba9e61d..cb780e1 100644
--- a/src/game/lib/flat_button/back_button.js
+++ b/src/game/lib/flat_button/back_button.js
@@ -2,12 +2,10 @@ BackButton.prototype = Object.create(BasicButton.prototype);
BackButton.constructor = BackButton;
function BackButton(clickEvent) {
- var setting = new ButtonSetting(40, 40, 60, 60);
+ var setting = new ButtonSetting(40, MainMenu.MAIN_MENU_HEIGHT / 2, 60, 60);
setting.setStrokeWidth(3);
- setting.setRound(10);
+ setting.setRound(30);
setting.setFont("Nanum Gothic Coding");
- setting.fontStyle.boundsAlignH = "center"; // left, center. right
- setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.setStrokeColor(
BackButton.STROKE_COLOR_OUT_HEX,
BackButton.STROKE_COLOR_OVER_HEX,
@@ -33,6 +31,7 @@ function BackButton(clickEvent) {
BackButton.TEXT_COLOR_DISABLED_HEX
);
+
BasicButton.call(this, setting, clickEvent);
this.addIcon("home");
diff --git a/src/game/lib/flat_button/basic_tab.js b/src/game/lib/flat_button/basic_tab.js
index 478ea75..c07b031 100644
--- a/src/game/lib/flat_button/basic_tab.js
+++ b/src/game/lib/flat_button/basic_tab.js
@@ -5,10 +5,15 @@ function BasicTab(setting, clickEvent) {
this.setting = setting;
this.clickEvent = clickEvent;
+ this.activate = true;
+
// button sprite
this.buttonSprite = this.makeButtonSprite();
this.setEventMethod(this.buttonSprite);
+ this.activeSprite = this.makeActiveSprite();
+ this.setEventMethod(this.activeSprite);
+
this.iconSprite = null;
this.mainText = null;
@@ -28,7 +33,7 @@ function BasicTab(setting, clickEvent) {
-BasicTab.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite
+BasicTab.prototype.makeButtonSprite = function() {
var setting = this.setting;
// console.log("strokeWidthPx : " + setting.strokeWidthPx);
// console.log("round : " + setting.roundAmount);
@@ -53,6 +58,34 @@ BasicTab.prototype.makeButtonSprite = function() { // inner(smaller) round rect
return buttonSprite;
}
+BasicTab.prototype.makeActiveSprite = function() {
+ var setting = this.setting;
+ // console.log("strokeWidthPx : " + setting.strokeWidthPx);
+ // console.log("round : " + setting.roundAmount);
+
+ var OFFSET_POS_Y = 12;
+
+ var buttonWidth = setting.width;
+ var lineWidth = buttonWidth * 3 / 4;
+ var lineHeight = 5;
+
+ var texture = null;
+ texture = new Phaser.Graphics()
+ .beginFill(0xffffff)
+ .drawRoundedRect(0, 0, lineWidth, lineHeight, 1)
+ .endFill()
+ .generateTexture();
+
+ var posX = setting.x - lineWidth / 2;
+ var posY = setting.y + setting.height / 2 - OFFSET_POS_Y;
+ var activeSprite = game.add.sprite(posX, posY, texture);
+
+ // buttonSprite.anchor.setTo(0.5, 0.5);
+ activeSprite.inputEnabled = true;
+
+ return activeSprite;
+}
+
// icon
BasicTab.prototype.addIcon = function(spriteName) {
@@ -122,6 +155,14 @@ BasicTab.prototype.setMainText = function(text) {
this.alignContents();
}
+BasicTab.prototype.setMainTextFontWeight = function(option) {
+ if(option === null || option === "")
+ this.mainText.fontWeight = "normal";
+ else
+ this.mainText.fontWeight = option;
+ console.log(this.mainText.fontWeight);
+}
+
BasicTab.prototype.makeShortcutText = function() {
var posX = this.buttonSprite.width / 2;
var posY = this.buttonSprite.height / 2;
@@ -141,6 +182,15 @@ BasicTab.prototype.setShortcutText = function(text) {
this.alignContents();
}
+BasicTab.prototype.setActive = function(flag) {
+ this.activate = flag;
+
+ if(this.activate)
+ this.activeSprite.alpha = 1;
+ else
+ this.activeSprite.alpha = 0;
+}
+
BasicTab.prototype.alignContents = function() {
var mainTextHeight = 0;
var iconSpriteHeight = 0;
@@ -219,6 +269,8 @@ BasicTab.prototype.mouseOut = function() {
this.mainText.fill = this.setting.textColors.out;
if(this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.out;
+
+ this.activeSprite.tint = this.setting.activeColors.out;
}
BasicTab.prototype.mouseOver = function() {
@@ -230,6 +282,8 @@ BasicTab.prototype.mouseOver = function() {
this.mainText.fill = this.setting.textColors.over;
if(this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.over;
+
+ this.activeSprite.tint = this.setting.activeColors.over;
}
BasicTab.prototype.mouseDown = function() {
@@ -241,6 +295,8 @@ BasicTab.prototype.mouseDown = function() {
this.mainText.fill = this.setting.textColors.down;
if(this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.down;
+
+ this.activeSprite.tint = this.setting.activeColors.down;
}
BasicTab.prototype.buttonDisabled = function() {
@@ -252,6 +308,8 @@ BasicTab.prototype.buttonDisabled = function() {
this.mainText.fill = this.setting.textColors.disabled;
if(typeof this.shortcutText !== undefined)
this.shortcutText.fill = this.setting.textColors.disabled;
+
+ this.activeSprite.tint = this.setting.activeColors.disabled;
}
diff --git a/src/game/lib/flat_button/setting_button.js b/src/game/lib/flat_button/setting_button.js
index 2ef2653..4542e28 100644
--- a/src/game/lib/flat_button/setting_button.js
+++ b/src/game/lib/flat_button/setting_button.js
@@ -2,9 +2,9 @@ SettingButton.prototype = Object.create(BasicButton.prototype);
SettingButton.constructor = SettingButton;
function SettingButton(clickEvent) {
- var setting = new ButtonSetting(980, 40, 60, 60);
+ var setting = new ButtonSetting(980, MainMenu.MAIN_MENU_HEIGHT / 2, 60, 60);
setting.setStrokeWidth(0);
- setting.setRound(10);
+ setting.setRound(30);
// setting.setFont("Nanum Brush Script");
setting.setFont("Nanum Gothic");
setting.setFontSize(20);
@@ -35,6 +35,7 @@ function SettingButton(clickEvent) {
SettingButton.TEXT_COLOR_DISABLED_HEX
);
+
BasicButton.call(this, setting, clickEvent);
this.setMainText("세팅");
diff --git a/src/game/lib/flat_button/tab_setting.js b/src/game/lib/flat_button/tab_setting.js
index 123dd3c..6495888 100644
--- a/src/game/lib/flat_button/tab_setting.js
+++ b/src/game/lib/flat_button/tab_setting.js
@@ -9,6 +9,7 @@ function TabSetting(x, y, width, height) {
this.buttonColors = TabSetting.DEFAULT_BUTTON_COLORS;
this.textColors = TabSetting.DEFAULT_TEXT_COLORS;
this.iconColors = TabSetting.DEFAULT_ICON_COLORS;
+ this.activeColors = TabSetting.DEFAULT_ACTIVE_COLORS;
this.fontStyle = TabSetting.DEFAULT_TEXT_FONT;
};
@@ -36,6 +37,14 @@ TabSetting.prototype.setTextColor = function(out, over, down, disabled) {
this.textColors.disabled = disabled;
}
+TabSetting.prototype.setActiveColor = function(out, over, down, disabled) {
+ this.activeColors = { };
+ this.activeColors.out = out;
+ this.activeColors.over = over;
+ this.activeColors.down = down;
+ this.activeColors.disabled = disabled;
+}
+
TabSetting.prototype.setIconColor = function(out, over, down, disabled) {
this.iconColors = { };
this.iconColors.out = out;
@@ -73,6 +82,13 @@ TabSetting.DEFAULT_ICON_COLORS = {
disabled: 0x333333
};
+TabSetting.DEFAULT_ACTIVE_COLORS = {
+ out: MainColor.DARK_CHOCO_HEX,
+ over: MainColor.DARK_CHOCO_HEX,
+ down: MainColor.DARK_CHOCO_HEX,
+ disabled: MainColor.DARK_CHOCO_HEX
+};
+
TabSetting.DEFAULT_TEXT_FONT = {
font: "30px",
boundsAlignH: "center", // left, center. right
diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js
index df60d0a..0a812ed 100644
--- a/src/game/main_menu/main_menu.js
+++ b/src/game/main_menu/main_menu.js
@@ -53,7 +53,7 @@ MainMenu.prototype.create = function() {
graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y);
// graphics.beginFill(MainColor.BLACK_HEX, 1);
graphics.beginFill(MainColor.CHOCO_HEX, 1);
- graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT);
+ graphics.drawRect(0, 0, GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT);
this.appGroupButtons = {};
// this.makeAppGroupButtons();
@@ -190,15 +190,28 @@ MainMenu.prototype.makeAppGroupButtons = function() {
);
this.appGroupButtons.settingButton = settingButton;
- var setting = new TabSetting(200, 40, 100, 80);
- setting.setFontSize(20);
- var mouseAppTab = new BasicTab(
- setting,
+ var mouseAppGroupTab = new AppGroupTab(
(function() { console.log("mouse"); }).bind(this)
);
- mouseAppTab.setMainText("MOUSE");
- mouseAppTab.setShortcutText("마우스");
- this.appGroupButtons.settingButton = mouseAppTab;
+ // var mouseAppTab = new BasicTab(
+ // setting,
+ // (function() { console.log("mouse"); }).bind(this)
+ // );
+ // mouseAppTab.setMainText("MOUSE");
+ // mouseAppTab.setShortcutText("마우스");
+
+ var setting = new TabSetting(150, MainMenu.MAIN_MENU_HEIGHT / 2, 140, MainMenu.MAIN_MENU_HEIGHT);
+ setting.setFontSize(20);
+ setting.x = 290;
+ var typingAppTab = new BasicTab(
+ setting,
+ (function() { console.log("typing"); }).bind(this)
+ );
+ typingAppTab.setMainText("TYPING");
+ typingAppTab.setShortcutText("타이핑");
+ typingAppTab.setActive(false);
+
+ this.appGroupButtons.settingButton = mouseAppGroupTab;
}
@@ -337,4 +350,4 @@ MainMenu.prototype.loadFailed = function(replyJSON) {
}
-MainMenu.MAIN_MENU_HEIGHT = 80;
\ No newline at end of file
+MainMenu.MAIN_MENU_HEIGHT = 70;
\ No newline at end of file
diff --git a/src/web/client/main_menu.html b/src/web/client/main_menu.html
index 5c9e576..6f0f99d 100644
--- a/src/web/client/main_menu.html
+++ b/src/web/client/main_menu.html
@@ -61,6 +61,7 @@
+