cryps list click

client/src/scenes/cryp.list.js

@@ -12,8 +12,6 @@ class CrypList extends Phaser.Scene {
 
         const cryps = this.registry.get('cryps');
         this.graphics = this.add.graphics();
-        this.graphics.originX = 0;
-        this.graphics.originY = 0;
         this.renderCryps(cryps);
         return true;
     }
@@ -32,11 +30,17 @@ class CrypList extends Phaser.Scene {
             crypRow(this, cryp, i);
         });
 
+        this.input.on('gameobjectup', this.clickHandler, this);
+
         // seal the boxes in and stop rerendering them
         this.graphics.generateTexture();
 
         return true;
     }
+
+    clickHandler(pointer, crypBox) {
+        this.registry.set('activeCryp', crypBox.cryp);
+    }
 }
 
 module.exports = CrypList;

client/src/scenes/cryp.page.js

@@ -0,0 +1,55 @@
+const Phaser = require('phaser');
+
+const ROW_WIDTH = 400;
+const ROW_HEIGHT = 200;
+const ROW_FILL = 0x888888;
+
+const TOP_MARGIN = 50;
+const ROW_MARGIN = 50;
+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);
+
+        const cryp = this.registry.get('activeCryp');
+        this.graphics = this.add.graphics();
+
+        this.renderCryp(cryp);
+        return true;
+    }
+
+    updateData(parent, key, data) {
+        if (key === 'activeCryp') {
+            return this.scene.restart();
+        }
+        return true;
+    }
+
+    renderCryp(cryp) {
+        if (!cryp) return true;
+
+        this.add.text(500, 500, cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
+
+        cryp.skills.forEach((skill, i) => crypSkill(this, skill, i));
+
+        // seal the boxes in and stop rerendering them
+        this.graphics.generateTexture();
+        return true;
+    }
+}
+
+module.exports = CrypPage;

client/src/scenes/cryp.row.js

@@ -15,12 +15,15 @@ function crypRow(list, cryp, i) {
     const X_ORIGIN = xPos(i);
     const Y_ORIGIN = yPos(i);
 
-    list.graphics.fillStyle(ROW_FILL * Math.random(), 1.0);
-    list.graphics.fillRect(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT);
+    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' });
 
     return true;
 }
 
-module.exports = crypRow;
+module.exports = crypRow;

client/src/scenes/cryps.js

@@ -1,6 +1,7 @@
 const Phaser = require('phaser');
 
 const CrypList = require('./cryp.list');
+const CrypPage = require('./cryp.page');
 const Menu = require('./menu');
 // const Passives = require('./passives');
 
@@ -22,6 +23,7 @@ function renderCryps(store) {
         scene: [
             Menu,
             CrypList,
+            CrypPage,
         ],
     };