fix chrome bug kinda

client/assets/styles/game.css

@@ -35,7 +35,6 @@
     transform: translate(-50%, -50%);
 }
 
-
 .opponent .game-construct {
     align-items: flex-start;
     grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
@@ -74,24 +73,18 @@
     transition-timing-function: ease;
 }
 
-.game .targeting-arrows {
-    grid-area: target;
+.game #targeting {
     height: 100%;
     width: 100%;
     stroke-width: 2px;
     stroke: whitesmoke;
+
+    /* some stupid bug in chrome makes it fill the entire screen */
+    max-height: 10em;
 }
 
-.game-construct .targeting {
-    grid-area: avatar;
-    position: relative;
-    left: 60%;
-    top: 50%;
-    text-align: center;
-}
-
-.game-construct .img {
-    grid-area: avatar;
+.resolving #targeting {
+    opacity: 0;
 }
 
 .game-construct .name {
@@ -208,11 +201,8 @@
     left: 50%;
 }
 
-
 .game-construct.active-skill {
     filter: drop-shadow(0 0 0.2em silver);
-
-    /*border-color: silver;*/
 }
 
 .game-construct.red-damage {
@@ -327,10 +317,6 @@
     opacity: 0;
 }
 
-.resolving .targeting {
-    opacity: 0;
-}
-
 /*
     COMBAT ANIMATIONS
 */

client/src/components/game.construct.jsx

@@ -94,12 +94,14 @@ function GameConstruct(props) {
 
     return (
         <div
+            onClick={() => selectSkillTarget(construct.id)}
             style={ activeSkill ? { cursor: 'pointer' } : {}}
             className={`game-construct ${ko} ${classes}`} >
             <h3 className="name"> {construct.name} </h3>
             {crypSkills}
             <div className="stats"> {stats} </div>
             <ConstructAvatar name={construct.name} id={construct.id} />
+            {combatTextEl}
             <div className="effects"> {effects} </div>
         </div>
     );

client/src/components/targeting.arrows.jsx

@@ -39,7 +39,7 @@ class TargetSvg extends Component {
 
             const sourceY = height;
             const sourceX = (source * width / 3) + width / 6;
-            const targetX = (target * width / 3) + width / 6 + (defensive ? width / 24 : 0);
+            const targetX = (target * width / 3) + width / 6 + (defensive ? width / 32 : 0) + (source * width / 24) - (width / 24);
             const targetY = defensive ? height : 0;
             const curveEnd = height * 0.25;
             const curveStart = height * 0.75;