chocomae/src/game/lib/button/choco_button.js

// ChocoButton.prototype = Object.create();
ChocoButton.constructor = ChocoButton;

function ChocoButton(setting, clickEvent) {
	this.setting = setting;
	this.clickEvent = clickEvent;

	this.icon = null;
	this.mainText = 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);


	this.mainText = this.makeText("");
	this.button.addChild(this.mainText);

	this.shortcutText = this.makeShortcutText();
	this.button.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) {
	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);
	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(
		this.setting.x - this.setting.width / 2,
		this.setting.y - this.setting.height / 2,
		btnTexture
	);
}

ChocoButton.prototype.makeButtonSprite = function() {	// inner(smaller) round rect sprite
	var width = this.setting.width - this.setting.strokeWidthPx * 2;
	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()
		.beginFill(0xffffff)
		.drawRoundedRect(this.setting.strokeWidthPx, this.setting.strokeWidthPx, width, height, innerRoundAmount)
		.endFill()
		.generateTexture();

	// return game.add.sprite(0, 0, btnTexture);
	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
	);
}

ChocoButton.prototype.makeIcon = function(iconName) {
	var icon = game.add.sprite(0, 0, iconName);
	icon.width = 40;
	icon.height = 40;

	return icon;
}

ChocoButton.prototype.setIconSize = function(size) {
	this.setIconWidth(size);
	this.setIconHeight(size);
}

ChocoButton.prototype.setIconWidth = function(size) {
	this.buttonIcon.width = size;
}

ChocoButton.prototype.setIconHeight = function(size) {
	this.buttonIcon.height = size;
}

ChocoButton.prototype.makeText = function(textContent) {
	var width = this.setting.width / 2 - this.setting.strokeWidthPx;
	var height = this.setting.height / 2;

	// var btnText = game.add.text(0, 0, textContent, this.setting.fontStyle)
	// 	.setTextBounds(0, 0, width, this.setting.height);

	var btnText = game.add.text(width, height, textContent, this.setting.fontStyle);
	btnText.anchor.set(0.5);
	btnText.lineSpacing = ChocoButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;

	return btnText;
}

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, "");
	shortcutText.anchor.set(0.5);

	shortcutText.fontSize = this.button.height * 2 / 10;
	// shortcutText.addColor(this.setting.textColors.over, 0);
	shortcutText.addColor("0xffffff", 0);

	return shortcutText;
}

ChocoButton.prototype.addShortcutText = function(text) {
	var scText = "[ " + text + " ]";
	this.shortcutText.text = scText;

}


ChocoButton.prototype.mouseOut = function() {
	this.mainText.fill = this.setting.textColors.out;
	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.mainText.fill = this.setting.textColors.over;
	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.mainText.fill = this.setting.textColors.down;
	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.mainText.fill = this.setting.textColors.disabled;
	if(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;
}

ChocoButton.prototype.getPosY = function() {
	return this.buttonStroke.y + y - this.setting.height / 2;
}

ChocoButton.prototype.move = function(x, 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.strokeWidthPx;
	this.button.y = y  - this.setting.height / 2 + this.setting.strokeWidthPx;
}

ChocoButton.prototype.getInputEnabled = function() {
	return this.button.inputEnabled;
}

ChocoButton.prototype.setInputEnabled = function(isEnabled) {
	this.buttonStroke.inputEnabled = isEnabled;
	this.button.inputEnabled = isEnabled;

	if(isEnabled === true) {
		this.mouseOut();
	} else {
		this.buttonDisabled();
	}
}

ChocoButton.prototype.setLineSpacing = function(spacingInPixels) {
	this.mainText.lineSpacing = spacingInPixels;
}

ChocoButton.NONE_ICON			= "";
ChocoButton.NONE_BUTTON_TEXT	= "";