Fix: rename ChocoButton to BasicButton

src/game/lib/button/choco_back_button.js

@@ -1,51 +0,0 @@
-ChocoBackButton.prototype = Object.create(ChocoButton.prototype);
-ChocoBackButton.constructor = ChocoBackButton;
-
-function ChocoBackButton(clickEvent) {
-	var setting = new ChocoButtonSetting(40, 40, 60, 60);
-	setting.setStrokeWidth(3);
-	setting.setRound(10);
-	setting.setFont("Nanum Gothic Coding");
-	setting.fontStyle.boundsAlignH = "center";	// left, center. right
-	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-	setting.setStrokeColor(
-		ChocoBackButton.STROKE_COLOR_OUT_HEX,
-		ChocoBackButton.STROKE_COLOR_OVER_HEX,
-		ChocoBackButton.STROKE_COLOR_DOWN_HEX,
-		ChocoBackButton.STROKE_COLOR_DISABLED_HEX
-	);
-	setting.setButtonColor(
-		ChocoBackButton.BUTTON_COLOR_OUT_HEX,
-		ChocoBackButton.BUTTON_COLOR_OVER_HEX,
-		ChocoBackButton.BUTTON_COLOR_DOWN_HEX,
-		ChocoBackButton.BUTTON_COLOR_DISABLED_HEX
-	);
-	setting.setTextColor(
-		ChocoBackButton.TEXT_COLOR_OUT_HEX,
-		ChocoBackButton.TEXT_COLOR_OVER_HEX,
-		ChocoBackButton.TEXT_COLOR_DOWN_HEX,
-		ChocoBackButton.TEXT_COLOR_DISABLED_HEX
-	);
-
-	ChocoButton.call(this, setting, clickEvent);
-
-	this.addIcon("tile_choco");
-	this.setIconSize(15);
-	this.setShortcutText("돌아가기");
-}
-
-
-ChocoBackButton.STROKE_COLOR_OUT_HEX		= 0xAA6666;
-ChocoBackButton.STROKE_COLOR_OVER_HEX		= 0x884444;
-ChocoBackButton.STROKE_COLOR_DOWN_HEX		= 0x884444;
-ChocoBackButton.STROKE_COLOR_DISABLED_HEX	= 0x333333;
-
-ChocoBackButton.BUTTON_COLOR_OUT_HEX		= 0xffdddd;
-ChocoBackButton.BUTTON_COLOR_OVER_HEX		= 0xddaaaa;
-ChocoBackButton.BUTTON_COLOR_DOWN_HEX		= 0xddaaaa;
-ChocoBackButton.BUTTON_COLOR_DISABLED_HEX	= 0x666666;
-
-ChocoBackButton.TEXT_COLOR_OUT_HEX			= "#aa6666";
-ChocoBackButton.TEXT_COLOR_OVER_HEX			= "#884444";
-ChocoBackButton.TEXT_COLOR_DOWN_HEX			= "#884444";
-ChocoBackButton.TEXT_COLOR_DISABLED_HEX		= "#333333";

src/game/lib/button/choco_setting_button.js

