wip

client/src/scenes/combat.hitbox.js

@@ -123,4 +123,3 @@ class CombatHitBox extends Phaser.Scene {
 }
 
 module.exports = CombatHitBox;
-

client/src/scenes/constants.js

@@ -1,27 +1,37 @@
 // POSITIONING FNS
 // floors prevent subpixel rendering which looks trash
-const menuWidth = () => 1600;
+
+const CANVAS_WIDTH = 1600;
+const CANVAS_HEIGHT = 1000;
+
+const menuWidth = () => CANVAS_WIDTH;
 const menuHeight = () => 25;
 
-const combatWidth = () => 1600;
+const combatWidth = () => CANVAS_WIDTH;
-const combatHeight = () => 1000 - menuHeight();
+const combatHeight = () => CANVAS_HEIGHT - menuHeight();
 const combatY = () => menuHeight();
 const combatX = () => 0;
 
-const crypListWidth = () => Math.floor(1600 * 0.2);
+const crypListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
-const crypListHeight = () => 1000 - menuHeight();
+const crypListHeight = () => CANVAS_HEIGHT - menuHeight();
 const cryplistRowHeight = cryps => crypListHeight() / cryps.length;
 const crypListY = () => menuHeight();
 const crypListX = () => 0;
 
-const gameListWidth = () => Math.floor(1600 * 0.2);
+const gameListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
-const gameListHeight = () => Math.floor(1000 / 10);
+const gameListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
 const gameListX = () => crypListWidth();
 const gameListY = i => menuHeight() + (gameListHeight() * i);
 const gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2));
 
-const statsWidth = () => Math.floor(1600 - crypListWidth() - gameListWidth());
+const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
-const statsHeight = () => 1000 - menuHeight();
+const itemListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
+const itemListX = () => crypListWidth() + gameListWidth();
+const itemListY = i => menuHeight() + (itemListHeight() * i);
+const itemListRowY = i => menuHeight() + (itemListHeight() * (i + 2));
+
+const statsWidth = () => Math.floor(CANVAS_WIDTH - crypListWidth() - gameListWidth());
+const statsHeight = () => CANVAS_HEIGHT - menuHeight();
 const statsY = () => menuHeight();
 const statsX = () => crypListWidth() + gameListWidth();
 const statsKnownX = () => Math.floor(statsX() + statsWidth() / 4);
@@ -89,6 +99,14 @@ module.exports = {
             height: gameListHeight,
             rowY: gameListRowY,
         },
