advanced technology

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)} >
-                <div className="skills">
-                </div>
                 <figure
                     className="img"
                     onClick={() => selectSkillTarget(cryp.id)} >
@@ -171,6 +170,7 @@ function GamePanel(props) {
             {timer}
             {PlayerTeam(playerTeam, setActiveSkill)}
             <div className="mobile-spacer">&nbsp;</div>
+            <TargetingArrows />
             {otherTeams.map(OpponentTeam)}
         </main>
     );

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 (
         <button
             disabled={!!cdText || ko}
-            className={`cryp-skill-btn ${side} ${(target || highlight) ? 'active' : ''}`}
+            className={`cryp-skill-btn ${side} ${(targeting || highlight) ? 'active' : ''}`}
             type="submit"
             onClick={onClick}>
-            {s.skill} {cdText} {targetText}
+            {s.skill} {cdText}
         </button>
     );
 }

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 <path d={`M${sourceX},${sourceY} L${targetX},${targetY}`} />;
+        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 <path d={path} />;
+        }
+
+        const path = `
+            M${sourceX},${sourceY}
+            L${curveStart},${sourceY}
+            C${curveEnd},${sourceY} ${curveStart},${targetY} ${curveEnd},${targetY}
+            L900,${targetY}
+        `;
+
+        return <path d={path} />;
     }
 
-    const arrows = outgoing.map(getPath);
+    const arrows = resolution
+        ? null
+        : outgoing.map(getPath);
 
     return (
         <svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-svg">