Added colours and specs to cryp avatar, click skills and dialog to unequip

client/src/scenes/item.info.js

@@ -6,14 +6,34 @@ const Y = MENU_MAIN.y();
 const WIDTH = MENU_MAIN.width();
 const HEIGHT = MENU_MAIN.height();
 
+const UNEQUIP_Y = Y + Math.floor(HEIGHT * 0.5);
+const UNEQUIP_WIDTH = Math.floor(WIDTH * 0.4);
+const UNEQUIP_HEIGHT = Math.floor(HEIGHT * 0.15);
+
 class ItemInfo extends Phaser.Scene {
     constructor() {
         super({ key: 'ItemInfo' });
     }
 
-    create(item) {
+    create(props) {
+        const { item, cryp } = props;
+        if (!item) return false;
         this.add.text(X, Y, item, TEXT.HEADER);
         this.add.text(X, Y + HEIGHT * 0.1, 'descriptions go here', TEXT.NORMAL);
+        if (!cryp) return true;
+        const ws = this.registry.get('ws');
+        const { vbox } = this.registry.get('player');
+
+        const unEquip = this.add.rectangle(X, UNEQUIP_Y, UNEQUIP_WIDTH, UNEQUIP_HEIGHT, 0x222222)
+            .setOrigin(0, 0)
+            .setInteractive()
+            .on('pointerdown', () => {
+                ws.sendVboxUnequip(vbox.instance, cryp.id, item);
+                this.registry.set('crypStats', cryp);
+            });
+        this.add.text(unEquip.getCenter().x, unEquip.getCenter().y, 'unequip', TEXT.HEADER)
+            .setOrigin(0.5, 0.5);
+        return true;
     }
 
     cleanUp() {

client/src/scenes/item.list.js

@@ -191,7 +191,7 @@ class ItemList extends Phaser.Scene {
         vbox.bound.forEach((item, i) => {
             const ITEM_X = ITEM_WIDTH * 1.1 * (i % INV_COLUMNS) + INV_X + ITEM_WIDTH * 0.5;
             const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / INV_COLUMNS) + INV_Y + ITEM_HEIGHT * 0.5;
-            const clickFn = () => this.registry.set('itemInfo', item);
+            const clickFn = () => this.registry.set('itemInfo', { item });
             const itemBox = new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
             itemBox.on('pointerdown', clickFn);
 
@@ -204,7 +204,7 @@ class ItemList extends Phaser.Scene {
                 const ITEM_X = ITEM_WIDTH * 1.1 * i + BOX_X + ITEM_WIDTH * 0.5;
                 const ITEM_Y = ITEM_HEIGHT * 1.1 * j + BOX_Y + ITEM_HEIGHT * 0.5;
                 const clickFn = () => {
-                    this.registry.set('itemInfo', item);
+                    this.registry.set('itemInfo', { item });
                     ws.sendVboxAccept(vbox.instance, i, j);
                 };
                 const itemBox = new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);

client/src/scenes/menu.cryps.list.js

@@ -5,7 +5,7 @@ const genAvatar = require('./avatar');
 const Item = require('./elements/item');
 
 const BOX_WIDTH = Math.floor(CRYP_LIST.width());
-const BOX_HEIGHT = Math.floor(CRYP_LIST.height() / 3.5);
+const BOX_HEIGHT = Math.floor(CRYP_LIST.height() / 3.34);
 
 const TEXT_MARGIN = 24;
 
@@ -21,7 +21,6 @@ class MenuCrypList extends Phaser.Scene {
     }
 
     create() {
-        // this.cameras.main.setViewport(CRYP_LIST.x(), CRYP_LIST.y(), CRYP_LIST.width(), CRYP_LIST.height());
         this.registry.events.on('changedata', this.updateData, this);
         this.registry.events.on('setdata', this.updateData, this);
         const player = this.registry.get('player');
@@ -51,7 +50,7 @@ class MenuCrypList extends Phaser.Scene {
                 this.registry.set('crypStats', cryp);
             };
 
-            // Cryp avatar and interaction box
+            // Cryp interaction box for adding items
             const crypInteract = this.add
                 .rectangle(ROW_X, ROW_Y, BOX_WIDTH, BOX_HEIGHT, FILL, ACTIVE_FILL)
                 .setInteractive()
@@ -65,43 +64,62 @@ class MenuCrypList extends Phaser.Scene {
             };
             crypInteract.cryp = cryp;
 
-            const crypInfoText = this.add.text(crypInteract.x + crypInteract.width / 5, crypInteract.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
+            // Cryp Avatar
-                .setOrigin(0.5, 0.5);
+            const { name } = cryp;
-
             const crypImage = this.add.image(
                 crypInteract.getCenter().x - crypInteract.width / 4,
                 crypInteract.getCenter().y,
                 'aztec',
-                genAvatar(cryp.name)
+                genAvatar(name)
             );
 
-            this.crypGroup.addMultiple([crypInteract, crypImage, crypInfoText]);
+            // Add text info
-
+            const yCrypTextAlgin = Math.floor(crypInteract.y + TEXT_MARGIN / 2);
-            const crypGems = (stat, j) => {
+            const xCrypNameAlign = Math.floor(crypInteract.x + crypInteract.width * 1 / 10);
+            const crypInfoText = this.add.text(xCrypNameAlign, yCrypTextAlgin, name, TEXT.HEADER);
+            const colourText = (c, j) => {
                 // Placeholder for when gems are implemented
-                const gemText = this.add
+                const gemText = this.add.text(crypInteract.x + crypInteract.width * (j + 3) / 6, yCrypTextAlgin, `${c[0]} - ${c[1]}`, TEXT.HEADER);
-                    .text(crypInteract.getCenter().x, crypInteract.y + TEXT_MARGIN * (2 + j), `${stat}: 0`, TEXT.NORMAL)
-                    .setOrigin(0.5, 0.5);
                 this.crypGroup.add(gemText);
             };
 
-/*            const CRYP_GEMS = [
+            const { red, green, blue } = cryp.colours;
-                'Red',
+            const CRYP_COLOURS = [
-                'Green',
+                ['R', red],
-                'Blue',
+                ['G', green],
+                ['B', blue],
             ];
-            CRYP_GEMS.forEach(crypGems);
+            CRYP_COLOURS.forEach(colourText);
-*/
+
+            this.crypGroup.addMultiple([crypInteract, crypImage, crypInfoText]);
+
             const crypSkill = (stat, j) => {
                 const SKILL_WIDTH = Math.floor(BOX_WIDTH / 2);
-                const SKILL_HEIGHT = Math.floor(BOX_HEIGHT / 6);
+                const SKILL_HEIGHT = Math.floor(BOX_HEIGHT / 8);
                 const SKILL_X = crypInteract.getCenter().x + crypInteract.width / 4;
-                const SKILL_Y = crypInteract.y + SKILL_HEIGHT * 1.1 * (j + 0.6);
+                const SKILL_Y = crypInteract.y + SKILL_HEIGHT * 1.15 * (j + 1.6);
                 const itemObj = new Item(this, stat.skill, j, SKILL_X, SKILL_Y, SKILL_WIDTH, SKILL_HEIGHT);
                 this.add.existing(itemObj);
+                itemObj.setInteractive();
+                const itemInfo = { item: stat.skill, cryp };
+                itemObj.on('pointerdown', () => this.registry.set('itemInfo', itemInfo));
                 this.crypGroup.add(itemObj);
             };
             cryp.skills.forEach(crypSkill);
+
+            const crypSpec = (spec, j) => {
+                const SKILL_WIDTH = Math.floor(BOX_WIDTH * 0.15);
+                const SKILL_HEIGHT = Math.floor(BOX_HEIGHT * 0.2);
+                const SKILL_X = Math.floor(crypInteract.x + BOX_WIDTH * (0.6 + j) * 0.175);
+                const SKILL_Y = Math.floor(crypInteract.y + BOX_HEIGHT * 0.875);
+                const itemObj = new Item(this, spec, j, SKILL_X, SKILL_Y, SKILL_WIDTH, SKILL_HEIGHT);
+                itemObj.setInteractive();
+                const itemInfo = { item: spec, cryp };
+                itemObj.on('pointerdown', () => this.registry.set('itemInfo', itemInfo));
+                this.add.existing(itemObj);
+                this.crypGroup.add(itemObj);
+            };
+            cryp.specs.forEach(crypSpec);
         };
         cryps.forEach(addCryp);