Fix: ChocoButton stroke round

src/game/lib/button/choco_back_button.js

@@ -0,0 +1,48 @@
+ChocoBackButton.prototype = Object.create(ChocoButton.prototype);
+ChocoBackButton.constructor = ChocoBackButton;
+
+function ChocoBackButton(clickEvent) {
+	var setting = new ChocoButtonSetting(980, 40, 60, 60, 3, 10);
+	setting.fontStyle.boundsAlignH = "center";	// left, center. right
+	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+	setting.setStrokeColor(
+		ChocoBackButton.STROKE_COLOR_OUT_HEX,
+		ChocoBackButton.STROKE_COLOR_OVER_HEX,
+		ChocoBackButton.STROKE_COLOR_DOWN_HEX,
+		ChocoBackButton.STROKE_COLOR_DISABLED_HEX
+	);
+	setting.setButtonColor(
+		ChocoBackButton.BUTTON_COLOR_OUT_HEX,
+		ChocoBackButton.BUTTON_COLOR_OVER_HEX,
+		ChocoBackButton.BUTTON_COLOR_DOWN_HEX,
+		ChocoBackButton.BUTTON_COLOR_DISABLED_HEX
+	);
+	setting.setTextColor(
+		ChocoBackButton.TEXT_COLOR_OUT_HEX,
+		ChocoBackButton.TEXT_COLOR_OVER_HEX,
+		ChocoBackButton.TEXT_COLOR_DOWN_HEX,
+		ChocoBackButton.TEXT_COLOR_DISABLED_HEX
+	);
+
+	ChocoButton.call(this, setting, clickEvent);
+
+	this.addIcon("tile_choco");
+	this.setIconSize(15);
+	this.setShortcutText("돌아가기");
+}
+
+
+ChocoBackButton.STROKE_COLOR_OUT_HEX		= 0xAA6666;
+ChocoBackButton.STROKE_COLOR_OVER_HEX		= 0x884444;
+ChocoBackButton.STROKE_COLOR_DOWN_HEX		= 0x884444;
+ChocoBackButton.STROKE_COLOR_DISABLED_HEX	= 0x333333;
+
+ChocoBackButton.BUTTON_COLOR_OUT_HEX		= 0xffdddd;
+ChocoBackButton.BUTTON_COLOR_OVER_HEX		= 0xddaaaa;
+ChocoBackButton.BUTTON_COLOR_DOWN_HEX		= 0xddaaaa;
+ChocoBackButton.BUTTON_COLOR_DISABLED_HEX	= 0x666666;
+
+ChocoBackButton.TEXT_COLOR_OUT_HEX			= "#aa6666";
+ChocoBackButton.TEXT_COLOR_OVER_HEX			= "#884444";
+ChocoBackButton.TEXT_COLOR_DOWN_HEX			= "#884444";
+ChocoBackButton.TEXT_COLOR_DISABLED_HEX		= "#333333";

src/game/lib/button/choco_button.js

@@ -48,21 +48,25 @@ ChocoButton.prototype.makeButtonStrokeSprite = function() {	// outter(bigger) ro
 }
 
 ChocoButton.prototype.makeButtonSprite = function() {	// inner(smaller) round rect sprite
-	var width = this.setting.width - this.setting.strokeWidthPx * 2;
+	var setting = this.setting;
-	var height = this.setting.height - this.setting.strokeWidthPx * 2;
+	// console.log("strokeWidthPx : " + setting.strokeWidthPx);
-	var innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5);
+	// console.log("round : " + setting.roundAmount);
+
+	var btnWidth = setting.width - setting.strokeWidthPx * 2;
+	var btnHeight = setting.height - setting.strokeWidthPx * 2;
+	var longSideStroke = (setting.width > setting.height ? setting.width : setting.height);
+	var longSideButton = (btnWidth > btnHeight ? btnWidth : btnHeight);
+	var btnRoundAmount = setting.roundAmount * longSideButton / longSideStroke;
 
 	var texture = new Phaser.Graphics()
 		.beginFill(0xffffff)
-		.drawRoundedRect(this.setting.strokeWidthPx, this.setting.strokeWidthPx, width, height, innerRoundAmount)
+		.drawRoundedRect(0, 0, btnWidth, btnHeight, btnRoundAmount)
 		.endFill()
 		.generateTexture();
 
-	var buttonSprite = game.add.sprite(
+	var posX = setting.x - btnWidth / 2;
-		this.setting.x - this.setting.width / 2 + this.setting.strokeWidthPx,
+	var posY = setting.y - btnHeight / 2;
-		this.setting.y - this.setting.height / 2 + this.setting.strokeWidthPx,
+	var buttonSprite = game.add.sprite(posX, posY, texture);
-		texture
-	);
 
 	// buttonSprite.anchor.setTo(0.5, 0.5);
 	buttonSprite.inputEnabled = true;
