From 01e6fdef69c1a0c9063544391dccf7026998c52d Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 16 Nov 2018 14:33:41 +1000 Subject: [PATCH] Added node passive text on hover, functions to allow node allocation from state --- client/src/components/passive.container.jsx | 16 +- client/src/components/passive.data.node.js | 200 ++++++++++---------- client/src/components/passive.node.js | 29 ++- client/src/components/passive.phaser.js | 61 ++++-- 4 files changed, 169 insertions(+), 137 deletions(-) diff --git a/client/src/components/passive.container.jsx b/client/src/components/passive.container.jsx index 56ae42f7..f0fd037a 100755 --- a/client/src/components/passive.container.jsx +++ b/client/src/components/passive.container.jsx @@ -21,21 +21,7 @@ class PhaserInstance extends preact.Component { } componentWillReceiveProps(nextProps) { - const playerTeam = nextProps.game.teams.find(t => t.id === nextProps.account.id); - const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id); - - if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) { - this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stamina.value.toString()} HP`); - this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stamina.value.toString()} HP`); - - if (playerTeam.cryps[0].hp.value === 0) { - // this.PhaserCombat.skills('blast', 400, -150); - this.PhaserCombat.skills('chargeBall', 'green', 400, -250); - } else if (otherTeams[0].cryps[0].hp.value === 0) { - // this.PhaserCombat.skills('blast', 180, 150); - this.PhaserCombat.skills('chargeBall', 'green', 180, 250); - } - } + // code here will update passive allocation from state } componentDidMount() { diff --git a/client/src/components/passive.data.node.js b/client/src/components/passive.data.node.js index 6d22d02a..f1da3ef7 100755 --- a/client/src/components/passive.data.node.js +++ b/client/src/components/passive.data.node.js @@ -1,104 +1,104 @@ const passiveNodes = [ - { x: 860, y: 1011, id: 'CMED1', alloc: false }, - { x: 905, y: 970, id: 'CSTAT7', alloc: false }, - { x: 940, y: 917.5, id: 'CSTAT8', alloc: false }, - { x: 950, y: 1172.5, id: 'CMED2', alloc: false }, - { x: 955, y: 1120, id: 'CSDMG1', alloc: false }, - { x: 965, y: 1082.5, id: 'CSDMG2', alloc: false }, - { x: 970, y: 872.5, id: 'CSTAT9', alloc: false }, - { x: 975, y: 1012.5, id: 'CSTAT6', alloc: false }, - { x: 995, y: 1062.5, id: 'CSDMG3', alloc: false }, - { x: 1000, y: 1150, id: 'CHEAL1', alloc: false }, - { x: 1005, y: 812.5, id: 'CMED20', alloc: false }, - { x: 1024.5, y: 1122.5, id: 'CHEAL2', alloc: false }, - { x: 1036.5, y: 896.5, id: 'CMED19', alloc: false }, - { x: 1036.5, y: 1042.5, id: 'CMED18', alloc: false }, - { x: 1036.5, y: 1082.5, id: 'CHEAL3', alloc: false }, - { x: 1041.5, y: 772.5, id: 'CSTAT10', alloc: false }, - { x: 1055, y: 1327.5, id: 'CMED3', alloc: false }, - { x: 1066.5, y: 939.5, id: 'CHEAL5', alloc: false }, - { x: 1067.5, y: 995, id: 'CHEAL4', alloc: false }, - { x: 1070, y: 1250, id: 'CSTAT4', alloc: false }, - { x: 1072.5, y: 840.5, id: 'CHEAL8', alloc: false }, - { x: 1087.5, y: 700, id: 'CSTAT11', alloc: false }, - { x: 1097.5, y: 1052.5, id: 'CSDMG4', alloc: false }, - { x: 1102.5, y: 1140, id: 'CSTAT5', alloc: false }, - { x: 1102.5, y: 917.5, id: 'CHEAL6', alloc: false }, - { x: 1115, y: 1332.5, id: 'CSTAT1', alloc: false }, - { x: 1115, y: 875, id: 'CHEAL7', alloc: false }, - { x: 1130, y: 640, id: 'CSTAT12', alloc: false }, - { x: 1145, y: 1287.5, id: 'CSTAT3', alloc: false }, - { x: 1145, y: 1057.5, id: 'CSDMG5', alloc: false }, - { x: 1175, y: 1332.5, id: 'CSTAT2', alloc: false }, - { x: 1180, y: 1247.5, id: 'CMED10', alloc: false }, - { x: 1180, y: 950, id: 'CMED14', alloc: false }, - { x: 1195, y: 875, id: 'CHEAL9', alloc: false }, - { x: 1196.5, y: 635, id: 'CMED21', alloc: false }, - { x: 1205, y: 1062.5, id: 'CSDMG6', alloc: false }, - { x: 1212.5, y: 1200, id: 'CHEAL14', alloc: false }, - { x: 1231.5, y: 590, id: 'CSTAT14', alloc: false }, - { x: 1235, y: 772.5, id: 'CHEAL12', alloc: false }, - { x: 1240, y: 1225, id: 'CPHYS1', alloc: false }, - { x: 1240, y: 1322.5, id: 'CMED4', alloc: false }, - { x: 1258.5, y: 1107.5, id: 'CHEAL15', alloc: false }, - { x: 1260, y: 917.5, id: 'CHEAL10', alloc: false }, - { x: 1263, y: 520, id: 'CLRG4', alloc: false }, - { x: 1273.5, y: 1057.5, id: 'CMED13', alloc: false }, - { x: 1275, y: 1167.5, id: 'CMED11', alloc: false }, - { x: 1275, y: 947.5, id: 'CMED15', alloc: false }, - { x: 1277.5, y: 872.5, id: 'CMED16', alloc: false }, - { x: 1278.5, y: 812.5, id: 'CHEAL11', alloc: false }, - { x: 1280, y: 732.5, id: 'CHEAL13', alloc: false }, - { x: 1281.5, y: 1002.5, id: 'CSDMG7', alloc: false }, - { x: 1284, y: 640, id: 'CSTAT15', alloc: false }, - { x: 1298.5, y: 1107.5, id: 'CPHYS4', alloc: false }, - { x: 1302.5, y: 917.5, id: 'CSDMG8', alloc: false }, - { x: 1305, y: 1307.5, id: 'CPHYS2', alloc: false }, - { x: 1306, y: 1347.5, id: 'CSDMG10', alloc: false }, - { x: 1315, y: 762.5, id: 'CMED17', alloc: false }, - { x: 1326.5, y: 590, id: 'CSTAT16', alloc: false }, - { x: 1346.5, y: 635, id: 'CMED22', alloc: false }, - { x: 1348.5, y: 535, id: 'CSTAT13', alloc: false }, - { x: 1355, y: 1322.5, id: 'CMED5', alloc: false }, - { x: 1360, y: 1002.5, id: 'CSDMG9', alloc: false }, - { x: 1399.5, y: 1107.5, id: 'CPHYS5', alloc: false }, - { x: 1400, y: 807.5, id: 'CMED24', alloc: false }, - { x: 1409.5, y: 1312.5, id: 'CPHYS3', alloc: false }, - { x: 1410, y: 1347.5, id: 'CSDMG11', alloc: false }, - { x: 1410, y: 532.5, id: 'CMED23', alloc: false }, - { x: 1420, y: 732.5, id: 'CSTAT19', alloc: false }, - { x: 1430, y: 1205, id: 'CPHYS7', alloc: false }, - { x: 1447.5, y: 765, id: 'CMED25', alloc: false }, - { x: 1452.5, y: 1322.5, id: 'CMED6', alloc: false }, - { x: 1455, y: 1267.5, id: 'CSTAT33', alloc: false }, - { x: 1455, y: 1147.5, id: 'CMED12', alloc: false }, - { x: 1455, y: 1042.5, id: 'CSTAT35', alloc: false }, - { x: 1457.5, y: 975, id: 'CSTAT37', alloc: false }, - { x: 1462.5, y: 825, id: 'CLRG3', alloc: false }, - { x: 1485, y: 640, id: 'CSTAT17', alloc: false }, - { x: 1500, y: 1110, id: 'CPHYS6', alloc: false }, - { x: 1505, y: 1242.5, id: 'CSTAT32', alloc: false }, - { x: 1555, y: 1242.5, id: 'CSTAT31', alloc: false }, - { x: 1555, y: 1067.5, id: 'CSTAT34', alloc: false }, - { x: 1555, y: 962.5, id: 'CSTAT36', alloc: false }, - { x: 1555, y: 847.5, id: 'CSTAT20', alloc: false }, - { x: 1555, y: 732.5, id: 'CSTAT18', alloc: false }, - { x: 1597.5, y: 827.5, id: 'CSTAT21', alloc: false }, - { x: 1607.5, y: 1277.5, id: 'CSTAT30', alloc: false }, - { x: 1612.5, y: 1137.5, id: 'CLRG1', alloc: false }, - { x: 1612.5, y: 955, id: 'CLRG2', alloc: false }, - { x: 1657.5, y: 822.5, id: 'CSTAT22', alloc: false }, - { x: 1657.5, y: 1312.5, id: 'CSTAT29', alloc: false }, - { x: 1685, y: 1187.5, id: 'CSTAT27', alloc: false }, - { x: 1685, y: 1022.5, id: 'CSTAT25', alloc: false }, - { x: 1690, y: 1117.5, id: 'CSTAT26', alloc: false }, - { x: 1705, y: 960, id: 'CSTAT24', alloc: false }, - { x: 1712.5, y: 850, id: 'CMED9', alloc: false }, - { x: 1717.5, y: 1267.5, id: 'CMED7', alloc: false }, - { x: 1725, y: 1222.5, id: 'CSTAT28', alloc: false }, - { x: 1727.5, y: 1062.5, id: 'CMED8', alloc: false }, - { x: 1737.5, y: 917.5, id: 'CSTAT23', alloc: false }, - { x: 1830, y: 1032.5, id: 'CNOTE', alloc: false }, + { 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 Spells, 5% Increased Speed for Healing Skills'}, + { x: 955, y: 1120, id: 'CSDMG1', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 965, y: 1082.5, id: 'CSDMG2', alloc: false, text: '+5% Increased Spell 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 Spell 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 Spells, 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 Spells, 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 Spell 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 Spell 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 Spells, 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 Spell 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 Spells, 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 spells have a 20% chance to inflict slow'}, + { x: 1273.5, y: 1057.5, id: 'CMED13', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Speed for Damaging Spells'}, + { x: 1275, y: 1167.5, id: 'CMED11', alloc: false, text: '5% Increased Speed for Banish Spells, 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 Spells'}, + { x: 1277.5, y: 872.5, id: 'CMED16', alloc: false, text: '5% Increased Speed for Damaging Spells, 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 Spell 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 Spell 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 Spell 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 Spells, 5% Increased Stamina'}, + { x: 1360, y: 1002.5, id: 'CSDMG9', alloc: false, text: '+5% Increased Spell 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 Spells, 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 Spell Damage'}, + { x: 1410, y: 532.5, id: 'CMED23', alloc: false, text: '5% Increased Speed for Banish Spells, 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 Spells, 5% Increased Speed for Healing Skills'}, + { x: 1452.5, y: 1322.5, id: 'CMED6', alloc: false, text: '5% Increased Speed for Damaging Spells, 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 Spells, 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 spells'}, + { 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 physical damage there is a 20% chance to heal for 150% of physical damage taken'}, + { x: 1612.5, y: 955, id: 'CLRG2', alloc: false, text: 'Your healing spells 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 Spells, 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/components/passive.node.js b/client/src/components/passive.node.js index 2d716cc2..b44f0b63 100755 --- a/client/src/components/passive.node.js +++ b/client/src/components/passive.node.js @@ -1,14 +1,15 @@ const Phaser = require('phaser'); class PassiveNode extends Phaser.GameObjects.Sprite { - constructor(scene, x, y, id, alloc) { + constructor(scene, x, y, id, alloc, text) { super(scene, x, y); this.setTexture('eye'); - this.scene = scene; this.alloc = alloc; + this.text = text; this.id = id; this.setPosition(x, y); + const nodeNoDigits = this.id.replace(/[0-9]/g, ''); switch (nodeNoDigits) { case 'CNOTE': @@ -28,17 +29,25 @@ class PassiveNode extends Phaser.GameObjects.Sprite { } } - allocate() { - if (this.alloc) { - this.clearTint(); - this.alloc = false; + allocate(alloc) { + if (alloc !== undefined) { + this.alloc = alloc; + } else { + this.alloc = !this.alloc; + } + this.updateNode(); + } + + updateNode() { + if (!this.alloc) { + this.clearTint(); } else { - this.alloc = true; this.setTint(0xff0000); } - for (let i = 0; i < this.scene.passiveNodes.length; i += 1) { - if (this.scene.passiveNodes[i].id === this.id) { - this.scene.passiveNodes[i].alloc = this.alloc; + + 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; } } diff --git a/client/src/components/passive.phaser.js b/client/src/components/passive.phaser.js index adcc1c16..0ba2fb38 100755 --- a/client/src/components/passive.phaser.js +++ b/client/src/components/passive.phaser.js @@ -3,32 +3,54 @@ const PassiveNode = require('./passive.node'); const passiveDataNode = require('./passive.data.node'); const passiveDataEdge = require('./passive.data.edge'); +// 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 { preload() { this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png'); + this.load.image('background', 'http://labs.phaser.io/assets/skies/nebula.jpg'); } create() { - this.cameras.main.setBounds(0, 0, 3000, 3000); - this.physics.world.setBounds(0, 0, 3000, 3000); + this.background = this.add.image(0, 0, 'background'); + this.background.setScale(5); + this.background.setInteractive(); this.graphics = this.add.graphics(); - this.passiveNodes = passiveDataNode; - this.passiveEdges = passiveDataEdge; + this.nodeText = this.add.text(10000, 10000, 'grep', { + fontSize: '32px', + fontFamily: 'Arial', + color: '#ffffff', + backgroundColor: '#000000', + }).setPadding(32); + + this.passiveNodeData = passiveDataNode; + this.passiveEdgeData = passiveDataEdge; this.addPassiveNodes(); this.drawPassiveEdges(); this.addCanmeraControl(); } addPassiveNodes() { - this.passiveNodes.forEach((n) => { - this.add.existing(new PassiveNode(this, n.x, n.y, n.id, n.alloc)).setInteractive(); + 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(); }); - this.input.on('pointerover', (event, gameObjects) => { + + this.input.on('pointerover', (pointer, gameObjects) => { if (gameObjects[0] instanceof PassiveNode) { if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff); + this.nodeText.x = pointer.x + this.cameras.main.scrollX; + this.nodeText.y = pointer.y + this.cameras.main.scrollY; + this.nodeText.text = gameObjects[0].text; + } else { + this.nodeText.text = ''; } }); - this.input.on('pointerout', (event, gameObjects) => { + this.input.on('pointerout', (pointer, gameObjects) => { if (gameObjects[0] instanceof PassiveNode) { if (!gameObjects[0].alloc) gameObjects[0].clearTint(); } @@ -43,12 +65,18 @@ class PhaserPassives extends Phaser.Scene { } } }); + + this.input.keyboard.on('keydown_A', () => { + this.updatePassives(); // Will update nodes from state + }, 0, this); } drawPassiveEdges() { this.graphics.clear(); - this.passiveEdges.forEach((e) => { - const drawEdge = this.passiveNodes.filter(n => (e[0] === n.id || e[1] === n.id)); + 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 { @@ -63,8 +91,8 @@ class PhaserPassives extends Phaser.Scene { this.input.on('pointermove', (pointer) => { if (this.pan) { const points = pointer.getInterpolatedPosition(2); - this.cameras.main.scrollX -= (points[1].x - points[0].x) * 1.5; - this.cameras.main.scrollY -= (points[1].y - points[0].y) * 1.5; + this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2; + this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2; } }, this); this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({ @@ -77,6 +105,15 @@ class PhaserPassives extends Phaser.Scene { }); } + 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; }