Fix: revise ChocoButton

src/game/lib/button/choco_button.js

@@ -5,64 +5,46 @@ function ChocoButton(setting, clickEvent) {
 	this.setting = setting;
 	this.clickEvent = clickEvent;
 
+	// button sprite
+	this.buttonStrokeSprite = this.makeButtonStrokeSprite();
+	this.setEventMethod(this.buttonStrokeSprite);
+
+	this.buttonSprite = this.makeButtonSprite();
+	this.setEventMethod(this.buttonSprite);
+
+	// button icon sprite
 	this.icon = null;
-	this.mainText = null;
+	this.buttonIconSprite = null;
-	this.shortcutText = null;
-
-	this.buttonStroke = this.makeButtonStroke();
-	// this.buttonStroke.anchor.setTo(0.5, 0.5);
-	this.buttonStroke.inputEnabled = true;
-	this.setEventMethod(this.buttonStroke);
-
-	this.button = this.makeButtonSprite();
-
-	// this.button.anchor.setTo(0.5, 0.5);
-	this.button.inputEnabled = true;
-	this.setEventMethod(this.button);
-
 
+	// button text
 	this.mainText = this.makeText("");
-	this.button.addChild(this.mainText);
+	this.buttonSprite.addChild(this.mainText);
 
 	this.shortcutText = this.makeShortcutText();
-	this.button.addChild(this.shortcutText);
+	this.buttonSprite.addChild(this.shortcutText);
 
 	this.mouseOut();
 }
 
