Delete, apply and single click combine

client/src/scenes/elements/combat.statbar.js

@@ -24,12 +24,13 @@ class StatBar extends Phaser.GameObjects.Graphics {
         super(scene);
         this.crypObj = cryp;
         this.type = type;
+        console.log(type);
 
         if (type === 'HP') {
             this.val = this.crypObj.cryp.hp.base;
-            this.max = this.crypObj.cryp.stamina.base;
+            this.max = this.crypObj.cryp.hp.base;
             this.margin = 0;
-        } else if (type === 'RedShield') {
+        } else if (type === 'Red Shield') {
             this.val = this.crypObj.cryp.red_shield.base;
             this.max = this.crypObj.cryp.red_shield.base;
             this.margin = 1;

client/src/scenes/item.list.js

@@ -20,7 +20,7 @@ const INV_Y = Y + ITEM_HEIGHT;
 const INV_ROWS = 3;
 const INV_COLUMNS = 3;
 
-const COMB_X = INV_X + ITEM_WIDTH * 6.75;
+const COMB_X = INV_X + ITEM_WIDTH * 5.75;
 const COMB_Y = INV_Y;
 const COMB_ROWS = 2;
 const COMB_COLUMNS = 2;
@@ -94,10 +94,20 @@ class CombinerHitBox extends Phaser.GameObjects.Rectangle {
     }
 }
 
+class DeleteHitBox extends Phaser.GameObjects.Rectangle {
+    constructor(scene, x, y) {
+        super(scene, x, y, ITEM_WIDTH * 1.25, ITEM_HEIGHT * 1.25, 0x222222);
+        this.setOrigin(0);
+        this.itemSelect = () => this.setFillStyle(0xff0000);
+        this.itemDeselect = () => this.setFillStyle(0x222222);
+    }
+}
+
+
 const itemCheckHitbox = (scene, pointer) => {
     const { list } = scene.scene.get('MenuCrypList').children;
     const hitboxes = list.filter(c => c.cryp)
-        .concat(scene.children.list.filter(c => c instanceof CombinerHitBox));
+        .concat(scene.children.list.filter(c => c instanceof CombinerHitBox || c instanceof DeleteHitBox));
 
     let found;
     for (let i = 0; i < hitboxes.length; i += 1) {
@@ -142,11 +152,11 @@ class ItemList extends Phaser.Scene {
         drawCombiner(graphics);
         drawInventory(graphics);
         drawVbox(graphics);
-        this.add.text(X + WIDTH / 10, Y, 'Inventory', TEXT.HEADER);
+        this.add.text(X + WIDTH * 0.1, Y, 'Inventory', TEXT.HEADER);
-        this.add.text(X + WIDTH * 11 / 20, Y, 'Combiner', TEXT.HEADER);
+        this.add.text(X + WIDTH * 0.47, Y, 'Combiner', TEXT.HEADER);
-        this.add.text(X + WIDTH * 7 / 20, Y + HEIGHT / 2, 'Varibox', TEXT.HEADER);
+        this.add.text(X + WIDTH * 0.35, Y + HEIGHT / 2, 'Varibox', TEXT.HEADER);
 
-        const reroll = this.add.rectangle(0, Y + HEIGHT * 2 / 3, ITEM_WIDTH * 1.5, ITEM_HEIGHT * 1.5, 0x222222)
+        const reroll = this.add.rectangle(WIDTH * 0.01, Y + HEIGHT * 0.775, ITEM_WIDTH * 1.25, ITEM_HEIGHT * 1.25, 0x222222)
             .setInteractive()
             .setOrigin(0)
             .on('pointerdown', () => this.registry.get('ws').sendVboxDiscard(vbox.game));
@@ -163,15 +173,19 @@ class ItemList extends Phaser.Scene {
             });
         this.add.text(combine.getCenter().x, combine.getCenter().y, 'C', TEXT.HEADER)
             .setOrigin(0.5, 0.5);
-    }
 
-    addItems(vbox) {
-        const ws = this.registry.get('ws');
         for (let i = 0; i < 3; i += 1) {
             const ITEM_X = ITEM_WIDTH * 1.1 * (i % COMB_COLUMNS) + COMB_X;
             const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COMB_COLUMNS) + COMB_Y;
             this.add.existing(new CombinerHitBox(this, ITEM_X, ITEM_Y, i));
         }
+        const del = this.add.existing(new DeleteHitBox(this, WIDTH * 0.01, Y + HEIGHT * 0.6));
+        this.add.text(del.getCenter().x, del.getCenter().y, 'Del', TEXT.HEADER)
+            .setOrigin(0.5, 0.5);
+    }
+
+    addItems(vbox) {
+        const ws = this.registry.get('ws');
 
         vbox.bound.forEach((action, i) => {
             const ITEM_X = ITEM_WIDTH * 1.1 * (i % INV_COLUMNS) + INV_X + ITEM_WIDTH * 0.5;
@@ -209,6 +223,19 @@ class ItemList extends Phaser.Scene {
             item.setPosition(item.origX, item.origY);
         };
 
+        const findUnallocated = () => {
+            for (let i = 0; i <= 2; i += 1) {
+                if (this.combinerItems[i] === -1) {
+                    return this.children.list.filter(obj => obj instanceof CombinerHitBox).find(hb => hb.slot === i);
+                }
+            } return false;
+        };
+
+        const allocate = (item, hitBox) => {
+            hitBox.allocate(item);
+            this.combinerItems[hitBox.slot] = item.index;
+        };
+
         this.input.on('dragstart', (pointer, item) => {
             if (!(item instanceof Item)) return false;
             item.clickHandler();
@@ -225,18 +252,30 @@ class ItemList extends Phaser.Scene {
 
         this.input.on('dragend', (pointer, item) => {
             if (!(item instanceof Item)) return false;
+
             item.deselect();
+            // Allocate to combiner if clicked without movement form inventory (return 0)
+            if (!Math.hypot(item.x - item.origX, item.y - item.origY)) {
+                const cBox = findUnallocated();
+                if (cBox) allocate(item, cBox);
+                return true;
+            }
+            // Check for hitboxes
             const hitBox = itemCheckHitbox(this, pointer);
-            deallocate(item);
             if (hitBox) {
                 hitBox.itemDeselect();
+                // Allocate to specific combiner slot
                 if (hitBox instanceof CombinerHitBox) {
-                    hitBox.allocate(item);
+                    allocate(item, hitBox);
-                    this.combinerItems[hitBox.slot] = item.index;
+                    return true;
-                } else {
-                    ws.sendItemUse(vbox.find(li => li.action === item.action).id, hitBox.cryp.id);
                 }
+                // Allocate to cryp hitbox
+                if (hitBox instanceof DeleteHitBox) ws.sendVboxDrop(vbox.game, item.index);
+                else ws.sendVboxApply(vbox.game, hitBox.cryp.id, item.index);
             }
+            // If the item hasn't been allocated deallocate the item
+            // Scene will restart if there is vbox change
+            deallocate(item);
             return true;
         });
     }

client/src/socket.js

@@ -89,6 +89,14 @@ function createSocket(events) {
         send({ method: 'vbox_state', params: { game_id: gameId } });
     }
 
+    function sendVboxAccept(gameId, i) {
+        send({ method: 'vbox_accept', params: { game_id: gameId, index: i } });
+    }
+
+    function sendVboxApply(gameId, crypId, index) {
+        send({ method: 'vbox_apply', params: { game_id: gameId, cryp_id: crypId, index } });
+    }
+
     function sendVboxDiscard(gameId) {
         send({ method: 'vbox_discard', params: { game_id: gameId } });
     }
@@ -97,10 +105,12 @@ function createSocket(events) {
         send({ method: 'vbox_combine', params: { game_id: gameId, indices } });
     }
 
-    function sendVboxAccept(gameId, i) {
+
-        send({ method: 'vbox_accept', params: { game_id: gameId, index: i } });
+    function sendVboxDrop(gameId, index) {
+        send({ method: 'vbox_drop', params: { game_id: gameId, index } });
     }
 
+
     function sendPressR() {
         send({ method: 'press_r', params: { } });
     }
@@ -293,8 +303,10 @@ function createSocket(events) {
         sendZoneClose,
         sendVboxState,
         sendVboxAccept,
-        sendVboxDiscard,
+        sendVboxApply,
+        sendVboxDrop,
         sendVboxCombine,
+        sendVboxDiscard,
         connect,
     };
 }