Add: BasicTab, TabSetting

src/game/lib/flat_button/back_button.js

@@ -20,6 +20,12 @@ function BackButton(clickEvent) {
 		BackButton.BUTTON_COLOR_DOWN_HEX,
 		BackButton.BUTTON_COLOR_DISABLED_HEX
 	);
+	setting.setIconColor(
+		BackButton.STROKE_COLOR_OUT_HEX,
+		BackButton.STROKE_COLOR_OVER_HEX,
+		BackButton.STROKE_COLOR_DOWN_HEX,
+		BackButton.STROKE_COLOR_DISABLED_HEX
+	);
 	setting.setTextColor(
 		BackButton.TEXT_COLOR_OUT_HEX,
 		BackButton.TEXT_COLOR_OVER_HEX,

src/game/lib/flat_button/basic_button.js

@@ -6,7 +6,7 @@ function BasicButton(setting, clickEvent) {
 	this.clickEvent = clickEvent;
 
 	// button sprite
-	this.strokeSprite = this.makestrokeSprite();
+	this.strokeSprite = this.makeStrokeSprite();
 	this.setEventMethod(this.strokeSprite);
 
 	this.buttonSprite = this.makeButtonSprite();
@@ -31,7 +31,7 @@ function BasicButton(setting, clickEvent) {
 
 
 
-BasicButton.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()
@@ -104,7 +104,6 @@ BasicButton.prototype.addIcon = function(spriteName) {
 	if(spriteName.length === 0)
 		return;
 
-	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;

src/game/lib/flat_button/basic_tab.js

@@ -0,0 +1,293 @@
+// BasicTab.prototype = Object.create();
+BasicTab.constructor = BasicTab;
+
+function BasicTab(setting, clickEvent) {
+	this.setting = setting;
+	this.clickEvent = clickEvent;
+
+	// button sprite
+	this.buttonSprite = this.makeButtonSprite();
+	this.setEventMethod(this.buttonSprite);
+
+
+	this.iconSprite = null;
+	this.mainText = null;
+	this.shortcutText = null;
+
+
+	this.mainText = this.makeMainText();
+	this.buttonSprite.addChild(this.mainText);
+
+	this.shortcutText = this.makeShortcutText();
+	this.buttonSprite.addChild(this.shortcutText);
+
+	this.applyLoadedFont();
+
+	this.mouseOut();
+}
+
+
+
+BasicTab.prototype.makeButtonSprite = function() {	// inner(smaller) round rect sprite
+	var setting = this.setting;
+	// console.log("strokeWidthPx : " + setting.strokeWidthPx);
+	// console.log("round : " + setting.roundAmount);
+
+	var btnWidth = setting.width;
+	var btnHeight = setting.height;
+
+	var texture = null;
+	texture = new Phaser.Graphics()
+		.beginFill(0xffffff)
+		.drawRect(0, 0, btnWidth, btnHeight)
+		.endFill()
+		.generateTexture();
+
+	var posX = setting.x - btnWidth / 2;
+	var posY = setting.y - btnHeight / 2;
+	var buttonSprite = game.add.sprite(posX, posY, texture);
+
+	// buttonSprite.anchor.setTo(0.5, 0.5);
+	buttonSprite.inputEnabled = true;
+
+	return buttonSprite;
+}
+
+
+// icon
+BasicTab.prototype.addIcon = function(spriteName) {
+	if(spriteName === null)
+		return;
+
+	if(spriteName.length === 0)
+		return;
+
+	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;
+	this.iconSprite.anchor.setTo(0.5, 0.5);
+	this.setIconSize(40);
+	this.buttonSprite.addChild(this.iconSprite);
+
+	this.mainText.text = "";
+	this.mouseOut();
+}
+
+BasicTab.prototype.setIconSize = function(size) {
+	this.setIconWidth(size);
+	this.setIconHeight(size);
+}
+
+BasicTab.prototype.setIconWidth = function(size) {
+	this.iconSprite.width = size;
+}
+
+BasicTab.prototype.setIconHeight = function(size) {
+	this.iconSprite.height = size;
+	this.alignContents();
+}
+
+
+// button text
+BasicTab.prototype.setFont = function(fontName) {
+	this.setting.font = fontName;
+}
+
+BasicTab.prototype.applyLoadedFont = function() {
+	this.mainText.font = this.setting.font;
+	this.shortcutText.font = this.setting.font;
+}
+
+BasicTab.prototype.makeMainText = function() {
+	var width = this.setting.width / 2;
+	var height = this.setting.height / 2;
+
+	// var mainText = game.add.text(0, 0, textContent, this.setting.fontStyle)
+	// 	.setTextBounds(0, 0, width, this.setting.height);
+
+	var mainText = game.add.text(width, height, "");
+	mainText.anchor.set(0.5);
+	mainText.fontSize = this.setting.fontSize;
+	// mainText.fontWeight = "bolder";
+	mainText.lineSpacing = TabSetting.DEFAULT_TEXT_LINE_SPACING_PX;
+
+	return mainText;
+}
+
+BasicTab.prototype.setMainText = function(text) {
+	this.mainText.text = text;
+	if(this.iconSprite !== null)
+		this.iconSprite = null;
+	this.alignContents();
+}
+
+BasicTab.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 = BasicTab.SHORTCUT_TEXT_FONTSIZE;
+	shortcutText.fontWeight = "normal";
+	// shortcutText.addColor(this.setting.textColors.over, 0);
+	shortcutText.addColor("0xffffff", 0);
+
+	return shortcutText;
+}
+
+BasicTab.prototype.setShortcutText = function(text) {
+	this.shortcutText.text = text;
+	this.alignContents();
+}
+
+BasicTab.prototype.alignContents = function() {
+	var mainTextHeight = 0;
+	var iconSpriteHeight = 0;
+	var shortcutTextHeight = 0;
+
+	if(this.mainText.text.length > 0)
+		mainTextHeight = this.mainText.fontSize;
+
+	if (this.iconSprite !== null)
+		iconSpriteHeight = this.iconSprite.height;
+
+	if(this.shortcutText !== null && this.shortcutText.text.length > 0)
+		shortcutTextHeight = this.shortcutText.fontSize;
+
+	var mainContentHeightHalf = 0;
+	if(mainTextHeight > 0)
+		mainContentHeightHalf = mainTextHeight / 2;
+	else if(iconSpriteHeight > 0)
+		mainContentHeightHalf = iconSpriteHeight / 2;
+	var shortcutTextHeightHalf = shortcutTextHeight / 2;
+
+	var offsetRatio = 7;
+	var offsetMainText = mainTextHeight / offsetRatio;
+	var offsetShortcutText = shortcutTextHeight / offsetRatio;
+	var gap = (iconSpriteHeight > 0 ? gap = 0 : BasicTab.SHORTCUT_TEXT_FONTSIZE / 2);
+
+	if(shortcutTextHeight === 0) {
+		if(mainTextHeight > 0)
+			this.mainText.y = this.buttonSprite.height / 2 + offsetMainText;
+		else if(iconSpriteHeight > 0)
+			this.iconSprite.y = this.buttonSprite.height / 2;
+	}
+	else {
+		if(mainTextHeight > 0)
+			this.mainText.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf + offsetMainText;
+		else if(iconSpriteHeight > 0)
+			this.iconSprite.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf; // - gap / 4;
+	}
+
+	this.shortcutText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetShortcutText + gap;
+}
+
+
+// event handler
+BasicTab.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
+	);
+}
+
+BasicTab.prototype.mouseOut = function() {
+	this.buttonSprite.tint = this.setting.buttonColors.out;
+
+	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
+		this.iconSprite.tint = this.setting.iconColors.out;
+
+	this.mainText.fill = this.setting.textColors.out;
+	if(this.shortcutText !== undefined)
+		this.shortcutText.fill = this.setting.textColors.out;
+}
+
+BasicTab.prototype.mouseOver = function() {
+	this.buttonSprite.tint = this.setting.buttonColors.over;
+
+	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
+		this.iconSprite.tint = this.setting.iconColors.over;
+
+	this.mainText.fill = this.setting.textColors.over;
+	if(this.shortcutText !== undefined)
+		this.shortcutText.fill = this.setting.textColors.over;
+}
+
+BasicTab.prototype.mouseDown = function() {
+	this.buttonSprite.tint = this.setting.buttonColors.down;
+
+	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
+		this.iconSprite.tint = this.setting.iconColors.down;
+
+	this.mainText.fill = this.setting.textColors.down;
+	if(this.shortcutText !== undefined)
+		this.shortcutText.fill = this.setting.textColors.down;
+}
+
+BasicTab.prototype.buttonDisabled = function() {
+	this.buttonSprite.tint = this.setting.buttonColors.disabled;
+
+	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
+		this.iconSprite.tint = this.setting.iconColors.disabled;
+
+	this.mainText.fill = this.setting.textColors.disabled;
+	if(typeof this.shortcutText !== undefined)
+		this.shortcutText.fill = this.setting.textColors.disabled;
+}
+
+
+
+BasicTab.prototype.getPosX = function() {
+	return this.buttonSprite.x;
+}
+
+BasicTab.prototype.getPosY = function() {
+	return this.buttonSprite.y;
+}
+
+BasicTab.prototype.move = function(x, y) {
+	this.buttonSprite.x = x  - this.setting.width / 2;
+	this.buttonSprite.y = y  - this.setting.height / 2;
+}
+
+BasicTab.prototype.getInputEnabled = function() {
+	return this.buttonSprite.inputEnabled;
+}
+
+BasicTab.prototype.setInputEnabled = function(isEnabled) {
+	this.buttonSprite.inputEnabled = isEnabled;
+
+	if(isEnabled === true) {
+		this.mouseOut();
+	} else {
+		this.buttonDisabled();
+	}
+}
+
+BasicTab.prototype.setLineSpacing = function(spacingInPixels) {
+	this.mainText.lineSpacing = spacingInPixels;
+}
+
+BasicTab.NONE_ICON			= "";
+BasicTab.NONE_BUTTON_TEXT	= "";
+
+BasicTab.SHORTCUT_TEXT_FONTSIZE	= 12;

src/game/lib/flat_button/setting_button.js

@@ -22,6 +22,12 @@ function SettingButton(clickEvent) {
 		SettingButton.BUTTON_COLOR_DOWN_HEX,
 		SettingButton.BUTTON_COLOR_DISABLED_HEX
 	);
+	setting.setIconColor(
+		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,

src/game/lib/flat_button/tab_setting.js

@@ -0,0 +1,84 @@
+function TabSetting(x, y, width, height) {
+	this.x = x;
+	this.y = y;
+	this.width = width;
+	this.height = height;
+
+	this.fontSize = 10;
+
+	this.buttonColors = TabSetting.DEFAULT_BUTTON_COLORS;
+	this.textColors = TabSetting.DEFAULT_TEXT_COLORS;
+	this.iconColors = TabSetting.DEFAULT_ICON_COLORS;
+	this.fontStyle = TabSetting.DEFAULT_TEXT_FONT;
+};
+
+TabSetting.prototype.setFont = function(fontName) {
+	this.font = fontName;
+}
+
+TabSetting.prototype.setFontSize = function(size) {
+	this.fontSize = size;
+}
+
+TabSetting.prototype.setButtonColor = function(out, over, down, disabled) {
+	this.buttonColors = { };
+	this.buttonColors.out = out;
+	this.buttonColors.over = over;
+	this.buttonColors.down = down;
+	this.buttonColors.disabled = disabled;
+}
+
+TabSetting.prototype.setTextColor = function(out, over, down, disabled) {
+	this.textColors = { };
+	this.textColors.out = out;
+	this.textColors.over = over;
+	this.textColors.down = down;
+	this.textColors.disabled = disabled;
+}
+
+TabSetting.prototype.setIconColor = function(out, over, down, disabled) {
+	this.iconColors = { };
+	this.iconColors.out = out;
+	this.iconColors.over = over;
+	this.iconColors.down = down;
+	this.iconColors.disabled = disabled;
+}
+
+
+TabSetting.DEFAULT_STROKE_COLORS = {
+	out: 0x666666,
+	over: 0x333333,
+	down: 0x333333,
+	disabled: 0x666666
+};
+
+TabSetting.DEFAULT_BUTTON_COLORS = {
+	out: 0xffffff,
+	over: 0xddffdd,
+	down: 0xaaffaa,
+	disabled: 0x333333
+};
+
+TabSetting.DEFAULT_TEXT_COLORS = {
+	out: "#000",
+	over: "#333",
+	down: "#666",
+	disabled: "#999"
+};
+
+TabSetting.DEFAULT_ICON_COLORS = {
+	out: 0xffffff,
+	over: 0xddffdd,
+	down: 0xaaffaa,
+	disabled: 0x333333
+};
+
+TabSetting.DEFAULT_TEXT_FONT = {
+	font: "30px",
+	boundsAlignH: "center",		// left, center. right
+	boundsAlignV: "middle", 	// top, middle, bottom
+	fill: "#fff",
+	align: "center"
+};
+
+TabSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10;	// in pixel

src/game/main_menu/main_menu.js

@@ -180,30 +180,28 @@ MainMenu.prototype.hasApp = function(appID, appList) {
 }
 
 MainMenu.prototype.makeAppGroupButtons = function() {
-	this.makeQuitButton();
-}
-
-MainMenu.prototype.makeQuitButton = function() {
-	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)
-	// );
-	// quitButton.addIcon("tile_choco");
-	// quitButton.setIconSize(30);
-
 	var backButton = new BackButton(
 		(function() { console.log("back"); }).bind(this)
 	);
+	this.appGroupButtons.backButton = backButton;
 
 	var settingButton = new SettingButton(
 		(function() { console.log("setting"); }).bind(this)
 	);
-
 	this.appGroupButtons.settingButton = settingButton;
-	this.appGroupButtons.backButton = backButton;
+
+	var setting = new TabSetting(200, 40, 100, 80);
+	setting.setFontSize(20);
+	var mouseAppTab = new BasicTab(
+		setting,
+		(function() { console.log("mouse"); }).bind(this)
+	);
+	mouseAppTab.setMainText("MOUSE");
+	mouseAppTab.setShortcutText("마우스");
+	this.appGroupButtons.settingButton = mouseAppTab;
 }
 
+
 MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) {
 	// console.log(appList);
 

src/web/client/main_menu.html

@@ -59,6 +59,9 @@
 		<script src="../../game/lib/flat_button/back_button.js"></script>
 		<script src="../../game/lib/flat_button/setting_button.js"></script>
 
+		<script src="../../game/lib/flat_button/tab_setting.js"></script>
+		<script src="../../game/lib/flat_button/basic_tab.js"></script>
+
 		<!-- source files -->
 		<script src="../../game/main_menu/main_menu.js"></script>
 		<script src="../../game/main_menu/main.js"></script>