-ChocoButton.prototype.addIcon = function(spriteName) {
-	if(spriteName != null && spriteName.length > 0) {
-		this.icon = this.makeIcon(spriteName);
-		this.setIcon(this.icon);
-	}
-}
 
 
-ChocoButton.prototype.setEventMethod = function(target) {
+ChocoButton.prototype.makeButtonStrokeSprite = function() {	// outter(bigger) round rect sprite
-	target.events.onInputOver.add(function() { this.mouseOver(); }, this);
+	var texture = new Phaser.Graphics()
-	target.events.onInputOut.add(function() { this.mouseOut(); }, this);
-	target.events.onInputDown.add(function() {
-		this.mouseDown();
-
-		if(this.clickEvent) {
-			this.clickEvent();
-		}
-	}, this);
-	target.events.onInputUp.add(function() { this.mouseOver(); }, this);
-}
-
-ChocoButton.prototype.makeButtonStroke = function() {	// outter(bigger) round rect sprite
-	var btnTexture = new Phaser.Graphics()
 		.beginFill(0xffffff)
 		.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
 		.endFill()
 		.generateTexture();
 
-	return game.add.sprite(
+	var buttonStrokeSprite = game.add.sprite(
 		this.setting.x - this.setting.width / 2,
 		this.setting.y - this.setting.height / 2,
-		btnTexture
+		texture
 	);
+
+	// buttonStrokeSprite.anchor.setTo(0.5, 0.5);
+	buttonStrokeSprite.inputEnabled = true;
+
+	return buttonStrokeSprite;
 }
 
 ChocoButton.prototype.makeButtonSprite = function() {	// inner(smaller) round rect sprite
@@ -70,26 +52,37 @@ ChocoButton.prototype.makeButtonSprite = function() {	// inner(smaller) round re
 	var height = this.setting.height - this.setting.strokeWidthPx * 2;
 	var innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5);
 
-	var btnTexture = new Phaser.Graphics()
+	var texture = new Phaser.Graphics()
 		.beginFill(0xffffff)
 		.drawRoundedRect(this.setting.strokeWidthPx, this.setting.strokeWidthPx, width, height, innerRoundAmount)
 		.endFill()
 		.generateTexture();
 
-	// return game.add.sprite(0, 0, btnTexture);
+	var buttonSprite = game.add.sprite(
-	return game.add.sprite(
 		this.setting.x - this.setting.width / 2 + this.setting.strokeWidthPx,
 		this.setting.y - this.setting.height / 2 + this.setting.strokeWidthPx,
-		btnTexture
+		texture
 	);
+
+	// buttonSprite.anchor.setTo(0.5, 0.5);
+	buttonSprite.inputEnabled = true;
+
+	return buttonSprite;
 }
 
-ChocoButton.prototype.makeIcon = function(iconName) {
-	var icon = game.add.sprite(0, 0, iconName);
-	icon.width = 40;
-	icon.height = 40;
 
-	return icon;
+// icon
+ChocoButton.prototype.addIcon = function(spriteName) {
+	if(spriteName != null && spriteName.length > 0) {
+		this.buttonIconSprite = game.add.sprite(0, 0, spriteName);
+		this.buttonIconSprite.x = this.buttonSprite.width / 2;
+		this.buttonIconSprite.y = this.buttonSprite.height / 2;
+		this.buttonIconSprite.anchor.setTo(0.5, 0.5);
+		this.setIconSize(40);
+		this.buttonSprite.addChild(this.buttonIconSprite);
+
+		this.mouseOut();
+	}
 }
 
 ChocoButton.prototype.setIconSize = function(size) {
@@ -98,13 +91,15 @@ ChocoButton.prototype.setIconSize = function(size) {
 }
 
 ChocoButton.prototype.setIconWidth = function(size) {
-	this.buttonIcon.width = size;
+	this.buttonIconSprite.width = size;
 }
 
 ChocoButton.prototype.setIconHeight = function(size) {
-	this.buttonIcon.height = size;
+	this.buttonIconSprite.height = size;
 }
 
+
+// button text
 ChocoButton.prototype.makeText = function(textContent) {
 	var width = this.setting.width / 2 - this.setting.strokeWidthPx;
 	var height = this.setting.height / 2;
@@ -120,101 +115,123 @@ ChocoButton.prototype.makeText = function(textContent) {
 }
 
 ChocoButton.prototype.setIcon = function(icon) {
-	this.buttonIcon = this.button.addChild(icon);
-	this.buttonIcon.x = this.button.width / 2;
-	this.buttonIcon.y = this.button.height / 2;
-	this.buttonIcon.anchor.setTo(0.5, 0.5);
-
-	this.mouseOut();
 }
 
 ChocoButton.prototype.makeShortcutText = function() {
-	var shortcutText = game.add.text(this.button.width / 2, this.button.height * 9 / 10, "");
+	var shortcutText = game.add.text(this.buttonSprite.width / 2, this.buttonSprite.height * 9 / 10, "");
 	shortcutText.anchor.set(0.5);
 
-	shortcutText.fontSize = this.button.height * 2 / 10;
+	shortcutText.fontSize = this.buttonSprite.height * 2 / 10;
 	// shortcutText.addColor(this.setting.textColors.over, 0);
 	shortcutText.addColor("0xffffff", 0);
 
 	return shortcutText;
 }
 
-ChocoButton.prototype.addShortcutText = function(text) {
+ChocoButton.prototype.setShortcutText = function(text) {
-	var scText = "[ " + text + " ]";
+	this.shortcutText.text = "[ " + text + " ]";
-	this.shortcutText.text = scText;
-
 }
 
 
+// event handler
+ChocoButton.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
+	);
+}
+
 ChocoButton.prototype.mouseOut = function() {
+	this.buttonStrokeSprite.tint = this.setting.strokeColors.out;
+	this.buttonSprite.tint = this.setting.buttonColors.out;
+
+	if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null))
+		this.buttonIconSprite.tint = this.setting.iconColors.out;
+
 	this.mainText.fill = this.setting.textColors.out;
-	if(this.shortcutText != undefined)
+	if(this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.over;
-	this.buttonStroke.tint = this.setting.strokeColors.out;
-	this.button.tint = this.setting.buttonColors.out;
-	if(typeof this.buttonIcon !== "undefined") {
-		this.buttonIcon.tint = this.setting.iconColors.out;
-	}
 }
 
 ChocoButton.prototype.mouseOver = function() {
+	this.buttonStrokeSprite.tint = this.setting.strokeColors.over;
+	this.buttonSprite.tint = this.setting.buttonColors.over;
+
+	if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null))
+		this.buttonIconSprite.tint = this.setting.iconColors.over;
+
 	this.mainText.fill = this.setting.textColors.over;
-	if(this.shortcutText != undefined)
+	if(this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.over;
-	this.buttonStroke.tint = this.setting.strokeColors.over;
-	this.button.tint = this.setting.buttonColors.over;
-	if(typeof this.buttonIcon !== "undefined") {
-		this.buttonIcon.tint = this.setting.iconColors.over;
-	}
 }
 
 ChocoButton.prototype.mouseDown = function() {
+	this.buttonStrokeSprite.tint = this.setting.strokeColors.down;
+	this.buttonSprite.tint = this.setting.buttonColors.down;
+
+	if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null))
+		this.buttonIconSprite.tint = this.setting.iconColors.down;
+
 	this.mainText.fill = this.setting.textColors.down;
-	if(this.shortcutText != undefined)
+	if(this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.over;
-	this.buttonStroke.tint = this.setting.strokeColors.down;
-	this.button.tint = this.setting.buttonColors.down;
-	if(typeof this.buttonIcon !== "undefined") {
-		this.buttonIcon.tint = this.setting.iconColors.down;
-	}
 }
 
 ChocoButton.prototype.buttonDisabled = function() {
+	this.buttonStrokeSprite.tint = this.setting.strokeColors.disabled;
+	this.buttonSprite.tint = this.setting.buttonColors.disabled;
+
+	if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null))
+		this.buttonIconSprite.tint = this.setting.iconColors.disabled;
+
 	this.mainText.fill = this.setting.textColors.disabled;
-	if(this.shortcutText != undefined)
+	if(typeof this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.disabled;
-	this.buttonStroke.tint = this.setting.strokeColors.disabled;
-	this.button.tint = this.setting.buttonColors.disabled;
-	if(typeof this.buttonIcon !== "undefined") {
-		this.buttonIcon.tint = this.setting.iconColors.disabled;
-	}
 }
 
 
 
 ChocoButton.prototype.getPosX = function() {
-	return this.buttonStroke.x + this.setting.width / 2;
+	return this.buttonStrokeSprite.x + this.setting.width / 2;
 }
 
 ChocoButton.prototype.getPosY = function() {
-	return this.buttonStroke.y + y - this.setting.height / 2;
+	return this.buttonStrokeSprite.y + y - this.setting.height / 2;
 }
 
 ChocoButton.prototype.move = function(x, y) {
-	this.buttonStroke.x = x - this.setting.width / 2;
+	this.buttonStrokeSprite.x = x - this.setting.width / 2;
-	this.buttonStroke.y = y - this.setting.height / 2;
+	this.buttonStrokeSprite.y = y - this.setting.height / 2;
 
-	this.button.x = x  - this.setting.width / 2 + this.setting.strokeWidthPx;
+	this.buttonSprite.x = x  - this.setting.width / 2 + this.setting.strokeWidthPx;
-	this.button.y = y  - this.setting.height / 2 + this.setting.strokeWidthPx;
+	this.buttonSprite.y = y  - this.setting.height / 2 + this.setting.strokeWidthPx;
 }
 
 ChocoButton.prototype.getInputEnabled = function() {
-	return this.button.inputEnabled;
+	return this.buttonSprite.inputEnabled;
 }
 
 ChocoButton.prototype.setInputEnabled = function(isEnabled) {
-	this.buttonStroke.inputEnabled = isEnabled;
+	this.buttonStrokeSprite.inputEnabled = isEnabled;
-	this.button.inputEnabled = isEnabled;
+	this.buttonSprite.inputEnabled = isEnabled;
 
 	if(isEnabled === true) {
 		this.mouseOut();

src/game/main_menu/main_menu.js

@@ -178,16 +178,13 @@ MainMenu.prototype.makeAppGroupButtons = function() {
 }
 
 MainMenu.prototype.makeQuitButton = function() {
-	var setting = new ChocoButtonSetting(1000, 40, 60, 60, 5);
+	var setting = new ChocoButtonSetting(980, 40, 60, 60, 5);
 	var quitButton = new ChocoButton(
 		setting,	// choco button setting,
-		(function() {
+		(function() { this.back(); }).bind(this)
-			this.back();
-		}).bind(this)
 	);
 	quitButton.addIcon("tile_choco");
 	quitButton.setIconSize(30);
-	console.log(quitButton);
 
 	this.appGroupButtons.quitButton = quitButton;
 }