highlight animation hurrr

client/assets/styles/game.less

@@ -85,6 +85,10 @@
         .effects {
             align-self: flex-start;
         }
+
+        &.highlight {
+            animation: highlight 1s infinite alternate;
+        }
     }
 
     .game-construct .name {
@@ -93,6 +97,15 @@
     }
 }
 
+@keyframes highlight {
+    from {
+        background: @black;
+    }
+    to {
+        background: @silver;
+    }
+}
+
 .game-construct {
     display: grid;
 

client/src/components/game.construct.jsx

@@ -15,6 +15,7 @@ const addState = connect(
             ws,
             game,
 
+            authenticated,
             activeSkill,
             animFocus,
             resolution,
@@ -28,6 +29,8 @@ const addState = connect(
         }
 
         return {
+            game,
+            authenticated,
             activeSkill,
             animFocus,
             resolution,
@@ -51,6 +54,8 @@ class GameConstruct extends preact.Component {
     render() {
         const {
             // Changing state variables
+            authenticated,
+            game,
             activeSkill,
             animFocus,
             resolution,
@@ -74,6 +79,7 @@ class GameConstruct extends preact.Component {
         };
 
         const unfocus = animFocus && !animFocus.includes(construct.id) ? 'unfocus' : '';
+        const highlight = !authenticated && activeSkill && game.stack.length === 0 ? 'highlight' : '';
 
         const crypSkills = player
             ? <div class="skills"> {range(0, 3).map(j => <SkillBtn key={j} construct={construct} i={j} />)} </div>
@@ -84,7 +90,7 @@ class GameConstruct extends preact.Component {
             <div
                 onClick={() => selectSkillTarget(construct.id)}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
-                class={`game-construct ${ko} ${koEvent()} ${unfocus}`}>
+                class={`game-construct ${ko} ${koEvent()} ${unfocus} ${highlight}`}>
                 <div class="left">
                     {crypSkills}
                     <ConstructEffectBox construct={construct} />