Added skill scene and some info / forget / learn handlers

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.scene.add('Skills', Skills);
-        this.skillsLearn = new SkillsLearn(this, cryp);
+        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.scene.remove('Skills');
-        this.skillsLearn.destroy(true);
         this.skills = false;
         return true;
     }

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 = STATS.knownX();
+const X_ORIG_KNOWN = STATS.knownX();
+const X_ORIG_LEARN = STATS.learnableX();
 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)
+            const color = this.forget ? '#ff0000' : '#ffffff';
-                .setInteractive();
+            const style = { fontFamily: 'monospace', fontSize: 16, color };
-
+            this.knownSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.skill, style)
-            text.on('pointerdown', () => {
+                .setInteractive()
-                this.ws.sendCrypForget(cryp.id, skill.skill);
+                .on('pointerdown', () => {
-            });
+                    if (this.forget) {
-            this.add(text);
+                        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)
+            this.learnSkills.add(this.add.text(SKILL_X, SKILL_Y, skill, TEXT.NORMAL)
-                .setInteractive();
+                .setInteractive()
-
+                .on('pointerdown', () => {
-            text.on('pointerdown', () => {
+                    this.registry.get('ws').sendCrypLearn(cryp.id, skill);
-                this.ws.sendCrypLearn(cryp.id, skill);
+                }));
-            });
-            this.add(text);
-            text.cryp = cryp;
         };
 
-        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;