return of the arrows

client/assets/styles/game.css

@@ -3,11 +3,12 @@
 .game {
     overflow: hidden;
     display: grid;
-    grid-template-rows: min-content min-content 1fr 1.5fr;
+    grid-template-rows: min-content min-content 1fr 0.5fr 1.5fr;
     grid-template-areas:
         "ready"
         "timer"
         "opponent"
+        "target"
         "player";
 }
 
@@ -73,6 +74,16 @@
     transition-timing-function: ease;
 }
 
+.game .targeting-arrows {
+    grid-area: target;
+    height: 100%;
+    width: 100%;
+}
+
+.game .targeting-arrows {
+    stroke-width: 5px;
+}
+
 .game-construct .targeting {
     grid-area: avatar;
     position: relative;
@@ -418,4 +429,8 @@
     .game .effects {
         font-size: 100%;
     }
+
+    .game .targeting-arrows {
+        stroke-width: 1em;
+    }
 }

client/src/components/game.component.jsx

@@ -1,5 +1,6 @@
 const preact = require('preact');
 const GameConstruct = require('./game.construct');
+const Targeting = require('./targeting.arrows');
 
 function GamePanel(props) {
     const {
@@ -112,6 +113,7 @@ function GamePanel(props) {
             {header}
             {timer}
             {otherTeams.map(OpponentTeam)}
+            <Targeting />
             {PlayerTeam(playerTeam, setActiveSkill)}
         </main>
     );

client/src/components/game.construct.jsx

@@ -114,7 +114,6 @@ function GameConstruct(props) {
             <div className="stats"> {stats} </div>
             <ConstructAvatar name={construct.name} id={construct.id} />
             <div className="effects"> {effects} </div>
-            <div className="targeting"> {targeting} </div>
         </div>
     );
 }

client/src/components/targeting.arrows.jsx

@@ -5,6 +5,14 @@ const addState = connect(
     ({ game, account, resolution }) => ({ game, account, resolution })
 );
 
+const { TARGET_COLOURS } = require('./../utils');
+
+const TC_MAP = [
+    TARGET_COLOURS.PINK,
+    TARGET_COLOURS.LBLUE,
+    TARGET_COLOURS.GREEN,
+];
+
 function TargetSvg(args) {
     const { game, account, resolution } = args;
 
@@ -14,6 +22,9 @@ function TargetSvg(args) {
     const playerTeamIds = playerTeam.constructs.map(c => c.id);
     const outgoing = game.stack.filter(stack => playerTeamIds.includes(stack.source_construct_id));
 
+    const WIDTH = 3000;
+    const HEIGHT = 1000;
+
     function getPath(cast) {
         const source = playerTeam.constructs.findIndex(c => c.id === cast.source_construct_id);
         const defensive = playerTeamIds.includes(cast.target_construct_id);
@@ -21,40 +32,48 @@ function TargetSvg(args) {
             ? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id)
             : otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id);
 
-        const skillIndex = playerTeam.constructs[source].skills.findIndex(s => s.skill === cast.skill);
+        const stroke = TC_MAP[source];
 
-        const skillOffset = (100 * skillIndex) + 50;
-        const sourceY = 0;
-        const sourceX = (source * 300) + skillOffset;
-        const targetY = (target * 300) + 150;
-        const curveStart = 150 + (150 * source);
-        const curveEnd = 450 + curveStart;
+        const sourceY = HEIGHT;
+        const sourceX = (source * WIDTH / 3) + WIDTH / 6;
+        const targetX = (target * WIDTH / 3) + WIDTH / 6 + (defensive ? WIDTH / 24 : 0);
+        const targetY = defensive ? HEIGHT : 0;
+        const curveEnd = HEIGHT * 0.25;
+        const curveStart = HEIGHT * 0.75;
 
         if (defensive) {
             const path = `
                 M${sourceX},${sourceY}
-                L${sourceY},150
-                C${sourceY},150 ${targetY},150 ${targetY},150
-                L${targetY},0
-                L${targetY - 4},50
-                M${targetY},0
-                L${targetY + 4},0
+                L${sourceX},${HEIGHT * 0.75}
+                L${targetX},${HEIGHT * 0.75}
+                L${targetX},${targetY}
+                L${targetX - (WIDTH * 0.005)},${HEIGHT * 0.875}
+                M${targetX},${targetY}
+                L${targetX + (WIDTH * 0.005)},${HEIGHT * 0.875}
             `;
 
-            return <path d={path} />;
+            return <path
+                style={ { stroke} }
+                d={path}
+            />;
         }
 
         const path = `
             M${sourceX},${sourceY}
-            L${curveStart},${sourceY}
-            C${curveEnd},${sourceY} ${curveStart},${targetY} ${curveEnd},${targetY}
-            L${targetY},900
-            L${targetY - 4},850
-            M${targetY},900
-            L${targetY + 4},850
+            L${sourceX},${curveStart}
+            C${sourceX},${curveEnd} ${targetX},${curveStart} ${targetX},${curveEnd}
+
+            L${targetX},${targetY}
+            L${targetX - (WIDTH * 0.005)},${HEIGHT * 0.125}
+            M${targetX},${targetY}
+            L${targetX + (WIDTH * 0.005)},${HEIGHT * 0.125}
+
         `;
 
-        return <path d={path} />;
+        return <path
+            style={ { stroke} }
+            d={path}
+        />;
     }
 
     const arrows = resolution
@@ -62,7 +81,7 @@ function TargetSvg(args) {
         : outgoing.map(getPath);
 
     return (
-        <svg preserveAspectRatio="none" className="targeting-arrows">
+        <svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} preserveAspectRatio="none" className="targeting-arrows">
             {arrows}
         </svg>
     );