From 6e5b6c2c80e0c283c21d6ea71a201f726ebf8555 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 4 Dec 2018 18:15:07 +1000 Subject: [PATCH] Added skill scene and some info / forget / learn handlers --- client/src/scenes/constants.js | 0 client/src/scenes/statsheet.js | 24 ++--- client/src/scenes/statsheet.skills.js | 134 ++++++++++++++++++-------- 3 files changed, 98 insertions(+), 60 deletions(-) mode change 100644 => 100755 client/src/scenes/constants.js diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js old mode 100644 new mode 100755 diff --git a/client/src/scenes/statsheet.js b/client/src/scenes/statsheet.js index 50d0ace7..505549cd 100755 --- a/client/src/scenes/statsheet.js +++ b/client/src/scenes/statsheet.js @@ -1,7 +1,7 @@ const Phaser = require('phaser'); const Passives = require('./passives'); const Stats = require('./statsheet.stats'); -const { SkillsKnown, SkillsLearn } = require('./statsheet.skills'); +const Skills = require('./statsheet.skills'); const { TEXT, POSITIONS: { STATS } } = require('./constants'); const menuOrig = STATS.height() * 0.5; @@ -19,18 +19,6 @@ class StatSheet extends Phaser.Scene { this.cryp = cryp; this.stats = new Stats(this, cryp); this.addControls(cryp); - this.registry.events.on('changedata', this.updateData, this); - } - - updateData(parent, key, data) { - if (key === 'cryps') { - const cryp = data.find(c => c.id === this.cryp.id); - if (this.skillsKnown) this.skillsKnown.destroy(true); - if (this.skillsLearn) this.skillsLearn.destroy(true); - this.stats.destroy(true); - this.stats = new Stats(this, cryp); - this.addSkills(cryp); - } } addControls(cryp) { @@ -40,8 +28,9 @@ class StatSheet extends Phaser.Scene { .setOrigin(0) .on('pointerdown', () => { // Registry events won't get auto cleaned - this.registry.events.off('changedata', this.updateData); + this.registry.events.off('changedata', this.updateData, this); this.scene.run('CrypList'); + this.scene.remove('Skills'); this.scene.remove('Passives'); this.scene.remove(); }); @@ -92,8 +81,8 @@ class StatSheet extends Phaser.Scene { } addSkills(cryp) { - this.skillsKnown = new SkillsKnown(this, cryp); - this.skillsLearn = new SkillsLearn(this, cryp); + this.scene.add('Skills', Skills); + this.scene.run('Skills', cryp); } addPassives(cryp) { @@ -110,8 +99,7 @@ class StatSheet extends Phaser.Scene { removeSkills() { if (!this.skills) return false; - this.skillsKnown.destroy(true); - this.skillsLearn.destroy(true); + this.scene.remove('Skills'); this.skills = false; return true; } diff --git a/client/src/scenes/statsheet.skills.js b/client/src/scenes/statsheet.skills.js index e0f7395d..2328b03e 100755 --- a/client/src/scenes/statsheet.skills.js +++ b/client/src/scenes/statsheet.skills.js @@ -2,63 +2,113 @@ const Phaser = require('phaser'); const { TEXT, SKILLS, POSITIONS: { STATS } } = require('./constants'); -class SkillsKnown extends Phaser.GameObjects.Group { - constructor(scene, cryp) { - super(scene); - this.id = cryp.id; - this.scene = scene; - this.ws = scene.registry.get('ws'); +const TEXT_MARGIN = STATS.textMargin(); +const X_ORIG_KNOWN = STATS.knownX(); +const X_ORIG_LEARN = STATS.learnableX(); +const Y_ORIG = STATS.y(); - const TEXT_MARGIN = STATS.textMargin(); - const X_ORIG = STATS.knownX(); - const Y_ORIG = STATS.y(); +const menuOrigX = STATS.width() * 0.6; +const menuOrigY = STATS.height() * 0.3; +const menuHeight = STATS.height() * 0.1; +const menuPad = STATS.height() * 0.01; +const menuWidth = STATS.width() * 0.25; + +class Skills extends Phaser.Scene { + constructor() { + super({ key: 'Skills' }); + } + + create(cryp) { + this.cryp = cryp; + this.forget = false; + // Destroy the old registry event if it exists + this.registry.events.off('changedata', this.updateData, this); + this.registry.events.on('changedata', this.updateData, this); + this.add.text(X_ORIG_KNOWN, Y_ORIG, 'Skills', TEXT.HEADER); + this.addKnownSkills(cryp); + + 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); + } + + addKnownSkills(cryp) { + if (this.knownSkills) this.knownSkills.destroy(true); + this.knownSkills = this.add.group(); const knownSkill = (skill, i) => { - const SKILL_X = X_ORIG; + const SKILL_X = X_ORIG_KNOWN; const SKILL_Y = (i * TEXT_MARGIN) + Y_ORIG + TEXT_MARGIN; - const text = scene.add.text(SKILL_X, SKILL_Y, skill.skill, TEXT.NORMAL) - .setInteractive(); - - text.on('pointerdown', () => { - this.ws.sendCrypForget(cryp.id, skill.skill); - }); - this.add(text); + const color = this.forget ? '#ff0000' : '#ffffff'; + const style = { fontFamily: 'monospace', fontSize: 16, color }; + this.knownSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.skill, style) + .setInteractive() + .on('pointerdown', () => { + if (this.forget) { + this.registry.get('ws').sendCrypForget(cryp.id, skill.skill); + } + })); }; - - this.add(scene.add.text(X_ORIG, Y_ORIG, 'Skills', TEXT.HEADER)); cryp.skills.forEach(knownSkill); } -} - -class SkillsLearn extends Phaser.GameObjects.Group { - constructor(scene, cryp) { - super(scene); - this.id = cryp.id; - this.scene = scene; - this.ws = scene.registry.get('ws'); - - const TEXT_MARGIN = STATS.textMargin(); - const X_ORIG = STATS.learnableX(); - const Y_ORIG = STATS.y(); + addLearnableSkills(cryp) { + if (this.learnSkills) this.learnSkills.destroy(true); + this.learnSkills = this.add.group(); const learnable = (skill, i) => { - const SKILL_X = X_ORIG; + const SKILL_X = X_ORIG_LEARN; const SKILL_Y = Y_ORIG + (i * TEXT_MARGIN) + TEXT_MARGIN; - const text = scene.add.text(SKILL_X, SKILL_Y, skill, TEXT.NORMAL) - .setInteractive(); - - text.on('pointerdown', () => { - this.ws.sendCrypLearn(cryp.id, skill); - }); - this.add(text); - text.cryp = cryp; + this.learnSkills.add(this.add.text(SKILL_X, SKILL_Y, skill, TEXT.NORMAL) + .setInteractive() + .on('pointerdown', () => { + this.registry.get('ws').sendCrypLearn(cryp.id, skill); + })); }; - this.add(scene.add.text(X_ORIG, Y_ORIG, 'Learnable', TEXT.HEADER)); + this.learnSkills.add(this.add.text(X_ORIG_LEARN, Y_ORIG, 'Learnable', TEXT.HEADER)); SKILLS.LEARNABLE.forEach(learnable); } + + updateData(parent, key, data) { + if (key === 'cryps') { + const cryp = data.find(c => c.id === this.cryp.id); + this.cryp = cryp; + this.addKnownSkills(cryp); + } + } } -module.exports = { SkillsKnown, SkillsLearn }; +module.exports = Skills;