From b542efda25700120df32887baffe5a52ec48d008 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Feb 2019 13:00:17 +1000 Subject: [PATCH] Client changes --- client/src/scenes/elements/item.js | 31 +---- client/src/scenes/item.list.js | 21 ++-- client/src/scenes/menu.cryps.list.js | 67 +++++------ client/src/scenes/passive.data.edge.js | 121 -------------------- client/src/scenes/passive.data.node.js | 104 ----------------- client/src/scenes/passive.node.js | 54 --------- client/src/scenes/passives.js | 152 ------------------------- client/src/scenes/statsheet.js | 69 +++-------- 8 files changed, 52 insertions(+), 567 deletions(-) mode change 100644 => 100755 client/src/scenes/elements/item.js mode change 100644 => 100755 client/src/scenes/menu.cryps.list.js delete mode 100644 client/src/scenes/passive.data.edge.js delete mode 100644 client/src/scenes/passive.data.node.js delete mode 100644 client/src/scenes/passive.node.js delete mode 100644 client/src/scenes/passives.js mode change 100644 => 100755 client/src/scenes/statsheet.js diff --git a/client/src/scenes/elements/item.js b/client/src/scenes/elements/item.js old mode 100644 new mode 100755 index a8245571..35ca1e58 --- a/client/src/scenes/elements/item.js +++ b/client/src/scenes/elements/item.js @@ -16,7 +16,7 @@ function FindColour(item) { } 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); this.state = 'deselect'; @@ -42,40 +42,13 @@ class Item extends Phaser.GameObjects.Container { this.setSize(width, height); this.setInteractive(); + if (clickFn) this.on('pointerdown', clickFn); } changeOrigin(x, y) { this.origX = x + this.width / 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; diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js index 310f92d9..fbc1022c 100755 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -185,24 +185,23 @@ class ItemList extends Phaser.Scene { .setOrigin(0.5, 0.5); // 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_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.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_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); - itemBox - .setInteractive() - .on('pointerdown', () => { - ws.sendVboxAccept(vbox.instance, i); - }); - this.add.existing(itemBox); + const clickFn = () => { + this.registry.set('itemInfo', item); + ws.sendVboxAccept(vbox.instance, i); + }; + this.add.existing(new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT, clickFn)); }); // Restore previous combiner item slots @@ -244,7 +243,6 @@ class ItemList extends Phaser.Scene { // Add Handlers this.input.on('dragstart', (pointer, item) => { if (!(item instanceof Item)) return false; - item.clickHandler(); return true; }); @@ -259,7 +257,6 @@ class ItemList extends Phaser.Scene { this.input.on('dragend', (pointer, item) => { if (!(item instanceof Item)) return false; - item.deselect(); // Allocate to combiner if clicked without movement form inventory (return 0) if (!Math.hypot(item.x - item.origX, item.y - item.origY)) { const cBox = findUnallocated(); diff --git a/client/src/scenes/menu.cryps.list.js b/client/src/scenes/menu.cryps.list.js old mode 100644 new mode 100755 index bb5d77d2..328d4bcf --- a/client/src/scenes/menu.cryps.list.js +++ b/client/src/scenes/menu.cryps.list.js @@ -30,21 +30,15 @@ class MenuCrypList extends Phaser.Scene { updateData(parent, key, data) { if (key === 'cryps') { KEY_MAP.forEach(k => this.input.keyboard.removeListener(k)); - this.addCrypRows(data); + this.scene.restart(data); } } addCrypRows(cryps) { 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) 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 BOX_WIDTH = Math.floor(ROW_WIDTH / 5); @@ -59,25 +53,10 @@ class MenuCrypList extends Phaser.Scene { const FILL = Object.values(COLOURS)[i]; // Selection of cryps const selectFn = () => { - this.game.events.emit('CRYP_ACTIVE', cryp); + // this.game.events.emit('CRYP_ACTIVE', 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 const crypInteract = this.add .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.setFillStyle(FILL, ACTIVE_FILL); }; + crypInteract.cryp = cryp; - this.crypRows.add(this.add.image( + this.add.image( crypInteract.getCenter().x, crypInteract.getCenter().y, 'aztec', genAvatar(cryp.name) - )); - this.crypRows.add(crypInteract); + ); // Cryp information box (names + skills) const crypInfo = this.add @@ -107,19 +86,29 @@ class MenuCrypList extends Phaser.Scene { .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)); - const CRYP_STATS = [ - cryp.stamina, - cryp.red_shield, - cryp.blue_shield, - cryp.red_damage, - cryp.blue_damage, - cryp.speed, + this.add.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER) + .setOrigin(0.5, 0.5); + + const crypGems = (stat, j) => { + this.add + // Placeholder for when gems are implemented + .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (2 + j), `${stat}: 0`, TEXT.NORMAL) + .setOrigin(0.5, 0.5); + }; + + 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; } diff --git a/client/src/scenes/passive.data.edge.js b/client/src/scenes/passive.data.edge.js deleted file mode 100644 index fdbf2460..00000000 --- a/client/src/scenes/passive.data.edge.js +++ /dev/null @@ -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; diff --git a/client/src/scenes/passive.data.node.js b/client/src/scenes/passive.data.node.js deleted file mode 100644 index bb742082..00000000 --- a/client/src/scenes/passive.data.node.js +++ /dev/null @@ -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; diff --git a/client/src/scenes/passive.node.js b/client/src/scenes/passive.node.js deleted file mode 100644 index 1a806d37..00000000 --- a/client/src/scenes/passive.node.js +++ /dev/null @@ -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; diff --git a/client/src/scenes/passives.js b/client/src/scenes/passives.js deleted file mode 100644 index 39002977..00000000 --- a/client/src/scenes/passives.js +++ /dev/null @@ -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; diff --git a/client/src/scenes/statsheet.js b/client/src/scenes/statsheet.js old mode 100644 new mode 100755 index 0331807b..b009a5fc --- a/client/src/scenes/statsheet.js +++ b/client/src/scenes/statsheet.js @@ -1,5 +1,6 @@ const Phaser = require('phaser'); const { POSITIONS: { MENU_MAIN }, TEXT, SKILLS } = require('./constants'); +const Item = require('./elements/item'); const X = MENU_MAIN.x(); const Y = MENU_MAIN.y(); @@ -12,7 +13,6 @@ const menuY = Math.floor(HEIGHT * 0.8); const menuWidth = Math.floor(WIDTH / 10); const menuHeight = Math.floor(HEIGHT * 0.2); -const X_LEARN = Math.floor(WIDTH * 2 / 4); const Y_SKILLS = Math.floor(HEIGHT * 0.5); @@ -32,36 +32,26 @@ class StatSheet extends Phaser.Scene { } create(cryp) { - this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT); this.registry.events.on('changedata', this.updateData, this); this.cryp = cryp; - this.forget = false; - this.add.text(WIDTH / 10, 0, cryp.name, TEXT.HEADER); - - // this.addStats(cryp); + this.add.text(X + WIDTH / 10, Y, cryp.name, TEXT.HEADER); + this.addStats(cryp); this.addKnownSkills(cryp); - this.addLearnableSkills(cryp); - addButton(this, menuX, menuY, () => this.registry.set('crypSpec', cryp), 'Spec'); + addButton(this, X + menuX, Y + menuY, () => this.registry.set('crypSpec', cryp), 'Spec'); } updateData(parent, key, data) { if (key === 'cryps') { const cryp = data.find(c => c.id === this.cryp.id); - this.cryp = cryp; - this.addKnownSkills(cryp); - // this.addStats(cryp); + this.scene.restart(cryp); } } addStats(cryp) { - if (this.stats) this.stats.destroy(true); - this.stats = this.add.group(); - const crypStat = (stat, i) => { - const STAT_X = WIDTH / 10; - const STAT_Y = (i + 1) * TEXT_MARGIN; - this.stats.add(this.add - .text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL)); + const STAT_X = X + WIDTH / 10; + const STAT_Y = Y + (i + 1) * TEXT_MARGIN; + this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL); }; const CRYP_STATS = [ @@ -78,49 +68,16 @@ class StatSheet extends Phaser.Scene { } addKnownSkills(cryp) { - if (this.knownSkills) this.knownSkills.destroy(true); - this.knownSkills = this.add.group(); - - this.add.text(menuX, Y_SKILLS, 'Skills', TEXT.HEADER); + this.add.text(X + menuX, Y + Y_SKILLS, 'Skills', TEXT.HEADER); const knownSkill = (skill, i) => { - const SKILL_X = menuX; - const SKILL_Y = (i * TEXT_MARGIN) + Y_SKILLS + TEXT_MARGIN; - - this.knownSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.skill, TEXT.NORMAL) - .setInteractive() - .on('pointerdown', () => { - this.registry.get('ws').sendCrypForget(cryp.id, skill.skill); - })); + const SKILL_X = X + menuX + 250 + 100 * i; + const SKILL_Y = Y + 25; + const clickFn = console.log('grep'); + this.add.existing(new Item(this, skill.skill, i, SKILL_X, SKILL_Y, 75, 75, clickFn)); }; 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) { if (this.skillText) this.skillText.destroy(); this.skillText = this.add.text(x, y, description, TEXT.HOVER).setPadding(32);