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 index 2009d138..81ea53c4 100644 --- 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", + "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 index d0ce388a..35596c5e 100644 --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -11,7 +11,7 @@ function renderCryps() { // backgroundColor: '#181818', resolution: window.devicePixelRatio, scale: { - mode: Phaser.DOM.WIDTH_CONTROLS_HEIGHT, + mode: Phaser.Scale.FIT, width: 1600, height: 1000, max: { diff --git a/client/src/scenes/elements/item.js b/client/src/scenes/elements/item.js new file mode 100644 index 00000000..9febb941 --- /dev/null +++ b/client/src/scenes/elements/item.js @@ -0,0 +1,63 @@ +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; + // Set the main context to display the item info + this.scene.registry.set('itemInfo', this.action); + 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..2b4ee19a 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,63 @@ 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 INV_ROWS = 3; +const INV_COLUMNS = 5; + +const COMB_X = INV_X + ITEM_WIDTH * 6.75; +const COMB_Y = INV_Y; +const COMB_ROWS = 2; +const COMB_COLUMNS = 2; + +const drawInventory = (graphics) => { + const invDrawX = INV_X - ITEM_WIDTH * 0.05; + const invDrawY = INV_Y - ITEM_HEIGHT * 0.05; + for (let i = 0; i <= INV_COLUMNS; i += 1) { + const x = invDrawX + i * ITEM_WIDTH * 1.1; + graphics.lineBetween(x, invDrawY, x, invDrawY + ITEM_HEIGHT * 1.1 * INV_ROWS); + } + for (let i = 0; i <= INV_ROWS; i += 1) { + const y = invDrawY + i * ITEM_HEIGHT * 1.1; + graphics.lineBetween(invDrawX, y, invDrawX + ITEM_WIDTH * 1.1 * INV_COLUMNS, y); + } +}; + +const drawCombiner = (graphics) => { + const combDrawX = COMB_X - ITEM_WIDTH * 0.05; + const combDrawY = COMB_Y - ITEM_HEIGHT * 0.05; + for (let i = 0; i <= COMB_COLUMNS; i += 1) { + const x = combDrawX + i * ITEM_WIDTH * 1.1; + graphics.lineBetween(x, combDrawY, x, combDrawY + ITEM_HEIGHT * 1.1 * COMB_ROWS); + } + for (let i = 0; i <= COMB_ROWS; i += 1) { + const y = combDrawY + i * ITEM_HEIGHT * 1.1; + graphics.lineBetween(combDrawX, y, combDrawX + ITEM_WIDTH * 1.1 * COMB_COLUMNS, 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; + this.itemSelect = () => this.setFillStyle(0x222222); + this.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 +78,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 }); @@ -99,47 +93,68 @@ class ItemList extends Phaser.Scene { create(itemList) { 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); + this.addStatic(); + this.addItems(itemList); + this.addClickHandlers(itemList); + return this; + } - if (!itemList) return false; - - this.add.text(WIDTH / 4, HEIGHT / 4, 'Inventory', TEXT.HEADER); + addStatic() { + const graphics = this.add.graphics(); + graphics.lineStyle(5, 0x808080, 1.0); + drawCombiner(graphics); + drawInventory(graphics); + 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); + } + addItems(itemList) { 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 < (COMB_COLUMNS * COMB_ROWS); i += 1) { + const ITEM_X = ITEM_WIDTH * 1.1 * (i % COMB_COLUMNS) + INV_X + ITEM_WIDTH * 6.75; + const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COMB_COLUMNS) + 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 % INV_COLUMNS) + INV_X + ITEM_WIDTH * 0.5; + const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / INV_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); }); + } + addClickHandlers(itemList) { + const ws = this.registry.get('ws'); 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; } cleanUp() { diff --git a/client/src/scenes/menu.cryps.list.js b/client/src/scenes/menu.cryps.list.js index 8936b893..621470bc 100644 --- a/client/src/scenes/menu.cryps.list.js +++ b/client/src/scenes/menu.cryps.list.js @@ -20,7 +20,7 @@ class MenuCrypList extends Phaser.Scene { } create() { - this.cameras.main.setViewport(CRYP_LIST.x(), CRYP_LIST.y(), CRYP_LIST.width(), CRYP_LIST.height()); + // this.cameras.main.setViewport(CRYP_LIST.x(), CRYP_LIST.y(), CRYP_LIST.width(), CRYP_LIST.height()); this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('setdata', this.updateData, this); this.addCrypRows(this.registry.get('cryps')); @@ -40,12 +40,17 @@ class MenuCrypList extends Phaser.Scene { this.crypRows = this.add.group(); // We only display 3 cryps others can be viewed in cryp list (soon TM) const crypDispLength = cryps.length < 3 ? cryps.length : 3; + const crypStat = (stat, i, crypInfo) => { + this.crypRows.add(this.add + .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (2 + i), `${stat.stat}: ${stat.base}`, TEXT.NORMAL) + .setOrigin(0.5, 0.5)); + }; for (let i = 0; i < crypDispLength; i += 1) { const cryp = cryps[i]; - const ROW_X = 0; - const ROW_Y = (i * ROW_HEIGHT); - const BOX_WIDTH = Math.floor(ROW_WIDTH / 5); + const ROW_X = i * BOX_WIDTH * 2; + const ROW_Y = CRYP_LIST.y(); + const ACTIVE_FILL = cryp.active ? 1 @@ -55,13 +60,14 @@ class MenuCrypList extends Phaser.Scene { // Selection of cryps const selectFn = () => { this.game.events.emit('CRYP_ACTIVE', cryp); + this.registry.set('crypStats', cryp); }; if (KEY_MAP[i]) { this.input.keyboard.on(KEY_MAP[i], selectFn, this); } - const crypSelect = this.add +/* const crypSelect = this.add .rectangle(ROW_X, ROW_Y, BOX_WIDTH, ROW_HEIGHT, FILL, 1) .setInteractive() .setOrigin(0) @@ -69,17 +75,16 @@ class MenuCrypList extends Phaser.Scene { this.crypRows.add(crypSelect); this.crypRows.add(this.add .text(crypSelect.getCenter().x, crypSelect.y + TEXT_MARGIN, i + 1, TEXT.HEADER) - .setOrigin(0.5, 0.5)); + .setOrigin(0.5, 0.5));*/ // Cryp avatar and interaction box const crypInteract = this.add - .rectangle(ROW_X + BOX_WIDTH, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL) + .rectangle(ROW_X, ROW_Y + ROW_HEIGHT * 2.5, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL) .setInteractive() .setOrigin(0) - .on('pointerdown', () => { - this.registry.set('crypStats', cryp); - }); + .on('pointerdown', selectFn); + crypInteract.itemSelect = () => { crypInteract.setFillStyle(COLOURS.SELECT); }; @@ -97,15 +102,24 @@ class MenuCrypList extends Phaser.Scene { // Cryp information box (names + skills) const crypInfo = this.add - .rectangle(ROW_X + BOX_WIDTH * 3, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL) - .setOrigin(0); + .rectangle(ROW_X, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT * 2.5, FILL, ACTIVE_FILL) + .setOrigin(0) + .setInteractive() + .on('pointerdown', selectFn); + this.crypRows.add(crypInfo); this.crypRows.add(this.add .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER) .setOrigin(0.5, 0.5)); - this.crypRows.add(this.add - .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * 2, `Level: ${cryp.lvl}`, TEXT.NORMAL) - .setOrigin(0.5, 0.5)); + const CRYP_STATS = [ + cryp.stamina, + cryp.armour, + cryp.spell_shield, + cryp.phys_dmg, + cryp.spell_dmg, + cryp.speed, + ]; + CRYP_STATS.forEach((stat, j) => crypStat(stat, j, crypInfo)); } return true; } @@ -113,7 +127,7 @@ class MenuCrypList extends Phaser.Scene { addControls() { // Add Spawn Cryp Option const spawn = this.add - .rectangle(ROW_WIDTH * 0.05, ROW_HEIGHT * 3.5, ROW_WIDTH * 0.4, ROW_HEIGHT, 0x888888) + .rectangle(ROW_WIDTH * 0.05, ROW_HEIGHT * 4, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888) .setInteractive() .setOrigin(0) .on('pointerdown', () => { 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; } } diff --git a/server/COMBOS.md b/server/COMBOS.md index 034c1d77..7d865d55 100644 --- a/server/COMBOS.md +++ b/server/COMBOS.md @@ -73,7 +73,7 @@ Buff `Base ally targetted skill - significantly increase ally speed` ### Slow ### Combine `Base Skill Debuff + 1 Red & 2 Blue` -Buff `Base ally targetted skill - significantly increase ally speed` +Buff `Base ally targetted skill - significantly decrease enemy speed` # Non-Violence Type #