Add: AppGroupTab

src/game/lib/flat_button/app_group_tab.js

@@ -0,0 +1,58 @@
+AppGroupTab.prototype = Object.create(BasicTab.prototype);
+AppGroupTab.constructor = AppGroupTab;
+
+function AppGroupTab(clickEvent) {
+	var setting = new TabSetting(150, MainMenu.MAIN_MENU_HEIGHT / 2, 140, MainMenu.MAIN_MENU_HEIGHT);
+	setting.setFont("Nanum Gothic");
+	setting.setFontSize(20);
+	setting.setButtonColor(
+		AppGroupTab.BUTTON_COLOR_OUT_HEX,
+		AppGroupTab.BUTTON_COLOR_OVER_HEX,
+		AppGroupTab.BUTTON_COLOR_DOWN_HEX,
+		AppGroupTab.BUTTON_COLOR_DISABLED_HEX
+	);
+	setting.setIconColor(
+		AppGroupTab.STROKE_COLOR_OUT_HEX,
+		AppGroupTab.STROKE_COLOR_OVER_HEX,
+		AppGroupTab.STROKE_COLOR_DOWN_HEX,
+		AppGroupTab.STROKE_COLOR_DISABLED_HEX
+	);
+	setting.setActiveColor(
+		MainColor.DARK_CHOCO_HEX,
+		MainColor.DARK_CHOCO_HEX,
+		MainColor.DARK_CHOCO_HEX,
+		MainColor.DARK_CHOCO_HEX
+	);
+	setting.setTextColor(
+		AppGroupTab.TEXT_COLOR_OUT_HEX,
+		AppGroupTab.TEXT_COLOR_OVER_HEX,
+		AppGroupTab.TEXT_COLOR_DOWN_HEX,
+		AppGroupTab.TEXT_COLOR_DISABLED_HEX
+	);
+
+
+	BasicTab.call(this, setting, clickEvent);
+
+	// this.setMainTextFontWeight("bold");
+	this.setMainText("마우스 MOU");
+	this.setMainTextFontWeight("800");
+	// this.addIcon("home");
+	// this.setIconSize(30);
+	this.setShortcutText("MOUSE");
+}
+
+
+AppGroupTab.STROKE_COLOR_OUT_HEX			= 0xAA6666;
+AppGroupTab.STROKE_COLOR_OVER_HEX		= 0x884444;
+AppGroupTab.STROKE_COLOR_DOWN_HEX		= 0x884444;
+AppGroupTab.STROKE_COLOR_DISABLED_HEX	= 0x333333;
+
+AppGroupTab.BUTTON_COLOR_OUT_HEX			= 0xffdddd;
+AppGroupTab.BUTTON_COLOR_OVER_HEX		= 0xddaaaa;
+AppGroupTab.BUTTON_COLOR_DOWN_HEX		= 0xddaaaa;
+AppGroupTab.BUTTON_COLOR_DISABLED_HEX	= 0x666666;
+
+AppGroupTab.TEXT_COLOR_OUT_HEX			= "#aa6666";
+AppGroupTab.TEXT_COLOR_OVER_HEX			= "#884444";
+AppGroupTab.TEXT_COLOR_DOWN_HEX			= "#884444";
+AppGroupTab.TEXT_COLOR_DISABLED_HEX		= "#333333";

src/game/lib/flat_button/back_button.js

