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

Changed main avatars to vertical + stats

Browse Source
This commit is contained in:
Mashy 2019-02-15 11:51:28 +10:00
parent 139cf58e5b
commit a748e4710b
3 changed files with 51 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
client/src/scenes/elements/item.js Executable file → Normal file
View File

38
client/src/scenes/item.list.js Executable file → Normal file
View File

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

46
client/src/scenes/menu.cryps.list.js
View File

@ -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', () => {