diff --git a/src/game/lib/button/choco_button.js b/src/game/lib/button/choco_button.js index d1469fa..0b642c3 100644 --- a/src/game/lib/button/choco_button.js +++ b/src/game/lib/button/choco_button.js @@ -5,64 +5,46 @@ function ChocoButton(setting, clickEvent) { this.setting = setting; this.clickEvent = clickEvent; + // button sprite + this.buttonStrokeSprite = this.makeButtonStrokeSprite(); + this.setEventMethod(this.buttonStrokeSprite); + + this.buttonSprite = this.makeButtonSprite(); + this.setEventMethod(this.buttonSprite); + + // button icon sprite 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.buttonIconSprite = null; + // button text this.mainText = this.makeText(""); - this.button.addChild(this.mainText); + this.buttonSprite.addChild(this.mainText); this.shortcutText = this.makeShortcutText(); - this.button.addChild(this.shortcutText); + this.buttonSprite.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() +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(); - return game.add.sprite( + var buttonStrokeSprite = game.add.sprite( this.setting.x - this.setting.width / 2, this.setting.y - this.setting.height / 2, - btnTexture + texture ); + + // buttonStrokeSprite.anchor.setTo(0.5, 0.5); + buttonStrokeSprite.inputEnabled = true; + + return buttonStrokeSprite; } ChocoButton.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite @@ -70,26 +52,37 @@ ChocoButton.prototype.makeButtonSprite = function() { // inner(smaller) round re 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() + var texture = 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( + var buttonSprite = game.add.sprite( this.setting.x - this.setting.width / 2 + this.setting.strokeWidthPx, this.setting.y - this.setting.height / 2 + this.setting.strokeWidthPx, - btnTexture + texture ); + + // buttonSprite.anchor.setTo(0.5, 0.5); + buttonSprite.inputEnabled = true; + + return buttonSprite; } -ChocoButton.prototype.makeIcon = function(iconName) { - var icon = game.add.sprite(0, 0, iconName); - icon.width = 40; - icon.height = 40; - return icon; +// icon +ChocoButton.prototype.addIcon = function(spriteName) { + if(spriteName != null && spriteName.length > 0) { + this.buttonIconSprite = game.add.sprite(0, 0, spriteName); + this.buttonIconSprite.x = this.buttonSprite.width / 2; + this.buttonIconSprite.y = this.buttonSprite.height / 2; + this.buttonIconSprite.anchor.setTo(0.5, 0.5); + this.setIconSize(40); + this.buttonSprite.addChild(this.buttonIconSprite); + + this.mouseOut(); + } } ChocoButton.prototype.setIconSize = function(size) { @@ -98,13 +91,15 @@ ChocoButton.prototype.setIconSize = function(size) { } ChocoButton.prototype.setIconWidth = function(size) { - this.buttonIcon.width = size; + this.buttonIconSprite.width = size; } ChocoButton.prototype.setIconHeight = function(size) { - this.buttonIcon.height = size; + this.buttonIconSprite.height = size; } + +// button text ChocoButton.prototype.makeText = function(textContent) { var width = this.setting.width / 2 - this.setting.strokeWidthPx; var height = this.setting.height / 2; @@ -120,101 +115,123 @@ ChocoButton.prototype.makeText = function(textContent) { } 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, ""); + var shortcutText = game.add.text(this.buttonSprite.width / 2, this.buttonSprite.height * 9 / 10, ""); shortcutText.anchor.set(0.5); - shortcutText.fontSize = this.button.height * 2 / 10; + shortcutText.fontSize = this.buttonSprite.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.setShortcutText = function(text) { + this.shortcutText.text = "[ " + text + " ]"; } +// event handler +ChocoButton.prototype.setEventMethod = function(target) { + target.events.onInputOver.add( + (function() { this.mouseOver(); }).bind(this), + this + ); + target.events.onInputOut.add( + (function() { this.mouseOut(); }).bind(this), + this + ); + target.events.onInputDown.add( + (function() { + this.mouseDown(); + + if(this.clickEvent) { + this.clickEvent(); + } + }).bind(this), + this + ); + target.events.onInputUp.add( + (function() { this.mouseOver(); }).bind(this), + this + ); +} + ChocoButton.prototype.mouseOut = function() { + this.buttonStrokeSprite.tint = this.setting.strokeColors.out; + this.buttonSprite.tint = this.setting.buttonColors.out; + + if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null)) + this.buttonIconSprite.tint = this.setting.iconColors.out; + this.mainText.fill = this.setting.textColors.out; - if(this.shortcutText != undefined) + 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.buttonStrokeSprite.tint = this.setting.strokeColors.over; + this.buttonSprite.tint = this.setting.buttonColors.over; + + if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null)) + this.buttonIconSprite.tint = this.setting.iconColors.over; + this.mainText.fill = this.setting.textColors.over; - if(this.shortcutText != undefined) + 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.buttonStrokeSprite.tint = this.setting.strokeColors.down; + this.buttonSprite.tint = this.setting.buttonColors.down; + + if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null)) + this.buttonIconSprite.tint = this.setting.iconColors.down; + this.mainText.fill = this.setting.textColors.down; - if(this.shortcutText != undefined) + 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.buttonStrokeSprite.tint = this.setting.strokeColors.disabled; + this.buttonSprite.tint = this.setting.buttonColors.disabled; + + if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null)) + this.buttonIconSprite.tint = this.setting.iconColors.disabled; + this.mainText.fill = this.setting.textColors.disabled; - if(this.shortcutText != undefined) + if(typeof 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; + return this.buttonStrokeSprite.x + this.setting.width / 2; } ChocoButton.prototype.getPosY = function() { - return this.buttonStroke.y + y - this.setting.height / 2; + return this.buttonStrokeSprite.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.buttonStrokeSprite.x = x - this.setting.width / 2; + this.buttonStrokeSprite.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; + this.buttonSprite.x = x - this.setting.width / 2 + this.setting.strokeWidthPx; + this.buttonSprite.y = y - this.setting.height / 2 + this.setting.strokeWidthPx; } ChocoButton.prototype.getInputEnabled = function() { - return this.button.inputEnabled; + return this.buttonSprite.inputEnabled; } ChocoButton.prototype.setInputEnabled = function(isEnabled) { - this.buttonStroke.inputEnabled = isEnabled; - this.button.inputEnabled = isEnabled; + this.buttonStrokeSprite.inputEnabled = isEnabled; + this.buttonSprite.inputEnabled = isEnabled; if(isEnabled === true) { this.mouseOut(); diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js index 2651d09..8d850bd 100644 --- a/src/game/main_menu/main_menu.js +++ b/src/game/main_menu/main_menu.js @@ -178,16 +178,13 @@ MainMenu.prototype.makeAppGroupButtons = function() { } MainMenu.prototype.makeQuitButton = function() { - var setting = new ChocoButtonSetting(1000, 40, 60, 60, 5); + var setting = new ChocoButtonSetting(980, 40, 60, 60, 5); var quitButton = new ChocoButton( setting, // choco button setting, - (function() { - this.back(); - }).bind(this) + (function() { this.back(); }).bind(this) ); quitButton.addIcon("tile_choco"); quitButton.setIconSize(30); - console.log(quitButton); this.appGroupButtons.quitButton = quitButton; }