diff --git a/client/src/scenes/statsheet.button.js b/client/src/scenes/statsheet.button.js new file mode 100755 index 00000000..ce889433 --- /dev/null +++ b/client/src/scenes/statsheet.button.js @@ -0,0 +1,16 @@ +const { TEXT, POSITIONS: { STATS } } = require('./constants'); + +const menuHeight = STATS.height() * 0.1; +const menuWidth = STATS.width() * 0.25; + +function addButton(scene, x, y, cback, name) { + const button = scene.add + .rectangle(x, y, menuWidth, menuHeight, 0x222222) + .setInteractive() + .setOrigin(0) + .on('pointerdown', cback); + scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER) + .setOrigin(0.5, 0.5); +} + +module.exports = addButton; diff --git a/client/src/scenes/statsheet.js b/client/src/scenes/statsheet.js index 505549cd..89f42311 100755 --- a/client/src/scenes/statsheet.js +++ b/client/src/scenes/statsheet.js @@ -1,13 +1,14 @@ const Phaser = require('phaser'); + const Passives = require('./passives'); const Stats = require('./statsheet.stats'); const Skills = require('./statsheet.skills'); -const { TEXT, POSITIONS: { STATS } } = require('./constants'); +const { POSITIONS: { STATS } } = require('./constants'); +const addButton = require('./statsheet.button'); const menuOrig = STATS.height() * 0.5; const menuHeight = STATS.height() * 0.1; const menuPad = STATS.height() * 0.01; -const menuWidth = STATS.width() * 0.25; class StatSheet extends Phaser.Scene { constructor() { @@ -22,62 +23,37 @@ class StatSheet extends Phaser.Scene { } addControls(cryp) { - const menu = this.add - .rectangle(0, menuOrig, menuWidth, menuHeight, 0x222222) - .setInteractive() - .setOrigin(0) - .on('pointerdown', () => { - // Registry events won't get auto cleaned - this.registry.events.off('changedata', this.updateData, this); - this.scene.run('CrypList'); - this.scene.remove('Skills'); - this.scene.remove('Passives'); - this.scene.remove(); - }); + const menuCback = () => { + this.registry.events.off('changedata', this.updateData, this); + this.scene.run('CrypList'); + this.scene.remove('Skills'); + this.scene.remove('Passives'); + this.scene.remove(); + }; + const passiveCback = () => { + if (this.passives) return false; + this.removeSkills(); + this.addPassives(cryp); + this.passives = true; + return true; + }; + const skillCback = () => { + if (this.skills) return false; + this.removePassives(); + this.addSkills(cryp); + this.skills = true; + return true; + }; + const clearCback = () => { + this.removePassives(); + this.removeSkills(); + return true; + }; - this.add.text(menu.getCenter().x, menu.getCenter().y, 'Main Menu', TEXT.HEADER) - .setOrigin(0.5, 0.5); - - const passives = this.add - .rectangle(0, menuOrig + menuHeight + menuPad, menuWidth, menuHeight, 0x222222) - .setInteractive() - .setOrigin(0) - .on('pointerdown', () => { - if (this.passives) return false; - this.removeSkills(); - this.addPassives(cryp); - this.passives = true; - return true; - }); - - this.add.text(passives.getCenter().x, passives.getCenter().y, 'View Passives', TEXT.HEADER) - .setOrigin(0.5, 0.5); - - const skills = this.add - .rectangle(0, menuOrig + (menuHeight + menuPad) * 2, menuWidth, menuHeight, 0x222222) - .setInteractive() - .setOrigin(0) - .on('pointerdown', () => { - if (this.skills) return false; - this.removePassives(); - this.addSkills(cryp); - this.skills = true; - return true; - }); - this.add.text(skills.getCenter().x, skills.getCenter().y, 'View Skills', TEXT.HEADER) - .setOrigin(0.5, 0.5); - - const clear = this.add - .rectangle(0, menuOrig + (menuHeight + menuPad) * 3, menuWidth, menuHeight, 0x222222) - .setInteractive() - .setOrigin(0) - .on('pointerdown', () => { - this.removePassives(); - this.removeSkills(); - return true; - }); - this.add.text(clear.getCenter().x, clear.getCenter().y, 'View Cryp', TEXT.HEADER) - .setOrigin(0.5, 0.5); + addButton(this, 0, menuOrig, menuCback, 'Main Menu'); + addButton(this, 0, menuOrig + (menuHeight + menuPad), passiveCback, 'View Passives'); + addButton(this, 0, menuOrig + (menuHeight + menuPad) * 2, skillCback, 'View Skills'); + addButton(this, 0, menuOrig + (menuHeight + menuPad) * 3, clearCback, 'View Cryp'); } addSkills(cryp) { diff --git a/client/src/scenes/statsheet.skills.js b/client/src/scenes/statsheet.skills.js index 2328b03e..d31098fc 100755 --- a/client/src/scenes/statsheet.skills.js +++ b/client/src/scenes/statsheet.skills.js @@ -1,6 +1,7 @@ const Phaser = require('phaser'); const { TEXT, SKILLS, POSITIONS: { STATS } } = require('./constants'); +const addButton = require('./statsheet.button'); const TEXT_MARGIN = STATS.textMargin(); const X_ORIG_KNOWN = STATS.knownX(); @@ -27,41 +28,27 @@ class Skills extends Phaser.Scene { this.registry.events.on('changedata', this.updateData, this); this.add.text(X_ORIG_KNOWN, Y_ORIG, 'Skills', TEXT.HEADER); this.addKnownSkills(cryp); + this.addControls(); + } - const infoSkills = this.add - .rectangle(menuOrigX, menuOrigY, menuWidth, menuHeight, 0x222222) - .setInteractive() - .setOrigin(0) - .on('pointerdown', () => { - this.forget = false; - this.addKnownSkills(this.cryp); - if (this.learnSkills) this.learnSkills.destroy(true); - }); - this.add.text(infoSkills.getCenter().x, infoSkills.getCenter().y, 'Skill Info', TEXT.HEADER) - .setOrigin(0.5, 0.5); - - const learnSkills = this.add - .rectangle(menuOrigX, menuOrigY + (menuHeight + menuPad) * 2, menuWidth, menuHeight, 0x222222) - .setInteractive() - .setOrigin(0) - .on('pointerdown', () => { - this.forget = false; - this.addKnownSkills(this.cryp); - this.addLearnableSkills(this.cryp); - }); - this.add.text(learnSkills.getCenter().x, learnSkills.getCenter().y, 'Learn Skills', TEXT.HEADER) - .setOrigin(0.5, 0.5); - - const forgetSkill = this.add - .rectangle(menuOrigX, menuOrigY + menuHeight + menuPad, menuWidth, menuHeight, 0x222222) - .setInteractive() - .setOrigin(0) - .on('pointerdown', () => { - this.forget = true; - this.addKnownSkills(this.cryp); - }); - this.add.text(forgetSkill.getCenter().x, forgetSkill.getCenter().y, 'Forget Skills', TEXT.HEADER) - .setOrigin(0.5, 0.5); + addControls() { + const infoCback = () => { + this.forget = false; + this.addKnownSkills(this.cryp); + if (this.learnSkills) this.learnSkills.destroy(true); + }; + const forgetCback = () => { + this.forget = true; + this.addKnownSkills(this.cryp); + }; + const learnCback = () => { + this.forget = false; + this.addKnownSkills(this.cryp); + this.addLearnableSkills(this.cryp); + }; + addButton(this, menuOrigX, menuOrigY, infoCback, 'Skill Info'); + addButton(this, menuOrigX, menuOrigY + (menuHeight + menuPad), forgetCback, 'Forget Skills'); + addButton(this, menuOrigX, menuOrigY + (menuHeight + menuPad) * 2, learnCback, 'Learn Skills'); } addKnownSkills(cryp) {