diff --git a/client/src/scenes/combat.hitbox.js b/client/src/scenes/combat.hitbox.js index 0400844b..20ed517d 100644 --- a/client/src/scenes/combat.hitbox.js +++ b/client/src/scenes/combat.hitbox.js @@ -123,4 +123,3 @@ class CombatHitBox extends Phaser.Scene { } module.exports = CombatHitBox; - diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index ee9ed187..2474b154 100644 --- a/client/src/scenes/constants.js +++ b/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 combatHeight = () => 1000 - menuHeight(); +const combatWidth = () => CANVAS_WIDTH; +const combatHeight = () => CANVAS_HEIGHT - menuHeight(); const combatY = () => menuHeight(); const combatX = () => 0; -const crypListWidth = () => Math.floor(1600 * 0.2); -const crypListHeight = () => 1000 - menuHeight(); +const crypListWidth = () => Math.floor(CANVAS_WIDTH * 0.2); +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 gameListHeight = () => Math.floor(1000 / 10); +const gameListWidth = () => Math.floor(CANVAS_WIDTH * 0.2); +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 statsHeight = () => 1000 - menuHeight(); +const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.2); +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: { diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js index 2e855f53..cb76dc0c 100644 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -2,39 +2,108 @@ const Phaser = require('phaser'); const { TEXT, - // COLOURS, - POSITIONS: { GAME_LIST }, + POSITIONS: { ITEM_LIST }, } = require('./constants'); -class ItemList extends Phaser.GameObjects.Group { - constructor(args) { - super(args.list); +const itemCheckHitbox = (scenePlugin, pointer) => { + const { list } = scenePlugin.get('CombatHitBox').children; + for (let i = 0; i < list.length; i += 1) { + if (Phaser.Geom.Rectangle.ContainsPoint(list[i].getBounds(), + pointer.position)) return list[i]; + } + // If we didn't find a hitbox deselect them all + for (let i = 0; i < list.length; i += 1) list[i].deselect(); + return false; +}; - const { list, ws, itemList } = args; +class Item extends Phaser.GameObjects.Container { + constructor(scene, item, x, y) { + super(scene, x, y); - const X = GAME_LIST.x() + GAME_LIST.x(); - const WIDTH = Math.floor(GAME_LIST.width()); - const HEIGHT = GAME_LIST.height(); + this.state = 'deselect'; + this.item = item; + this.scene = scene; - const itemRow = (item, i) => { - const ITEM_X = X; - const ITEM_Y = GAME_LIST.rowY(i); + this.origX = x; + this.origY = y; - const itemBox = list.add - .rectangle(ITEM_X, ITEM_Y, WIDTH * 2, HEIGHT, 0x111111) - .setInteractive() - .setOrigin(0); + const WIDTH = ITEM_LIST.width(); + const HEIGHT = ITEM_LIST.height(); - this.add(list.add.text(ITEM_X, ITEM_Y, item.action, TEXT.HEADER)); + this.box = scene.add + .rectangle(x, y, WIDTH, HEIGHT, 0x111111) + .setOrigin(0.5, 0.5) + .setInteractive(); - itemBox.on('pointerdown', () => { - ws.sendItemUse(item.id); - }); - }; + scene.add.text(x, y, item.action, TEXT.HEADER) + .setOrigin(0.5, 0.5); - itemList.forEach(itemRow); + this.setSize(WIDTH, HEIGHT); + this.setInteractive(); + } - return true; + 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() { diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index 88a88d73..6708e788 100644 --- a/client/src/scenes/menu.js +++ b/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') { - return this.renderItemList(data); - } + // if (key === 'itemList') { + // 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() { diff --git a/client/src/socket.js b/client/src/socket.js index c8019a66..aefbdf05 100644 --- a/client/src/socket.js +++ b/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;