@@ -120,6 +124,7 @@ ChocoButton.prototype.setIcon = function(icon) {
 ChocoButton.prototype.makeShortcutText = function() {
 	var shortcutText = game.add.text(this.buttonSprite.width / 2, this.buttonSprite.height * 9 / 10, "");
 	shortcutText.anchor.set(0.5);
+	shortcutText.fontWeight = "normal";
 
 	shortcutText.fontSize = this.buttonSprite.height * 2 / 10;
 	// shortcutText.addColor(this.setting.textColors.over, 0);
@@ -129,7 +134,7 @@ ChocoButton.prototype.makeShortcutText = function() {
 }
 
 ChocoButton.prototype.setShortcutText = function(text) {
-	this.shortcutText.text = "[ " + text + " ]";
+	this.shortcutText.text = text;
 }
 
 

src/game/lib/button/choco_button_setting.js

@@ -1,17 +1,10 @@
-function ChocoButtonSetting(x, y, width, height, roundAmount) {
+function ChocoButtonSetting(x, y, width, height, strokeWidth, roundAmount) {
 	this.x = x;
 	this.y = y;
 	this.width = width;
 	this.height = height;
-	this.roundAmount = 0;
+	this.setRound(roundAmount);
-	if(typeof roundAmount === "undefined") {
+	this.setStrokeWidth(strokeWidth);
-		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;
@@ -20,6 +13,38 @@ function ChocoButtonSetting(x, y, width, height, roundAmount) {
 	this.fontStyle = ChocoButtonSetting.DEFAULT_TEXT_FONT;
 };
 
+ChocoButtonSetting.prototype.setRound = function(round) {
+	if(this.width / 2 > round && this.height / 2 > round) {
+		this.roundAmount = round;
+		return this.roundAmount;
+	}
+
+	var maxRound = round;
+	if(this.width > this.height) {
+		maxRound = this.height / 2;
+	} else {
+		maxRound = this.width / 2;
+	}
+
+	this.roundAmount = maxRound;
+}
+
+ChocoButtonSetting.prototype.setStrokeWidth = function(width) {
+	if(this.width / 2 > width && this.height / 2 > width) {
+		this.strokeWidthPx = width;
+		return this.strokeWidthPx;
+	}
+
+	var maxWidth = width;
+	if(this.width > this.height) {
+		maxWidth = this.height / 2;
+	} else {
+		maxWidth = this.width / 2;
+	}
+
+	this.strokeWidthPx = maxWidth;
+}
+
 ChocoButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) {
 	this.strokeColors = { };
 	this.strokeColors.out = out;

src/game/lib/color/main_color.js

@@ -14,3 +14,8 @@ MainColor.LIGHT_CHOCO_HEX		= 0xBF8763;
 MainColor.CHOCO_HEX				= 0x805A42;
 MainColor.DARK_CHOCO_HEX		= 0x402D21;
 MainColor.LIGHTER_CHOCO_HEX		= 0xE6A277;
+
+
+MainColor.BLACK_STRING			= "#000000";
+
+MainColor.BLACK_HEX				= 0x000000;

src/game/main_menu/main.js

@@ -27,7 +27,6 @@ game.state.add('MainMenu', mainMenu);
 game.state.start('MainMenu');
 
 function fontLoaded() {
-	console.log("fontLoaded #1");
 	mainMenu.fontLoaded();
 }
 

src/game/main_menu/main_menu.js

@@ -42,8 +42,6 @@ MainMenu.prototype.create = function() {
 */
 
 MainMenu.prototype.create = function() {
-	console.log("create");
-
 	this.dbService = new DBService();
 	this.dbService.setMaestroID(sessionStorageManager.getMaestroID());
 	this.dbService.setPlayerID(sessionStorageManager.getPlayerID());
@@ -52,7 +50,8 @@ MainMenu.prototype.create = function() {
 	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.beginFill(MainColor.BLACK_HEX, 1);
+	// graphics.beginFill(MainColor.CHOCO_HEX, 1);
 	graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT);
 
 	this.appGroupButtons = {};
@@ -178,15 +177,22 @@ MainMenu.prototype.makeAppGroupButtons = function() {
 }
 
 MainMenu.prototype.makeQuitButton = function() {
-	var setting = new ChocoButtonSetting(980, 40, 60, 60, 5);
+	var setting = new ChocoButtonSetting(980, 40, 60, 60, 5, 10);
-	var quitButton = new ChocoButton(
+	// var quitButton = new ChocoButton(
-		setting,	// choco button setting,
+	// 	setting,	// choco button setting,
-		(function() { this.back(); }).bind(this)
+	// 	(function() { /*this.back();*/ console.log("quit"); }).bind(this)
+	// );
+	// quitButton.addIcon("tile_choco");
+	// quitButton.setIconSize(30);
+
+	var backButton = new ChocoBackButton(
+		(function() { console.log("back"); }).bind(this)
 	);
-	quitButton.addIcon("tile_choco");
+	// backButton.addIcon("tile_choco");
-	quitButton.setIconSize(30);
+	// backButton.setIconSize(30);
 
 	this.appGroupButtons.quitButton = quitButton;
+	this.appGroupButtons.backButton = backButton;
 }
 
 MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) {

src/web/client/main_menu.html

@@ -56,6 +56,7 @@
 
 		<script src="../../game/lib/button/choco_button_setting.js"></script>
 		<script src="../../game/lib/button/choco_button.js"></script>
+		<script src="../../game/lib/button/choco_back_button.js"></script>
 
 		<!-- source files -->
 		<script src="../../game/main_menu/main_menu.js"></script>