Merge branch 'master' of ssh://cryps.gg:40022/~/cryps

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;

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
+        const menuCback = () => {
-            .rectangle(0, menuOrig, menuWidth, menuHeight, 0x222222)
+            this.registry.events.off('changedata', this.updateData, this);
-            .setInteractive()
+            this.scene.run('CrypList');
-            .setOrigin(0)
+            this.scene.remove('Skills');
-            .on('pointerdown', () => {
+            this.scene.remove('Passives');
-                // Registry events won't get auto cleaned
+            this.scene.remove();
-                this.registry.events.off('changedata', this.updateData, this);
+        };
-                this.scene.run('CrypList');
+        const passiveCback = () => {
-                this.scene.remove('Skills');
+            if (this.passives) return false;
-                this.scene.remove('Passives');
+            this.removeSkills();
-                this.scene.remove();
+            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)
+        addButton(this, 0, menuOrig, menuCback, 'Main Menu');
-            .setOrigin(0.5, 0.5);
+        addButton(this, 0, menuOrig + (menuHeight + menuPad), passiveCback, 'View Passives');
-
+        addButton(this, 0, menuOrig + (menuHeight + menuPad) * 2, skillCback, 'View Skills');
-        const passives = this.add
+        addButton(this, 0, menuOrig + (menuHeight + menuPad) * 3, clearCback, 'View Cryp');
-            .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);
     }
 
     addSkills(cryp) {

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
+    addControls() {
-            .rectangle(menuOrigX, menuOrigY, menuWidth, menuHeight, 0x222222)
+        const infoCback = () => {
-            .setInteractive()
+            this.forget = false;
-            .setOrigin(0)
+            this.addKnownSkills(this.cryp);
-            .on('pointerdown', () => {
+            if (this.learnSkills) this.learnSkills.destroy(true);
-                this.forget = false;
+        };
-                this.addKnownSkills(this.cryp);
+        const forgetCback = () => {
-                if (this.learnSkills) this.learnSkills.destroy(true);
+            this.forget = true;
-            });
+            this.addKnownSkills(this.cryp);
-        this.add.text(infoSkills.getCenter().x, infoSkills.getCenter().y, 'Skill Info', TEXT.HEADER)
+        };
-            .setOrigin(0.5, 0.5);
+        const learnCback = () => {
-
+            this.forget = false;
-        const learnSkills = this.add
+            this.addKnownSkills(this.cryp);
-            .rectangle(menuOrigX, menuOrigY + (menuHeight + menuPad) * 2, menuWidth, menuHeight, 0x222222)
+            this.addLearnableSkills(this.cryp);
-            .setInteractive()
+        };
-            .setOrigin(0)
+        addButton(this, menuOrigX, menuOrigY, infoCback, 'Skill Info');
-            .on('pointerdown', () => {
+        addButton(this, menuOrigX, menuOrigY + (menuHeight + menuPad), forgetCback, 'Forget Skills');
-                this.forget = false;
+        addButton(this, menuOrigX, menuOrigY + (menuHeight + menuPad) * 2, learnCback, 'Learn Skills');
-                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) {