Add: AppGroupTab

src/game/lib/flat_button/basic_tab.js

@@ -5,10 +5,15 @@ function BasicTab(setting, clickEvent) {
 	this.setting = setting;
 	this.clickEvent = clickEvent;
 
+	this.activate = true;
+
 	// button sprite
 	this.buttonSprite = this.makeButtonSprite();
 	this.setEventMethod(this.buttonSprite);
 
+	this.activeSprite = this.makeActiveSprite();
+	this.setEventMethod(this.activeSprite);
+
 
 	this.iconSprite = null;
 	this.mainText = null;
@@ -28,7 +33,7 @@ function BasicTab(setting, clickEvent) {
 
 
 
-BasicTab.prototype.makeButtonSprite = function() {	// inner(smaller) round rect sprite
+BasicTab.prototype.makeButtonSprite = function() {
 	var setting = this.setting;
 	// console.log("strokeWidthPx : " + setting.strokeWidthPx);
 	// console.log("round : " + setting.roundAmount);
@@ -53,6 +58,34 @@ BasicTab.prototype.makeButtonSprite = function() {	// inner(smaller) round rect
 	return buttonSprite;
 }
 
+BasicTab.prototype.makeActiveSprite = function() {
+	var setting = this.setting;
+	// console.log("strokeWidthPx : " + setting.strokeWidthPx);
+	// console.log("round : " + setting.roundAmount);
+
+	var OFFSET_POS_Y	= 12;
+
+	var buttonWidth = setting.width;
+	var lineWidth = buttonWidth * 3 / 4;
+	var lineHeight = 5;
+
+	var texture = null;
+	texture = new Phaser.Graphics()
+		.beginFill(0xffffff)
+		.drawRoundedRect(0, 0, lineWidth, lineHeight, 1)
+		.endFill()
+		.generateTexture();
+
+	var posX = setting.x - lineWidth / 2;
+	var posY = setting.y + setting.height / 2 - OFFSET_POS_Y;
+	var activeSprite = game.add.sprite(posX, posY, texture);
+
+	// buttonSprite.anchor.setTo(0.5, 0.5);
+	activeSprite.inputEnabled = true;
+
+	return activeSprite;
+}
+
 
 // icon
 BasicTab.prototype.addIcon = function(spriteName) {
@@ -122,6 +155,14 @@ BasicTab.prototype.setMainText = function(text) {
 	this.alignContents();
 }
 
+BasicTab.prototype.setMainTextFontWeight = function(option) {
+	if(option === null || option === "")
+		this.mainText.fontWeight = "normal";
+	else
+		this.mainText.fontWeight = option;
+	console.log(this.mainText.fontWeight);
+}
+
 BasicTab.prototype.makeShortcutText = function() {
 	var posX = this.buttonSprite.width / 2;
 	var posY = this.buttonSprite.height / 2;
@@ -141,6 +182,15 @@ BasicTab.prototype.setShortcutText = function(text) {
 	this.alignContents();
 }
 
+BasicTab.prototype.setActive = function(flag) {
+	this.activate = flag;
+
+	if(this.activate)
+		this.activeSprite.alpha = 1;
+	else
+		this.activeSprite.alpha = 0;
+}
+
 BasicTab.prototype.alignContents = function() {
 	var mainTextHeight = 0;
 	var iconSpriteHeight = 0;
@@ -219,6 +269,8 @@ BasicTab.prototype.mouseOut = function() {
 	this.mainText.fill = this.setting.textColors.out;
 	if(this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.out;
+
+	this.activeSprite.tint = this.setting.activeColors.out;
 }
 
 BasicTab.prototype.mouseOver = function() {
@@ -230,6 +282,8 @@ BasicTab.prototype.mouseOver = function() {
 	this.mainText.fill = this.setting.textColors.over;
 	if(this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.over;
+
+	this.activeSprite.tint = this.setting.activeColors.over;
 }
 
 BasicTab.prototype.mouseDown = function() {
@@ -241,6 +295,8 @@ BasicTab.prototype.mouseDown = function() {
 	this.mainText.fill = this.setting.textColors.down;
 	if(this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.down;
+
+	this.activeSprite.tint = this.setting.activeColors.down;
 }
 
 BasicTab.prototype.buttonDisabled = function() {
@@ -252,6 +308,8 @@ BasicTab.prototype.buttonDisabled = function() {
 	this.mainText.fill = this.setting.textColors.disabled;
 	if(typeof this.shortcutText !== undefined)
 		this.shortcutText.fill = this.setting.textColors.disabled;
+
+	this.activeSprite.tint = this.setting.activeColors.disabled;
 }