forget and learn

client/src/scenes/cryp.list.js

@@ -10,7 +10,6 @@ class CrypList extends Phaser.Scene {
     create() {
         this.registry.events.on('changedata', this.updateData, this);
         this.input.on('gameobjectup', this.clickHandler, this);
-        console.log('creating');
         return true;
     }
 
@@ -29,8 +28,6 @@ class CrypList extends Phaser.Scene {
 
     renderCryps(cryps) {
         if (!cryps) return true;
-        console.log(JSON.stringify(this.children.list));
-        console.log(this.children.length);
         this.redraw();
 
         cryps.forEach((cryp, i) => {
@@ -42,7 +39,6 @@ class CrypList extends Phaser.Scene {
     }
 
     clickHandler(pointer, crypBox) {
-        console.log(crypBox);
         this.registry.set('activeCryp', Object.create(crypBox.cryp));
     }
 }

client/src/scenes/cryp.page.js

@@ -1,5 +1,7 @@
 const Phaser = require('phaser');
 
+const { TEXT, SKILLS } = require('./constants');
+
 const ROW_WIDTH = 400;
 const ROW_HEIGHT = 200;
 const ROW_FILL = 0x888888;
@@ -11,26 +13,27 @@ 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() {
+    constructor(args) {
         super({ key: 'CrypPage', active: true });
     }
 
     create() {
         this.registry.events.on('changedata', this.updateData, this);
+        this.ws = this.registry.get('ws');
         return true;
     }
 
     updateData(parent, key, data) {
         if (key === 'activeCryp') {
+            console.log(data);
             this.renderCryp(data);
         }
+
+        if (key === 'ws') {
+            this.ws = this.registry.get('ws');
+        }
+
         return true;
     }
 
@@ -44,8 +47,29 @@ class CrypPage extends Phaser.Scene {
         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));
+        this.add.text(500, 500, cryp.name, TEXT.HEADER);
+
+        const knownSkill = (skill, i) => {
+            const text = this.add.text(500, 500 + (TEXT_MARGIN * (i + 1)), skill.skill, TEXT.NORMAL)
+                .setInteractive();
+
+            text.on('pointerdown', () => {
+                this.ws.sendCrypForget(cryp.id, skill.skill);
+            });
+
+        };
+
+        const learnable = (skill, i) => {
+            const text = this.add.text(600, 0 + (TEXT_MARGIN * (i + 1)), skill, TEXT.NORMAL)
+                .setInteractive();
+
+            text.on('pointerdown', () => {
+                this.ws.sendCrypLearn(cryp.id, skill);
+            });
+        };
+
+        cryp.skills.forEach(knownSkill);
+        SKILLS.LEARNABLE.forEach(learnable);
 
         return true;
     }

client/src/scenes/cryp.row.js

@@ -1,5 +1,7 @@
 const Phaser = require('phaser');
 
+const { TEXT } = require('./constants');
+
 const ROW_WIDTH = 400;
 const ROW_HEIGHT = 200;
 const ROW_FILL = 0x888888;
@@ -21,8 +23,8 @@ function crypRow(list, cryp, i) {
         .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' });
+    list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER);
+    list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, TEXT.NORMAL);
 
     return true;
 }

client/src/scenes/cryps.js

@@ -5,7 +5,7 @@ const CrypPage = require('./cryp.page');
 const Menu = require('./menu');
 // const Passives = require('./passives');
 
-function renderCryps(store) {
+function renderCryps(store, socket) {
     const config = {
         type: Phaser.AUTO,
         // parent: 'cryps',
@@ -32,6 +32,7 @@ function renderCryps(store) {
     store.subscribe(() => {
         const state = store.getState();
         game.registry.set('cryps', state.cryps);
+        game.registry.set('ws', state.ws);
     });
 
     window.addEventListener('resize', () => game.resize(window.innerWidth, window.innerHeight), false);

client/src/scenes/menu.js

@@ -1,12 +1,14 @@
 const Phaser = require('phaser');
 
+const { TEXT } = require('./constants');
+
 class Menu extends Phaser.Scene {
     constructor(props) {
         super({ key: 'Menu', active: true });
     }
 
     create() {
-        this.add.text(0, 0, 'cryps.gg',  { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
+        this.add.text(0, 0, 'cryps.gg', TEXT.HEADER);
     }
 }
 

client/src/socket.jsx

@@ -116,6 +116,14 @@ function createSocket(store) {
         send({ method: 'cryp_spawn', params: { name } });
     }
 
+    function sendCrypLearn(id, skill) {
+        send({ method: 'cryp_learn', params: { id, skill } });
+    }
+
+    function sendCrypForget(id, skill) {
+        send({ method: 'cryp_forget', params: { id, skill } });
+    }
+
     function sendGameState(id) {
         send({ method: 'game_state', params: { id } });
     }
@@ -203,6 +211,8 @@ function createSocket(store) {
         sendGameSkill,
         sendGameTarget,
         sendCrypSpawn,
+        sendCrypLearn,
+        sendCrypForget,
         sendItemUse,
         connect,
     };