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

Inventory scene now uses vbox

Browse Source
This commit is contained in:
Mashy 2019-02-18 14:16:23 +10:00
parent 99cc144361
commit 1c1ff0cc0d
5 changed files with 59 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,8 +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 itemBlockWidth = () => Math.floor(itemListWidth() * 0.075);
const itemBlockHeight = () => Math.floor(itemListHeight() * 0.12);
const menuNavigationWidth = () => Math.floor(CANVAS_WIDTH * 0.5);
const menuNavigationHeight = () => Math.floor(CANVAS_HEIGHT * 0.3);

4
client/src/scenes/elements/item.js
View File

@ -6,7 +6,7 @@ const {
} = require('../constants');
class Item extends Phaser.GameObjects.Container {
constructor(scene, action, count, x, y, width, height) {
constructor(scene, action, x, y, width, height) {
super(scene, x, y);
this.state = 'deselect';
@ -21,7 +21,7 @@ class Item extends Phaser.GameObjects.Container {
this.text = scene.add
// .text(0, 0, `${action} x${count}`, TEXT.NORMAL)
.text(0, 0, `x${count}`, TEXT.NORMAL)
.text(0, 0, `${action}`, TEXT.NORMAL)
.setOrigin(0.5, 0.5);
this.add(this.box);

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

@ -16,15 +16,34 @@ const ITEM_WIDTH = ITEM_LIST.itemWidth();
const ITEM_HEIGHT = ITEM_LIST.itemHeight();
const INV_X = X + ITEM_WIDTH * 0.325;
const INV_Y = Y + ITEM_HEIGHT * 1.5;
const INV_Y = Y + ITEM_HEIGHT;
const INV_ROWS = 3;
const INV_COLUMNS = 5;
const INV_COLUMNS = 3;
const COMB_X = INV_X + ITEM_WIDTH * 6.75;
const COMB_Y = INV_Y;
const COMB_ROWS = 2;
const COMB_COLUMNS = 2;
const BOX_X = X + ITEM_WIDTH * 2;
const BOX_Y = Y + ITEM_HEIGHT * 5;
const BOX_ROWS = 3;
const BOX_COLUMNS = 6;
const drawVbox = (graphics) => {
const boxDrawX = BOX_X - ITEM_WIDTH * 0.05;
const boxDrawY = BOX_Y - ITEM_HEIGHT * 0.05;
for (let i = 0; i <= BOX_COLUMNS; i += 1) {
const x = boxDrawX + i * ITEM_WIDTH * 1.1;
graphics.lineBetween(x, boxDrawY, x, boxDrawY + ITEM_HEIGHT * 1.1 * BOX_ROWS);
}
for (let i = 0; i <= BOX_ROWS; i += 1) {
const y = boxDrawY + i * ITEM_HEIGHT * 1.1;
graphics.lineBetween(boxDrawX, y, boxDrawX + ITEM_WIDTH * 1.1 * BOX_COLUMNS, y);
}
};
const drawInventory = (graphics) => {
const invDrawX = INV_X - ITEM_WIDTH * 0.05;
const invDrawY = INV_Y - ITEM_HEIGHT * 0.05;
@ -84,48 +103,68 @@ class ItemList extends Phaser.Scene {
}
updateData(parent, key, data) {
if (key === 'itemList') {
if (key === 'vbox') {
this.registry.events.off('changedata', this.updateData, this);
this.registry.events.off('setdata', this.updateData, this);
this.scene.restart(data);
}
}
create(itemList) {
if (!itemList) return false;
create(vbox) {
this.registry.events.on('changedata', this.updateData, this);
this.registry.events.on('setdata', this.updateData, this);
this.addStatic();
this.addItems(itemList);
this.addClickHandlers(itemList);
if (!vbox.free) return false;
this.addStatic(vbox);
this.addItems(vbox);
this.addClickHandlers(vbox);
return this;
}
addStatic() {
addStatic(vbox) {
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);
drawVbox(graphics);
this.add.text(X + WIDTH / 10, Y, 'Inventory', TEXT.HEADER);
this.add.text(X + WIDTH * 11 / 20, Y, 'Combiner', TEXT.HEADER);
this.add.text(X + WIDTH * 7 / 20, Y + HEIGHT / 2, 'Varibox', TEXT.HEADER);
const reroll = this.add.rectangle(0, Y + HEIGHT * 2 / 3, ITEM_WIDTH * 1.5, ITEM_HEIGHT * 1.5, 0x222222)
.setInteractive()
.setOrigin(0)
.on('pointerdown', () => this.registry.get('ws').sendVboxDiscard(vbox.game));
this.add.text(reroll.getCenter().x, reroll.getCenter().y, 'Reroll', TEXT.HEADER)
.setOrigin(0.5, 0.5);
}
addItems(itemList) {
const actions = countBy(itemList, i => i.action);
addItems(vbox) {
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) => {
vbox.bound.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);
const itemBox = new Item(this, action, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
this.input.setDraggable(itemBox);
this.add.existing(itemBox);
});
vbox.free.forEach((action, i) => {
const ITEM_X = ITEM_WIDTH * 1.1 * (i % BOX_COLUMNS) + BOX_X + ITEM_WIDTH * 0.5;
const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / BOX_COLUMNS) + BOX_Y + ITEM_HEIGHT * 0.5;
const itemBox = new Item(this, action, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
itemBox
.setInteractive()
.on('pointerdown', () => {
this.registry.get('ws').sendVboxAccept(vbox.game, i);
});
this.add.existing(itemBox);
});
}
addClickHandlers(itemList) {

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

@ -10,7 +10,6 @@ const GameList = require('./game.list');
const StatSheet = require('./statsheet');
const SpecSheet = require('./specsheet');
const ItemInfo = require('./item.info');
const Vbox = require('./vbox');
const FIXED_MENU_SCENES = [
'MenuCrypList',
@ -24,7 +23,6 @@ const MAIN_MENU_SCENES = [
'StatSheet',
'SpecSheet',
'ItemInfo',
'Vbox',
];
const NULL_UUID = '00000000-0000-0000-0000-000000000000';
@ -59,7 +57,6 @@ class Menu extends Phaser.Scene {
case 'crypStats': return this.newMainScene('StatSheet', StatSheet, data);
case 'crypSpec': return this.newMainScene('SpecSheet', SpecSheet, data);
case 'itemInfo': return this.newMainScene('ItemInfo', ItemInfo, data);
case 'vbox': return this.newMainScene('Vbox', Vbox, data);
default: return false;
}
}

47
client/src/scenes/vbox.js
View File

@ -1,47 +0,0 @@
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 Vbox extends Phaser.Scene {
constructor() {
super({ key: 'Vbox' });
}
create(vbox) {
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
this.add.text(WIDTH / 10, 0, 'free', TEXT.HEADER);
this.add.text(WIDTH / 5, 0, 'bound', TEXT.HEADER);
const drawFree = (item, i) => {
this.add
.text(WIDTH / 10, 25 * (i + 2), item, TEXT.NORMAL)
.setInteractive()
.on('pointerdown', () => {
this.registry.get('ws').sendVboxAccept(vbox.game, i);
console.log(item);
});
};
const drawBound = (item, i) => {
this.add
.text(WIDTH / 5, 25 * (i + 2), item, TEXT.NORMAL)
.setInteractive()
.on('pointerdown', () => {
// this.registry.get('ws').sendVboxAccept(vbox.game, i);
console.log(item);
});
};
vbox.free.forEach(drawFree);
vbox.bound.forEach(drawBound);
}
cleanUp() {
this.scene.remove();
}
}
module.exports = Vbox;