From 4e18fb4272522c238a6f1f8fc945bff1f4ce6e0d 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 16:06:55 +0900 Subject: [PATCH] Fix: rename ChocoButton to BasicButton --- src/game/lib/button/choco_back_button.js | 51 ------------ src/game/lib/button/choco_setting_button.js | 55 ------------ src/game/lib/flat_button/back_button.js | 51 ++++++++++++ .../basic_button.js} | 83 +++++++++---------- .../button_setting.js} | 42 +++++----- src/game/lib/flat_button/setting_button.js | 55 ++++++++++++ src/game/main_menu/main_menu.js | 18 ++-- src/web/client/main_menu.html | 8 +- 8 files changed, 179 insertions(+), 184 deletions(-) delete mode 100644 src/game/lib/button/choco_back_button.js delete mode 100644 src/game/lib/button/choco_setting_button.js create mode 100644 src/game/lib/flat_button/back_button.js rename src/game/lib/{button/choco_button.js => flat_button/basic_button.js} (80%) rename src/game/lib/{button/choco_button_setting.js => flat_button/button_setting.js} (59%) create mode 100644 src/game/lib/flat_button/setting_button.js diff --git a/src/game/lib/button/choco_back_button.js b/src/game/lib/button/choco_back_button.js deleted file mode 100644 index cb2872a..0000000 --- a/src/game/lib/button/choco_back_button.js +++ /dev/null @@ -1,51 +0,0 @@ -ChocoBackButton.prototype = Object.create(ChocoButton.prototype); -ChocoBackButton.constructor = ChocoBackButton; - -function ChocoBackButton(clickEvent) { - var setting = new ChocoButtonSetting(40, 40, 60, 60); - setting.setStrokeWidth(3); - setting.setRound(10); - setting.setFont("Nanum Gothic Coding"); - 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"; \ No newline at end of file diff --git a/src/game/lib/button/choco_setting_button.js b/src/game/lib/button/choco_setting_button.js deleted file mode 100644 index b314dab..0000000 --- a/src/game/lib/button/choco_setting_button.js +++ /dev/null @@ -1,55 +0,0 @@ -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.setFont("Nanum Brush Script"); - setting.setFont("Nanum Gothic"); - setting.setFontSize(20); - 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.setMainText("세팅"); - // this.setMainText("Setting"); - // this.addIcon("tile_choco"); - // this.setIconSize(40); - this.setShortcutText("세팅"); - // this.setShortcutText("Setting"); -} - -ChocoSettingButton.STROKE_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; -ChocoSettingButton.STROKE_COLOR_OVER_HEX = MainColor.DARK_CHOCO_HEX; -ChocoSettingButton.STROKE_COLOR_DOWN_HEX = MainColor.DARK_CHOCO_HEX; -ChocoSettingButton.STROKE_COLOR_DISABLED_HEX = MainColor.DARK_CHOCO_HEX; - -ChocoSettingButton.BUTTON_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; -ChocoSettingButton.BUTTON_COLOR_OVER_HEX = MainColor.LIGHTER_CHOCO_HEX; -ChocoSettingButton.BUTTON_COLOR_DOWN_HEX = MainColor.LIGHT_CHOCO_HEX; -ChocoSettingButton.BUTTON_COLOR_DISABLED_HEX = MainColor.BLACK_HEX; - -ChocoSettingButton.TEXT_COLOR_OUT_HEX = MainColor.WHITE_STRING; -ChocoSettingButton.TEXT_COLOR_OVER_HEX = MainColor.DARK_CHOCO_STRING; -ChocoSettingButton.TEXT_COLOR_DOWN_HEX = MainColor.LIGHTER_CHOCO_STRING; -ChocoSettingButton.TEXT_COLOR_DISABLED_HEX = MainColor.GREY_STRING; \ No newline at end of file diff --git a/src/game/lib/flat_button/back_button.js b/src/game/lib/flat_button/back_button.js new file mode 100644 index 0000000..d263ffe --- /dev/null +++ b/src/game/lib/flat_button/back_button.js @@ -0,0 +1,51 @@ +BackButton.prototype = Object.create(BasicButton.prototype); +BackButton.constructor = BackButton; + +function BackButton(clickEvent) { + var setting = new ButtonSetting(40, 40, 60, 60); + setting.setStrokeWidth(3); + setting.setRound(10); + 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, + BackButton.STROKE_COLOR_DOWN_HEX, + BackButton.STROKE_COLOR_DISABLED_HEX + ); + setting.setButtonColor( + BackButton.BUTTON_COLOR_OUT_HEX, + BackButton.BUTTON_COLOR_OVER_HEX, + BackButton.BUTTON_COLOR_DOWN_HEX, + BackButton.BUTTON_COLOR_DISABLED_HEX + ); + setting.setTextColor( + BackButton.TEXT_COLOR_OUT_HEX, + BackButton.TEXT_COLOR_OVER_HEX, + BackButton.TEXT_COLOR_DOWN_HEX, + BackButton.TEXT_COLOR_DISABLED_HEX + ); + + BasicButton.call(this, setting, clickEvent); + + this.addIcon("home"); + this.setIconSize(30); + this.setShortcutText("돌아가기"); +} + + +BackButton.STROKE_COLOR_OUT_HEX = 0xAA6666; +BackButton.STROKE_COLOR_OVER_HEX = 0x884444; +BackButton.STROKE_COLOR_DOWN_HEX = 0x884444; +BackButton.STROKE_COLOR_DISABLED_HEX = 0x333333; + +BackButton.BUTTON_COLOR_OUT_HEX = 0xffdddd; +BackButton.BUTTON_COLOR_OVER_HEX = 0xddaaaa; +BackButton.BUTTON_COLOR_DOWN_HEX = 0xddaaaa; +BackButton.BUTTON_COLOR_DISABLED_HEX = 0x666666; + +BackButton.TEXT_COLOR_OUT_HEX = "#aa6666"; +BackButton.TEXT_COLOR_OVER_HEX = "#884444"; +BackButton.TEXT_COLOR_DOWN_HEX = "#884444"; +BackButton.TEXT_COLOR_DISABLED_HEX = "#333333"; \ No newline at end of file diff --git a/src/game/lib/button/choco_button.js b/src/game/lib/flat_button/basic_button.js similarity index 80% rename from src/game/lib/button/choco_button.js rename to src/game/lib/flat_button/basic_button.js index 94665ec..8a7e149 100644 --- a/src/game/lib/button/choco_button.js +++ b/src/game/lib/flat_button/basic_button.js @@ -1,7 +1,7 @@ -// ChocoButton.prototype = Object.create(); -ChocoButton.constructor = ChocoButton; +// BasicButton.prototype = Object.create(); +BasicButton.constructor = BasicButton; -function ChocoButton(setting, clickEvent) { +function BasicButton(setting, clickEvent) { this.setting = setting; this.clickEvent = clickEvent; @@ -31,7 +31,7 @@ function ChocoButton(setting, clickEvent) { -ChocoButton.prototype.makestrokeSprite = function() { // outter(bigger) round rect sprite +BasicButton.prototype.makestrokeSprite = function() { // outter(bigger) round rect sprite var texture = null; if(this.setting.roundAmount === 0) { texture = new Phaser.Graphics() @@ -59,7 +59,7 @@ ChocoButton.prototype.makestrokeSprite = function() { // outter(bigger) round re return strokeSprite; } -ChocoButton.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite +BasicButton.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite var setting = this.setting; // console.log("strokeWidthPx : " + setting.strokeWidthPx); // console.log("round : " + setting.roundAmount); @@ -97,14 +97,14 @@ ChocoButton.prototype.makeButtonSprite = function() { // inner(smaller) round re // icon -ChocoButton.prototype.addIcon = function(spriteName) { +BasicButton.prototype.addIcon = function(spriteName) { if(spriteName === null) return; if(spriteName.length === 0) return; - // console.log("addIcon : " + spriteName); + console.log("addIcon : " + spriteName); this.iconSprite = game.add.sprite(0, 0, spriteName); this.iconSprite.x = this.buttonSprite.width / 2; this.iconSprite.y = this.buttonSprite.height / 2; @@ -113,36 +113,35 @@ ChocoButton.prototype.addIcon = function(spriteName) { this.buttonSprite.addChild(this.iconSprite); this.mainText.text = ""; - - this.alignContents(); this.mouseOut(); } -ChocoButton.prototype.setIconSize = function(size) { +BasicButton.prototype.setIconSize = function(size) { this.setIconWidth(size); this.setIconHeight(size); } -ChocoButton.prototype.setIconWidth = function(size) { +BasicButton.prototype.setIconWidth = function(size) { this.iconSprite.width = size; } -ChocoButton.prototype.setIconHeight = function(size) { +BasicButton.prototype.setIconHeight = function(size) { this.iconSprite.height = size; + this.alignContents(); } // button text -ChocoButton.prototype.setFont = function(fontName) { +BasicButton.prototype.setFont = function(fontName) { this.setting.font = fontName; } -ChocoButton.prototype.applyLoadedFont = function() { +BasicButton.prototype.applyLoadedFont = function() { this.mainText.font = this.setting.font; this.shortcutText.font = this.setting.font; } -ChocoButton.prototype.makeMainText = function() { +BasicButton.prototype.makeMainText = function() { var width = this.setting.width / 2; var height = this.setting.height / 2; @@ -153,25 +152,25 @@ ChocoButton.prototype.makeMainText = function() { mainText.anchor.set(0.5); mainText.fontSize = this.setting.fontSize; // mainText.fontWeight = "bolder"; - mainText.lineSpacing = ChocoButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX; + mainText.lineSpacing = ButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX; return mainText; } -ChocoButton.prototype.setMainText = function(text) { +BasicButton.prototype.setMainText = function(text) { this.mainText.text = text; if(this.iconSprite !== null) this.iconSprite = null; this.alignContents(); } -ChocoButton.prototype.makeShortcutText = function() { +BasicButton.prototype.makeShortcutText = function() { var posX = this.buttonSprite.width / 2; var posY = this.buttonSprite.height / 2; var shortcutText = game.add.text(posX, posY, ""); shortcutText.anchor.set(0.5); - shortcutText.fontSize = ChocoButton.SHORTCUT_TEXT_FONTSIZE; + shortcutText.fontSize = BasicButton.SHORTCUT_TEXT_FONTSIZE; shortcutText.fontWeight = "normal"; // shortcutText.addColor(this.setting.textColors.over, 0); shortcutText.addColor("0xffffff", 0); @@ -179,12 +178,12 @@ ChocoButton.prototype.makeShortcutText = function() { return shortcutText; } -ChocoButton.prototype.setShortcutText = function(text) { +BasicButton.prototype.setShortcutText = function(text) { this.shortcutText.text = text; this.alignContents(); } -ChocoButton.prototype.alignContents = function() { +BasicButton.prototype.alignContents = function() { var mainTextHeight = 0; var iconSpriteHeight = 0; var shortcutTextHeight = 0; @@ -208,9 +207,7 @@ ChocoButton.prototype.alignContents = function() { var offsetRatio = 7; var offsetMainText = mainTextHeight / offsetRatio; var offsetShortcutText = shortcutTextHeight / offsetRatio; - var gap = ChocoButton.SHORTCUT_TEXT_FONTSIZE / 2; - - this.shortcutText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetShortcutText + gap; + var gap = (iconSpriteHeight > 0 ? gap = 0 : BasicButton.SHORTCUT_TEXT_FONTSIZE / 2); if(shortcutTextHeight === 0) { if(mainTextHeight > 0) @@ -221,18 +218,16 @@ ChocoButton.prototype.alignContents = function() { else { if(mainTextHeight > 0) this.mainText.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf + offsetMainText; - else if(iconSpriteHeight > 0) { - this.iconSprite.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf; - // this.iconSprite.y = this.shortcutText.y / 2; - console.log(this.buttonSprite.height); - console.log(this.shortcutText.y); - } + else if(iconSpriteHeight > 0) + this.iconSprite.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf; // - gap / 4; } + + this.shortcutText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetShortcutText + gap; } // event handler -ChocoButton.prototype.setEventMethod = function(target) { +BasicButton.prototype.setEventMethod = function(target) { target.events.onInputOver.add( (function() { this.mouseOver(); }).bind(this), this @@ -257,7 +252,7 @@ ChocoButton.prototype.setEventMethod = function(target) { ); } -ChocoButton.prototype.mouseOut = function() { +BasicButton.prototype.mouseOut = function() { this.strokeSprite.tint = this.setting.strokeColors.out; this.buttonSprite.tint = this.setting.buttonColors.out; @@ -269,7 +264,7 @@ ChocoButton.prototype.mouseOut = function() { this.shortcutText.fill = this.setting.textColors.out; } -ChocoButton.prototype.mouseOver = function() { +BasicButton.prototype.mouseOver = function() { this.strokeSprite.tint = this.setting.strokeColors.over; this.buttonSprite.tint = this.setting.buttonColors.over; @@ -281,7 +276,7 @@ ChocoButton.prototype.mouseOver = function() { this.shortcutText.fill = this.setting.textColors.over; } -ChocoButton.prototype.mouseDown = function() { +BasicButton.prototype.mouseDown = function() { this.strokeSprite.tint = this.setting.strokeColors.down; this.buttonSprite.tint = this.setting.buttonColors.down; @@ -293,7 +288,7 @@ ChocoButton.prototype.mouseDown = function() { this.shortcutText.fill = this.setting.textColors.down; } -ChocoButton.prototype.buttonDisabled = function() { +BasicButton.prototype.buttonDisabled = function() { this.strokeSprite.tint = this.setting.strokeColors.disabled; this.buttonSprite.tint = this.setting.buttonColors.disabled; @@ -307,15 +302,15 @@ ChocoButton.prototype.buttonDisabled = function() { -ChocoButton.prototype.getPosX = function() { +BasicButton.prototype.getPosX = function() { return this.strokeSprite.x + this.setting.width / 2; } -ChocoButton.prototype.getPosY = function() { +BasicButton.prototype.getPosY = function() { return this.strokeSprite.y + y - this.setting.height / 2; } -ChocoButton.prototype.move = function(x, y) { +BasicButton.prototype.move = function(x, y) { this.strokeSprite.x = x - this.setting.width / 2; this.strokeSprite.y = y - this.setting.height / 2; @@ -323,11 +318,11 @@ ChocoButton.prototype.move = function(x, y) { this.buttonSprite.y = y - this.setting.height / 2 + this.setting.strokeWidthPx; } -ChocoButton.prototype.getInputEnabled = function() { +BasicButton.prototype.getInputEnabled = function() { return this.buttonSprite.inputEnabled; } -ChocoButton.prototype.setInputEnabled = function(isEnabled) { +BasicButton.prototype.setInputEnabled = function(isEnabled) { this.strokeSprite.inputEnabled = isEnabled; this.buttonSprite.inputEnabled = isEnabled; @@ -338,11 +333,11 @@ ChocoButton.prototype.setInputEnabled = function(isEnabled) { } } -ChocoButton.prototype.setLineSpacing = function(spacingInPixels) { +BasicButton.prototype.setLineSpacing = function(spacingInPixels) { this.mainText.lineSpacing = spacingInPixels; } -ChocoButton.NONE_ICON = ""; -ChocoButton.NONE_BUTTON_TEXT = ""; +BasicButton.NONE_ICON = ""; +BasicButton.NONE_BUTTON_TEXT = ""; -ChocoButton.SHORTCUT_TEXT_FONTSIZE = 12; \ No newline at end of file +BasicButton.SHORTCUT_TEXT_FONTSIZE = 12; \ No newline at end of file diff --git a/src/game/lib/button/choco_button_setting.js b/src/game/lib/flat_button/button_setting.js similarity index 59% rename from src/game/lib/button/choco_button_setting.js rename to src/game/lib/flat_button/button_setting.js index 5034a64..176047b 100644 --- a/src/game/lib/button/choco_button_setting.js +++ b/src/game/lib/flat_button/button_setting.js @@ -1,4 +1,4 @@ -function ChocoButtonSetting(x, y, width, height) { +function ButtonSetting(x, y, width, height) { this.x = x; this.y = y; this.width = width; @@ -8,14 +8,14 @@ function ChocoButtonSetting(x, y, width, height) { this.roundAmount = 0; this.fontSize = 10; - 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; + this.strokeColors = ButtonSetting.DEFAULT_STROKE_COLORS; + this.buttonColors = ButtonSetting.DEFAULT_BUTTON_COLORS; + this.textColors = ButtonSetting.DEFAULT_TEXT_COLORS; + this.iconColors = ButtonSetting.DEFAULT_ICON_COLORS; + this.fontStyle = ButtonSetting.DEFAULT_TEXT_FONT; }; -ChocoButtonSetting.prototype.setRound = function(round) { +ButtonSetting.prototype.setRound = function(round) { if(this.width / 2 > round && this.height / 2 > round) { this.roundAmount = round; return this.roundAmount; @@ -31,7 +31,7 @@ ChocoButtonSetting.prototype.setRound = function(round) { this.roundAmount = maxRound; } -ChocoButtonSetting.prototype.setStrokeWidth = function(width) { +ButtonSetting.prototype.setStrokeWidth = function(width) { if(this.width / 2 > width && this.height / 2 > width) { this.strokeWidthPx = width; return this.strokeWidthPx; @@ -47,15 +47,15 @@ ChocoButtonSetting.prototype.setStrokeWidth = function(width) { this.strokeWidthPx = maxWidth; } -ChocoButtonSetting.prototype.setFont = function(fontName) { +ButtonSetting.prototype.setFont = function(fontName) { this.font = fontName; } -ChocoButtonSetting.prototype.setFontSize = function(size) { +ButtonSetting.prototype.setFontSize = function(size) { this.fontSize = size; } -ChocoButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) { +ButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) { this.strokeColors = { }; this.strokeColors.out = out; this.strokeColors.over = over; @@ -63,7 +63,7 @@ ChocoButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled this.strokeColors.disabled = disabled; } -ChocoButtonSetting.prototype.setButtonColor = function(out, over, down, disabled) { +ButtonSetting.prototype.setButtonColor = function(out, over, down, disabled) { this.buttonColors = { }; this.buttonColors.out = out; this.buttonColors.over = over; @@ -71,7 +71,7 @@ ChocoButtonSetting.prototype.setButtonColor = function(out, over, down, disabled this.buttonColors.disabled = disabled; } -ChocoButtonSetting.prototype.setTextColor = function(out, over, down, disabled) { +ButtonSetting.prototype.setTextColor = function(out, over, down, disabled) { this.textColors = { }; this.textColors.out = out; this.textColors.over = over; @@ -79,7 +79,7 @@ ChocoButtonSetting.prototype.setTextColor = function(out, over, down, disabled) this.textColors.disabled = disabled; } -ChocoButtonSetting.prototype.setIconColor = function(out, over, down, disabled) { +ButtonSetting.prototype.setIconColor = function(out, over, down, disabled) { this.iconColors = { }; this.iconColors.out = out; this.iconColors.over = over; @@ -88,35 +88,35 @@ ChocoButtonSetting.prototype.setIconColor = function(out, over, down, disabled) } -ChocoButtonSetting.DEFAULT_STROKE_COLORS = { +ButtonSetting.DEFAULT_STROKE_COLORS = { out: 0x666666, over: 0x333333, down: 0x333333, disabled: 0x666666 }; -ChocoButtonSetting.DEFAULT_BUTTON_COLORS = { +ButtonSetting.DEFAULT_BUTTON_COLORS = { out: 0xffffff, over: 0xddffdd, down: 0xaaffaa, disabled: 0x333333 }; -ChocoButtonSetting.DEFAULT_TEXT_COLORS = { +ButtonSetting.DEFAULT_TEXT_COLORS = { out: "#000", over: "#333", down: "#666", disabled: "#999" }; -ChocoButtonSetting.DEFAULT_ICON_COLORS = { +ButtonSetting.DEFAULT_ICON_COLORS = { out: 0xffffff, over: 0xddffdd, down: 0xaaffaa, disabled: 0x333333 }; -ChocoButtonSetting.DEFAULT_TEXT_FONT = { +ButtonSetting.DEFAULT_TEXT_FONT = { font: "30px", boundsAlignH: "center", // left, center. right boundsAlignV: "middle", // top, middle, bottom @@ -124,5 +124,5 @@ ChocoButtonSetting.DEFAULT_TEXT_FONT = { align: "center" }; -ChocoButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel -ChocoButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel \ No newline at end of file +ButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel +ButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel \ No newline at end of file diff --git a/src/game/lib/flat_button/setting_button.js b/src/game/lib/flat_button/setting_button.js new file mode 100644 index 0000000..1177ff3 --- /dev/null +++ b/src/game/lib/flat_button/setting_button.js @@ -0,0 +1,55 @@ +SettingButton.prototype = Object.create(BasicButton.prototype); +SettingButton.constructor = SettingButton; + +function SettingButton(clickEvent) { + var setting = new ButtonSetting(980, 40, 60, 60); + setting.setStrokeWidth(0); + setting.setRound(10); + // setting.setFont("Nanum Brush Script"); + setting.setFont("Nanum Gothic"); + setting.setFontSize(20); + setting.fontStyle.boundsAlignH = "center"; // left, center. right + setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom + setting.setStrokeColor( + SettingButton.STROKE_COLOR_OUT_HEX, + SettingButton.STROKE_COLOR_OVER_HEX, + SettingButton.STROKE_COLOR_DOWN_HEX, + SettingButton.STROKE_COLOR_DISABLED_HEX + ); + setting.setButtonColor( + SettingButton.BUTTON_COLOR_OUT_HEX, + SettingButton.BUTTON_COLOR_OVER_HEX, + SettingButton.BUTTON_COLOR_DOWN_HEX, + SettingButton.BUTTON_COLOR_DISABLED_HEX + ); + setting.setTextColor( + SettingButton.TEXT_COLOR_OUT_HEX, + SettingButton.TEXT_COLOR_OVER_HEX, + SettingButton.TEXT_COLOR_DOWN_HEX, + SettingButton.TEXT_COLOR_DISABLED_HEX + ); + + BasicButton.call(this, setting, clickEvent); + + this.setMainText("세팅"); + // this.setMainText("Setting"); + // this.addIcon("tile_choco"); + // this.setIconSize(40); + this.setShortcutText("세팅"); + // this.setShortcutText("Setting"); +} + +SettingButton.STROKE_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; +SettingButton.STROKE_COLOR_OVER_HEX = MainColor.DARK_CHOCO_HEX; +SettingButton.STROKE_COLOR_DOWN_HEX = MainColor.DARK_CHOCO_HEX; +SettingButton.STROKE_COLOR_DISABLED_HEX = MainColor.DARK_CHOCO_HEX; + +SettingButton.BUTTON_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; +SettingButton.BUTTON_COLOR_OVER_HEX = MainColor.LIGHTER_CHOCO_HEX; +SettingButton.BUTTON_COLOR_DOWN_HEX = MainColor.LIGHT_CHOCO_HEX; +SettingButton.BUTTON_COLOR_DISABLED_HEX = MainColor.BLACK_HEX; + +SettingButton.TEXT_COLOR_OUT_HEX = MainColor.WHITE_STRING; +SettingButton.TEXT_COLOR_OVER_HEX = MainColor.DARK_CHOCO_STRING; +SettingButton.TEXT_COLOR_DOWN_HEX = MainColor.LIGHTER_CHOCO_STRING; +SettingButton.TEXT_COLOR_DISABLED_HEX = MainColor.GREY_STRING; \ 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 85941e4..1d858e7 100644 --- a/src/game/main_menu/main_menu.js +++ b/src/game/main_menu/main_menu.js @@ -6,6 +6,7 @@ function MainMenu() { MainMenu.prototype.preload = function() { game.load.image('tile_choco', '../../../resources/image/background/tile_choco.png'); + game.load.image('home', '../../../resources/image/icon/home.png'); game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); } @@ -79,7 +80,7 @@ MainMenu.prototype.fontLoaded = function() { this.makeAppGroupButtons(); // console.log(this.appGroupButtons); - // this.appGroupButtons.backButton.applyLoadedFont(); + this.appGroupButtons.backButton.applyLoadedFont(); this.appGroupButtons.settingButton.applyLoadedFont(); @@ -183,7 +184,7 @@ MainMenu.prototype.makeAppGroupButtons = function() { } MainMenu.prototype.makeQuitButton = function() { - var setting = new ChocoButtonSetting(980, 40, 60, 60, 5, 10); + var setting = new ButtonSetting(980, 40, 60, 60, 5, 10); // var quitButton = new ChocoButton( // setting, // choco button setting, // (function() { /*this.back();*/ console.log("quit"); }).bind(this) @@ -191,17 +192,16 @@ MainMenu.prototype.makeQuitButton = function() { // quitButton.addIcon("tile_choco"); // quitButton.setIconSize(30); - var settingButton = new ChocoSettingButton( + var backButton = new BackButton( + (function() { console.log("back"); }).bind(this) + ); + + var settingButton = new SettingButton( (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.settingButton = settingButton; - // this.appGroupButtons.backButton = backButton; + this.appGroupButtons.backButton = backButton; } MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) { diff --git a/src/web/client/main_menu.html b/src/web/client/main_menu.html index cc6a5d0..780c397 100644 --- a/src/web/client/main_menu.html +++ b/src/web/client/main_menu.html @@ -54,10 +54,10 @@ - - - - + + + +