diff --git a/client/cryps.css b/client/cryps.css
index bbc6b207..99c6f817 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -646,7 +646,7 @@ table td svg {
display: flex;
/*border: 1px solid whitesmoke;*/
- margin-bottom: 1em;
+ /*margin-bottom: 1em;*/
justify-content: center;
transition-property: all;
@@ -797,7 +797,7 @@ table td svg {
.game .target-svg {
flex: 1;
min-width: 20%;
- height: 100%;
+ height: 94%;
}
.game .target-svg path {
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 59cc972e..6de8fa9a 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -5,6 +5,7 @@ const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
const GameCryp = require('./game.cryp');
const SkillBtn = require('./skill.btn');
+const TargetingArrows = require('./targeting.arrows');
// const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
@@ -135,8 +136,6 @@ function GamePanel(props) {
className={`game-cryp ${ko} ${classes}`}
style={ activeSkill ? { cursor: 'pointer' } : {}}
onClick={() => selectSkillTarget(cryp.id)} >
-
-
selectSkillTarget(cryp.id)} >
@@ -171,6 +170,7 @@ function GamePanel(props) {
{timer}
{PlayerTeam(playerTeam, setActiveSkill)}
+
{otherTeams.map(OpponentTeam)}
);
diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx
index d059d120..885f6e73 100644
--- a/client/src/components/skill.btn.jsx
+++ b/client/src/components/skill.btn.jsx
@@ -58,7 +58,7 @@ function Skill(props) {
: '';
const highlight = activeSkill
- ? activeSkill.crypId === cryp.id && activeSkill.skill === s
+ ? activeSkill.crypId === cryp.id && activeSkill.skill === s.skill
: false;
function onClick(e) {
@@ -66,28 +66,15 @@ function Skill(props) {
return setActiveSkill(cryp.id, s.skill);
}
- function findCryp(id) {
- const team = game.players.find(t => t.cryps.find(c => c.id === id));
- if (team) return team.cryps.find(c => c.id === id);
- return null;
- }
-
- const [target] = game.stack.filter(stack => stack.source_cryp_id === cryp.id && stack.skill === s.skill)
- .map(stack => findCryp(stack.target_cryp_id));
-
- const targetText = target
- ? `-> ${target.name}`
- : '';
-
- console.log(target);
+ const targeting = game.stack.some(stack => stack.source_cryp_id === cryp.id && stack.skill === s.skill);
return (
);
}
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index 048eeff0..11266a6d 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -7,7 +7,6 @@ const addState = connect(
function TargetSvg(args) {
const { game, account, resolution } = args;
- if (resolution) return false
const playerTeam = game.players.find(t => t.id === account.id);
const otherTeam = game.players.find(t => t.id !== account.id);
@@ -22,18 +21,39 @@ function TargetSvg(args) {
? playerTeam.cryps.findIndex(c => c.id === cast.target_cryp_id)
: otherTeam.cryps.findIndex(c => c.id === cast.target_cryp_id);
+ const skillIndex = playerTeam.cryps[source].skills.findIndex(s => s.skill === cast.skill);
+
+ const skillOffset = (100 * skillIndex) + 50;
const sourceX = 0;
- const sourceY = (source * 300) + 100;
- const targetX = defensive ? 0 : 900;
- const targetY = (target * 300) + 100;
+ const sourceY = (source * 300) + skillOffset;
+ const targetY = (target * 300) + 150;
+ const curveStart = 150 + (150 * source);
+ const curveEnd = 450 + curveStart;
- return ;
+ if (defensive) {
+ const path = `
+ M${sourceX},${sourceY}
+ L150,${sourceY}
+ C150,${sourceY} 150,${targetY} 150,${targetY}
+ L0,${targetY}
+ `;
- // indexOf cryp in list * 300
- // indexOf skill in skillList * 100 + 50
+ return ;
+ }
+
+ const path = `
+ M${sourceX},${sourceY}
+ L${curveStart},${sourceY}
+ C${curveEnd},${sourceY} ${curveStart},${targetY} ${curveEnd},${targetY}
+ L900,${targetY}
+ `;
+
+ return ;
}
- const arrows = outgoing.map(getPath);
+ const arrows = resolution
+ ? null
+ : outgoing.map(getPath);
return (