diff --git a/client/index.js b/client/index.js old mode 100755 new mode 100644 diff --git a/client/package.json b/client/package.json old mode 100755 new mode 100644 index b6725dee..81ea53c4 --- a/client/package.json +++ b/client/package.json @@ -21,7 +21,7 @@ "keymaster": "^1.6.2", "lodash": "^4.17.11", "parcel": "^1.9.7", - "phaser": "^3.16.0-rc3", + "phaser": "^3.16.1", "redux": "^4.0.0" }, "devDependencies": { diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index 9241c3dc..9311de52 100644 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -17,6 +17,8 @@ const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.5); const itemListHeight = () => Math.floor(CANVAS_HEIGHT * 0.5); const itemListX = () => 0; const itemListY = () => Math.floor(CANVAS_HEIGHT * 0.5); +const itemBlockWidth = () => Math.floor(itemListWidth() * 0.1); +const itemBlockHeight = () => Math.floor(itemListHeight() * 0.16); const menuNavigationWidth = () => Math.floor(CANVAS_WIDTH * 0.5); const menuNavigationHeight = () => Math.floor(CANVAS_HEIGHT * 0.3); @@ -92,6 +94,9 @@ module.exports = { y: itemListY, width: itemListWidth, height: itemListHeight, + itemWidth: itemBlockWidth, + itemHeight: itemBlockHeight, + }, STATS: { diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js old mode 100755 new mode 100644 index 73316c51..35596c5e --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -59,7 +59,6 @@ function renderCryps() { window.addEventListener('mouseup', () => game.registry.set('pan', false)); window.addEventListener('mousedown', () => game.registry.set('pan', true)); window.addEventListener('resize', () => { - console.log(game); game.scale.displaySize.maxWidth = window.innerHeight * 1.6; game.scale.displaySize.maxHeight = window.innerHeight; }); diff --git a/client/src/scenes/elements/item.js b/client/src/scenes/elements/item.js new file mode 100644 index 00000000..8f4b5750 --- /dev/null +++ b/client/src/scenes/elements/item.js @@ -0,0 +1,62 @@ +const Phaser = require('phaser'); + +const { + TEXT, + COLOURS, +} = require('../constants'); + + +class Item extends Phaser.GameObjects.Container { + constructor(scene, action, count, x, y, width, height) { + super(scene, x, y); + + this.state = 'deselect'; + this.action = action; + this.scene = scene; + + this.origX = x; + this.origY = y; + + this.box = scene.add + .rectangle(0, 0, width, height, 0x222222); + + this.text = scene.add + // .text(0, 0, `${action} x${count}`, TEXT.NORMAL) + .text(0, 0, `x${count}`, TEXT.NORMAL) + .setOrigin(0.5, 0.5); + + this.add(this.box); + this.add(this.text); + + 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(COLOURS.SELECT); + 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(0x222222); + this.state = 'deselect'; + } +} + +module.exports = Item; diff --git a/client/src/scenes/item.info.js b/client/src/scenes/item.info.js new file mode 100644 index 00000000..d8519ca4 --- /dev/null +++ b/client/src/scenes/item.info.js @@ -0,0 +1,27 @@ +const Phaser = require('phaser'); +const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants'); + +const X = MENU_MAIN.x(); +const Y = MENU_MAIN.y(); +const WIDTH = MENU_MAIN.width(); +const HEIGHT = MENU_MAIN.height(); + +class ItemInfo extends Phaser.Scene { + constructor() { + super({ key: 'ItemInfo' }); + } + + create(item) { + this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT); + // this.item = item; + this.add.text(WIDTH / 10, 0, item, TEXT.HEADER); + this.add.text(WIDTH / 10, 50, 'descriptions go here', TEXT.NORMAL); + // this.addItemInfo(item); + } + + cleanUp() { + this.scene.remove(); + } +} + +module.exports = ItemInfo; diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js index dd72785a..1fb890de 100644 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -1,9 +1,10 @@ const Phaser = require('phaser'); const { countBy } = require('lodash'); +const Item = require('./elements/item'); + const { TEXT, - COLOURS, POSITIONS: { ITEM_LIST }, } = require('./constants'); @@ -11,18 +12,66 @@ const X = ITEM_LIST.x(); const Y = ITEM_LIST.y(); const WIDTH = ITEM_LIST.width(); const HEIGHT = ITEM_LIST.height(); -const ITEM_WIDTH = WIDTH * 0.4; -const ITEM_HEIGHT = HEIGHT * 0.06; +const ITEM_WIDTH = ITEM_LIST.itemWidth(); +const ITEM_HEIGHT = ITEM_LIST.itemHeight(); -const itemCheckHitbox = (scenePlugin, pointer) => { - const { list } = scenePlugin.get('MenuCrypList').children; - const hitboxes = list.filter(c => c.cryp); +const INV_X = X + ITEM_WIDTH * 0.325; +const INV_Y = Y + ITEM_HEIGHT * 1.5; + +const ROWS = 3; +const COLUMNS = 5; + +const drawInventory = (graphics) => { + const invDrawX = INV_X - ITEM_WIDTH * 0.05; + const invDrawY = INV_Y - ITEM_HEIGHT * 0.05; + for (let i = 0; i <= COLUMNS; i += 1) { + const x = invDrawX + i * ITEM_WIDTH * 1.1; + graphics.lineBetween(x, invDrawY, x, invDrawY + ITEM_HEIGHT * 1.1 * ROWS); + } + for (let i = 0; i <= ROWS; i += 1) { + const y = invDrawY + i * ITEM_HEIGHT * 1.1; + graphics.lineBetween(invDrawX, y, invDrawX + ITEM_WIDTH * 1.1 * COLUMNS, y); + } +}; + +const drawCombiner = (graphics) => { + const combDrawX = INV_X - ITEM_WIDTH * 0.05 + ITEM_WIDTH * 6.75; + const combDrawY = INV_Y - ITEM_HEIGHT * 0.05; + for (let i = 0; i <= 2; i += 1) { + const x = combDrawX + i * ITEM_WIDTH * 1.1; + graphics.lineBetween(x, combDrawY, x, combDrawY + ITEM_HEIGHT * 1.1 * 2); + } + for (let i = 0; i <= 2; i += 1) { + const y = combDrawY + i * ITEM_HEIGHT * 1.1; + graphics.lineBetween(combDrawX, y, combDrawX + ITEM_WIDTH * 1.1 * 2, y); + } +}; + +class CombinerHitBox extends Phaser.GameObjects.Rectangle { + constructor(scene, x, y, i) { + super(scene, x, y, ITEM_WIDTH, ITEM_HEIGHT, 0x000000); + this.setOrigin(0); + this.slot = i; + } + + itemSelect() { + this.setFillStyle(0x222222); + } + + itemDeselect() { + this.setFillStyle(0x000000); + } +} + + +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)); let found; - for (let i = 0; i < hitboxes.length; i += 1) { - if (hitboxes[i].cryp && Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(), - pointer.position)) { + if (Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(), pointer.position)) { found = hitboxes[i]; } else { hitboxes[i].itemDeselect(); @@ -32,58 +81,6 @@ const itemCheckHitbox = (scenePlugin, pointer) => { return found; }; -class Item extends Phaser.GameObjects.Container { - constructor(scene, action, count, x, y) { - super(scene, x, y); - - this.state = 'deselect'; - this.action = action; - this.scene = scene; - - this.origX = x; - this.origY = y; - - this.box = scene.add - .rectangle(0, 0, ITEM_WIDTH, ITEM_HEIGHT, 0x222222); - - this.text = scene.add - .text(0, 0, `${action} x${count}`, TEXT.NORMAL) - .setOrigin(0.5, 0.5); - - this.add(this.box); - this.add(this.text); - - this.setSize(ITEM_WIDTH, ITEM_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(COLOURS.SELECT); - 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(0x222222); - this.state = 'deselect'; - } -} - class ItemList extends Phaser.Scene { constructor() { super({ key: 'ItemList', active: true }); @@ -98,45 +95,69 @@ class ItemList extends Phaser.Scene { } create(itemList) { + const graphics = this.add.graphics(); + graphics.lineStyle(5, 0x808080, 1.0); + drawCombiner(graphics); + drawInventory(graphics); + if (!itemList) return false; const ws = this.registry.get('ws'); - this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT); this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('setdata', this.updateData, this); if (!itemList) return false; - this.add.text(WIDTH / 4, HEIGHT / 4, 'Inventory', TEXT.HEADER); + this.add.text(X + WIDTH / 4, Y + HEIGHT / 8, 'Inventory', TEXT.HEADER); + this.add.text(X + WIDTH * 3 / 4, Y + HEIGHT / 8, 'Combiner', TEXT.HEADER); const actions = countBy(itemList, i => i.action); - Object.keys(actions).forEach((action, i) => { - const ITEM_X = ITEM_WIDTH; - const ITEM_Y = ITEM_HEIGHT * 1.2 * i + HEIGHT / 2.5; + for (let i = 0; i < 4; i += 1) { + const ITEM_X = ITEM_WIDTH * 1.1 * (i % 2) + INV_X + ITEM_WIDTH * 6.75; + const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / 2) + INV_Y; + this.add.existing(new CombinerHitBox(this, ITEM_X, ITEM_Y, i)); + } - const itemBox = new Item(this, action, actions[action], ITEM_X, ITEM_Y); + Object.keys(actions).forEach((action, i) => { + const ITEM_X = ITEM_WIDTH * 1.1 * (i % COLUMNS) + INV_X + ITEM_WIDTH * 0.5; + const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COLUMNS) + INV_Y + ITEM_HEIGHT * 0.5; + const itemBox = new Item(this, action, actions[action], ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT); this.input.setDraggable(itemBox); this.add.existing(itemBox); }); + this.input.on('pointerdown', (pointer, box) => { + if (!(box[0] instanceof Item)) return false; + this.registry.set('itemInfo', box[0].action); + return true; + }); + + this.input.on('dragstart', (pointer, box) => { + if (!(box instanceof Item)) return false; box.clickHandler(); + return true; }); this.input.on('drag', (pointer, box, dragX, dragY) => { - const hitBox = itemCheckHitbox(this.scene, pointer); - if (hitBox) hitBox.itemSelect(); + if (!(box instanceof Item)) return false; box.setPosition(dragX, dragY); + const hitBox = itemCheckHitbox(this, pointer); + if (hitBox) hitBox.itemSelect(); + return true; }); this.input.on('dragend', (pointer, box) => { + if (!(box instanceof Item)) return false; box.deselect(); - const hitBox = itemCheckHitbox(this.scene, pointer); - if (hitBox) { - ws.sendItemUse(itemList.find(li => li.action === box.action).id, hitBox.cryp.id); - } + const hitBox = itemCheckHitbox(this, pointer); box.setPosition(box.origX, box.origY); + if (!hitBox) return false; + if (hitBox instanceof CombinerHitBox) console.log(`Moved item into slot ${hitBox.slot}`); + else ws.sendItemUse(itemList.find(li => li.action === box.action).id, hitBox.cryp.id); + hitBox.itemDeselect(); + return true; }); return this; diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index 3d99bd26..03bce852 100644 --- a/client/src/scenes/menu.js +++ b/client/src/scenes/menu.js @@ -9,6 +9,7 @@ const Zones = require('./zones'); const GameList = require('./game.list'); const StatSheet = require('./statsheet'); const SpecSheet = require('./specsheet'); +const ItemInfo = require('./item.info'); const FIXED_MENU_SCENES = [ 'MenuCrypList', @@ -21,6 +22,7 @@ const MAIN_MENU_SCENES = [ 'GameList', 'StatSheet', 'SpecSheet', + 'ItemInfo', ]; @@ -53,6 +55,7 @@ class Menu extends Phaser.Scene { case 'gameList': return this.newMainScene('GameList', GameList, data); case 'crypStats': return this.newMainScene('StatSheet', StatSheet, data); case 'crypSpec': return this.newMainScene('SpecSheet', SpecSheet, data); + case 'itemInfo': return this.newMainScene('ItemInfo', ItemInfo, data); default: return false; } }