From c5ddd81e7d1bc49e2329924a76c9ab1338ce6791 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Thu, 25 Jul 2019 10:53:57 +0900 Subject: [PATCH] Add: ChocoSettingButton --- src/game/lib/button/choco_back_button.js | 4 +- src/game/lib/button/choco_button.js | 38 +++++++++++----- src/game/lib/button/choco_button_setting.js | 7 +-- src/game/lib/button/choco_setting_button.js | 50 +++++++++++++++++++++ src/game/main_menu/main_menu.js | 5 ++- src/web/client/main_menu.html | 1 + 6 files changed, 90 insertions(+), 15 deletions(-) create mode 100644 src/game/lib/button/choco_setting_button.js diff --git a/src/game/lib/button/choco_back_button.js b/src/game/lib/button/choco_back_button.js index a350e54..525840a 100644 --- a/src/game/lib/button/choco_back_button.js +++ b/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( diff --git a/src/game/lib/button/choco_button.js b/src/game/lib/button/choco_button.js index cb25fa6..8a12083 100644 --- a/src/game/lib/button/choco_button.js +++ b/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() - .beginFill(0xffffff) - .drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount) - .endFill() - .generateTexture(); + 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() - .beginFill(0xffffff) - .drawRoundedRect(0, 0, btnWidth, btnHeight, btnRoundAmount) - .endFill() - .generateTexture(); + 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; diff --git a/src/game/lib/button/choco_button_setting.js b/src/game/lib/button/choco_button_setting.js index 9fe4e7b..2005e5d 100644 --- a/src/game/lib/button/choco_button_setting.js +++ b/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; diff --git a/src/game/lib/button/choco_setting_button.js b/src/game/lib/button/choco_setting_button.js new file mode 100644 index 0000000..64ac11c --- /dev/null +++ b/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"; \ No newline at end of file diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js index 91039ce..265bde9 100644 --- a/src/game/main_menu/main_menu.js +++ b/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; } diff --git a/src/web/client/main_menu.html b/src/web/client/main_menu.html index d9381dd..cc6a5d0 100644 --- a/src/web/client/main_menu.html +++ b/src/web/client/main_menu.html @@ -57,6 +57,7 @@ +