ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed inventory to grid and added combiner box for combos

Browse Source
This commit is contained in:
Mashy 2019-02-13 13:11:38 +10:00
parent 4e0d6cc053
commit 400d972aa5
8 changed files with 192 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
client/index.js Executable file → Normal file
View File

2
client/package.json Executable file → Normal file
View File

@ -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": {

5
client/src/scenes/constants.js
View File

@ -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: {

1
client/src/scenes/cryps.js Executable file → Normal file
View File

@ -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;
});

62
client/src/scenes/elements/item.js Normal file
View File

@ -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;

27
client/src/scenes/item.info.js Normal file
View File

@ -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;

167
client/src/scenes/item.list.js
View File

@ -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;

3
client/src/scenes/menu.js
View File

@ -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;
}
}