item menu dragging

client/src/scenes/constants.js

@@ -20,13 +20,13 @@ const crypListX = () => 0;
 
 const gameListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
 const gameListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
-const gameListX = () => crypListWidth();
+const gameListX = () => crypListWidth() + itemListWidth();
 const gameListY = i => menuHeight() + (gameListHeight() * i);
 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() + gameListWidth();
+const itemListX = () => crypListWidth();
 const itemListY = i => menuHeight() + (itemListHeight() * i);
 const itemListRowY = i => menuHeight() + (itemListHeight() * (i + 2));
 

client/src/scenes/item.list.js

@@ -6,13 +6,15 @@ const {
 } = require('./constants');
 
 const itemCheckHitbox = (scenePlugin, pointer) => {
-    const { list } = scenePlugin.get('CombatHitBox').children;
+    const { list } = scenePlugin.get('MenuCrypList').children;
-    for (let i = 0; i < list.length; i += 1) {
+    const hitboxes = list.filter(c => c.cryp);
-        if (Phaser.Geom.Rectangle.ContainsPoint(list[i].getBounds(),
+
-            pointer.position)) return list[i];
+    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];
     }
     // If we didn't find a hitbox deselect them all
-    for (let i = 0; i < list.length; i += 1) list[i].deselect();
+    for (let i = 0; i < hitboxes.length; i += 1) hitboxes[i].itemDeselect();
     return false;
 };
 
@@ -31,13 +33,15 @@ class Item extends Phaser.GameObjects.Container {
         const HEIGHT = ITEM_LIST.height();
 
         this.box = scene.add
-            .rectangle(x, y, WIDTH, HEIGHT, 0x111111)
+            .rectangle(0, 0, WIDTH, HEIGHT, 0x111111);
-            .setOrigin(0.5, 0.5)
-            .setInteractive();
 
-        scene.add.text(x, y, item.action, TEXT.HEADER)
+        this.text = scene.add
+            .text(0, 0, item.action, TEXT.HEADER)
             .setOrigin(0.5, 0.5);
 
+        this.add(this.box);
+        this.add(this.text);
+
         this.setSize(WIDTH, HEIGHT);
         this.setInteractive();
     }
