refactor scenes into classes

client/src/scenes/cryp.list.js

@@ -1,6 +1,7 @@
 const Phaser = require('phaser');
 
-const crypRow = require('./cryp.row');
+const CrypRow = require('./cryp.row');
+const CrypPage = require('./cryp.page');
 
 class CrypList extends Phaser.Scene {
     constructor() {
@@ -10,40 +11,31 @@ class CrypList extends Phaser.Scene {
     create() {
         this.registry.events.on('changedata', this.updateData, this);
         this.input.on('gameobjectup', this.clickHandler, this);
+        this.CrypPage = null;
         console.log('creating');
         return true;
     }
 
     updateData(parent, key, data) {
         if (key === 'cryps') {
-            this.renderCryps(data);
+            this.clearCryps();
+            this.CrypRow = new CrypRow(this, data);
         }
+        window.redraw = this.clearCryps.bind(this);
         return true;
     }
 
-    redraw() {
-        for (let i = this.children.list.length - 1; i >= 0; i--) {
-            this.children.list[i].destroy();
-        }
-    }
-
-    renderCryps(cryps) {
-        if (!cryps) return true;
-        console.log(JSON.stringify(this.children.list));
-        console.log(this.children.length);
-        this.redraw();
-
-        cryps.forEach((cryp, i) => {
-            crypRow(this, cryp, i);
-        });
-
-        window.redraw = this.redraw.bind(this);
-        return true;
+    clearCryps() {
+        if (this.CrypRow) this.CrypRow.destroy(true);
     }
 
     clickHandler(pointer, crypBox) {
-        console.log(crypBox);
-        this.registry.set('activeCryp', Object.create(crypBox.cryp));
+        if (this.CrypPage) {
+            this.CrypPage.destroy(true);
+        }
+        this.CrypPage = new CrypPage(this, crypBox.cryp);
+        return true;
+        // this.registry.get('ws').sendGamePve(crypBox.cryp.id);
     }
 }
 

client/src/scenes/cryp.page.js

@@ -11,43 +11,17 @@ const TEXT_MARGIN = 24;
 const xPos = i => 0;
 const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
 
-function crypSkill(scene, skill, i) {
-    scene.add.text(500, 500 + (TEXT_MARGIN * (i + 1)), skill.skill, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
-    return true;
-}
-
-
-class CrypPage extends Phaser.Scene {
-    constructor() {
-        super({ key: 'CrypPage', active: true });
-    }
-
-    create() {
-        this.registry.events.on('changedata', this.updateData, this);
-        return true;
-    }
-
-    updateData(parent, key, data) {
-        if (key === 'activeCryp') {
-            this.renderCryp(data);
-        }
-        return true;
-    }
-
-    redraw() {
-        for (let i = this.children.list.length - 1; i >= 0; i--) {
-            this.children.list[i].destroy();
-        }
-    }
-
-    renderCryp(cryp) {
-        if (!cryp) return true;
-        this.redraw();
-
-        this.add.text(500, 500, cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
-        cryp.skills.forEach((skill, i) => crypSkill(this, skill, i));
-
-        return true;
+class CrypPage extends Phaser.GameObjects.Group {
+    constructor(scene, cryp) {
+        super(scene);
+        this.add(scene.add.text(500, 500, cryp.name, {
+            fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold',
+        }));
+        cryp.skills.forEach((skill, i) => this.add(
+            scene.add.text(500, 500 + (TEXT_MARGIN * (i + 1)), skill.skill, {
+                fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold',
+            })
+        ));
     }
 }
 

client/src/scenes/cryp.row.js

@@ -11,20 +11,23 @@ const TEXT_MARGIN = 24;
 const xPos = i => 0;
 const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
 
-function crypRow(list, cryp, i) {
-    console.log(i);
+class CrypRow extends Phaser.GameObjects.Group {
+    constructor(list, cryps) {
+        super(list);
+        cryps.forEach((cryp, i) => {
             const X_ORIGIN = xPos(i);
             const Y_ORIGIN = yPos(i);
-
             const row = list.add.rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random())
                 .setInteractive()
                 .setOrigin(0);
 
             row.cryp = cryp;
-    list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
-    list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
-
+            this.add(row);
+            this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }));
+            this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }));
+        });
         return true;
     }
+}
 
-module.exports = crypRow;
+module.exports = CrypRow;

client/src/scenes/cryps.js

@@ -23,7 +23,7 @@ function renderCryps(store) {
         scene: [
             Menu,
             CrypList,
-            CrypPage,
+            // Passives,
         ],
     };
 
@@ -32,8 +32,10 @@ function renderCryps(store) {
     store.subscribe(() => {
         const state = store.getState();
         game.registry.set('cryps', state.cryps);
+        game.registry.set('ws', state.ws);
     });
-
+    window.addEventListener('mouseup', () => game.registry.set('pan', false));
+    window.addEventListener('mousedown', () => game.registry.set('pan', true));
     window.addEventListener('resize', () => game.resize(window.innerWidth, window.innerHeight), false);
 
     return game;

client/src/scenes/passives.js

@@ -9,7 +9,7 @@ const passiveDataEdge = require('./passive.data.edge');
 
 class PhaserPassives extends Phaser.Scene {
     constructor() {
-        super('passives');
+        super({ key: 'Passives', active: true });
     }
 
     preload() {
@@ -73,7 +73,7 @@ class PhaserPassives extends Phaser.Scene {
         });
         this.input.on('pointermove', (pointer) => {
             const zoomFactor = 2 / this.cameras.main.zoom;
-            if (this.pan) {
+            if (this.registry.get('pan')) {
                 const points = pointer.getInterpolatedPosition(2);
                 this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x);
                 this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
@@ -82,8 +82,8 @@ class PhaserPassives extends Phaser.Scene {
         this.input.keyboard.on('keydown_A', () => {
             this.updatePassives(); // Will update nodes from state
         }, 0, this);
-        this.input.keyboard.on('keydown_S', () => {
-            this.scene.switch('combat');
+        this.input.keyboard.on('keydown_G', () => {
+            this.scene.sleep('Passives');
         }, 0, this);
     }
 
@@ -98,7 +98,6 @@ class PhaserPassives extends Phaser.Scene {
             } else {
                 this.graphics.lineStyle(2, 0xffffff, 0.2);
             }
-            // console.log(drawEdge);
             this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y);
         });
     }