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

Reworking instance UI page

Browse Source
This commit is contained in:
Mashy 2019-03-15 14:02:14 +10:00
parent 2486045333
commit ddc48d1740
11 changed files with 92 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,29 +7,32 @@ const CANVAS_HEIGHT = () => Math.floor(window.innerHeight);
const headerWidth = () => CANVAS_WIDTH();
const headerHeight = () => Math.floor(CANVAS_HEIGHT() * 0.05);
const menuCrypListWidth = () => Math.floor(CANVAS_WIDTH() * 0.3);
const menuCrypListHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5);
const menuCrypListX = () => 0;
const menuCrypListX = () => Math.floor(CANVAS_WIDTH() * 0.3);
const menuCrypListY = () => headerHeight();
const itemListWidth = () => Math.floor(CANVAS_WIDTH() * 0.5);
const itemListHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5);
const itemListHeight = () => Math.floor(CANVAS_HEIGHT() * 0.95);
const itemListX = () => 0;
const itemListY = () => Math.floor(CANVAS_HEIGHT() * 0.5);
const itemBlockWidth = () => Math.floor(itemListWidth() * 0.075);
const itemBlockHeight = () => Math.floor(itemListHeight() * 0.12);
const itemListY = () => headerHeight();
const itemBlockWidth = () => Math.floor(itemListWidth() * 0.12);
const itemBlockHeight = () => Math.floor(itemListHeight() * 0.04);
const menuNavigationWidth = () => Math.floor(CANVAS_WIDTH() * 0.5);
const menuNavigationHeight = () => Math.floor(CANVAS_HEIGHT() * 0.3);
const menuNavigationX = () => Math.floor(CANVAS_WIDTH() * 0.5);
const menuNavigationY = () => Math.floor(CANVAS_HEIGHT() * 0.7);
const menuMainWidth = () => Math.floor(CANVAS_WIDTH() * 0.7);
const menuMainWidth = () => Math.floor(CANVAS_WIDTH() * 0.4);
const menuMainHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5);
const menuMainX = () => Math.floor(CANVAS_WIDTH() * 0.4);
const menuMainX = () => Math.floor(CANVAS_WIDTH() * 0.6);
const menuMainY = () => headerHeight();
const homeMainWidth = () => Math.floor(CANVAS_WIDTH() * 0.6);
const homeMainHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5);
const homeMainX = () => Math.floor(CANVAS_WIDTH() * 0.4);
const homeMainY = () => headerHeight();
const combatWidth = () => CANVAS_WIDTH();
const combatHeight = () => CANVAS_HEIGHT() - headerHeight();
@ -82,6 +85,15 @@ module.exports = {
},
HOME_MAIN: {
x: homeMainX,
y: homeMainY,
width: homeMainWidth,
height: homeMainHeight,
},
NAVIGATION: {
x: menuNavigationX,
y: menuNavigationY,

2
client/src/scenes/header.js
View File

@ -1,7 +1,7 @@
const Phaser = require('phaser');
const fs = require('fs');
const { TEXT } = require('./constants');
const fs = require('fs');
const aztecAtlas = require('../../assets/aztec.atlas.json');

11
client/src/scenes/home.instances.js
View File

@ -1,10 +1,11 @@
const Phaser = require('phaser');
const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants');
const { POSITIONS: { HOME_MAIN }, TEXT } = require('./constants');
const X = HOME_MAIN.x();
const Y = HOME_MAIN.y();
const WIDTH = HOME_MAIN.width();
const HEIGHT = HOME_MAIN.height();
const X = MENU_MAIN.x();
const Y = MENU_MAIN.y();
const WIDTH = MENU_MAIN.width();
const HEIGHT = MENU_MAIN.height();
const NULL_UUID = '00000000-0000-0000-0000-000000000000';
class HomeRankings extends Phaser.Scene {

10
client/src/scenes/home.news.js
View File

@ -1,10 +1,10 @@
const Phaser = require('phaser');
const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants');
const { POSITIONS: { HOME_MAIN }, TEXT } = require('./constants');
const X = MENU_MAIN.x();
const Y = MENU_MAIN.y();
const WIDTH = MENU_MAIN.width();
const HEIGHT = MENU_MAIN.height();
const X = HOME_MAIN.x();
const Y = HOME_MAIN.y();
const WIDTH = HOME_MAIN.width();
const HEIGHT = HOME_MAIN.height();
class HomeNews extends Phaser.Scene {
constructor() {

10
client/src/scenes/home.rankings.js
View File

@ -1,10 +1,10 @@
const Phaser = require('phaser');
const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants');
const { POSITIONS: { HOME_MAIN }, TEXT } = require('./constants');
const X = MENU_MAIN.x();
const Y = MENU_MAIN.y();
const WIDTH = MENU_MAIN.width();
const HEIGHT = MENU_MAIN.height();
const X = HOME_MAIN.x();
const Y = HOME_MAIN.y();
const WIDTH = HOME_MAIN.width();
const HEIGHT = HOME_MAIN.height();
class HomeRankings extends Phaser.Scene {
constructor() {

9
client/src/scenes/home.shop.js
View File

@ -1,9 +1,10 @@
const Phaser = require('phaser');
const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants');
const { POSITIONS: { HOME_MAIN }, TEXT } = require('./constants');
const X = MENU_MAIN.x();
const Y = MENU_MAIN.y();
const HEIGHT = MENU_MAIN.height();
const X = HOME_MAIN.x();
const Y = HOME_MAIN.y();
const WIDTH = HOME_MAIN.width();
const HEIGHT = HOME_MAIN.height();
class HomeShop extends Phaser.Scene {
constructor() {

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

@ -14,21 +14,20 @@ const HEIGHT = ITEM_LIST.height();
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;
const BOX_X = X + ITEM_WIDTH * 0.5;
const BOX_Y = Y + ITEM_HEIGHT + ITEM_HEIGHT * 2;
const BOX_ROWS = 6;
const BOX_COLUMNS = 3;
const INV_X = X + ITEM_WIDTH * 0.5;
const INV_Y = Y + ITEM_HEIGHT * 12;
const INV_ROWS = 3;
const INV_COLUMNS = 3;
const COMB_X = INV_X + ITEM_WIDTH * 5.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 COMB_X = X + ITEM_WIDTH * 0.5;
const COMB_Y = Y + ITEM_HEIGHT * 19;
const COMB_ROWS = 1;
const COMB_COLUMNS = 3;
const drawVbox = (graphics) => {
const boxDrawX = BOX_X - ITEM_WIDTH * 0.05;
@ -95,10 +94,10 @@ class CombinerHitBox extends Phaser.GameObjects.Rectangle {
class DeleteHitBox extends Phaser.GameObjects.Rectangle {
constructor(scene, x, y) {
super(scene, x, y, ITEM_WIDTH * 1.25, ITEM_HEIGHT * 1.25, 0x222222);
super(scene, x, y, ITEM_WIDTH * 3.4, ITEM_HEIGHT * 1.25, 0x444444);
this.setOrigin(0);
this.itemSelect = () => this.setFillStyle(0xff0000);
this.itemDeselect = () => this.setFillStyle(0x222222);
this.itemDeselect = () => this.setFillStyle(0x444444);
}
}
@ -140,7 +139,6 @@ class ItemList extends Phaser.Scene {
this.registry.events.on('changedata', this.updateData, this);
this.registry.events.on('setdata', this.updateData, this);
if (!vbox.bound) return false;
this.combinerItems = this.registry.get('combinerItems');
if (!this.combinerItems || vbox.bound.length < this.registry.get('boundLength')) {
this.combinerItems = [-1, -1, -1];
}
@ -154,20 +152,22 @@ class ItemList extends Phaser.Scene {
drawInventory(graphics);
drawVbox(graphics);
this.add.text(X + WIDTH * 0.1, Y, 'Inventory', TEXT.HEADER);
this.add.text(X + WIDTH * 0.47, Y, 'Combiner', TEXT.HEADER);
this.add.text(X + WIDTH * 0.35, Y + HEIGHT / 2, 'Varibox', TEXT.HEADER);
this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 0.5, `Varibox - $${vbox.balance} available`, TEXT.HEADER);
this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 11, 'Inventory', TEXT.HEADER);
this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 18, 'Combiner', TEXT.HEADER);
this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 23, `Wins: ${player.score.wins}`, TEXT.HEADER);
this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 24, `Losses: ${player.score.losses}`, TEXT.HEADER);
const reroll = this.add
.rectangle(WIDTH * 0.01, Y + HEIGHT * 0.775, ITEM_WIDTH * 1.25, ITEM_HEIGHT * 1.25, 0x222222)
.rectangle(X + ITEM_WIDTH * 0.4, Y + ITEM_HEIGHT * 1.5, ITEM_WIDTH * 3.4, ITEM_HEIGHT * 1.25, 0x444444)
.setInteractive()
.setOrigin(0)
.on('pointerdown', () => this.registry.get('ws').sendVboxDiscard(vbox.instance));
this.add.text(reroll.getCenter().x, reroll.getCenter().y, 'Reroll', TEXT.HEADER)
this.add.text(reroll.getCenter().x, reroll.getCenter().y, 'Reroll - $0 cost', TEXT.HEADER)
.setOrigin(0.5, 0.5);
const combine = this.add
.rectangle(ITEM_WIDTH * 1.1 + COMB_X, ITEM_HEIGHT * 1.1 + COMB_Y, ITEM_WIDTH, ITEM_HEIGHT, 0x222222)
.rectangle(X + ITEM_WIDTH * 0.4, Y + ITEM_HEIGHT * 20.25, ITEM_WIDTH * 3.4, ITEM_HEIGHT * 1.25, 0x444444)
.setInteractive()
.setOrigin(0)
.on('pointerdown', () => {
@ -175,7 +175,7 @@ class ItemList extends Phaser.Scene {
this.combinerItems = [-1, -1, -1];
this.children.list.filter(obj => obj instanceof CombinerHitBox).forEach(cBox => cBox.deallocate());
});
this.add.text(combine.getCenter().x, combine.getCenter().y, 'C', TEXT.HEADER)
this.add.text(combine.getCenter().x, combine.getCenter().y, 'Combine', TEXT.HEADER)
.setOrigin(0.5, 0.5);
for (let i = 0; i < 3; i += 1) {
@ -183,8 +183,8 @@ class ItemList extends Phaser.Scene {
const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COMB_COLUMNS) + COMB_Y;
this.add.existing(new CombinerHitBox(this, ITEM_X, ITEM_Y, i));
}
const del = this.add.existing(new DeleteHitBox(this, WIDTH * 0.01, Y + HEIGHT * 0.6));
this.add.text(del.getCenter().x, del.getCenter().y, 'Del', TEXT.HEADER)
const del = this.add.existing(new DeleteHitBox(this, X + ITEM_WIDTH * 0.4, Y + ITEM_HEIGHT * 15.5));
this.add.text(del.getCenter().x, del.getCenter().y, 'Sell', TEXT.HEADER)
.setOrigin(0.5, 0.5);
// Generate Items
@ -201,8 +201,8 @@ class ItemList extends Phaser.Scene {
vbox.free.forEach((type, i) => {
type.forEach((item, j) => {
const ITEM_X = ITEM_WIDTH * 1.1 * j + BOX_X + ITEM_WIDTH * 0.5;
const ITEM_Y = ITEM_HEIGHT * 1.1 * i + BOX_Y + ITEM_HEIGHT * 0.5;
const ITEM_X = ITEM_WIDTH * 1.1 * i + BOX_X + ITEM_WIDTH * 0.5;
const ITEM_Y = ITEM_HEIGHT * 1.1 * j + BOX_Y + ITEM_HEIGHT * 0.5;
const clickFn = () => {
this.registry.set('itemInfo', item);
ws.sendVboxAccept(vbox.instance, i, j);

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

@ -3,8 +3,8 @@ const Phaser = require('phaser');
const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants');
const genAvatar = require('./avatar');
const ROW_HEIGHT = CRYP_LIST.height() * 0.2;
const ROW_WIDTH = CRYP_LIST.width();
const BOX_WIDTH = Math.floor(CRYP_LIST.width() / 5);
const BOX_HEIGHT = Math.floor(CRYP_LIST.height() / 5);
const TEXT_MARGIN = 24;
@ -29,8 +29,6 @@ class MenuCrypList extends Phaser.Scene {
updateData(parent, key, data) {
if (key === 'player') {
console.log(data.cryps);
// KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
this.drawCryps(data.cryps);
}
}
@ -40,9 +38,8 @@ class MenuCrypList extends Phaser.Scene {
if (this.crypGroup) this.crypGroup.destroy(true);
this.crypGroup = this.add.group();
const addCryp = (cryp, i) => {
const BOX_WIDTH = Math.floor(ROW_WIDTH / 5);
const ROW_X = i * BOX_WIDTH * 2;
const ROW_Y = CRYP_LIST.y();
const ROW_X = CRYP_LIST.x();
const ROW_Y = CRYP_LIST.y() + BOX_HEIGHT * i * 3;
const ACTIVE_FILL = cryp.active
@ -57,7 +54,7 @@ class MenuCrypList extends Phaser.Scene {
// Cryp avatar and interaction box
const crypInteract = this.add
.rectangle(ROW_X, ROW_Y + ROW_HEIGHT * 2.5, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL)
.rectangle(ROW_X, ROW_Y + BOX_HEIGHT * 2, BOX_WIDTH * 4, BOX_HEIGHT * 0.5, FILL, ACTIVE_FILL)
.setInteractive()
.setOrigin(0)
.on('pointerdown', selectFn);
@ -69,15 +66,9 @@ class MenuCrypList extends Phaser.Scene {
};
crypInteract.cryp = cryp;
const crypImage = this.add.image(
crypInteract.getCenter().x,
crypInteract.getCenter().y,
'aztec',
genAvatar(cryp.name)
);
// Cryp information box (names + skills)
const crypInfo = this.add
.rectangle(ROW_X, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT * 2.5, FILL, ACTIVE_FILL)
.rectangle(ROW_X, ROW_Y, BOX_WIDTH * 4, BOX_HEIGHT * 2, FILL, ACTIVE_FILL)
.setOrigin(0)
.setInteractive()
.on('pointerdown', selectFn);
@ -85,7 +76,14 @@ class MenuCrypList extends Phaser.Scene {
const crypInfoText = this.add.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
.setOrigin(0.5, 0.5);
this.crypGroup.addMultiple([crypInteract, crypImage, crypInfo, crypInfoText])
const crypImage = this.add.image(
crypInfo.getCenter().x + crypInfo.width / 4,
crypInfo.getCenter().y,
'aztec',
genAvatar(cryp.name)
);
this.crypGroup.addMultiple([crypInteract, crypImage, crypInfo, crypInfoText]);
const crypGems = (stat, j) => {
// Placeholder for when gems are implemented
@ -95,16 +93,16 @@ class MenuCrypList extends Phaser.Scene {
this.crypGroup.add(gemText);
};
const CRYP_GEMS = [
/* const CRYP_GEMS = [
'Red',
'Green',
'Blue',
];
CRYP_GEMS.forEach(crypGems);
*/
const crypSkill = (stat, j) => {
const skillText = this.add
.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (6 + j), `${stat.skill}`, TEXT.NORMAL)
.text(crypInfo.getCenter().x - crypInfo.width / 4, crypInfo.y + TEXT_MARGIN * (3 + j), `${stat.skill}`, TEXT.NORMAL)
.setOrigin(0.5, 0.5);
this.crypGroup.add(skillText);
};

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

@ -3,7 +3,6 @@ const Phaser = require('phaser');
// Scenes constantly showing
const MenuCrypList = require('./menu.cryps.list');
const MenuNavigation = require('./menu.navigation');
const MenuScore = require('./menu.score');
const ItemList = require('./item.list');
// Scenes which change depending on menu context
const Zones = require('./zones');
@ -15,7 +14,6 @@ const FIXED_MENU_SCENES = [
'MenuCrypList',
'MenuNavigation',
'ItemList',
'MenuScore',
];
const MAIN_MENU_SCENES = [
@ -34,17 +32,16 @@ class Menu extends Phaser.Scene {
this.registry.events.on('changedata', this.updateData, this);
this.registry.events.on('setdata', this.updateData, this);
// Request the latest player state when we load the scene
const player = this.registry.get('player');
this.registry.get('ws').sendPlayerState(player.instance);
// When we load the menu request the latest items
// Item list will restart when the data comes in
this.scene.manager.add('MenuCrypList', MenuCrypList, true);
this.scene.manager.add('MenuNavigation', MenuNavigation, true);
this.scene.manager.add('MenuScore', MenuScore, true);
this.scene.manager.add('ItemList', ItemList, true);
this.registry.set('inMenu', true);
// Request the latest player state when we load the scene
const player = this.registry.get('player');
this.registry.get('ws').sendPlayerState(player.instance);
return true;
}

26
client/src/scenes/menu.score.js
View File

@ -1,26 +0,0 @@
const Phaser = require('phaser');
const { POSITIONS: { NAVIGATION }, TEXT } = require('./constants');
const X = NAVIGATION.x();
const Y = NAVIGATION.y();
const HEIGHT = NAVIGATION.height();
class MenuScore extends Phaser.Scene {
constructor() {
super({ key: 'MenuScore' });
}
create() {
const player = this.registry.get('player');
if (!player) return false;
this.add.text(X, Y, `Wins: ${player.score.wins}`, TEXT.HEADER);
this.add.text(X, Y + HEIGHT * 0.1, `Losses: ${player.score.losses}`, TEXT.HEADER);
return true;
}
cleanUp() {
this.scene.remove();
}
}
module.exports = MenuScore;

8
client/src/scenes/statsheet.js
View File

@ -79,7 +79,7 @@ class StatSheet extends Phaser.Scene {
CRYP_STATS.forEach(crypStat);
this.add.text(X + WIDTH * 0.175, Y, 'Skills', TEXT.HEADER);
const knownSkill = (skill, i) => {
const SKILL_X = X + WIDTH * 0.21 + WIDTH * 0.125 * i;
const SKILL_X = X + WIDTH * 0.4 + WIDTH * 0.125 * i;
const SKILL_Y = Y + HEIGHT * 0.15;
const itemObj = new Item(this, skill.skill, i, SKILL_X, SKILL_Y, SKILL_WIDTH, Math.floor(SKILL_WIDTH / 2));
// itemObj.on('pointerdown', () => );
@ -87,11 +87,11 @@ class StatSheet extends Phaser.Scene {
this.add.existing(itemObj);
};
cryp.skills.forEach(knownSkill);
this.add.text(X + WIDTH * 0.175, Y, 'Skills', TEXT.HEADER);
this.add.text(X + WIDTH * 0.35, Y, 'Skills', TEXT.HEADER);
this.add.text(X + WIDTH * 0.175, Y + HEIGHT * 0.25, 'Specs', TEXT.HEADER);
this.add.text(X + WIDTH * 0.35, Y + HEIGHT * 0.25, 'Specs', TEXT.HEADER);
const knownSpec = (spec, i) => {
const SKILL_X = X + WIDTH * 0.21 + WIDTH * 0.125 * i;
const SKILL_X = X + WIDTH * 0.4 + WIDTH * 0.125 * i;
const SKILL_Y = Y + HEIGHT * 0.4;
const itemObj = new Item(this, spec, i, SKILL_X, SKILL_Y, SKILL_WIDTH, Math.floor(SKILL_WIDTH / 2));
// itemObj.on('pointerdown', () => );