chocomae/src/game/lib/round_rect_button.js

class RoundRectButtonSetting {

	constructor(x, y, width, height, roundAmount) {
		this.x = x;
		this.y = y;
		this.width = width;
		this.height = height;
		this.roundAmount = 0;
		if(typeof roundAmount === "undefined") {
			let shorterSide = width > height ? height : width;
			this.roundAmount = shorterSide * 0.1;
		} else {
			this.roundAmount = roundAmount;
		}
		this.strokeWidthPx = RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX;


		this.strokeColors = RoundRectButtonSetting.DEFAULT_STROKE_COLORS;
		this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
		this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
		this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
	};

	setStrokeColor(out, over, down, disabled) {
		this.strokeColors = { };
		this.strokeColors.out = out;
		this.strokeColors.over = over;
		this.strokeColors.odownut = down;
		this.strokeColors.disabled = disabled;
	}

	setButtonColor(out, over, down, disabled) {
		this.buttonColors = { };
		this.buttonColors.out = out;
		this.buttonColors.over = over;
		this.buttonColors.odownut = down;
		this.buttonColors.disabled = disabled;
	}

	setTextColor(out, over, down, disabled) {
		this.textColors = { };
		this.textColors.out = out;
		this.textColors.over = over;
		this.textColors.odownut = down;
		this.textColors.disabled = disabled;
	}

}

RoundRectButtonSetting.DEFAULT_STROKE_COLORS = {
	out: 0x666666,
	over: 0x333333,
	down: 0x333333,
	disabled: 0x666666
};

RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
	out: 0xffffff,
	over: 0xddffdd,
	down: 0xaaffaa,
	disabled: 0x333333
};

RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
	out: "#000",
	over: "#333",
	down: "#666",
	disabled: "#999"
};

RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
	font: "30px Arial",
	boundsAlignH: "center",		// left, center. right
	boundsAlignV: "middle", 	// top, middle, bottom
	fill: "#fff"
};

RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10;	// in pixel
RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX		= 5;	// in pixel



class RoundRectButton {
	constructor(roundRectSetting, iconName, buttonText, clickEvent) {
		this.setting = roundRectSetting;
		this.clickEvent = clickEvent;

		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.text = this.makeText(buttonText);
		if(buttonText.length > 0) {
			this.button.addChild(this.text);
		}

		if(iconName.length > 0) {
			this.icon = this.makeIcon(iconName);
			this.setIcon(this.icon);
		}

		// this.button.anchor.setTo(0.5, 0.5);
		this.button.inputEnabled = true;
		this.setEventMethod(this.button);

		this.mouseOut();
	}

	setEventMethod(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);
	}

	makeButtonStroke() {	// outter(bigger) round rect sprite
		let 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
		);
	}

	makeButtonSprite() {	// inner(smaller) round rect sprite
		let width = this.setting.width - this.setting.strokeWidthPx * 2;
		let height = this.setting.height - this.setting.strokeWidthPx * 2;
		let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5);

		let 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
		);
	}

	makeIcon(iconName) {
		let icon = game.add.sprite(0, 0, iconName);
		icon.width = 80;
		icon.height = 80;

		return icon;
	}

	makeText(textContent) {
		let width = this.setting.width - this.setting.strokeWidthPx * 2;
		let height = this.setting.height - this.setting.strokeWidthPx * 2;

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

		btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
		// btnText.anchor.setTo(0.5);

		return btnText;
	}

	setIcon(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();
	}


	mouseOut() {
		this.text.fill = this.setting.textColors.out;
		this.buttonStroke.tint = this.setting.strokeColors.out;
		this.button.tint = this.setting.buttonColors.out;
		if(typeof this.buttonIcon !== "undefined") {
			this.buttonIcon.tint = this.setting.strokeColors.out;
		}
	}

	mouseOver() {
		this.text.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.strokeColors.over;
		}
	}

	mouseDown() {
		this.text.fill = this.setting.textColors.down;
		this.buttonStroke.tint = this.setting.strokeColors.down;
		this.button.tint = this.setting.buttonColors.down;
		if(typeof this.buttonIcon !== "undefined") {
			this.buttonIcon.tint = this.setting.strokeColors.down;
		}
	}

	buttonDisabled() {
		this.text.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.strokeColors.disabled;
		}
	}



	move(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;
	}

	get inputEnabled() {
		return this.button.inputEnabled;
	}

	set inputEnabled(isEnabled) {
		this.buttonStroke.inputEnabled = isEnabled;
		this.button.inputEnabled = isEnabled;

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

	set lineSpacing(spacingInPixels) {
		this.text.lineSpacing = spacingInPixels;
	}
}

RoundRectButton.NONE_ICON			= "";
RoundRectButton.NONE_BUTTON_TEXT	= "";