Merge branch 'master' into instance_join
This commit is contained in:
commit
3c5f37f520
@ -7,6 +7,8 @@ const genAvatar = require('./avatar');
|
||||
const ROW_HEIGHT = CRYP_LIST.height() * 0.2;
|
||||
const ROW_WIDTH = CRYP_LIST.width();
|
||||
|
||||
const menuY = CRYP_LIST.height() * 1.6;
|
||||
|
||||
const KEY_MAP = [
|
||||
'keydown-ONE',
|
||||
'keydown-TWO',
|
||||
@ -42,8 +44,8 @@ class HomeCrypList extends Phaser.Scene {
|
||||
for (let i = 0; i < cryps.length; i += 1) {
|
||||
const cryp = cryps[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 = BOX_WIDTH * 2 * (i % 3);
|
||||
const ROW_Y = CRYP_LIST.y() + (Math.floor(i / 3)) * ROW_HEIGHT * 1.5;
|
||||
const ACTIVE_FILL = 0.2;
|
||||
|
||||
const FILL = Object.values(COLOURS)[i];
|
||||
@ -85,7 +87,7 @@ class HomeCrypList extends Phaser.Scene {
|
||||
|
||||
// Add Spawn Cryp Option
|
||||
const spawn = this.add
|
||||
.rectangle(ROW_WIDTH * 0.05, ROW_HEIGHT * 4, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888)
|
||||
.rectangle(ROW_WIDTH * 0.05, menuY, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', () => {
|
||||
@ -96,7 +98,7 @@ class HomeCrypList extends Phaser.Scene {
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
const joinNormal = this.add
|
||||
.rectangle(ROW_WIDTH * 0.3, ROW_HEIGHT * 4, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
|
||||
.rectangle(ROW_WIDTH * 0.3, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', () => {
|
||||
@ -109,7 +111,7 @@ class HomeCrypList extends Phaser.Scene {
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
const joinInstance = this.add
|
||||
.rectangle(ROW_WIDTH * 0.8, ROW_HEIGHT * 4, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
|
||||
.rectangle(ROW_WIDTH * 0.8, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
|
||||
.setInteractive()
|
||||
.setOrigin(0)
|
||||
.on('pointerdown', () => {
|
||||
|
||||
@ -1,12 +1,21 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
const HomeCryps = require('./home.cryps');
|
||||
const HomeNavigation = require('./home.navigation');
|
||||
|
||||
const HomeRankings = require('./home.rankings');
|
||||
const HomeNews = require('./home.news');
|
||||
const HomeShop = require('./home.shop');
|
||||
|
||||
const FIXED_SCENES = [
|
||||
'HomeCryps',
|
||||
'HomeNavigation',
|
||||
];
|
||||
|
||||
const VAR_SCENES = [
|
||||
'HomeRankings',
|
||||
'HomeNews',
|
||||
'HomeShop',
|
||||
];
|
||||
|
||||
class Home extends Phaser.Scene {
|
||||
@ -18,15 +27,42 @@ class Home extends Phaser.Scene {
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.registry.events.on('setdata', this.updateData, this);
|
||||
this.scene.manager.add('HomeCryps', HomeCryps, true);
|
||||
this.scene.manager.add('HomeNavigation', HomeNavigation, true);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (!data) return false;
|
||||
if (key === 'menu') {
|
||||
console.log(this.scene.manager);
|
||||
this.cleanUp();
|
||||
} return true;
|
||||
// Controls which scene shows in the main top right section
|
||||
switch (key) {
|
||||
case 'game': return this.cleanUp();
|
||||
case 'menu': return this.cleanUp();
|
||||
case 'homeRankings': return this.newMainScene('HomeRankings', HomeRankings, data);
|
||||
case 'homeNews': return this.newMainScene('HomeNews', HomeNews, data);
|
||||
case 'homeShop': return this.newMainScene('HomeShop', HomeShop, data);
|
||||
|
||||
|
||||
default: return false;
|
||||
}
|
||||
}
|
||||
|
||||
newMainScene(key, scene, data) {
|
||||
let addScene = true;
|
||||
// List of scenes which could be occupying the main section of the menu
|
||||
VAR_SCENES.forEach((sKey) => {
|
||||
if (this.scene.manager.keys[sKey]) {
|
||||
if (key === sKey) {
|
||||
// If there is new data for the current scene restart
|
||||
this.scene.manager.keys[sKey].scene.restart(data);
|
||||
addScene = false;
|
||||
} else {
|
||||
// Delete the old scene
|
||||
this.scene.manager.keys[sKey].cleanUp();
|
||||
}
|
||||
}
|
||||
});
|
||||
if (addScene) this.scene.manager.add(key, scene, true, data);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
|
||||
52
client/src/scenes/home.navigation.js
Normal file
52
client/src/scenes/home.navigation.js
Normal file
@ -0,0 +1,52 @@
|
||||
const Phaser = require('phaser');
|
||||
|
||||
const { TEXT, POSITIONS: { NAVIGATION } } = require('./constants');
|
||||
|
||||
const X = NAVIGATION.x();
|
||||
const Y = NAVIGATION.y();
|
||||
const WIDTH = NAVIGATION.width();
|
||||
const HEIGHT = NAVIGATION.height();
|
||||
|
||||
const BTN_WIDTH = Math.floor(WIDTH / 6);
|
||||
const BTN_HEIGHT = Math.floor(HEIGHT / 3);
|
||||
|
||||
class HomeNavigation extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'HomeNavigation' });
|
||||
}
|
||||
|
||||
create() {
|
||||
const ranks = this.add
|
||||
.rectangle(X, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
this.add
|
||||
.text(ranks.getCenter().x, ranks.getCenter().y, 'Rankings', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
ranks.on('pointerdown', () => this.registry.set('homeRankings', true));
|
||||
|
||||
const news = this.add
|
||||
.rectangle(X + BTN_WIDTH * 1.5, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
this.add
|
||||
.text(news.getCenter().x, news.getCenter().y, 'News', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
news.on('pointerdown', () => this.registry.set('homeNews', true));
|
||||
|
||||
const shop = this.add
|
||||
.rectangle(X + BTN_WIDTH * 3, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222)
|
||||
.setInteractive()
|
||||
.setOrigin(0);
|
||||
this.add
|
||||
.text(shop.getCenter().x, shop.getCenter().y, 'Shop', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
shop.on('pointerdown', () => this.registry.set('homeShop', true));
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = HomeNavigation;
|
||||
24
client/src/scenes/home.news.js
Normal file
24
client/src/scenes/home.news.js
Normal file
@ -0,0 +1,24 @@
|
||||
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 HomeNews extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'HomeNews' });
|
||||
}
|
||||
|
||||
create() {
|
||||
this.add.text(X, Y, 'News Scene', TEXT.HEADER);
|
||||
this.add.text(X, Y + HEIGHT * 0.1, 'some other stuff here', TEXT.NORMAL);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = HomeNews;
|
||||
24
client/src/scenes/home.rankings.js
Normal file
24
client/src/scenes/home.rankings.js
Normal file
@ -0,0 +1,24 @@
|
||||
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 HomeRankings extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'HomeRankings' });
|
||||
}
|
||||
|
||||
create() {
|
||||
this.add.text(X, Y, 'Rankings Scene', TEXT.HEADER);
|
||||
this.add.text(X, Y + HEIGHT * 0.1, 'some stuff here', TEXT.NORMAL);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = HomeRankings;
|
||||
23
client/src/scenes/home.shop.js
Normal file
23
client/src/scenes/home.shop.js
Normal file
@ -0,0 +1,23 @@
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants');
|
||||
|
||||
const X = MENU_MAIN.x();
|
||||
const Y = MENU_MAIN.y();
|
||||
const HEIGHT = MENU_MAIN.height();
|
||||
|
||||
class HomeShop extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'HomeShop' });
|
||||
}
|
||||
|
||||
create() {
|
||||
this.add.text(X, Y, 'Shop Scene', TEXT.HEADER);
|
||||
this.add.text(X, Y + HEIGHT * 0.1, 'rulul', TEXT.NORMAL);
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = HomeShop;
|
||||
@ -75,7 +75,6 @@ class Menu extends Phaser.Scene {
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
|
||||
this.registry.events.off('changedata', this.updateData, this);
|
||||
this.registry.events.off('setdata', this.updateData, this);
|
||||
// Delete scenes which could be showing before switching to battle scene
|
||||
@ -85,6 +84,8 @@ class Menu extends Phaser.Scene {
|
||||
FIXED_MENU_SCENES.forEach(removeScenes);
|
||||
MAIN_MENU_SCENES.forEach(removeScenes);
|
||||
this.registry.set('inMenu', false);
|
||||
this.combinerItems = this.registry.set('combinerItems', null);
|
||||
|
||||
|
||||
this.scene.remove();
|
||||
}
|
||||
|
||||
@ -8,7 +8,34 @@ const WIDTH = MENU_MAIN.width();
|
||||
const HEIGHT = MENU_MAIN.height();
|
||||
const TEXT_MARGIN = 24;
|
||||
|
||||
const SKILL_WIDTH = Math.floor(WIDTH / 20);
|
||||
const SKILL_WIDTH = Math.floor(WIDTH / 10);
|
||||
|
||||
|
||||
class DeleteHitBox extends Phaser.GameObjects.Rectangle {
|
||||
constructor(scene, x, y) {
|
||||
super(scene, x, y, SKILL_WIDTH, SKILL_WIDTH, 0x222222);
|
||||
this.setOrigin(0);
|
||||
this.itemSelect = () => this.setFillStyle(0xff0000);
|
||||
this.itemDeselect = () => this.setFillStyle(0x222222);
|
||||
}
|
||||
}
|
||||
|
||||
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 DeleteHitBox));
|
||||
|
||||
let found;
|
||||
for (let i = 0; i < hitboxes.length; i += 1) {
|
||||
if (Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(), pointer.position)) {
|
||||
found = hitboxes[i];
|
||||
} else {
|
||||
hitboxes[i].itemDeselect();
|
||||
}
|
||||
}
|
||||
|
||||
return found;
|
||||
};
|
||||
|
||||
class StatSheet extends Phaser.Scene {
|
||||
constructor() {
|
||||
@ -26,6 +53,11 @@ class StatSheet extends Phaser.Scene {
|
||||
create(cryp) {
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.cryp = cryp;
|
||||
|
||||
const del = this.add.existing(new DeleteHitBox(this, X + WIDTH * 0.7, Y + HEIGHT * 0.6));
|
||||
this.add.text(del.getCenter().x, del.getCenter().y, 'Unlearn', TEXT.HEADER)
|
||||
.setOrigin(0.5, 0.5);
|
||||
|
||||
this.add.text(X, Y, cryp.name, TEXT.HEADER);
|
||||
|
||||
const crypStat = (stat, i) => {
|
||||
@ -47,15 +79,34 @@ 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.2 + WIDTH * 0.06 * i;
|
||||
const SKILL_X = X + WIDTH * 0.21 + 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, SKILL_WIDTH);
|
||||
itemObj.on('pointerdown', () => {
|
||||
console.log(skill.skill);
|
||||
});
|
||||
const itemObj = new Item(this, skill.skill, i, SKILL_X, SKILL_Y, SKILL_WIDTH, Math.floor(SKILL_WIDTH / 2));
|
||||
// itemObj.on('pointerdown', () => );
|
||||
this.input.setDraggable(itemObj);
|
||||
this.add.existing(itemObj);
|
||||
};
|
||||
cryp.skills.forEach(knownSkill);
|
||||
|
||||
this.input.on('drag', (pointer, item, dragX, dragY) => {
|
||||
if (!(item instanceof Item)) return false;
|
||||
item.setPosition(dragX, dragY);
|
||||
const hitBox = itemCheckHitbox(this, pointer);
|
||||
if (hitBox) hitBox.itemSelect();
|
||||
return true;
|
||||
});
|
||||
|
||||
this.input.on('dragend', (pointer, item) => {
|
||||
if (!(item instanceof Item)) return false;
|
||||
item.setPosition(item.origX, item.origY);
|
||||
const hitBox = itemCheckHitbox(this, pointer);
|
||||
if (hitBox) {
|
||||
hitBox.itemDeselect();
|
||||
// add socket function for unlearn here
|
||||
console.log(`delete: ${item.item}`);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
displaySkillText(x, y, description, pointer) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user