@@ -1,55 +0,0 @@
-ChocoSettingButton.prototype = Object.create(ChocoButton.prototype);
-ChocoSettingButton.constructor = ChocoSettingButton;
-
-function ChocoSettingButton(clickEvent) {
-	var setting = new ChocoButtonSetting(980, 40, 60, 60);
-	setting.setStrokeWidth(0);
-	setting.setRound(10);
-	// setting.setFont("Nanum Brush Script");
-	setting.setFont("Nanum Gothic");
-	setting.setFontSize(20);
-	setting.fontStyle.boundsAlignH = "center";	// left, center. right
-	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
-	setting.setStrokeColor(
-		ChocoSettingButton.STROKE_COLOR_OUT_HEX,
-		ChocoSettingButton.STROKE_COLOR_OVER_HEX,
-		ChocoSettingButton.STROKE_COLOR_DOWN_HEX,
-		ChocoSettingButton.STROKE_COLOR_DISABLED_HEX
-	);
-	setting.setButtonColor(
-		ChocoSettingButton.BUTTON_COLOR_OUT_HEX,
-		ChocoSettingButton.BUTTON_COLOR_OVER_HEX,
-		ChocoSettingButton.BUTTON_COLOR_DOWN_HEX,
-		ChocoSettingButton.BUTTON_COLOR_DISABLED_HEX
-	);
-	setting.setTextColor(
-		ChocoSettingButton.TEXT_COLOR_OUT_HEX,
-		ChocoSettingButton.TEXT_COLOR_OVER_HEX,
-		ChocoSettingButton.TEXT_COLOR_DOWN_HEX,
-		ChocoSettingButton.TEXT_COLOR_DISABLED_HEX
-	);
-
-	ChocoButton.call(this, setting, clickEvent);
-
-	this.setMainText("세팅");
-	// this.setMainText("Setting");
-	// this.addIcon("tile_choco");
-	// this.setIconSize(40);
-	this.setShortcutText("세팅");
-	// this.setShortcutText("Setting");
-}
-
-ChocoSettingButton.STROKE_COLOR_OUT_HEX			= MainColor.DARK_CHOCO_HEX;
-ChocoSettingButton.STROKE_COLOR_OVER_HEX		= MainColor.DARK_CHOCO_HEX;
-ChocoSettingButton.STROKE_COLOR_DOWN_HEX		= MainColor.DARK_CHOCO_HEX;
-ChocoSettingButton.STROKE_COLOR_DISABLED_HEX	= MainColor.DARK_CHOCO_HEX;
-
-ChocoSettingButton.BUTTON_COLOR_OUT_HEX			= MainColor.DARK_CHOCO_HEX;
-ChocoSettingButton.BUTTON_COLOR_OVER_HEX		= MainColor.LIGHTER_CHOCO_HEX;
-ChocoSettingButton.BUTTON_COLOR_DOWN_HEX		= MainColor.LIGHT_CHOCO_HEX;
-ChocoSettingButton.BUTTON_COLOR_DISABLED_HEX	= MainColor.BLACK_HEX;
-
-ChocoSettingButton.TEXT_COLOR_OUT_HEX			= MainColor.WHITE_STRING;
-ChocoSettingButton.TEXT_COLOR_OVER_HEX			= MainColor.DARK_CHOCO_STRING;
-ChocoSettingButton.TEXT_COLOR_DOWN_HEX			= MainColor.LIGHTER_CHOCO_STRING;
-ChocoSettingButton.TEXT_COLOR_DISABLED_HEX		= MainColor.GREY_STRING;

src/game/lib/flat_button/back_button.js

@@ -0,0 +1,51 @@
+BackButton.prototype = Object.create(BasicButton.prototype);
+BackButton.constructor = BackButton;
+
+function BackButton(clickEvent) {
+	var setting = new ButtonSetting(40, 40, 60, 60);
+	setting.setStrokeWidth(3);
+	setting.setRound(10);
+	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,
+		BackButton.STROKE_COLOR_DOWN_HEX,
+		BackButton.STROKE_COLOR_DISABLED_HEX
+	);
+	setting.setButtonColor(
+		BackButton.BUTTON_COLOR_OUT_HEX,
+		BackButton.BUTTON_COLOR_OVER_HEX,
+		BackButton.BUTTON_COLOR_DOWN_HEX,
+		BackButton.BUTTON_COLOR_DISABLED_HEX
+	);
+	setting.setTextColor(
+		BackButton.TEXT_COLOR_OUT_HEX,
+		BackButton.TEXT_COLOR_OVER_HEX,
+		BackButton.TEXT_COLOR_DOWN_HEX,
+		BackButton.TEXT_COLOR_DISABLED_HEX
+	);
+
+	BasicButton.call(this, setting, clickEvent);
+
+	this.addIcon("home");
+	this.setIconSize(30);
+	this.setShortcutText("돌아가기");
+}
+
+
+BackButton.STROKE_COLOR_OUT_HEX			= 0xAA6666;
+BackButton.STROKE_COLOR_OVER_HEX		= 0x884444;
+BackButton.STROKE_COLOR_DOWN_HEX		= 0x884444;
+BackButton.STROKE_COLOR_DISABLED_HEX	= 0x333333;
+
+BackButton.BUTTON_COLOR_OUT_HEX			= 0xffdddd;
+BackButton.BUTTON_COLOR_OVER_HEX		= 0xddaaaa;
+BackButton.BUTTON_COLOR_DOWN_HEX		= 0xddaaaa;
+BackButton.BUTTON_COLOR_DISABLED_HEX	= 0x666666;
+
+BackButton.TEXT_COLOR_OUT_HEX			= "#aa6666";
+BackButton.TEXT_COLOR_OVER_HEX			= "#884444";
+BackButton.TEXT_COLOR_DOWN_HEX			= "#884444";
+BackButton.TEXT_COLOR_DISABLED_HEX		= "#333333";