@@ -2,12 +2,10 @@ BackButton.prototype = Object.create(BasicButton.prototype);
 BackButton.constructor = BackButton;
 
 function BackButton(clickEvent) {
-	var setting = new ButtonSetting(40, 40, 60, 60);
+	var setting = new ButtonSetting(40, MainMenu.MAIN_MENU_HEIGHT / 2, 60, 60);
 	setting.setStrokeWidth(3);
-	setting.setRound(10);
+	setting.setRound(30);
 	setting.setFont("Nanum Gothic Coding");
-	setting.fontStyle.boundsAlignH = "center";	// left, center. right
-	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
 	setting.setStrokeColor(
 		BackButton.STROKE_COLOR_OUT_HEX,
 		BackButton.STROKE_COLOR_OVER_HEX,
@@ -33,6 +31,7 @@ function BackButton(clickEvent) {
 		BackButton.TEXT_COLOR_DISABLED_HEX
 	);
 
+
 	BasicButton.call(this, setting, clickEvent);
 
 	this.addIcon("home");

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

src/game/lib/flat_button/setting_button.js

@@ -2,9 +2,9 @@ SettingButton.prototype = Object.create(BasicButton.prototype);
 SettingButton.constructor = SettingButton;
 
 function SettingButton(clickEvent) {
-	var setting = new ButtonSetting(980, 40, 60, 60);
+	var setting = new ButtonSetting(980, MainMenu.MAIN_MENU_HEIGHT / 2, 60, 60);
 	setting.setStrokeWidth(0);
-	setting.setRound(10);
+	setting.setRound(30);
 	// setting.setFont("Nanum Brush Script");
 	setting.setFont("Nanum Gothic");
 	setting.setFontSize(20);
@@ -35,6 +35,7 @@ function SettingButton(clickEvent) {
 		SettingButton.TEXT_COLOR_DISABLED_HEX
 	);
 
+
 	BasicButton.call(this, setting, clickEvent);
 
 	this.setMainText("세팅");

src/game/lib/flat_button/tab_setting.js

@@ -9,6 +9,7 @@ function TabSetting(x, y, width, height) {
 	this.buttonColors = TabSetting.DEFAULT_BUTTON_COLORS;
 	this.textColors = TabSetting.DEFAULT_TEXT_COLORS;
 	this.iconColors = TabSetting.DEFAULT_ICON_COLORS;
+	this.activeColors = TabSetting.DEFAULT_ACTIVE_COLORS;
 	this.fontStyle = TabSetting.DEFAULT_TEXT_FONT;
 };
 
@@ -36,6 +37,14 @@ TabSetting.prototype.setTextColor = function(out, over, down, disabled) {
 	this.textColors.disabled = disabled;
 }
 
+TabSetting.prototype.setActiveColor = function(out, over, down, disabled) {
+	this.activeColors = { };
+	this.activeColors.out = out;
+	this.activeColors.over = over;
+	this.activeColors.down = down;
+	this.activeColors.disabled = disabled;
+}
+
 TabSetting.prototype.setIconColor = function(out, over, down, disabled) {
 	this.iconColors = { };
 	this.iconColors.out = out;
@@ -73,6 +82,13 @@ TabSetting.DEFAULT_ICON_COLORS = {
 	disabled: 0x333333
 };
 
+TabSetting.DEFAULT_ACTIVE_COLORS = {
+	out: MainColor.DARK_CHOCO_HEX,
+	over: MainColor.DARK_CHOCO_HEX,
+	down: MainColor.DARK_CHOCO_HEX,
+	disabled: MainColor.DARK_CHOCO_HEX
+};
+
 TabSetting.DEFAULT_TEXT_FONT = {
 	font: "30px",
 	boundsAlignH: "center",		// left, center. right

src/game/main_menu/main_menu.js

@@ -190,15 +190,28 @@ MainMenu.prototype.makeAppGroupButtons = function() {
 	);
 	this.appGroupButtons.settingButton = settingButton;
 
-	var setting = new TabSetting(200, 40, 100, 80);
+	var mouseAppGroupTab = new AppGroupTab(
-	setting.setFontSize(20);
-	var mouseAppTab = new BasicTab(
-		setting,
 		(function() { console.log("mouse"); }).bind(this)
 	);
-	mouseAppTab.setMainText("MOUSE");
+	// var mouseAppTab = new BasicTab(
-	mouseAppTab.setShortcutText("마우스");
+	// 	setting,
-	this.appGroupButtons.settingButton = mouseAppTab;
+	// 	(function() { console.log("mouse"); }).bind(this)
+	// );
+	// mouseAppTab.setMainText("MOUSE");
+	// mouseAppTab.setShortcutText("마우스");
+
+	var setting = new TabSetting(150, MainMenu.MAIN_MENU_HEIGHT / 2, 140, MainMenu.MAIN_MENU_HEIGHT);
+	setting.setFontSize(20);
+	setting.x = 290;
+	var typingAppTab = new BasicTab(
+		setting,
+		(function() { console.log("typing"); }).bind(this)
+	);
+	typingAppTab.setMainText("TYPING");
+	typingAppTab.setShortcutText("타이핑");
+	typingAppTab.setActive(false);
+
+	this.appGroupButtons.settingButton = mouseAppGroupTab;
 }
 
 
@@ -337,4 +350,4 @@ MainMenu.prototype.loadFailed = function(replyJSON) {
 }
 
 
-MainMenu.MAIN_MENU_HEIGHT = 80;
+MainMenu.MAIN_MENU_HEIGHT = 70;

src/web/client/main_menu.html

@@ -61,6 +61,7 @@
 
 		<script src="../../game/lib/flat_button/tab_setting.js"></script>
 		<script src="../../game/lib/flat_button/basic_tab.js"></script>
+		<script src="../../game/lib/flat_button/app_group_tab.js"></script>
 
 		<!-- source files -->
 		<script src="../../game/main_menu/main_menu.js"></script>