diff --git a/src/game/lib/flat_button/back_button.js b/src/game/lib/flat_button/back_button.js
index d263ffe..ba9e61d 100644
--- a/src/game/lib/flat_button/back_button.js
+++ b/src/game/lib/flat_button/back_button.js
@@ -20,6 +20,12 @@ function BackButton(clickEvent) {
BackButton.BUTTON_COLOR_DOWN_HEX,
BackButton.BUTTON_COLOR_DISABLED_HEX
);
+ setting.setIconColor(
+ BackButton.STROKE_COLOR_OUT_HEX,
+ BackButton.STROKE_COLOR_OVER_HEX,
+ BackButton.STROKE_COLOR_DOWN_HEX,
+ BackButton.STROKE_COLOR_DISABLED_HEX
+ );
setting.setTextColor(
BackButton.TEXT_COLOR_OUT_HEX,
BackButton.TEXT_COLOR_OVER_HEX,
diff --git a/src/game/lib/flat_button/basic_button.js b/src/game/lib/flat_button/basic_button.js
index 8a7e149..d78b24c 100644
--- a/src/game/lib/flat_button/basic_button.js
+++ b/src/game/lib/flat_button/basic_button.js
@@ -6,7 +6,7 @@ function BasicButton(setting, clickEvent) {
this.clickEvent = clickEvent;
// button sprite
- this.strokeSprite = this.makestrokeSprite();
+ this.strokeSprite = this.makeStrokeSprite();
this.setEventMethod(this.strokeSprite);
this.buttonSprite = this.makeButtonSprite();
@@ -31,7 +31,7 @@ function BasicButton(setting, clickEvent) {
-BasicButton.prototype.makestrokeSprite = function() { // outter(bigger) round rect sprite
+BasicButton.prototype.makeStrokeSprite = function() { // outter(bigger) round rect sprite
var texture = null;
if(this.setting.roundAmount === 0) {
texture = new Phaser.Graphics()
@@ -104,7 +104,6 @@ BasicButton.prototype.addIcon = function(spriteName) {
if(spriteName.length === 0)
return;
- console.log("addIcon : " + spriteName);
this.iconSprite = game.add.sprite(0, 0, spriteName);
this.iconSprite.x = this.buttonSprite.width / 2;
this.iconSprite.y = this.buttonSprite.height / 2;
diff --git a/src/game/lib/flat_button/basic_tab.js b/src/game/lib/flat_button/basic_tab.js
new file mode 100644
index 0000000..478ea75
--- /dev/null
+++ b/src/game/lib/flat_button/basic_tab.js
@@ -0,0 +1,293 @@
+// BasicTab.prototype = Object.create();
+BasicTab.constructor = BasicTab;
+
+function BasicTab(setting, clickEvent) {
+ this.setting = setting;
+ this.clickEvent = clickEvent;
+
+ // button sprite
+ this.buttonSprite = this.makeButtonSprite();
+ this.setEventMethod(this.buttonSprite);
+
+
+ this.iconSprite = null;
+ this.mainText = null;
+ this.shortcutText = null;
+
+
+ this.mainText = this.makeMainText();
+ this.buttonSprite.addChild(this.mainText);
+
+ this.shortcutText = this.makeShortcutText();
+ this.buttonSprite.addChild(this.shortcutText);
+
+ this.applyLoadedFont();
+
+ this.mouseOut();
+}
+
+
+
+BasicTab.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite
+ var setting = this.setting;
+ // console.log("strokeWidthPx : " + setting.strokeWidthPx);
+ // console.log("round : " + setting.roundAmount);
+
+ var btnWidth = setting.width;
+ var btnHeight = setting.height;
+
+ var texture = null;
+ texture = new Phaser.Graphics()
+ .beginFill(0xffffff)
+ .drawRect(0, 0, btnWidth, btnHeight)
+ .endFill()
+ .generateTexture();
+
+ var posX = setting.x - btnWidth / 2;
+ var posY = setting.y - btnHeight / 2;
+ var buttonSprite = game.add.sprite(posX, posY, texture);
+
+ // buttonSprite.anchor.setTo(0.5, 0.5);
+ buttonSprite.inputEnabled = true;
+
+ return buttonSprite;
+}
+
+
+// icon
+BasicTab.prototype.addIcon = function(spriteName) {
+ if(spriteName === null)
+ return;
+
+ if(spriteName.length === 0)
+ return;
+
+ console.log("addIcon : " + spriteName);
+ this.iconSprite = game.add.sprite(0, 0, spriteName);
+ this.iconSprite.x = this.buttonSprite.width / 2;
+ this.iconSprite.y = this.buttonSprite.height / 2;
+ this.iconSprite.anchor.setTo(0.5, 0.5);
+ this.setIconSize(40);
+ this.buttonSprite.addChild(this.iconSprite);
+
+ this.mainText.text = "";
+ this.mouseOut();
+}
+
+BasicTab.prototype.setIconSize = function(size) {
+ this.setIconWidth(size);
+ this.setIconHeight(size);
+}
+
+BasicTab.prototype.setIconWidth = function(size) {
+ this.iconSprite.width = size;
+}
+
+BasicTab.prototype.setIconHeight = function(size) {
+ this.iconSprite.height = size;
+ this.alignContents();
+}
+
+
+// button text
+BasicTab.prototype.setFont = function(fontName) {
+ this.setting.font = fontName;
+}
+
+BasicTab.prototype.applyLoadedFont = function() {
+ this.mainText.font = this.setting.font;
+ this.shortcutText.font = this.setting.font;
+}
+
+BasicTab.prototype.makeMainText = function() {
+ var width = this.setting.width / 2;
+ var height = this.setting.height / 2;
+
+ // var mainText = game.add.text(0, 0, textContent, this.setting.fontStyle)
+ // .setTextBounds(0, 0, width, this.setting.height);
+
+ var mainText = game.add.text(width, height, "");
+ mainText.anchor.set(0.5);
+ mainText.fontSize = this.setting.fontSize;
+ // mainText.fontWeight = "bolder";
+ mainText.lineSpacing = TabSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+
+ return mainText;
+}
+
+BasicTab.prototype.setMainText = function(text) {
+ this.mainText.text = text;
+ if(this.iconSprite !== null)
+ this.iconSprite = null;
+ this.alignContents();
+}
+
+BasicTab.prototype.makeShortcutText = function() {
+ var posX = this.buttonSprite.width / 2;
+ var posY = this.buttonSprite.height / 2;
+ var shortcutText = game.add.text(posX, posY, "");
+ shortcutText.anchor.set(0.5);
+
+ shortcutText.fontSize = BasicTab.SHORTCUT_TEXT_FONTSIZE;
+ shortcutText.fontWeight = "normal";
+ // shortcutText.addColor(this.setting.textColors.over, 0);
+ shortcutText.addColor("0xffffff", 0);
+
+ return shortcutText;
+}
+
+BasicTab.prototype.setShortcutText = function(text) {
+ this.shortcutText.text = text;
+ this.alignContents();
+}
+
+BasicTab.prototype.alignContents = function() {
+ var mainTextHeight = 0;
+ var iconSpriteHeight = 0;
+ var shortcutTextHeight = 0;
+
+ if(this.mainText.text.length > 0)
+ mainTextHeight = this.mainText.fontSize;
+
+ if (this.iconSprite !== null)
+ iconSpriteHeight = this.iconSprite.height;
+
+ if(this.shortcutText !== null && this.shortcutText.text.length > 0)
+ shortcutTextHeight = this.shortcutText.fontSize;
+
+ var mainContentHeightHalf = 0;
+ if(mainTextHeight > 0)
+ mainContentHeightHalf = mainTextHeight / 2;
+ else if(iconSpriteHeight > 0)
+ mainContentHeightHalf = iconSpriteHeight / 2;
+ var shortcutTextHeightHalf = shortcutTextHeight / 2;
+
+ var offsetRatio = 7;
+ var offsetMainText = mainTextHeight / offsetRatio;
+ var offsetShortcutText = shortcutTextHeight / offsetRatio;
+ var gap = (iconSpriteHeight > 0 ? gap = 0 : BasicTab.SHORTCUT_TEXT_FONTSIZE / 2);
+
+ if(shortcutTextHeight === 0) {
+ if(mainTextHeight > 0)
+ this.mainText.y = this.buttonSprite.height / 2 + offsetMainText;
+ else if(iconSpriteHeight > 0)
+ this.iconSprite.y = this.buttonSprite.height / 2;
+ }
+ else {
+ if(mainTextHeight > 0)
+ this.mainText.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf + offsetMainText;
+ else if(iconSpriteHeight > 0)
+ this.iconSprite.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf; // - gap / 4;
+ }
+
+ this.shortcutText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetShortcutText + gap;
+}
+
+
+// event handler
+BasicTab.prototype.setEventMethod = function(target) {
+ target.events.onInputOver.add(
+ (function() { this.mouseOver(); }).bind(this),
+ this
+ );
+ target.events.onInputOut.add(
+ (function() { this.mouseOut(); }).bind(this),
+ this
+ );
+ target.events.onInputDown.add(
+ (function() {
+ this.mouseDown();
+
+ if(this.clickEvent) {
+ this.clickEvent();
+ }
+ }).bind(this),
+ this
+ );
+ target.events.onInputUp.add(
+ (function() { this.mouseOver(); }).bind(this),
+ this
+ );
+}
+
+BasicTab.prototype.mouseOut = function() {
+ this.buttonSprite.tint = this.setting.buttonColors.out;
+
+ if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
+ this.iconSprite.tint = this.setting.iconColors.out;
+
+ this.mainText.fill = this.setting.textColors.out;
+ if(this.shortcutText !== undefined)
+ this.shortcutText.fill = this.setting.textColors.out;
+}
+
+BasicTab.prototype.mouseOver = function() {
+ this.buttonSprite.tint = this.setting.buttonColors.over;
+
+ if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
+ this.iconSprite.tint = this.setting.iconColors.over;
+
+ this.mainText.fill = this.setting.textColors.over;
+ if(this.shortcutText !== undefined)
+ this.shortcutText.fill = this.setting.textColors.over;
+}
+
+BasicTab.prototype.mouseDown = function() {
+ this.buttonSprite.tint = this.setting.buttonColors.down;
+
+ if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
+ this.iconSprite.tint = this.setting.iconColors.down;
+
+ this.mainText.fill = this.setting.textColors.down;
+ if(this.shortcutText !== undefined)
+ this.shortcutText.fill = this.setting.textColors.down;
+}
+
+BasicTab.prototype.buttonDisabled = function() {
+ this.buttonSprite.tint = this.setting.buttonColors.disabled;
+
+ if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
+ this.iconSprite.tint = this.setting.iconColors.disabled;
+
+ this.mainText.fill = this.setting.textColors.disabled;
+ if(typeof this.shortcutText !== undefined)
+ this.shortcutText.fill = this.setting.textColors.disabled;
+}
+
+
+
+BasicTab.prototype.getPosX = function() {
+ return this.buttonSprite.x;
+}
+
+BasicTab.prototype.getPosY = function() {
+ return this.buttonSprite.y;
+}
+
+BasicTab.prototype.move = function(x, y) {
+ this.buttonSprite.x = x - this.setting.width / 2;
+ this.buttonSprite.y = y - this.setting.height / 2;
+}
+
+BasicTab.prototype.getInputEnabled = function() {
+ return this.buttonSprite.inputEnabled;
+}
+
+BasicTab.prototype.setInputEnabled = function(isEnabled) {
+ this.buttonSprite.inputEnabled = isEnabled;
+
+ if(isEnabled === true) {
+ this.mouseOut();
+ } else {
+ this.buttonDisabled();
+ }
+}
+
+BasicTab.prototype.setLineSpacing = function(spacingInPixels) {
+ this.mainText.lineSpacing = spacingInPixels;
+}
+
+BasicTab.NONE_ICON = "";
+BasicTab.NONE_BUTTON_TEXT = "";
+
+BasicTab.SHORTCUT_TEXT_FONTSIZE = 12;
\ No newline at end of file
diff --git a/src/game/lib/flat_button/setting_button.js b/src/game/lib/flat_button/setting_button.js
index 1177ff3..2ef2653 100644
--- a/src/game/lib/flat_button/setting_button.js
+++ b/src/game/lib/flat_button/setting_button.js
@@ -22,6 +22,12 @@ function SettingButton(clickEvent) {
SettingButton.BUTTON_COLOR_DOWN_HEX,
SettingButton.BUTTON_COLOR_DISABLED_HEX
);
+ setting.setIconColor(
+ SettingButton.BUTTON_COLOR_OUT_HEX,
+ SettingButton.BUTTON_COLOR_OVER_HEX,
+ SettingButton.BUTTON_COLOR_DOWN_HEX,
+ SettingButton.BUTTON_COLOR_DISABLED_HEX
+ );
setting.setTextColor(
SettingButton.TEXT_COLOR_OUT_HEX,
SettingButton.TEXT_COLOR_OVER_HEX,
diff --git a/src/game/lib/flat_button/tab_setting.js b/src/game/lib/flat_button/tab_setting.js
new file mode 100644
index 0000000..123dd3c
--- /dev/null
+++ b/src/game/lib/flat_button/tab_setting.js
@@ -0,0 +1,84 @@
+function TabSetting(x, y, width, height) {
+ this.x = x;
+ this.y = y;
+ this.width = width;
+ this.height = height;
+
+ this.fontSize = 10;
+
+ this.buttonColors = TabSetting.DEFAULT_BUTTON_COLORS;
+ this.textColors = TabSetting.DEFAULT_TEXT_COLORS;
+ this.iconColors = TabSetting.DEFAULT_ICON_COLORS;
+ this.fontStyle = TabSetting.DEFAULT_TEXT_FONT;
+};
+
+TabSetting.prototype.setFont = function(fontName) {
+ this.font = fontName;
+}
+
+TabSetting.prototype.setFontSize = function(size) {
+ this.fontSize = size;
+}
+
+TabSetting.prototype.setButtonColor = function(out, over, down, disabled) {
+ this.buttonColors = { };
+ this.buttonColors.out = out;
+ this.buttonColors.over = over;
+ this.buttonColors.down = down;
+ this.buttonColors.disabled = disabled;
+}
+
+TabSetting.prototype.setTextColor = function(out, over, down, disabled) {
+ this.textColors = { };
+ this.textColors.out = out;
+ this.textColors.over = over;
+ this.textColors.down = down;
+ this.textColors.disabled = disabled;
+}
+
+TabSetting.prototype.setIconColor = function(out, over, down, disabled) {
+ this.iconColors = { };
+ this.iconColors.out = out;
+ this.iconColors.over = over;
+ this.iconColors.down = down;
+ this.iconColors.disabled = disabled;
+}
+
+
+TabSetting.DEFAULT_STROKE_COLORS = {
+ out: 0x666666,
+ over: 0x333333,
+ down: 0x333333,
+ disabled: 0x666666
+};
+
+TabSetting.DEFAULT_BUTTON_COLORS = {
+ out: 0xffffff,
+ over: 0xddffdd,
+ down: 0xaaffaa,
+ disabled: 0x333333
+};
+
+TabSetting.DEFAULT_TEXT_COLORS = {
+ out: "#000",
+ over: "#333",
+ down: "#666",
+ disabled: "#999"
+};
+
+TabSetting.DEFAULT_ICON_COLORS = {
+ out: 0xffffff,
+ over: 0xddffdd,
+ down: 0xaaffaa,
+ disabled: 0x333333
+};
+
+TabSetting.DEFAULT_TEXT_FONT = {
+ font: "30px",
+ boundsAlignH: "center", // left, center. right
+ boundsAlignV: "middle", // top, middle, bottom
+ fill: "#fff",
+ align: "center"
+};
+
+TabSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel
\ No newline at end of file
diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js
index 1d858e7..df60d0a 100644
--- a/src/game/main_menu/main_menu.js
+++ b/src/game/main_menu/main_menu.js
@@ -180,30 +180,28 @@ MainMenu.prototype.hasApp = function(appID, appList) {
}
MainMenu.prototype.makeAppGroupButtons = function() {
- this.makeQuitButton();
-}
-
-MainMenu.prototype.makeQuitButton = function() {
- var setting = new ButtonSetting(980, 40, 60, 60, 5, 10);
- // var quitButton = new ChocoButton(
- // setting, // choco button setting,
- // (function() { /*this.back();*/ console.log("quit"); }).bind(this)
- // );
- // quitButton.addIcon("tile_choco");
- // quitButton.setIconSize(30);
-
var backButton = new BackButton(
(function() { console.log("back"); }).bind(this)
);
+ this.appGroupButtons.backButton = backButton;
var settingButton = new SettingButton(
(function() { console.log("setting"); }).bind(this)
);
-
this.appGroupButtons.settingButton = settingButton;
- this.appGroupButtons.backButton = backButton;
+
+ var setting = new TabSetting(200, 40, 100, 80);
+ setting.setFontSize(20);
+ var mouseAppTab = new BasicTab(
+ setting,
+ (function() { console.log("mouse"); }).bind(this)
+ );
+ mouseAppTab.setMainText("MOUSE");
+ mouseAppTab.setShortcutText("마우스");
+ this.appGroupButtons.settingButton = mouseAppTab;
}
+
MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) {
// console.log(appList);
diff --git a/src/web/client/main_menu.html b/src/web/client/main_menu.html
index 780c397..5c9e576 100644
--- a/src/web/client/main_menu.html
+++ b/src/web/client/main_menu.html
@@ -59,6 +59,9 @@
+
+
+