item list fixes'

client/src/scenes/constants.js

@@ -26,9 +26,9 @@ const gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2));
 
 const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
 const itemListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
-const itemListX = () => crypListWidth();
+const itemListX = () => crypListWidth() * 1.5;
 const itemListY = i => menuHeight() + (itemListHeight() * i);
-const itemListRowY = i => menuHeight() + (itemListHeight() * (i + 2));
+const itemListRowY = i => menuHeight() + ((itemListHeight() * 1.5) * i);
 
 const statsWidth = () => Math.floor(CANVAS_WIDTH - crypListWidth() - gameListWidth());
 const statsHeight = () => CANVAS_HEIGHT - menuHeight();
@@ -123,6 +123,8 @@ module.exports = {
         BLACK: 0x000000,
         RED: 0xff0000,
         WHITE: 0xffffff,
+
+        SELECT: 0x003300,
     },
 
     DELAYS: {

client/src/scenes/item.list.js

@@ -2,6 +2,7 @@ const Phaser = require('phaser');
 
 const {
     TEXT,
+    COLOURS,
     POSITIONS: { ITEM_LIST },
 } = require('./constants');
 
@@ -9,13 +10,18 @@ const itemCheckHitbox = (scenePlugin, pointer) => {
     const { list } = scenePlugin.get('MenuCrypList').children;
     const hitboxes = list.filter(c => c.cryp);
 
+    let found;
+
     for (let i = 0; i < hitboxes.length; i += 1) {
         if (hitboxes[i].cryp && Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(),
-            pointer.position)) return hitboxes[i];
+            pointer.position)) {
+            found = hitboxes[i];
+        } else {
+            hitboxes[i].itemDeselect();
         }
-    // If we didn't find a hitbox deselect them all
+    }
-    for (let i = 0; i < hitboxes.length; i += 1) hitboxes[i].itemDeselect();
+
-    return false;
+    return found;
 };
 
 class Item extends Phaser.GameObjects.Container {
@@ -55,7 +61,7 @@ class Item extends Phaser.GameObjects.Container {
         this.scene.children.list.forEach((item) => {
             if (item.state === 'select') item.deselect();
         });
-        this.box.setFillStyle(0x004bfe);
+        this.box.setFillStyle(COLOURS.SELECT);
         this.state = 'select';
     }
 

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

@@ -8,6 +8,8 @@ const KEY_MAP = [
     'keydown_ONE',
     'keydown_TWO',
     'keydown_THREE',
+    'keydown_FOUR',
+    'keydown_FIVE',
 ];
 
 class MenuCrypList extends Phaser.Scene {
@@ -19,7 +21,6 @@ class MenuCrypList extends Phaser.Scene {
         this.registry.events.on('changedata', this.updateData, this);
         this.registry.events.on('setdata', this.updateData, this);
         this.addCrypRows(this.registry.get('cryps'));
-
     }
 
     updateData(parent, key, data) {
@@ -54,7 +55,7 @@ class MenuCrypList extends Phaser.Scene {
                 });
 
             row.itemSelect = () => {
-                row.setFillStyle(0x004bfe);
+                row.setFillStyle(COLOURS.SELECT);
             };
 
             row.itemDeselect = () => {
@@ -82,12 +83,12 @@ class MenuCrypList extends Phaser.Scene {
             const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
             CRYP_STATS.forEach(crypStat);
 
-            // const selectBtn = this.add
+            const selectBtn = this.add
-            //     .rectangle(ROW_WIDTH - 50, ROW_Y, 50, ROW_HEIGHT, FILL, 0.5)
+                .rectangle(0, ROW_Y + (ROW_HEIGHT * 0.9), ROW_WIDTH, ROW_HEIGHT / 10, FILL, 0.5)
-            //     .setInteractive()
+                .setInteractive()
-            //     .setOrigin(0);
+                .setOrigin(0);
 
-            // selectBtn.on('pointerdown', selectFn);
+            selectBtn.on('pointerdown', selectFn);
 
             this.crypRows.add(this.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER));
             this.crypRows.add(this.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER));

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

@@ -19,6 +19,7 @@ class MenuGameList extends Phaser.Scene {
 
     updateData(parent, key, data) {
         if (key === 'gameList') {
+            console.log('got game list');
             this.addGameList(data);
         }
     }