diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index 1746abea..e7bfac87 100644 --- a/client/assets/styles/game.less +++ b/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; diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index a5c163c2..01790c8a 100644 --- a/client/src/components/game.construct.jsx +++ b/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 ?
{range(0, 3).map(j => )}
@@ -84,7 +90,7 @@ class GameConstruct extends preact.Component {
selectSkillTarget(construct.id)} style={ activeSkill ? { cursor: 'pointer' } : {}} - class={`game-construct ${ko} ${koEvent()} ${unfocus}`}> + class={`game-construct ${ko} ${koEvent()} ${unfocus} ${highlight}`}>
{crypSkills}