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

Added skills to cryp avatar

Browse Source
This commit is contained in:
Mashy 2019-03-15 19:26:22 +10:00
parent 085db76001
commit 1e9f174e7b
4 changed files with 19 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ const headerWidth = () => CANVAS_WIDTH();
const headerHeight = () => Math.floor(CANVAS_HEIGHT() * 0.05); const headerHeight = () => Math.floor(CANVAS_HEIGHT() * 0.05);
const menuCrypListWidth = () => Math.floor(CANVAS_WIDTH() * 0.3); const menuCrypListWidth = () => Math.floor(CANVAS_WIDTH() * 0.3);
const menuCrypListHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5); const menuCrypListHeight = () => Math.floor(CANVAS_HEIGHT() - headerHeight());
const menuCrypListX = () => Math.floor(CANVAS_WIDTH() * 0.3); const menuCrypListX = () => Math.floor(CANVAS_WIDTH() * 0.3);
const menuCrypListY = () => headerHeight(); const menuCrypListY = () => headerHeight();

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

@ -23,7 +23,6 @@ class Item extends Phaser.GameObjects.Container {
constructor(scene, item, index, x, y, width, height) { constructor(scene, item, index, x, y, width, height) {
super(scene, x, y); super(scene, x, y);
this.state = 'deselect';
this.scene = scene; this.scene = scene;
this.item = item; this.item = item;
this.index = index; this.index = index;

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

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

@ -2,9 +2,10 @@ const Phaser = require('phaser');
const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants'); const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants');
const genAvatar = require('./avatar'); const genAvatar = require('./avatar');
const Item = require('./elements/item');
const BOX_WIDTH = Math.floor(CRYP_LIST.width() / 5); const BOX_WIDTH = Math.floor(CRYP_LIST.width());
const BOX_HEIGHT = Math.floor(CRYP_LIST.height() / 5); const BOX_HEIGHT = Math.floor(CRYP_LIST.height() / 3.5);
const TEXT_MARGIN = 24; const TEXT_MARGIN = 24;
@ -39,12 +40,10 @@ class MenuCrypList extends Phaser.Scene {
this.crypGroup = this.add.group(); this.crypGroup = this.add.group();
const addCryp = (cryp, i) => { const addCryp = (cryp, i) => {
const ROW_X = CRYP_LIST.x(); const ROW_X = CRYP_LIST.x();
const ROW_Y = CRYP_LIST.y() + BOX_HEIGHT * i * 3; const ROW_Y = CRYP_LIST.y() + BOX_HEIGHT * i * 1.1;
const ACTIVE_FILL = cryp.active const ACTIVE_FILL = 0.2;
? 1
: 0.2;
const FILL = Object.values(COLOURS)[i]; const FILL = Object.values(COLOURS)[i];
// Selection of cryps // Selection of cryps
@ -54,7 +53,7 @@ class MenuCrypList extends Phaser.Scene {
// Cryp avatar and interaction box // Cryp avatar and interaction box
const crypInteract = this.add const crypInteract = this.add
.rectangle(ROW_X, ROW_Y + BOX_HEIGHT * 2, BOX_WIDTH * 4, BOX_HEIGHT * 0.5, FILL, ACTIVE_FILL) .rectangle(ROW_X, ROW_Y, BOX_WIDTH, BOX_HEIGHT, FILL, ACTIVE_FILL)
.setInteractive() .setInteractive()
.setOrigin(0) .setOrigin(0)
.on('pointerdown', selectFn); .on('pointerdown', selectFn);
@ -66,29 +65,22 @@ class MenuCrypList extends Phaser.Scene {
}; };
crypInteract.cryp = cryp; crypInteract.cryp = cryp;
// Cryp information box (names + skills) const crypInfoText = this.add.text(crypInteract.x + crypInteract.width / 5, crypInteract.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
const crypInfo = this.add
.rectangle(ROW_X, ROW_Y, BOX_WIDTH * 4, BOX_HEIGHT * 2, FILL, ACTIVE_FILL)
.setOrigin(0)
.setInteractive()
.on('pointerdown', selectFn);
const crypInfoText = this.add.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
.setOrigin(0.5, 0.5); .setOrigin(0.5, 0.5);
const crypImage = this.add.image( const crypImage = this.add.image(
crypInfo.getCenter().x + crypInfo.width / 4, crypInteract.getCenter().x - crypInteract.width / 4,
crypInfo.getCenter().y, crypInteract.getCenter().y,
'aztec', 'aztec',
genAvatar(cryp.name) genAvatar(cryp.name)
); );
this.crypGroup.addMultiple([crypInteract, crypImage, crypInfo, crypInfoText]); this.crypGroup.addMultiple([crypInteract, crypImage, crypInfoText]);
const crypGems = (stat, j) => { const crypGems = (stat, j) => {
// Placeholder for when gems are implemented // Placeholder for when gems are implemented
const gemText = this.add const gemText = this.add
.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (2 + j), `${stat}: 0`, TEXT.NORMAL) .text(crypInteract.getCenter().x, crypInteract.y + TEXT_MARGIN * (2 + j), `${stat}: 0`, TEXT.NORMAL)
.setOrigin(0.5, 0.5); .setOrigin(0.5, 0.5);
this.crypGroup.add(gemText); this.crypGroup.add(gemText);
}; };
@ -101,10 +93,13 @@ class MenuCrypList extends Phaser.Scene {
CRYP_GEMS.forEach(crypGems); CRYP_GEMS.forEach(crypGems);
*/ */
const crypSkill = (stat, j) => { const crypSkill = (stat, j) => {
const skillText = this.add const SKILL_WIDTH = Math.floor(BOX_WIDTH / 2);
.text(crypInfo.getCenter().x - crypInfo.width / 4, crypInfo.y + TEXT_MARGIN * (3 + j), `${stat.skill}`, TEXT.NORMAL) const SKILL_HEIGHT = Math.floor(BOX_HEIGHT / 6);
.setOrigin(0.5, 0.5); const SKILL_X = crypInteract.getCenter().x + crypInteract.width / 4;
this.crypGroup.add(skillText); const SKILL_Y = crypInteract.y + SKILL_HEIGHT * 1.1 * (j + 0.6);
const itemObj = new Item(this, stat.skill, j, SKILL_X, SKILL_Y, SKILL_WIDTH, SKILL_HEIGHT);
this.add.existing(itemObj);
this.crypGroup.add(itemObj);
}; };
cryp.skills.forEach(crypSkill); cryp.skills.forEach(crypSkill);
}; };