From 4e0d6cc0537d2c710e0bb2daa71ef0833f1ea6db Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 5 Feb 2019 10:35:40 +1000 Subject: [PATCH 1/4] change scale mode --- client/package.json | 2 +- client/src/scenes/cryps.js | 3 ++- server/COMBOS.md | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) mode change 100644 => 100755 client/package.json mode change 100644 => 100755 client/src/scenes/cryps.js diff --git a/client/package.json b/client/package.json old mode 100644 new mode 100755 index 2009d138..b6725dee --- 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.0-rc3", "redux": "^4.0.0" }, "devDependencies": { diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js old mode 100644 new mode 100755 index d0ce388a..73316c51 --- 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: { @@ -59,6 +59,7 @@ 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/server/COMBOS.md b/server/COMBOS.md index c2204cd7..40881558 100644 --- a/server/COMBOS.md +++ b/server/COMBOS.md @@ -59,7 +59,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 # From 400d972aa5019f67628e1b80788b3e4e4bd420c9 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 13 Feb 2019 13:11:38 +1000 Subject: [PATCH 2/4] Changed inventory to grid and added combiner box for combos --- client/index.js | 0 client/package.json | 2 +- client/src/scenes/constants.js | 5 + client/src/scenes/cryps.js | 1 - client/src/scenes/elements/item.js | 62 +++++++++++ client/src/scenes/item.info.js | 27 +++++ client/src/scenes/item.list.js | 167 ++++++++++++++++------------- client/src/scenes/menu.js | 3 + 8 files changed, 192 insertions(+), 75 deletions(-) mode change 100755 => 100644 client/index.js mode change 100755 => 100644 client/package.json mode change 100755 => 100644 client/src/scenes/cryps.js create mode 100644 client/src/scenes/elements/item.js create mode 100644 client/src/scenes/item.info.js 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; } } From 139cf58e5bb83d8f74999ee74ed5f744f1c39139 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 13 Feb 2019 13:30:41 +1000 Subject: [PATCH 3/4] item list cleanup --- client/src/scenes/elements/item.js | 3 +- client/src/scenes/item.list.js | 44 ++++++++++++------------------ 2 files changed, 19 insertions(+), 28 deletions(-) mode change 100644 => 100755 client/src/scenes/elements/item.js mode change 100644 => 100755 client/src/scenes/item.list.js diff --git a/client/src/scenes/elements/item.js b/client/src/scenes/elements/item.js old mode 100644 new mode 100755 index 8f4b5750..9febb941 --- a/client/src/scenes/elements/item.js +++ b/client/src/scenes/elements/item.js @@ -5,7 +5,6 @@ const { COLOURS, } = require('../constants'); - class Item extends Phaser.GameObjects.Container { constructor(scene, action, count, x, y, width, height) { super(scene, x, y); @@ -34,6 +33,8 @@ class Item extends Phaser.GameObjects.Container { clickHandler() { this.scene.activeItem = this; + // Set the main context to display the item info + this.scene.registry.set('itemInfo', this.action); this.select(); } diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js old mode 100644 new mode 100755 index 1fb890de..5d404b07 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -52,18 +52,11 @@ class CombinerHitBox extends Phaser.GameObjects.Rectangle { super(scene, x, y, ITEM_WIDTH, ITEM_HEIGHT, 0x000000); this.setOrigin(0); this.slot = i; - } - - itemSelect() { - this.setFillStyle(0x222222); - } - - itemDeselect() { - this.setFillStyle(0x000000); + 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) @@ -95,22 +88,25 @@ class ItemList extends Phaser.Scene { } create(itemList) { + if (!itemList) return false; + 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; + } + + addStatic() { 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.registry.events.on('changedata', this.updateData, this); - this.registry.events.on('setdata', this.updateData, this); - - if (!itemList) return false; - 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); for (let i = 0; i < 4; i += 1) { @@ -126,14 +122,10 @@ class ItemList extends Phaser.Scene { 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; - }); - - + addClickHandlers(itemList) { + const ws = this.registry.get('ws'); this.input.on('dragstart', (pointer, box) => { if (!(box instanceof Item)) return false; box.clickHandler(); @@ -159,8 +151,6 @@ class ItemList extends Phaser.Scene { hitBox.itemDeselect(); return true; }); - - return this; } cleanUp() { From a748e4710b79b77a8aba181900f13001590a7d0b Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 15 Feb 2019 11:51:28 +1000 Subject: [PATCH 4/4] Changed main avatars to vertical + stats --- client/src/scenes/elements/item.js | 0 client/src/scenes/item.list.js | 38 +++++++++++++---------- client/src/scenes/menu.cryps.list.js | 46 ++++++++++++++++++---------- 3 files changed, 51 insertions(+), 33 deletions(-) mode change 100755 => 100644 client/src/scenes/elements/item.js mode change 100755 => 100644 client/src/scenes/item.list.js diff --git a/client/src/scenes/elements/item.js b/client/src/scenes/elements/item.js old mode 100755 new mode 100644 diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js old mode 100755 new mode 100644 index 5d404b07..2b4ee19a --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -17,33 +17,37 @@ const ITEM_HEIGHT = ITEM_LIST.itemHeight(); 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 ROWS = 3; -const 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 <= COLUMNS; i += 1) { + 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 * ROWS); + graphics.lineBetween(x, invDrawY, x, invDrawY + ITEM_HEIGHT * 1.1 * INV_ROWS); } - for (let i = 0; i <= ROWS; i += 1) { + 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 * COLUMNS, y); + graphics.lineBetween(invDrawX, y, invDrawX + ITEM_WIDTH * 1.1 * INV_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 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 * 2); + graphics.lineBetween(x, combDrawY, x, combDrawY + ITEM_HEIGHT * 1.1 * COMB_ROWS); } - for (let i = 0; i <= 2; i += 1) { + 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 * 2, y); + graphics.lineBetween(combDrawX, y, combDrawX + ITEM_WIDTH * 1.1 * COMB_COLUMNS, y); } }; @@ -109,15 +113,15 @@ class ItemList extends Phaser.Scene { addItems(itemList) { const actions = countBy(itemList, i => i.action); - 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; + 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)); } 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 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); 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', () => {