@@ -72,10 +76,23 @@ class Item extends Phaser.GameObjects.Container {
 class ItemList extends Phaser.Scene {
     constructor() {
         super({ key: 'ItemList', active: true });
-        console.log('item list created');
     }
 
-    create(itemList) {
+    updateData(parent, key) {
+        if (key === 'itemList') {
+            this.scene.restart();
+        }
+    }
+
+    create() {
+        const itemList = this.registry.get('itemList');
+        const ws = this.registry.get('ws');
+
+        this.registry.events.on('changedata', this.updateData, this);
+        this.registry.events.on('setdata', this.updateData, this);
+
+        if (!itemList) return false;
+
         itemList.forEach((item, i) => {
             const ITEM_X = ITEM_LIST.x();
             const ITEM_Y = ITEM_LIST.rowY(i);
@@ -86,28 +103,31 @@ class ItemList extends Phaser.Scene {
         });
 
         this.input.on('dragstart', (pointer, box) => {
-            console.log(box);
             box.clickHandler();
         });
 
         this.input.on('drag', (pointer, box, dragX, dragY) => {
-            // const hitBox = itemCheckHitbox(this.scene, pointer);
+            const hitBox = itemCheckHitbox(this.scene, pointer);
-            // if (hitBox) hitBox.select();
+            if (hitBox) hitBox.itemSelect();
             box.setPosition(dragX, dragY);
         });
 
         this.input.on('dragend', (pointer, box) => {
             box.deselect();
-            // const hitBox = itemCheckHitbox(this.scene, pointer);
+            const hitBox = itemCheckHitbox(this.scene, pointer);
-            // if (hitBox) {
+            if (hitBox) {
-            //     hitBox.clickHandler();
+                ws.sendItemUse(box.item.id, hitBox.cryp.id);
-            // }
+            }
             box.setPosition(box.origX, box.origY);
         });
+
+        return this;
     }
 
-    cleanup() {
+    cleanUp() {
-        return true;
+        this.registry.events.off('changedata', this.updateData, this);
+        this.registry.events.off('setdata', this.updateData, this);
+        this.scene.remove();
     }
 }
 

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

@@ -53,6 +53,14 @@ class MenuCrypList extends Phaser.Scene {
                     this.scene.get('Menu').displaySkills(cryp);
                 });
 
+            row.itemSelect = () => {
+                row.setFillStyle(0x004bfe);
+            };
+
+            row.itemDeselect = () => {
+                row.setFillStyle(FILL, ACTIVE_FILL);
+            };
+
             const selectFn = () => {
                 this.game.events.emit('CRYP_ACTIVE', cryp);
             };
@@ -74,12 +82,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(ROW_WIDTH - 50, ROW_Y, 50, ROW_HEIGHT, 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.js

@@ -18,6 +18,8 @@ class Menu extends Phaser.Scene {
         this.sys.events.on('wake', () => {
             this.addMenuScenes();
         });
+
+        this.scene.manager.add('ItemList', ItemList, true);
         return true;
     }
 
@@ -28,8 +30,6 @@ class Menu extends Phaser.Scene {
         this.scene.add('MenuGameList', MenuGameList, true);
 
         this.scene.manager.add('ItemList', ItemList, true);
-
-        console.log(this.scene.isActive());
     }
 
     setData(parent, key, data) {
@@ -38,10 +38,6 @@ class Menu extends Phaser.Scene {
             this.scene.add('MenuGameList', MenuGameList, true);
         }
 
-        if (key === 'itemList') {
-            this.scene.manager.add('ItemList', ItemList, true, data);
-        }
-
         if (key === 'game') {
             this.cleanUp();
             this.scene.manager.add('Combat', Combat, true, data);
@@ -75,14 +71,6 @@ class Menu extends Phaser.Scene {
         return true;
     }
 
-    renderItemList(itemList) {
-        const ws = this.registry.get('ws');
-        if (this.itemList) {
-            this.itemList.cleanup();
-            this.itemList.destroy(true);
-        }
-    }
-
     cleanUp() {
         // Remove all the scenes except header and this scene (menu)
         this.registry.events.off('changedata', this.updateData, this);

client/src/socket.js

@@ -97,9 +97,7 @@ function createSocket(events) {
     }
 
     function sendItemUse(item, target) {
-        console.log(item, target);
         send({ method: 'item_use', params: { item, target } });
-        events.setActiveItem(null);
     }
 
     // -------------

server/src/item.rs

@@ -136,7 +136,7 @@ pub fn item_delete(tx: &mut Transaction, id: Uuid) -> Result<(), Error> {
         return Err(format_err!("unable to delete item {:?}", id));
     }
 
-    println!("invalid item deleted {:?}", id);
+    println!("item deleted {:?}", id);
 
     return Ok(());
 }

server/src/rpc.rs

@@ -296,11 +296,16 @@ impl Rpc {
         })
     }
 
-    fn item_use(data: Vec<u8>, tx: &mut Transaction, account: Account, _client: &mut WebSocket<TcpStream>) -> Result<RpcResponse, Error> {
+    fn item_use(data: Vec<u8>, tx: &mut Transaction, account: Account, client: &mut WebSocket<TcpStream>) -> Result<RpcResponse, Error> {
         let msg = from_slice::<ItemUseMsg>(&data).or(Err(err_msg("invalid params")))?;
 
         item_use(msg.params, tx, &account)?;
 
+        Rpc::send_msg(client, RpcResponse {
+            method: "account_items".to_string(),
+            params: RpcResult::ItemList(items_list(tx, &account)?)
+        })?;
+
         let cryps_list = RpcResponse {
             method: "account_cryps".to_string(),
             params: RpcResult::CrypList(account_cryps(tx, &account)?)