advanced technology

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 {

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 targeting = game.stack.some(stack => stack.source_cryp_id === cryp.id && stack.skill === s.skill);
-        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);
 
     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 sourceY = (source * 300) + skillOffset;
-        const targetX = defensive ? 0 : 900;
+        const targetY = (target * 300) + 150;
-        const targetY = (target * 300) + 100;
+        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
+            return <path d={path} />;
-        // indexOf skill in skillList * 100 + 50
+        }
+
+        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">

client/src/test.game.js

@@ -539,7 +539,7 @@ const game = {
       "id": "9d2fc857-51c7-4640-a17c-a08496480830",
       "source_player_id": "ec936c53-8eab-44e7-953f-9739531cee24",
       "source_cryp_id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
-      "target_cryp_id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
+      "target_cryp_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
       "skill": "Attack",
       "speed": 0,
       "resolutions": []