Add: ChocoSettingButton

src/game/lib/button/choco_back_button.js

@@ -2,7 +2,9 @@ ChocoBackButton.prototype = Object.create(ChocoButton.prototype);
 ChocoBackButton.constructor = ChocoBackButton;
 
 function ChocoBackButton(clickEvent) {
-	var setting = new ChocoButtonSetting(980, 40, 60, 60, 3, 10);
+	var setting = new ChocoButtonSetting(40, 40, 60, 60);
+	setting.setStrokeWidth(3);
+	setting.setRound(10);
 	setting.fontStyle.boundsAlignH = "center";	// left, center. right
 	setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
 	setting.setStrokeColor(

src/game/lib/button/choco_button.js

@@ -29,11 +29,20 @@ function ChocoButton(setting, clickEvent) {
 
 
 ChocoButton.prototype.makeButtonStrokeSprite = function() {	// outter(bigger) round rect sprite
-	var texture = new Phaser.Graphics()
+	var texture = null;
+	if(this.setting.roundAmount === 0) {
+		texture = new Phaser.Graphics()
+			.beginFill(0xffffff)
+			.drawRect(0, 0, this.setting.width, this.setting.height)
+			.endFill()
+			.generateTexture();
+	} else {
+		texture = new Phaser.Graphics()
 			.beginFill(0xffffff)
 			.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
 			.endFill()
 			.generateTexture();
+	}
 
 	var buttonStrokeSprite = game.add.sprite(
 		this.setting.x - this.setting.width / 2,
@@ -58,11 +67,20 @@ ChocoButton.prototype.makeButtonSprite = function() {	// inner(smaller) round re
 	var longSideButton = (btnWidth > btnHeight ? btnWidth : btnHeight);
 	var btnRoundAmount = setting.roundAmount * longSideButton / longSideStroke;
 
-	var texture = new Phaser.Graphics()
+	var texture = null;
+	if(this.setting.roundAmount === 0) {
+		texture = new Phaser.Graphics()
+			.beginFill(0xffffff)
+			.drawRect(0, 0, btnWidth, btnHeight)
+			.endFill()
+			.generateTexture();
+	} else {
+		texture = new Phaser.Graphics()
 			.beginFill(0xffffff)
 			.drawRoundedRect(0, 0, btnWidth, btnHeight, btnRoundAmount)
 			.endFill()
 			.generateTexture();
+	}
 
 	var posX = setting.x - btnWidth / 2;
 	var posY = setting.y - btnHeight / 2;

src/game/lib/button/choco_button_setting.js

@@ -1,10 +1,11 @@
-function ChocoButtonSetting(x, y, width, height, strokeWidth, roundAmount) {
+function ChocoButtonSetting(x, y, width, height) {
 	this.x = x;
 	this.y = y;
 	this.width = width;
 	this.height = height;
-	this.setRound(roundAmount);
-	this.setStrokeWidth(strokeWidth);
+
+	this.strokeWidthPx = 0;
+	this.roundAmount = 0;
 
 	this.strokeColors = ChocoButtonSetting.DEFAULT_STROKE_COLORS;
 	this.buttonColors = ChocoButtonSetting.DEFAULT_BUTTON_COLORS;

src/game/lib/button/choco_setting_button.js

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

src/game/main_menu/main_menu.js

@@ -185,13 +185,16 @@ MainMenu.prototype.makeQuitButton = function() {
 	// quitButton.addIcon("tile_choco");
 	// quitButton.setIconSize(30);
 
+	var settingButton = new ChocoSettingButton(
+		(function() { console.log("setting"); }).bind(this)
+	);
 	var backButton = new ChocoBackButton(
 		(function() { console.log("back"); }).bind(this)
 	);
 	// backButton.addIcon("tile_choco");
 	// backButton.setIconSize(30);
 
-	this.appGroupButtons.quitButton = quitButton;
+	this.appGroupButtons.settingButton = settingButton;
 	this.appGroupButtons.backButton = backButton;
 }
 

src/web/client/main_menu.html

@@ -57,6 +57,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>
+		<script src="../../game/lib/button/choco_setting_button.js"></script>
 
 		<!-- source files -->
 		<script src="../../game/main_menu/main_menu.js"></script>