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

Client changes

Browse Source
This commit is contained in:
Mashy 2019-02-22 13:00:17 +10:00
parent 36af689c7b
commit b542efda25
8 changed files with 52 additions and 567 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@ function FindColour(item) {
} }
class Item extends Phaser.GameObjects.Container { class Item extends Phaser.GameObjects.Container {
constructor(scene, item, index, x, y, width, height) { constructor(scene, item, index, x, y, width, height, clickFn) {
super(scene, x, y); super(scene, x, y);
this.state = 'deselect'; this.state = 'deselect';
@ -42,40 +42,13 @@ class Item extends Phaser.GameObjects.Container {
this.setSize(width, height); this.setSize(width, height);
this.setInteractive(); this.setInteractive();
if (clickFn) this.on('pointerdown', clickFn);
} }
changeOrigin(x, y) { changeOrigin(x, y) {
this.origX = x + this.width / 2; this.origX = x + this.width / 2;
this.origY = y + this.height / 2; this.origY = y + this.height / 2;
} }
clickHandler() {
this.scene.activeItem = this;
// Set the main context to display the item info
this.scene.registry.set('itemInfo', this.item);
this.select();
}
select() {
this.scene.children.list.forEach((item) => {
if (item.state === 'select') item.deselect();
});
// this.box.setFillStyle(COLOURS.SELECT);
this.state = 'select';
}
activate() {
this.scene.children.list.forEach((item) => {
if (item.state === 'select') item.deselect();
});
this.box.setFillStyle(0x222222);
this.state = 'activate';
}
deselect() {
this.box.setFillStyle(this.colour);
this.state = 'deselect';
}
} }
module.exports = Item; module.exports = Item;

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

@ -185,24 +185,23 @@ class ItemList extends Phaser.Scene {
.setOrigin(0.5, 0.5); .setOrigin(0.5, 0.5);
// Generate Items // Generate Items
vbox.bound.forEach((action, i) => { vbox.bound.forEach((item, i) => {
const ITEM_X = ITEM_WIDTH * 1.1 * (i % INV_COLUMNS) + INV_X + ITEM_WIDTH * 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 ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / INV_COLUMNS) + INV_Y + ITEM_HEIGHT * 0.5;
const itemBox = new Item(this, action, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT); const clickFn = () => this.registry.set('itemInfo', item);
const itemBox = new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT, clickFn);
this.input.setDraggable(itemBox); this.input.setDraggable(itemBox);
this.add.existing(itemBox); this.add.existing(itemBox);
}); });
vbox.free.forEach((action, i) => { vbox.free.forEach((item, i) => {
const ITEM_X = ITEM_WIDTH * 1.1 * (i % BOX_COLUMNS) + BOX_X + ITEM_WIDTH * 0.5; 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 ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / BOX_COLUMNS) + BOX_Y + ITEM_HEIGHT * 0.5;
const itemBox = new Item(this, action, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT); const clickFn = () => {
itemBox this.registry.set('itemInfo', item);
.setInteractive() ws.sendVboxAccept(vbox.instance, i);
.on('pointerdown', () => { };
ws.sendVboxAccept(vbox.instance, i); this.add.existing(new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT, clickFn));
});
this.add.existing(itemBox);
}); });
// Restore previous combiner item slots // Restore previous combiner item slots
@ -244,7 +243,6 @@ class ItemList extends Phaser.Scene {
// Add Handlers // Add Handlers
this.input.on('dragstart', (pointer, item) => { this.input.on('dragstart', (pointer, item) => {
if (!(item instanceof Item)) return false; if (!(item instanceof Item)) return false;
item.clickHandler();
return true; return true;
}); });
@ -259,7 +257,6 @@ class ItemList extends Phaser.Scene {
this.input.on('dragend', (pointer, item) => { this.input.on('dragend', (pointer, item) => {
if (!(item instanceof Item)) return false; if (!(item instanceof Item)) return false;
item.deselect();
// Allocate to combiner if clicked without movement form inventory (return 0) // Allocate to combiner if clicked without movement form inventory (return 0)
if (!Math.hypot(item.x - item.origX, item.y - item.origY)) { if (!Math.hypot(item.x - item.origX, item.y - item.origY)) {
const cBox = findUnallocated(); const cBox = findUnallocated();

67
client/src/scenes/menu.cryps.list.js Normal file → Executable file
View File

@ -30,21 +30,15 @@ class MenuCrypList extends Phaser.Scene {
updateData(parent, key, data) { updateData(parent, key, data) {
if (key === 'cryps') { if (key === 'cryps') {
KEY_MAP.forEach(k => this.input.keyboard.removeListener(k)); KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
this.addCrypRows(data); this.scene.restart(data);
} }
} }
addCrypRows(cryps) { addCrypRows(cryps) {
if (!cryps) return true; if (!cryps) return true;
if (this.crypRows) this.crypRows.destroy(true);
this.crypRows = this.add.group();
// We only display 3 cryps others can be viewed in cryp list (soon TM) // We only display 3 cryps others can be viewed in cryp list (soon TM)
const crypDispLength = cryps.length < 3 ? cryps.length : 3; 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) { for (let i = 0; i < crypDispLength; i += 1) {
const cryp = cryps[i]; const cryp = cryps[i];
const BOX_WIDTH = Math.floor(ROW_WIDTH / 5); const BOX_WIDTH = Math.floor(ROW_WIDTH / 5);
@ -59,25 +53,10 @@ class MenuCrypList extends Phaser.Scene {
const FILL = Object.values(COLOURS)[i]; const FILL = Object.values(COLOURS)[i];
// Selection of cryps // Selection of cryps
const selectFn = () => { const selectFn = () => {
this.game.events.emit('CRYP_ACTIVE', cryp); // this.game.events.emit('CRYP_ACTIVE', cryp);
this.registry.set('crypStats', cryp); this.registry.set('crypStats', cryp);
}; };
if (KEY_MAP[i]) {
this.input.keyboard.on(KEY_MAP[i], () => this.game.events.emit('CRYP_ACTIVE', cryp), this);
}
/* const crypSelect = this.add
.rectangle(ROW_X, ROW_Y, BOX_WIDTH, ROW_HEIGHT, FILL, 1)
.setInteractive()
.setOrigin(0)
.on('pointerdown', selectFn);
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));*/
// Cryp avatar and interaction box // Cryp avatar and interaction box
const crypInteract = this.add 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 + ROW_HEIGHT * 2.5, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL)
@ -91,14 +70,14 @@ class MenuCrypList extends Phaser.Scene {
crypInteract.itemDeselect = () => { crypInteract.itemDeselect = () => {
crypInteract.setFillStyle(FILL, ACTIVE_FILL); crypInteract.setFillStyle(FILL, ACTIVE_FILL);
}; };
crypInteract.cryp = cryp; crypInteract.cryp = cryp;
this.crypRows.add(this.add.image( this.add.image(
crypInteract.getCenter().x, crypInteract.getCenter().x,
crypInteract.getCenter().y, crypInteract.getCenter().y,
'aztec', 'aztec',
genAvatar(cryp.name) genAvatar(cryp.name)
)); );
this.crypRows.add(crypInteract);
// Cryp information box (names + skills) // Cryp information box (names + skills)
const crypInfo = this.add const crypInfo = this.add
@ -107,19 +86,29 @@ class MenuCrypList extends Phaser.Scene {
.setInteractive() .setInteractive()
.on('pointerdown', selectFn); .on('pointerdown', selectFn);
this.crypRows.add(crypInfo); this.add.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
this.crypRows.add(this.add .setOrigin(0.5, 0.5);
.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
.setOrigin(0.5, 0.5)); const crypGems = (stat, j) => {
const CRYP_STATS = [ this.add
cryp.stamina, // Placeholder for when gems are implemented
cryp.red_shield, .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (2 + j), `${stat}: 0`, TEXT.NORMAL)
cryp.blue_shield, .setOrigin(0.5, 0.5);
cryp.red_damage, };
cryp.blue_damage,
cryp.speed, const CRYP_GEMS = [
'Red',
'Green',
'Blue',
]; ];
CRYP_STATS.forEach((stat, j) => crypStat(stat, j, crypInfo)); CRYP_GEMS.forEach(crypGems);
const crypSkill = (stat, j) => {
this.add
.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (6 + j), `${stat.skill}`, TEXT.NORMAL)
.setOrigin(0.5, 0.5);
};
cryp.skills.forEach(crypSkill);
} }
return true; return true;
} }

121
client/src/scenes/passive.data.edge.js
View File

@ -1,121 +0,0 @@
const passiveEdges = [
['CMED1', 'CSTAT7'],
['CSTAT7', 'CSTAT8'],
['CSTAT8', 'CSTAT9'],
['CSTAT9', 'CMED20'],
['CMED20', 'CSTAT10'],
['CSTAT10', 'CSTAT11'],
['CSTAT11', 'CSTAT12'],
['CSTAT12', 'CMED21'],
['CMED21', 'CSTAT15'],
['CSTAT15', 'CMED22'],
['CMED21', 'CSTAT14'],
['CSTAT14', 'CLRG4'],
['CLRG4', 'CSTAT16'],
['CSTAT16', 'CMED22'],
['CMED22', 'CSTAT17'],
['CMED23', 'CSTAT17'],
['CMED23', 'CSTAT13'],
['CSTAT13', 'CLRG4'],
['CSTAT17', 'CSTAT18'],
['CSTAT18', 'CSTAT19'],
['CSTAT18', 'CSTAT20'],
['CSTAT20', 'CSTAT21'],
['CSTAT21', 'CSTAT22'],
['CSTAT22', 'CMED9'],
['CMED9', 'CSTAT23'],
['CSTAT23', 'CSTAT24'],
['CSTAT24', 'CLRG2'],
['CLRG2', 'CSTAT25'],
['CSTAT25', 'CMED8'],
['CMED8', 'CSTAT26'],
['CSTAT26', 'CLRG1'],
['CLRG1', 'CSTAT27'],
['CSTAT27', 'CSTAT28'],
['CMED7', 'CSTAT28'],
['CMED7', 'CSTAT29'],
['CSTAT29', 'CSTAT30'],
['CSTAT30', 'CSTAT31'],
['CSTAT31', 'CSTAT32'],
['CSTAT32', 'CSTAT33'],
['CSTAT31', 'CSTAT34'],
['CSTAT34', 'CSTAT35'],
['CSTAT34', 'CSTAT36'],
['CSTAT36', 'CSTAT37'],
['CSTAT20', 'CSTAT36'],
['CMED6', 'CSTAT33'],
['CMED25', 'CSTAT18'],
['CMED25', 'CMED24'],
['CMED24', 'CLRG3'],
['CSTAT6', 'CSTAT7'],
['CSTAT6', 'CMED18'],
['CMED2', 'CSDMG1'],
['CSDMG1', 'CSDMG2'],
['CSDMG2', 'CSDMG3'],
['CMED18', 'CSDMG3'],
['CMED2', 'CHEAL1'],
['CHEAL1', 'CHEAL2'],
['CHEAL2', 'CHEAL3'],
['CHEAL3', 'CMED18'],
['CMED18', 'CSDMG4'],
['CSDMG4', 'CSDMG5'],
['CSDMG5', 'CSDMG6'],
['CSDMG5', 'CSTAT5'],
['CSTAT5', 'CSTAT4'],
['CSTAT4', 'CMED3'],
['CMED3', 'CSTAT1'],
['CSTAT1', 'CSTAT2'],
['CSTAT1', 'CSTAT3'],
['CSTAT2', 'CMED4'],
['CMED4', 'CSDMG10'],
['CSDMG10', 'CMED5'],
['CMED5', 'CSDMG11'],
['CSDMG11', 'CMED6'],
['CMED4', 'CPHYS2'],
['CPHYS2', 'CMED5'],
['CMED5', 'CPHYS3'],
['CPHYS3', 'CMED6'],
['CSTAT3', 'CMED10'],
['CMED10', 'CPHYS1'],
['CPHYS1', 'CMED11'],
['CMED10', 'CHEAL14'],
['CHEAL14', 'CMED11'],
['CMED11', 'CHEAL15'],
['CHEAL15', 'CMED13'],
['CMED13', 'CSDMG6'],
['CPHYS4', 'CMED11'],
['CPHYS4', 'CMED13'],
['CPHYS4', 'CPHYS5'],
['CPHYS5', 'CPHYS6'],
['CPHYS6', 'CMED12'],
['CPHYS6', 'CSTAT34'],
['CMED12', 'CPHYS7'],
['CPHYS7', 'CSTAT33'],
['CMED13', 'CSDMG7'],
['CSDMG7', 'CSDMG9'],
['CSDMG7', 'CMED15'],
['CSDMG9', 'CSTAT37'],
['CSDMG9', 'CSTAT35'],
['CMED18', 'CHEAL4'],
['CHEAL4', 'CHEAL5'],
['CHEAL5', 'CHEAL6'],
['CHEAL6', 'CHEAL7'],
['CHEAL7', 'CHEAL8'],
['CHEAL7', 'CHEAL9'],
['CHEAL8', 'CMED20'],
['CHEAL9', 'CMED16'],
['CHEAL5', 'CMED19'],
['CMED16', 'CHEAL11'],
['CHEAL11', 'CHEAL12'],
['CHEAL12', 'CHEAL13'],
['CHEAL13', 'CMED17'],
['CHEAL13', 'CSTAT19'],
['CMED15', 'CHEAL10'],
['CHEAL10', 'CMED16'],
['CMED15', 'CSDMG8'],
['CSDMG8', 'CMED16'],
['CMED14', 'CMED15'],
['CMED8', 'CNOTE'],
];
module.exports = passiveEdges;

104
client/src/scenes/passive.data.node.js
View File

@ -1,104 +0,0 @@
const passiveNodes = [
{ x: 860, y: 1011, id: 'CMED1', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Slow Effect'},
{ x: 905, y: 970, id: 'CSTAT7', alloc: false, text: '+2 Chaos Stat'},
{ x: 940, y: 917.5, id: 'CSTAT8', alloc: false, text: '+2 Chaos Stat'},
{ x: 950, y: 1172.5, id: 'CMED2', alloc: false, text: '5% Increased Speed for Damaging Blues, 5% Increased Speed for Healing Skills'},
{ x: 955, y: 1120, id: 'CSDMG1', alloc: false, text: '+5% Increased Blue Damage'},
{ x: 965, y: 1082.5, id: 'CSDMG2', alloc: false, text: '+5% Increased Blue Damage'},
{ x: 970, y: 872.5, id: 'CSTAT9', alloc: false, text: '+2 Chaos Stat'},
{ x: 975, y: 1012.5, id: 'CSTAT6', alloc: false, text: '+2 Chaos Stat'},
{ x: 995, y: 1062.5, id: 'CSDMG3', alloc: false, text: '+5% Increased Blue Damage'},
{ x: 1000, y: 1150, id: 'CHEAL1', alloc: false, text: '+5% Increased Healing'},
{ x: 1005, y: 812.5, id: 'CMED20', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
{ x: 1024.5, y: 1122.5, id: 'CHEAL2', alloc: false, text: '+5% Increased Healing'},
{ x: 1036.5, y: 896.5, id: 'CMED19', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
{ x: 1036.5, y: 1042.5, id: 'CMED18', alloc: false, text: '5% Increased Speed for Damaging Blues, 5% Increased Speed for Healing Skills'},
{ x: 1036.5, y: 1082.5, id: 'CHEAL3', alloc: false, text: '+5% Increased Healing'},
{ x: 1041.5, y: 772.5, id: 'CSTAT10', alloc: false, text: '+2 Chaos Stat'},
{ x: 1055, y: 1327.5, id: 'CMED3', alloc: false, text: '5% Increased Speed for Damaging Blues, 5% Increased Speed for Banish Skills'},
{ x: 1066.5, y: 939.5, id: 'CHEAL5', alloc: false, text: '+5% Increased Healing'},
{ x: 1067.5, y: 995, id: 'CHEAL4', alloc: false, text: '+5% Increased Healing'},
{ x: 1070, y: 1250, id: 'CSTAT4', alloc: false, text: '+2 Chaos Stat'},
{ x: 1072.5, y: 840.5, id: 'CHEAL8', alloc: false, text: '+5% Increased Healing'},
{ x: 1087.5, y: 700, id: 'CSTAT11', alloc: false, text: '+2 Chaos Stat'},
{ x: 1097.5, y: 1052.5, id: 'CSDMG4', alloc: false, text: '+5% Increased Blue Damage'},
{ x: 1102.5, y: 1140, id: 'CSTAT5', alloc: false, text: '+2 Chaos Stat'},
{ x: 1102.5, y: 917.5, id: 'CHEAL6', alloc: false, text: '+5% Increased Healing'},
{ x: 1115, y: 1332.5, id: 'CSTAT1', alloc: false, text: '+2 Chaos Stat'},
{ x: 1115, y: 875, id: 'CHEAL7', alloc: false, text: '+5% Increased Healing'},
{ x: 1130, y: 640, id: 'CSTAT12', alloc: false, text: '+2 Chaos Stat'},
{ x: 1145, y: 1287.5, id: 'CSTAT3', alloc: false, text: '+2 Chaos Stat'},
{ x: 1145, y: 1057.5, id: 'CSDMG5', alloc: false, text: '+5% Increased Blue Damage'},
{ x: 1175, y: 1332.5, id: 'CSTAT2', alloc: false, text: '+2 Chaos Stat'},
{ x: 1180, y: 1247.5, id: 'CMED10', alloc: false, text: '5% Increased Speed for Banish Blues, 5% Increased Stamina'},
{ x: 1180, y: 950, id: 'CMED14', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Banish Skills'},
{ x: 1195, y: 875, id: 'CHEAL9', alloc: false, text: '+5% Increased Healing'},
{ x: 1196.5, y: 635, id: 'CMED21', alloc: false, text: '5% Increased Effect of Slow, 5% Increased Stamina'},
{ x: 1205, y: 1062.5, id: 'CSDMG6', alloc: false, text: '+5% Increased Blue Damage'},
{ x: 1212.5, y: 1200, id: 'CHEAL14', alloc: false, text: '+5% Increased Healing'},
{ x: 1231.5, y: 590, id: 'CSTAT14', alloc: false, text: '+2 Chaos Stat'},
{ x: 1235, y: 772.5, id: 'CHEAL12', alloc: false, text: '+5% Increased Healing'},
{ x: 1240, y: 1225, id: 'CPHYS1', alloc: false, text: '+2% Reduced Physical Damage Taken'},
{ x: 1240, y: 1322.5, id: 'CMED4', alloc: false, text: '5% Increased Speed for Damaging Blues, 5% Increased Stamina'},
{ x: 1258.5, y: 1107.5, id: 'CHEAL15', alloc: false, text: '+5% Increased Healing'},
{ x: 1260, y: 917.5, id: 'CHEAL10', alloc: false, text: '+5% Increased Healing'},
{ x: 1263, y: 520, id: 'CLRG4', alloc: false, text: 'Damaging blues have a 20% chance to inflict slow'},
{ x: 1273.5, y: 1057.5, id: 'CMED13', alloc: false, text: '5% Increased Speed for Banish Blues, 5% Increased Speed for Damaging Blues'},
{ x: 1275, y: 1167.5, id: 'CMED11', alloc: false, text: '5% Increased Speed for Banish Blues, 5% Increased Stamina'},
{ x: 1275, y: 947.5, id: 'CMED15', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Damaging Blues'},
{ x: 1277.5, y: 872.5, id: 'CMED16', alloc: false, text: '5% Increased Speed for Damaging Blues, 5% Increased Speed for Healing Skills'},
{ x: 1278.5, y: 812.5, id: 'CHEAL11', alloc: false, text: '+5% Increased Healing'},
{ x: 1280, y: 732.5, id: 'CHEAL13', alloc: false, text: '+5% Increased Healing'},
{ x: 1281.5, y: 1002.5, id: 'CSDMG7', alloc: false, text: '+5% Increased Blue Damage'},
{ x: 1284, y: 640, id: 'CSTAT15', alloc: false, text: '+2 Chaos Stat'},
{ x: 1298.5, y: 1107.5, id: 'CPHYS4', alloc: false, text: '+2% Reduced Physical Damage Taken'},
{ x: 1302.5, y: 917.5, id: 'CSDMG8', alloc: false, text: '+5% Increased Blue Damage'},
{ x: 1305, y: 1307.5, id: 'CPHYS2', alloc: false, text: '+2% Reduced Physical Damage Taken'},
{ x: 1306, y: 1347.5, id: 'CSDMG10', alloc: false, text: '+5% Increased Blue Damage'},
{ x: 1315, y: 762.5, id: 'CMED17', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
{ x: 1326.5, y: 590, id: 'CSTAT16', alloc: false, text: '+2 Chaos Stat'},
{ x: 1346.5, y: 635, id: 'CMED22', alloc: false, text: '5% Increased Effect of Slow, 5% Increased Stamina'},
{ x: 1348.5, y: 535, id: 'CSTAT13', alloc: false, text: '+2 Chaos Stat'},
{ x: 1355, y: 1322.5, id: 'CMED5', alloc: false, text: '5% Increased Speed for Damaging Blues, 5% Increased Stamina'},
{ x: 1360, y: 1002.5, id: 'CSDMG9', alloc: false, text: '+5% Increased Blue Damage'},
{ x: 1399.5, y: 1107.5, id: 'CPHYS5', alloc: false, text: '+2% Reduced Physical Damage Taken'},
{ x: 1400, y: 807.5, id: 'CMED24', alloc: false, text: '5% Increased Speed for Damaging Blues, 5% Increased Speed for Healing Skills'},
{ x: 1409.5, y: 1312.5, id: 'CPHYS3', alloc: false, text: '+2% Reduced Physical Damage Taken'},
{ x: 1410, y: 1347.5, id: 'CSDMG11', alloc: false, text: '+5% Increased Blue Damage'},
{ x: 1410, y: 532.5, id: 'CMED23', alloc: false, text: '5% Increased Speed for Banish Blues, 5% Increased Effect of Slow'},
{ x: 1420, y: 732.5, id: 'CSTAT19', alloc: false, text: '+2 Chaos Stat'},
{ x: 1430, y: 1205, id: 'CPHYS7', alloc: false, text: '+2% Reduced Physical Damage Taken'},
{ x: 1447.5, y: 765, id: 'CMED25', alloc: false, text: '5% Increased Speed for Damaging Blues, 5% Increased Speed for Healing Skills'},
{ x: 1452.5, y: 1322.5, id: 'CMED6', alloc: false, text: '5% Increased Speed for Damaging Blues, 5% Increased Stamina'},
{ x: 1455, y: 1267.5, id: 'CSTAT33', alloc: false, text: '+2 Chaos Stat'},
{ x: 1455, y: 1147.5, id: 'CMED12', alloc: false, text: '5% Increased Speed for Banish Blues, 5% Increased Stamina'},
{ x: 1455, y: 1042.5, id: 'CSTAT35', alloc: false, text: '+2 Chaos Stat'},
{ x: 1457.5, y: 975, id: 'CSTAT37', alloc: false, text: '+2 Chaos Stat'},
{ x: 1462.5, y: 825, id: 'CLRG3', alloc: false, text: '20% critical strike chance for blues'},
{ x: 1485, y: 640, id: 'CSTAT17', alloc: false, text: '+2 Chaos Stat'},
{ x: 1500, y: 1110, id: 'CPHYS6', alloc: false, text: '+2% Reduced Physical Damage Taken'},
{ x: 1505, y: 1242.5, id: 'CSTAT32', alloc: false, text: '+2 Chaos Stat'},
{ x: 1555, y: 1242.5, id: 'CSTAT31', alloc: false, text: '+2 Chaos Stat'},
{ x: 1555, y: 1067.5, id: 'CSTAT34', alloc: false, text: '+2 Chaos Stat'},
{ x: 1555, y: 962.5, id: 'CSTAT36', alloc: false, text: '+2 Chaos Stat'},
{ x: 1555, y: 847.5, id: 'CSTAT20', alloc: false, text: '+2 Chaos Stat'},
{ x: 1555, y: 732.5, id: 'CSTAT18', alloc: false, text: '+2 Chaos Stat'},
{ x: 1597.5, y: 827.5, id: 'CSTAT21', alloc: false, text: '+2 Chaos Stat'},
{ x: 1607.5, y: 1277.5, id: 'CSTAT30', alloc: false, text: '+2 Chaos Stat'},
{ x: 1612.5, y: 1137.5, id: 'CLRG1', alloc: false, text: 'When you take red damage there is a 20% chance to heal for 150% of red damage taken'},
{ x: 1612.5, y: 955, id: 'CLRG2', alloc: false, text: 'Your healing blues have a 20% chance to increase ally speed by 100%'},
{ x: 1657.5, y: 822.5, id: 'CSTAT22', alloc: false, text: '+2 Chaos Stat'},
{ x: 1657.5, y: 1312.5, id: 'CSTAT29', alloc: false, text: '+2 Chaos Stat'},
{ x: 1685, y: 1187.5, id: 'CSTAT27', alloc: false, text: '+2 Chaos Stat'},
{ x: 1685, y: 1022.5, id: 'CSTAT25', alloc: false, text: '+2 Chaos Stat'},
{ x: 1690, y: 1117.5, id: 'CSTAT26', alloc: false, text: '+2 Chaos Stat'},
{ x: 1705, y: 960, id: 'CSTAT24', alloc: false, text: '+2 Chaos Stat'},
{ x: 1712.5, y: 850, id: 'CMED9', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'},
{ x: 1717.5, y: 1267.5, id: 'CMED7', alloc: false, text: '5% Increased Speed for Damaging Blues, 5% Increased Stamina'},
{ x: 1725, y: 1222.5, id: 'CSTAT28', alloc: false, text: '+2 Chaos Stat'},
{ x: 1727.5, y: 1062.5, id: 'CMED8', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Banish Skills'},
{ x: 1737.5, y: 917.5, id: 'CSTAT23', alloc: false, text: '+2 Chaos Stat'},
{ x: 1830, y: 1032.5, id: 'CNOTE', alloc: false, text: 'Increases duration of banish skills by 1 turn. Your chaos skills gain 20% increased speed for each successful banish. '},
];
module.exports = passiveNodes;

54
client/src/scenes/passive.node.js
View File

@ -1,54 +0,0 @@
const Phaser = require('phaser');
class PassiveNode extends Phaser.GameObjects.Sprite {
constructor(scene, x, y, id, alloc, text) {
super(scene, x, y);
this.setTexture('eye');
this.scene = scene;
this.alloc = alloc;
this.text = (text.indexOf(',') > -1) ? text.split(',') : text;
this.id = id;
this.setPosition(x, y);
const nodeNoDigits = this.id.replace(/[0-9]/g, '');
switch (nodeNoDigits) {
case 'CNOTE':
this.setScale(0.25);
break;
case 'CLRG':
this.setScale(0.15);
break;
case 'CMED':
this.setScale(0.1);
break;
default:
this.setScale(0.05);
}
if (this.alloc) {
this.setTint(0xff0000);
}
}
allocate(alloc) {
this.alloc = (alloc !== undefined) ? alloc : !this.alloc;
this.updateNode();
}
updateNode() {
if (!this.alloc) {
this.clearTint();
} else {
this.setTint(0xff0000);
}
for (let i = 0; i < this.scene.passiveNodeData.length; i += 1) {
if (this.scene.passiveNodeData[i].id === this.id) {
this.scene.passiveNodeData[i].alloc = this.alloc;
break;
}
}
this.scene.drawPassiveEdges();
}
}
module.exports = PassiveNode;

152
client/src/scenes/passives.js
View File

@ -1,152 +0,0 @@
const Phaser = require('phaser');
const PassiveNode = require('./passive.node');
const passiveDataNode = require('./passive.data.node');
const passiveDataEdge = require('./passive.data.edge');
const { POSITIONS: { COMBAT } } = require('./constants');
// Passive tree generator - proof of concept visuals need work
// Mouse click hold to move, Q + E to zoom in and out
// Press 'A' to reset allocated passive nodes
class PhaserPassives extends Phaser.Scene {
constructor() {
super({ key: 'Passives' });
// this.input = props.input;
}
preload() {
this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
}
create() {
this.graphics = this.add.graphics();
this.passiveNodeData = passiveDataNode;
this.passiveEdgeData = passiveDataEdge;
this.cameras.main.setViewport(COMBAT.width() * 0.2, COMBAT.y(),
COMBAT.width() * 0.8, COMBAT.height());
this.cameras.main.scrollX = 1000;
this.cameras.main.scrollY = 500;
this.addPassiveNodes();
this.addCameraControl();
this.addEvents();
this.drawPassiveEdges();
}
addPassiveNodes() {
this.passiveNodes = [];
this.passiveNodeData.forEach((n) => {
this.passiveNodes[n.id] = this.add.existing(
new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
).setInteractive();
});
}
addCameraControl() {
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
camera: this.cameras.main,
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
acceleration: 0.005,
drag: 0.0005,
maxSpeed: 0.001,
});
}
addEvents() {
this.input.on('pointerover', (pointer, gameObjects) => {
if (gameObjects[0] instanceof PassiveNode) {
if (!gameObjects[0].alloc) {
gameObjects[0].setTint(0xffffff);
}
this.displayPassiveText(gameObjects[0], pointer);
}
});
this.input.on('pointerout', (pointer, gameObjects) => {
if (gameObjects[0] instanceof PassiveNode) {
if (!gameObjects[0].alloc) gameObjects[0].clearTint();
this.nodeText.destroy();
}
});
this.input.on('pointerup', (pointer, gameObjects) => {
if (Math.abs(pointer.upX - pointer.downX) < 5
&& Math.abs(pointer.upY - pointer.downY) < 5) {
// Check cursor hasn't significantly moved during point allocation
// If panning and mouse release is on node it won't allocate
if (gameObjects[0] instanceof PassiveNode) {
gameObjects[0].allocate();
}
}
});
this.input.on('pointermove', (pointer) => {
const zoomFactor = 2 / this.cameras.main.zoom;
if (this.registry.get('pan')) {
const points = pointer.getInterpolatedPosition(2);
this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x);
this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
}
}, this);
this.input.keyboard.on('keydown_A', () => {
this.updatePassives(); // Will update nodes from state
}, 0, this);
this.input.keyboard.on('keydown_G', () => {
this.scene.sleep('Passives');
}, 0, this);
}
drawPassiveEdges() {
this.graphics.clear();
this.passiveEdgeData.forEach((e) => {
const drawEdge = this.passiveNodeData.filter(n => (
e[0] === n.id || e[1] === n.id
));
if (drawEdge[0].alloc && drawEdge[1].alloc) {
this.graphics.lineStyle(10, 0xfff00f, 0.2);
} else {
this.graphics.lineStyle(2, 0xffffff, 0.2);
}
this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y);
});
}
displayPassiveText(node, pointer) {
if (this.nodeText) this.nodeText.destroy();
this.nodeText = this.add.text(node.x, node.y, node.text, {
fontSize: '16px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#222222',
}).setPadding(32);
this.nodeText.setAlpha(0.8);
this.nodeText.setOrigin(pointer.x >= COMBAT.width() * 0.6 ? 1 : 0,
pointer.y >= COMBAT.height() * 0.5 ? 1 : 0);
this.nodeText.setWordWrapWidth(450);
this.nodeText.setScale(1 / this.cameras.main.zoom);
}
updatePassives() {
this.passiveNodeData.forEach((n) => {
this.passiveNodes[n.id].alloc = false;
this.passiveNodes[n.id].updateNode();
});
// This function will be modified to just update from state
// State will update n.alloc instead of false
}
camPan(bool) {
this.pan = bool;
}
update(delta) {
this.controls.update(delta);
}
cleanUp() {
this.registry.events.off('changedata', this.updateData, this);
this.registry.events.off('setdata', this.updateData, this);
this.scene.remove();
}
}
module.exports = PhaserPassives;

69
client/src/scenes/statsheet.js Normal file → Executable file
View File

@ -1,5 +1,6 @@
const Phaser = require('phaser'); const Phaser = require('phaser');
const { POSITIONS: { MENU_MAIN }, TEXT, SKILLS } = require('./constants'); const { POSITIONS: { MENU_MAIN }, TEXT, SKILLS } = require('./constants');
const Item = require('./elements/item');
const X = MENU_MAIN.x(); const X = MENU_MAIN.x();
const Y = MENU_MAIN.y(); const Y = MENU_MAIN.y();
@ -12,7 +13,6 @@ const menuY = Math.floor(HEIGHT * 0.8);
const menuWidth = Math.floor(WIDTH / 10); const menuWidth = Math.floor(WIDTH / 10);
const menuHeight = Math.floor(HEIGHT * 0.2); const menuHeight = Math.floor(HEIGHT * 0.2);
const X_LEARN = Math.floor(WIDTH * 2 / 4);
const Y_SKILLS = Math.floor(HEIGHT * 0.5); const Y_SKILLS = Math.floor(HEIGHT * 0.5);
@ -32,36 +32,26 @@ class StatSheet extends Phaser.Scene {
} }
create(cryp) { create(cryp) {
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('changedata', this.updateData, this);
this.cryp = cryp; this.cryp = cryp;
this.forget = false; this.add.text(X + WIDTH / 10, Y, cryp.name, TEXT.HEADER);
this.add.text(WIDTH / 10, 0, cryp.name, TEXT.HEADER); this.addStats(cryp);
// this.addStats(cryp);
this.addKnownSkills(cryp); this.addKnownSkills(cryp);
this.addLearnableSkills(cryp); addButton(this, X + menuX, Y + menuY, () => this.registry.set('crypSpec', cryp), 'Spec');
addButton(this, menuX, menuY, () => this.registry.set('crypSpec', cryp), 'Spec');
} }
updateData(parent, key, data) { updateData(parent, key, data) {
if (key === 'cryps') { if (key === 'cryps') {
const cryp = data.find(c => c.id === this.cryp.id); const cryp = data.find(c => c.id === this.cryp.id);
this.cryp = cryp; this.scene.restart(cryp);
this.addKnownSkills(cryp);
// this.addStats(cryp);
} }
} }
addStats(cryp) { addStats(cryp) {
if (this.stats) this.stats.destroy(true);
this.stats = this.add.group();
const crypStat = (stat, i) => { const crypStat = (stat, i) => {
const STAT_X = WIDTH / 10; const STAT_X = X + WIDTH / 10;
const STAT_Y = (i + 1) * TEXT_MARGIN; const STAT_Y = Y + (i + 1) * TEXT_MARGIN;
this.stats.add(this.add this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL);
.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL));
}; };
const CRYP_STATS = [ const CRYP_STATS = [
@ -78,49 +68,16 @@ class StatSheet extends Phaser.Scene {
} }
addKnownSkills(cryp) { addKnownSkills(cryp) {
if (this.knownSkills) this.knownSkills.destroy(true); this.add.text(X + menuX, Y + Y_SKILLS, 'Skills', TEXT.HEADER);
this.knownSkills = this.add.group();
this.add.text(menuX, Y_SKILLS, 'Skills', TEXT.HEADER);
const knownSkill = (skill, i) => { const knownSkill = (skill, i) => {
const SKILL_X = menuX; const SKILL_X = X + menuX + 250 + 100 * i;
const SKILL_Y = (i * TEXT_MARGIN) + Y_SKILLS + TEXT_MARGIN; const SKILL_Y = Y + 25;
const clickFn = console.log('grep');
this.knownSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.skill, TEXT.NORMAL) this.add.existing(new Item(this, skill.skill, i, SKILL_X, SKILL_Y, 75, 75, clickFn));
.setInteractive()
.on('pointerdown', () => {
this.registry.get('ws').sendCrypForget(cryp.id, skill.skill);
}));
}; };
cryp.skills.forEach(knownSkill); cryp.skills.forEach(knownSkill);
} }
addLearnableSkills(cryp) {
if (this.learnSkills) this.learnSkills.destroy(true);
this.learnSkills = this.add.group();
const learnable = (skill, i) => {
const SKILL_X = i <= 10 ? X_LEARN : X_LEARN + WIDTH / 5;
const SKILL_Y = i <= 10 ? (i + 1) * TEXT_MARGIN : (i - 10) * TEXT_MARGIN;
this.learnSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.name, TEXT.NORMAL)
.setInteractive()
.on('pointerdown', () => {
this.registry.get('ws').sendCrypLearn(cryp.id, skill.name);
})
.on('pointerover', (pointer) => {
if (!this.forget) {
this.displaySkillText(SKILL_X, SKILL_Y, skill.description, pointer);
}
})
.on('pointerout', () => {
if (this.skillText) this.skillText.destroy();
}));
};
this.learnSkills.add(this.add.text(X_LEARN, 0, 'Learnable', TEXT.HEADER));
SKILLS.LEARNABLE.forEach(learnable);
}
displaySkillText(x, y, description, pointer) { displaySkillText(x, y, description, pointer) {
if (this.skillText) this.skillText.destroy(); if (this.skillText) this.skillText.destroy();
this.skillText = this.add.text(x, y, description, TEXT.HOVER).setPadding(32); this.skillText = this.add.text(x, y, description, TEXT.HOVER).setPadding(32);