wip

client/src/components/game.component.jsx

@@ -99,7 +99,7 @@ function GamePanel(props) {
         const cryps = team.cryps.map((c, i) => <GameCryp key={c.id} cryp={c} />);
 
         return (
-            <div className="team-player cryp-list">
+            <div className="team player">
                 {cryps}
             </div>
         );
@@ -151,7 +151,7 @@ function GamePanel(props) {
     function OpponentTeam(team) {
         const cryps = team.cryps.map(OpponentCryp);
         return (
-            <div className="team-opponent cryp-list">
+            <div className="team opponent">
                 {cryps}
             </div>
         );
@@ -159,13 +159,15 @@ function GamePanel(props) {
 
     const gameClasses = `game ${resolution ? 'resolving': ''}`;
 
+            // {header}
+            // {timer}
+
+
     return (
         <section className={gameClasses} onClick={() => setActiveCryp(null)} >
-            {header}
-            {timer}
-            {PlayerTeam(playerTeam, setActiveSkill)}
             <TargetingArrows />
             {otherTeams.map(OpponentTeam)}
+            {PlayerTeam(playerTeam, setActiveSkill)}
         </section>
     );
 }

client/src/components/targeting.arrows.jsx

@@ -24,8 +24,8 @@ function TargetSvg(args) {
         const skillIndex = playerTeam.cryps[source].skills.findIndex(s => s.skill === cast.skill);
 
         const skillOffset = (100 * skillIndex) + 50;
-        const sourceX = 0;
-        const sourceY = (source * 300) + skillOffset;
+        const sourceY = 0;
+        const sourceX = (source * 300) + skillOffset;
         const targetY = (target * 300) + 150;
         const curveStart = 150 + (150 * source);
         const curveEnd = 450 + curveStart;
@@ -33,12 +33,12 @@ function TargetSvg(args) {
         if (defensive) {
             const path = `
                 M${sourceX},${sourceY}
-                L150,${sourceY}
-                C150,${sourceY} 150,${targetY} 150,${targetY}
-                L0,${targetY}
-                L50,${targetY - 4}
-                M0,${targetY}
-                L50,${targetY + 4}
+                L${sourceY},150
+                C${sourceY},150 ${targetY},150 ${targetY},150
+                L${targetY},0
+                L${targetY - 4},50
+                M${targetY},0
+                L${targetY + 4},0
             `;
 
             return <path d={path} />;
@@ -48,10 +48,10 @@ function TargetSvg(args) {
             M${sourceX},${sourceY}
             L${curveStart},${sourceY}
             C${curveEnd},${sourceY} ${curveStart},${targetY} ${curveEnd},${targetY}
-            L900,${targetY}
-            L850,${targetY - 4}
-            M900,${targetY}
-            L850,${targetY + 4}
+            L${targetY},900
+            L${targetY - 4},850
+            M${targetY},900
+            L${targetY + 4},850
         `;
 
         return <path d={path} />;
@@ -62,7 +62,7 @@ function TargetSvg(args) {
         : outgoing.map(getPath);
 
     return (
-        <svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-svg">
+        <svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-arrows">
             {arrows}
         </svg>
     );