+
+        ITEM_LIST: {
+            x: itemListX,
+            y: itemListY,
+            width: itemListWidth,
+            height: itemListHeight,
+            rowY: itemListRowY,
+        },
     },
 
     COLOURS: {

client/src/scenes/item.list.js

@@ -2,39 +2,108 @@ const Phaser = require('phaser');
 
 const {
     TEXT,
-    // COLOURS,
+    POSITIONS: { ITEM_LIST },
-    POSITIONS: { GAME_LIST },
 } = require('./constants');
 
-class ItemList extends Phaser.GameObjects.Group {
+const itemCheckHitbox = (scenePlugin, pointer) => {
-    constructor(args) {
+    const { list } = scenePlugin.get('CombatHitBox').children;
-        super(args.list);
+    for (let i = 0; i < list.length; i += 1) {
-
+        if (Phaser.Geom.Rectangle.ContainsPoint(list[i].getBounds(),
-        const { list, ws, itemList } = args;
+            pointer.position)) return list[i];
-
+    }
-        const X = GAME_LIST.x() + GAME_LIST.x();
+    // If we didn't find a hitbox deselect them all
-        const WIDTH = Math.floor(GAME_LIST.width());
+    for (let i = 0; i < list.length; i += 1) list[i].deselect();
-        const HEIGHT = GAME_LIST.height();
+    return false;
-
-        const itemRow = (item, i) => {
-            const ITEM_X = X;
-            const ITEM_Y = GAME_LIST.rowY(i);
-
-            const itemBox = list.add
-                .rectangle(ITEM_X, ITEM_Y, WIDTH * 2, HEIGHT, 0x111111)
-                .setInteractive()
-                .setOrigin(0);
-
-            this.add(list.add.text(ITEM_X, ITEM_Y, item.action, TEXT.HEADER));
-
-            itemBox.on('pointerdown', () => {
-                ws.sendItemUse(item.id);
-            });
 };
 
-        itemList.forEach(itemRow);
+class Item extends Phaser.GameObjects.Container {
+    constructor(scene, item, x, y) {
+        super(scene, x, y);
 
-        return true;
+        this.state = 'deselect';
+        this.item = item;
+        this.scene = scene;
+
+        this.origX = x;
+        this.origY = y;
+
+        const WIDTH = ITEM_LIST.width();
+        const HEIGHT = ITEM_LIST.height();
+
+        this.box = scene.add
+            .rectangle(x, y, WIDTH, HEIGHT, 0x111111)
+            .setOrigin(0.5, 0.5)
+            .setInteractive();
+
+        scene.add.text(x, y, item.action, TEXT.HEADER)
+            .setOrigin(0.5, 0.5);
+
+        this.setSize(WIDTH, HEIGHT);
+        this.setInteractive();
+    }
+
+    clickHandler() {
+        this.scene.activeItem = this;
+        this.select();
+    }
+
+    select() {
+        this.scene.children.list.forEach((item) => {
+            if (item.state === 'select') item.deselect();
+        });
+        this.box.setFillStyle(0x004bfe);
+        this.state = 'select';
+    }
+
+    activate() {
+        this.scene.children.list.forEach((item) => {
+            if (item.state === 'select') item.deselect();
+        });
+        this.box.setFillStyle(0xff0000);
+        this.state = 'activate';
+    }
+
+    deselect() {
+        this.box.setFillStyle(0x111111);
+        this.state = 'deselect';
+    }
+}
+
+class ItemList extends Phaser.Scene {
+    constructor() {
+        super({ key: 'ItemList', active: true });
+        console.log('item list created');
+    }
+
+    create(itemList) {
+        itemList.forEach((item, i) => {
+            const ITEM_X = ITEM_LIST.x();
+            const ITEM_Y = ITEM_LIST.rowY(i);
+
+            const itemBox = new Item(this, item, ITEM_X, ITEM_Y);
+            this.input.setDraggable(itemBox);
+            this.add.existing(itemBox);
+        });
+
+        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);
+            // if (hitBox) hitBox.select();
+            box.setPosition(dragX, dragY);
+        });
+
+        this.input.on('dragend', (pointer, box) => {
+            box.deselect();
+            // const hitBox = itemCheckHitbox(this.scene, pointer);
+            // if (hitBox) {
+            //     hitBox.clickHandler();
+            // }
+            box.setPosition(box.origX, box.origY);
+        });
     }
 
     cleanup() {

client/src/scenes/menu.js

@@ -27,6 +27,8 @@ class Menu extends Phaser.Scene {
         this.scene.add('MenuCrypList', MenuCrypList, true);
         this.scene.add('MenuGameList', MenuGameList, true);
 
+        this.scene.manager.add('ItemList', ItemList, true);
+
         console.log(this.scene.isActive());
     }
 
@@ -36,6 +38,10 @@ 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);
@@ -44,9 +50,9 @@ class Menu extends Phaser.Scene {
     }
 
     updateData(parent, key, data) {
-        if (key === 'itemList') {
+        // if (key === 'itemList') {
-            return this.renderItemList(data);
+        //     return this.renderItemList(data);
-        }
+        // }
 
         if (key === 'game' && this.scene.isActive()) {
             this.cleanUp();
@@ -75,10 +81,6 @@ class Menu extends Phaser.Scene {
             this.itemList.cleanup();
             this.itemList.destroy(true);
         }
-
-        console.log(itemList);
-
-        this.itemList = new ItemList({ list: this, ws, itemList, events: this.game.events });
     }
 
     cleanUp() {

client/src/socket.js

@@ -190,7 +190,7 @@ function createSocket(events) {
 
             if (!account) events.loginPrompt();
             if (process.env.NODE_ENV !== 'production') {
-                // send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
+                send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
             }
 
             return true;