src/game/lib/flat_button/basic_button.js

@@ -1,7 +1,7 @@
-// ChocoButton.prototype = Object.create();
+// BasicButton.prototype = Object.create();
-ChocoButton.constructor = ChocoButton;
+BasicButton.constructor = BasicButton;
 
-function ChocoButton(setting, clickEvent) {
+function BasicButton(setting, clickEvent) {
 	this.setting = setting;
 	this.clickEvent = clickEvent;
 
@@ -31,7 +31,7 @@ function ChocoButton(setting, clickEvent) {
 
 
 
-ChocoButton.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()
@@ -59,7 +59,7 @@ ChocoButton.prototype.makestrokeSprite = function() {	// outter(bigger) round re
 	return strokeSprite;
 }
 
-ChocoButton.prototype.makeButtonSprite = function() {	// inner(smaller) round rect sprite
+BasicButton.prototype.makeButtonSprite = function() {	// inner(smaller) round rect sprite
 	var setting = this.setting;
 	// console.log("strokeWidthPx : " + setting.strokeWidthPx);
 	// console.log("round : " + setting.roundAmount);
@@ -97,14 +97,14 @@ ChocoButton.prototype.makeButtonSprite = function() {	// inner(smaller) round re
 
 
 // icon
-ChocoButton.prototype.addIcon = function(spriteName) {
+BasicButton.prototype.addIcon = function(spriteName) {
 	if(spriteName === null)
 		return;
 
 	if(spriteName.length === 0)
 		return;
 
-	// console.log("addIcon : " + spriteName);
+	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;
@@ -113,36 +113,35 @@ ChocoButton.prototype.addIcon = function(spriteName) {
 	this.buttonSprite.addChild(this.iconSprite);
 
 	this.mainText.text = "";
-
-	this.alignContents();
 	this.mouseOut();
 }
 
-ChocoButton.prototype.setIconSize = function(size) {
+BasicButton.prototype.setIconSize = function(size) {
 	this.setIconWidth(size);
 	this.setIconHeight(size);
 }
 
-ChocoButton.prototype.setIconWidth = function(size) {
+BasicButton.prototype.setIconWidth = function(size) {
 	this.iconSprite.width = size;
 }
 
-ChocoButton.prototype.setIconHeight = function(size) {
+BasicButton.prototype.setIconHeight = function(size) {
 	this.iconSprite.height = size;
+	this.alignContents();
 }
 
 
 // button text
-ChocoButton.prototype.setFont = function(fontName) {
+BasicButton.prototype.setFont = function(fontName) {
 	this.setting.font = fontName;
 }
 
-ChocoButton.prototype.applyLoadedFont = function() {
+BasicButton.prototype.applyLoadedFont = function() {
 	this.mainText.font = this.setting.font;
 	this.shortcutText.font = this.setting.font;
 }
 
-ChocoButton.prototype.makeMainText = function() {
+BasicButton.prototype.makeMainText = function() {
 	var width = this.setting.width / 2;
 	var height = this.setting.height / 2;
 
@@ -153,25 +152,25 @@ ChocoButton.prototype.makeMainText = function() {
 	mainText.anchor.set(0.5);
 	mainText.fontSize = this.setting.fontSize;
 	// mainText.fontWeight = "bolder";
-	mainText.lineSpacing = ChocoButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+	mainText.lineSpacing = ButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
 
 	return mainText;
 }
 
-ChocoButton.prototype.setMainText = function(text) {
+BasicButton.prototype.setMainText = function(text) {
 	this.mainText.text = text;
 	if(this.iconSprite !== null)
 		this.iconSprite = null;
 	this.alignContents();
 }
 
-ChocoButton.prototype.makeShortcutText = function() {
+BasicButton.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 = ChocoButton.SHORTCUT_TEXT_FONTSIZE;
+	shortcutText.fontSize = BasicButton.SHORTCUT_TEXT_FONTSIZE;
 	shortcutText.fontWeight = "normal";
 	// shortcutText.addColor(this.setting.textColors.over, 0);
 	shortcutText.addColor("0xffffff", 0);
@@ -179,12 +178,12 @@ ChocoButton.prototype.makeShortcutText = function() {
 	return shortcutText;
 }
 
-ChocoButton.prototype.setShortcutText = function(text) {
+BasicButton.prototype.setShortcutText = function(text) {
 	this.shortcutText.text = text;
 	this.alignContents();
 }
 
-ChocoButton.prototype.alignContents = function() {
+BasicButton.prototype.alignContents = function() {
 	var mainTextHeight = 0;
 	var iconSpriteHeight = 0;
 	var shortcutTextHeight = 0;
@@ -208,9 +207,7 @@ ChocoButton.prototype.alignContents = function() {
 	var offsetRatio = 7;
 	var offsetMainText = mainTextHeight / offsetRatio;
 	var offsetShortcutText = shortcutTextHeight / offsetRatio;
-	var gap = ChocoButton.SHORTCUT_TEXT_FONTSIZE / 2;
+	var gap = (iconSpriteHeight > 0 ? gap = 0 : BasicButton.SHORTCUT_TEXT_FONTSIZE / 2);
-
-	this.shortcutText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetShortcutText + gap;
 
 	if(shortcutTextHeight === 0) {
 		if(mainTextHeight > 0)
@@ -221,18 +218,16 @@ ChocoButton.prototype.alignContents = function() {
 	else {
 		if(mainTextHeight > 0)
 			this.mainText.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf + offsetMainText;
-		else if(iconSpriteHeight > 0) {
+		else if(iconSpriteHeight > 0)
-			this.iconSprite.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf;
+			this.iconSprite.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf; // - gap / 4;
-			// this.iconSprite.y = this.shortcutText.y / 2;
-			console.log(this.buttonSprite.height);
-			console.log(this.shortcutText.y);
-		}
 	}
+
+	this.shortcutText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetShortcutText + gap;
 }
 
 
 // event handler
-ChocoButton.prototype.setEventMethod = function(target) {
+BasicButton.prototype.setEventMethod = function(target) {
 	target.events.onInputOver.add(
 		(function() { this.mouseOver(); }).bind(this),
 		this
@@ -257,7 +252,7 @@ ChocoButton.prototype.setEventMethod = function(target) {
 	);
 }
 
-ChocoButton.prototype.mouseOut = function() {
+BasicButton.prototype.mouseOut = function() {
 	this.strokeSprite.tint = this.setting.strokeColors.out;
 	this.buttonSprite.tint = this.setting.buttonColors.out;
 
@@ -269,7 +264,7 @@ ChocoButton.prototype.mouseOut = function() {
 		this.shortcutText.fill = this.setting.textColors.out;
 }
 
-ChocoButton.prototype.mouseOver = function() {
+BasicButton.prototype.mouseOver = function() {
 	this.strokeSprite.tint = this.setting.strokeColors.over;
 	this.buttonSprite.tint = this.setting.buttonColors.over;
 
@@ -281,7 +276,7 @@ ChocoButton.prototype.mouseOver = function() {
 		this.shortcutText.fill = this.setting.textColors.over;
 }
 
-ChocoButton.prototype.mouseDown = function() {
+BasicButton.prototype.mouseDown = function() {
 	this.strokeSprite.tint = this.setting.strokeColors.down;
 	this.buttonSprite.tint = this.setting.buttonColors.down;
 
@@ -293,7 +288,7 @@ ChocoButton.prototype.mouseDown = function() {
 		this.shortcutText.fill = this.setting.textColors.down;
 }
 
-ChocoButton.prototype.buttonDisabled = function() {
+BasicButton.prototype.buttonDisabled = function() {
 	this.strokeSprite.tint = this.setting.strokeColors.disabled;
 	this.buttonSprite.tint = this.setting.buttonColors.disabled;
 
@@ -307,15 +302,15 @@ ChocoButton.prototype.buttonDisabled = function() {
 
 
 
-ChocoButton.prototype.getPosX = function() {
+BasicButton.prototype.getPosX = function() {
 	return this.strokeSprite.x + this.setting.width / 2;
 }
 
-ChocoButton.prototype.getPosY = function() {
+BasicButton.prototype.getPosY = function() {
 	return this.strokeSprite.y + y - this.setting.height / 2;
 }
 
-ChocoButton.prototype.move = function(x, y) {
+BasicButton.prototype.move = function(x, y) {
 	this.strokeSprite.x = x - this.setting.width / 2;
 	this.strokeSprite.y = y - this.setting.height / 2;
 
@@ -323,11 +318,11 @@ ChocoButton.prototype.move = function(x, y) {
 	this.buttonSprite.y = y  - this.setting.height / 2 + this.setting.strokeWidthPx;
 }
 
-ChocoButton.prototype.getInputEnabled = function() {
+BasicButton.prototype.getInputEnabled = function() {
 	return this.buttonSprite.inputEnabled;
 }
 
-ChocoButton.prototype.setInputEnabled = function(isEnabled) {
+BasicButton.prototype.setInputEnabled = function(isEnabled) {
 	this.strokeSprite.inputEnabled = isEnabled;
 	this.buttonSprite.inputEnabled = isEnabled;
 
@@ -338,11 +333,11 @@ ChocoButton.prototype.setInputEnabled = function(isEnabled) {
 	}
 }
 
-ChocoButton.prototype.setLineSpacing = function(spacingInPixels) {
+BasicButton.prototype.setLineSpacing = function(spacingInPixels) {
 	this.mainText.lineSpacing = spacingInPixels;
 }
 
-ChocoButton.NONE_ICON			= "";
+BasicButton.NONE_ICON			= "";
-ChocoButton.NONE_BUTTON_TEXT	= "";
+BasicButton.NONE_BUTTON_TEXT	= "";
 
-ChocoButton.SHORTCUT_TEXT_FONTSIZE	= 12;
+BasicButton.SHORTCUT_TEXT_FONTSIZE	= 12;

src/game/lib/flat_button/button_setting.js

@@ -1,4 +1,4 @@
-function ChocoButtonSetting(x, y, width, height) {
+function ButtonSetting(x, y, width, height) {
 	this.x = x;
 	this.y = y;
 	this.width = width;
@@ -8,14 +8,14 @@ function ChocoButtonSetting(x, y, width, height) {
 	this.roundAmount = 0;
 	this.fontSize = 10;
 
-	this.strokeColors = ChocoButtonSetting.DEFAULT_STROKE_COLORS;
+	this.strokeColors = ButtonSetting.DEFAULT_STROKE_COLORS;
-	this.buttonColors = ChocoButtonSetting.DEFAULT_BUTTON_COLORS;
+	this.buttonColors = ButtonSetting.DEFAULT_BUTTON_COLORS;
-	this.textColors = ChocoButtonSetting.DEFAULT_TEXT_COLORS;
+	this.textColors = ButtonSetting.DEFAULT_TEXT_COLORS;
-	this.iconColors = ChocoButtonSetting.DEFAULT_ICON_COLORS;
+	this.iconColors = ButtonSetting.DEFAULT_ICON_COLORS;
-	this.fontStyle = ChocoButtonSetting.DEFAULT_TEXT_FONT;
+	this.fontStyle = ButtonSetting.DEFAULT_TEXT_FONT;
 };
 
-ChocoButtonSetting.prototype.setRound = function(round) {
+ButtonSetting.prototype.setRound = function(round) {
 	if(this.width / 2 > round && this.height / 2 > round) {
 		this.roundAmount = round;
 		return this.roundAmount;
@@ -31,7 +31,7 @@ ChocoButtonSetting.prototype.setRound = function(round) {
 	this.roundAmount = maxRound;
 }
 
-ChocoButtonSetting.prototype.setStrokeWidth = function(width) {
+ButtonSetting.prototype.setStrokeWidth = function(width) {
 	if(this.width / 2 > width && this.height / 2 > width) {
 		this.strokeWidthPx = width;
 		return this.strokeWidthPx;
@@ -47,15 +47,15 @@ ChocoButtonSetting.prototype.setStrokeWidth = function(width) {
 	this.strokeWidthPx = maxWidth;
 }
 
-ChocoButtonSetting.prototype.setFont = function(fontName) {
+ButtonSetting.prototype.setFont = function(fontName) {
 	this.font = fontName;
 }
 
-ChocoButtonSetting.prototype.setFontSize = function(size) {
+ButtonSetting.prototype.setFontSize = function(size) {
 	this.fontSize = size;
 }
 
-ChocoButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) {
+ButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) {
 	this.strokeColors = { };
 	this.strokeColors.out = out;
 	this.strokeColors.over = over;
@@ -63,7 +63,7 @@ ChocoButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled
 	this.strokeColors.disabled = disabled;
 }
 
-ChocoButtonSetting.prototype.setButtonColor = function(out, over, down, disabled) {
+ButtonSetting.prototype.setButtonColor = function(out, over, down, disabled) {
 	this.buttonColors = { };
 	this.buttonColors.out = out;
 	this.buttonColors.over = over;
@@ -71,7 +71,7 @@ ChocoButtonSetting.prototype.setButtonColor = function(out, over, down, disabled
 	this.buttonColors.disabled = disabled;
 }
 
-ChocoButtonSetting.prototype.setTextColor = function(out, over, down, disabled) {
+ButtonSetting.prototype.setTextColor = function(out, over, down, disabled) {
 	this.textColors = { };
 	this.textColors.out = out;
 	this.textColors.over = over;
@@ -79,7 +79,7 @@ ChocoButtonSetting.prototype.setTextColor = function(out, over, down, disabled)
 	this.textColors.disabled = disabled;
 }
 
-ChocoButtonSetting.prototype.setIconColor = function(out, over, down, disabled) {
+ButtonSetting.prototype.setIconColor = function(out, over, down, disabled) {
 	this.iconColors = { };
 	this.iconColors.out = out;
 	this.iconColors.over = over;
@@ -88,35 +88,35 @@ ChocoButtonSetting.prototype.setIconColor = function(out, over, down, disabled)
 }
 
 
-ChocoButtonSetting.DEFAULT_STROKE_COLORS = {
+ButtonSetting.DEFAULT_STROKE_COLORS = {
 	out: 0x666666,
 	over: 0x333333,
 	down: 0x333333,
 	disabled: 0x666666
 };
 
-ChocoButtonSetting.DEFAULT_BUTTON_COLORS = {
+ButtonSetting.DEFAULT_BUTTON_COLORS = {
 	out: 0xffffff,
 	over: 0xddffdd,
 	down: 0xaaffaa,
 	disabled: 0x333333
 };
 
-ChocoButtonSetting.DEFAULT_TEXT_COLORS = {
+ButtonSetting.DEFAULT_TEXT_COLORS = {
 	out: "#000",
 	over: "#333",
 	down: "#666",
 	disabled: "#999"
 };
 
-ChocoButtonSetting.DEFAULT_ICON_COLORS = {
+ButtonSetting.DEFAULT_ICON_COLORS = {
 	out: 0xffffff,
 	over: 0xddffdd,
 	down: 0xaaffaa,
 	disabled: 0x333333
 };
 
-ChocoButtonSetting.DEFAULT_TEXT_FONT = {
+ButtonSetting.DEFAULT_TEXT_FONT = {
 	font: "30px",
 	boundsAlignH: "center",		// left, center. right
 	boundsAlignV: "middle", 	// top, middle, bottom
@@ -124,5 +124,5 @@ ChocoButtonSetting.DEFAULT_TEXT_FONT = {
 	align: "center"
 };
 
-ChocoButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10;	// in pixel
+ButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10;	// in pixel
-ChocoButtonSetting.DEFAULT_STROKE_WIDTH_PX		= 5;	// in pixel
+ButtonSetting.DEFAULT_STROKE_WIDTH_PX		= 5;	// in pixel

src/game/lib/flat_button/setting_button.js

@@ -0,0 +1,55 @@
+SettingButton.prototype = Object.create(BasicButton.prototype);
+SettingButton.constructor = SettingButton;
+
+function SettingButton(clickEvent) {
+	var setting = new ButtonSetting(980, 40, 60, 60);
+	setting.setStrokeWidth(0);
+	setting.setRound(10);
+	// setting.setFont("Nanum Brush Script");
+	setting.setFont("Nanum Gothic");
+	setting.setFontSize(20);
+	setting.fontStyle.boundsAlignH = "center";	// left, center. right
+	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+	setting.setStrokeColor(
+		SettingButton.STROKE_COLOR_OUT_HEX,
+		SettingButton.STROKE_COLOR_OVER_HEX,
+		SettingButton.STROKE_COLOR_DOWN_HEX,
+		SettingButton.STROKE_COLOR_DISABLED_HEX
+	);
+	setting.setButtonColor(
+		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,
+		SettingButton.TEXT_COLOR_DOWN_HEX,
+		SettingButton.TEXT_COLOR_DISABLED_HEX
+	);
+
+	BasicButton.call(this, setting, clickEvent);
+
+	this.setMainText("세팅");
+	// this.setMainText("Setting");
+	// this.addIcon("tile_choco");
+	// this.setIconSize(40);
+	this.setShortcutText("세팅");
+	// this.setShortcutText("Setting");
+}
+
+SettingButton.STROKE_COLOR_OUT_HEX			= MainColor.DARK_CHOCO_HEX;
+SettingButton.STROKE_COLOR_OVER_HEX			= MainColor.DARK_CHOCO_HEX;
+SettingButton.STROKE_COLOR_DOWN_HEX			= MainColor.DARK_CHOCO_HEX;
+SettingButton.STROKE_COLOR_DISABLED_HEX		= MainColor.DARK_CHOCO_HEX;
+
+SettingButton.BUTTON_COLOR_OUT_HEX			= MainColor.DARK_CHOCO_HEX;
+SettingButton.BUTTON_COLOR_OVER_HEX			= MainColor.LIGHTER_CHOCO_HEX;
+SettingButton.BUTTON_COLOR_DOWN_HEX			= MainColor.LIGHT_CHOCO_HEX;
+SettingButton.BUTTON_COLOR_DISABLED_HEX		= MainColor.BLACK_HEX;
+
+SettingButton.TEXT_COLOR_OUT_HEX			= MainColor.WHITE_STRING;
+SettingButton.TEXT_COLOR_OVER_HEX			= MainColor.DARK_CHOCO_STRING;
+SettingButton.TEXT_COLOR_DOWN_HEX			= MainColor.LIGHTER_CHOCO_STRING;
+SettingButton.TEXT_COLOR_DISABLED_HEX		= MainColor.GREY_STRING;

src/game/main_menu/main_menu.js

@@ -6,6 +6,7 @@ function MainMenu() {
 
 MainMenu.prototype.preload = function() {
 	game.load.image('tile_choco',	'../../../resources/image/background/tile_choco.png');
+	game.load.image('home',	'../../../resources/image/icon/home.png');
 	game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');
 }
 
@@ -79,7 +80,7 @@ MainMenu.prototype.fontLoaded = function() {
 	this.makeAppGroupButtons();
 
 	// console.log(this.appGroupButtons);
-	// this.appGroupButtons.backButton.applyLoadedFont();
+	this.appGroupButtons.backButton.applyLoadedFont();
 	this.appGroupButtons.settingButton.applyLoadedFont();
 
 
@@ -183,7 +184,7 @@ MainMenu.prototype.makeAppGroupButtons = function() {
 }
 
 MainMenu.prototype.makeQuitButton = function() {
-	var setting = new ChocoButtonSetting(980, 40, 60, 60, 5, 10);
+	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)
@@ -191,17 +192,16 @@ MainMenu.prototype.makeQuitButton = function() {
 	// quitButton.addIcon("tile_choco");
 	// quitButton.setIconSize(30);
 
-	var settingButton = new ChocoSettingButton(
+	var backButton = new BackButton(
+		(function() { console.log("back"); }).bind(this)
+	);
+
+	var settingButton = new SettingButton(
 		(function() { console.log("setting"); }).bind(this)
 	);
-	// var backButton = new ChocoBackButton(
-	// 	(function() { console.log("back"); }).bind(this)
-	// );
-	// backButton.addIcon("tile_choco");
-	// backButton.setIconSize(30);
 
 	this.appGroupButtons.settingButton = settingButton;
-	// this.appGroupButtons.backButton = backButton;
+	this.appGroupButtons.backButton = backButton;
 }
 
 MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) {

src/web/client/main_menu.html

@@ -54,10 +54,10 @@
 		<script src="../../game/lib/db_connect_manager.js"></script>
 		<script src="../../game/lib/db_service.js"></script>
 
-		<script src="../../game/lib/button/choco_button_setting.js"></script>
+		<script src="../../game/lib/flat_button/button_setting.js"></script>
-		<script src="../../game/lib/button/choco_button.js"></script>
+		<script src="../../game/lib/flat_button/basic_button.js"></script>
-		<script src="../../game/lib/button/choco_back_button.js"></script>
+		<script src="../../game/lib/flat_button/back_button.js"></script>
-		<script src="../../game/lib/button/choco_setting_button.js"></script>
+		<script src="../../game/lib/flat_button/setting_button.js"></script>
 
 		<!-- source files -->
 		<script src="../../game/main_menu/main_menu.js"></script>