Add: ChocoButton

src/game/lib/button/choco_button.js

@@ -0,0 +1,231 @@
+// 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	= "";

src/game/lib/button/choco_button_setting.js

@@ -0,0 +1,93 @@
+function ChocoButtonSetting(x, y, width, height, roundAmount) {
+	this.x = x;
+	this.y = y;
+	this.width = width;
+	this.height = height;
+	this.roundAmount = 0;
+	if(typeof roundAmount === "undefined") {
+		var shorterSide = width > height ? height : width;
+		this.roundAmount = shorterSide * 0.1;
+	} else {
+		this.roundAmount = roundAmount;
+	}
+	this.strokeWidthPx = ChocoButtonSetting.DEFAULT_STROKE_WIDTH_PX;
+
+
+	this.strokeColors = ChocoButtonSetting.DEFAULT_STROKE_COLORS;
+	this.buttonColors = ChocoButtonSetting.DEFAULT_BUTTON_COLORS;
+	this.textColors = ChocoButtonSetting.DEFAULT_TEXT_COLORS;
+	this.iconColors = ChocoButtonSetting.DEFAULT_ICON_COLORS;
+	this.fontStyle = ChocoButtonSetting.DEFAULT_TEXT_FONT;
+};
+
+ChocoButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) {
+	this.strokeColors = { };
+	this.strokeColors.out = out;
+	this.strokeColors.over = over;
+	this.strokeColors.down = down;
+	this.strokeColors.disabled = disabled;
+}
+
+ChocoButtonSetting.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;
+}
+
+ChocoButtonSetting.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;
+}
+
+ChocoButtonSetting.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;
+}
+
+
+ChocoButtonSetting.DEFAULT_STROKE_COLORS = {
+	out: 0x666666,
+	over: 0x333333,
+	down: 0x333333,
+	disabled: 0x666666
+};
+
+ChocoButtonSetting.DEFAULT_BUTTON_COLORS = {
+	out: 0xffffff,
+	over: 0xddffdd,
+	down: 0xaaffaa,
+	disabled: 0x333333
+};
+
+ChocoButtonSetting.DEFAULT_TEXT_COLORS = {
+	out: "#000",
+	over: "#333",
+	down: "#666",
+	disabled: "#999"
+};
+
+ChocoButtonSetting.DEFAULT_ICON_COLORS = {
+	out: 0xffffff,
+	over: 0xddffdd,
+	down: 0xaaffaa,
+	disabled: 0x333333
+};
+
+ChocoButtonSetting.DEFAULT_TEXT_FONT = {
+	font: "30px Arial",
+	boundsAlignH: "center",		// left, center. right
+	boundsAlignV: "middle", 	// top, middle, bottom
+	fill: "#fff",
+	align: "center"
+};
+
+ChocoButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10;	// in pixel
+ChocoButtonSetting.DEFAULT_STROKE_WIDTH_PX		= 5;	// in pixel

src/game/main_menu/main_menu.js

@@ -5,7 +5,7 @@ function MainMenu() {
 }
 
 MainMenu.prototype.preload = function() {
-	// game.load.image('tile_choco',	'../../../resources/image/background/tile_choco.png');
+	game.load.image('tile_choco',	'../../../resources/image/background/tile_choco.png');
 	game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');
 }
 
@@ -42,7 +42,21 @@ MainMenu.prototype.create = function() {
 */
 
 MainMenu.prototype.create = function() {
-	game.stage.backgroundColor = '#4d4d4d';
+	console.log("create");
+
+	this.dbService = new DBService();
+	this.dbService.setMaestroID(sessionStorageManager.getMaestroID());
+	this.dbService.setPlayerID(sessionStorageManager.getPlayerID());
+
+	// bg
+	var graphics = game.add.graphics();
+	graphics.beginFill(MainColor.LIGHT_CHOCO_HEX, 1);
+	graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y);
+	graphics.beginFill(MainColor.CHOCO_HEX, 1);
+	graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT);
+
+	this.appGroupButtons = {};
+	this.makeAppGroupButtons();
 }
 
 MainMenu.prototype.fontLoaded = function() {
@@ -56,25 +70,23 @@ MainMenu.prototype.fontLoaded = function() {
 		"menu_app"	// callerClassName
 	);
 
-	// bg
-	game.add.graphics()
-		.beginFill(MainColor.LIGHT_CHOCO_HEX, 1)
-		.drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y);
-
 	// top ui
 	// var screenTopUI = new ScreenTopUI();
 	// screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
 	// screenTopUI.makeFullScreenButton();
 	// this.loadAllowEditEnterCode(screenTopUI);
 
+	console.log(this.appGroupButtons);
 
 	// bottom ui
+	/*
 	var screenBottomUI = new ScreenBottomUI();
 	// ScreenBottomUI.printLeftText("게임 진행 정보");
 	// var playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
 	// ScreenBottomUI.printCenterText(playingAppName);
 	screenBottomUI.printCenterText("메뉴");
 	screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
+	*/
 
 	new WelcomePlayerText(sessionStorageManager.getPlayerName());
 	if(isExperiencePlayerAccount()) {
@@ -94,6 +106,7 @@ MainMenu.prototype.back = function() {
 }
 
 MainMenu.prototype.loadAllowEditEnterCode = function(screenTopUI) {
+	/*
 	var dbConnectManager = new DBConnectManager();
 	dbConnectManager.requestAllowEditEnterCode(
 		sessionStorageManager.getMaestroID(),
@@ -111,9 +124,18 @@ MainMenu.prototype.loadAllowEditEnterCode = function(screenTopUI) {
 			this.loadFailed(replyJSON);
 		}).bind(this)
 	);
+	*/
 }
 
 MainMenu.prototype.loadAppData = function() {
+	// this.dbService.requestMainMenuAppData(
+	// 	(function(replyJSON) {
+	// 		this.updateAppGroupButton(replyJSON.appGroupData);
+	// 		this.updateAppButtons(replyJSON.appData);
+	// 	})
+	// );
+
+	/*
 	var dbConnectManager = new DBConnectManager();
 	dbConnectManager.requestMenuAppList(
 		sessionStorageManager.getMaestroID(),
@@ -124,6 +146,7 @@ MainMenu.prototype.loadAppData = function() {
 			this.loadFailed(replyJSON);
 		}).bind(this)
 	);
+	*/
 }
 
 MainMenu.prototype.loadSucceeded = function(replyJSON) {
@@ -150,6 +173,25 @@ MainMenu.prototype.hasApp = function(appID, appList) {
 	return false;
 }
 
+MainMenu.prototype.makeAppGroupButtons = function() {
+	this.makeQuitButton();
+}
+
+MainMenu.prototype.makeQuitButton = function() {
+	var setting = new ChocoButtonSetting(1000, 40, 60, 60, 5);
+	var quitButton = new ChocoButton(
+		setting,	// choco button setting,
+		(function() {
+			this.back();
+		}).bind(this)
+	);
+	quitButton.addIcon("tile_choco");
+	quitButton.setIconSize(30);
+	console.log(quitButton);
+
+	this.appGroupButtons.quitButton = quitButton;
+}
+
 MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) {
 	// console.log(appList);
 
@@ -282,4 +324,7 @@ MainMenu.prototype.getButtonPosY = function(index, buttonCount, startPosY) {
 
 MainMenu.prototype.loadFailed = function(replyJSON) {
 	// console.log('login failed, jsonData : ' + JSON.stringify(replyJSON));
-}
+}
+
+
+MainMenu.MAIN_MENU_HEIGHT = 80;