Highlighting current player's icon.

src/components/farm/Board.jsx

@@ -1737,7 +1737,8 @@ class Board extends React.Component {
     render() {
         const rh = this.props.height || '20px'; //  height={h}
         const renderSpace = (s, h, o) =>
-            (<SpaceNode showIcons={true} space={s} key={s.key} orientation={o} />);
+            (<SpaceNode current={this.props.currentPlayer.color}
+                        showIcons={true} space={s} key={s.key} orientation={o} />);
 
         return (
             <Fragment>
@@ -2244,7 +2245,9 @@ class BoardApp extends React.Component {
         return (
             <div className='game-container' ref={this.myRef}>
                 {alertOverlay}
-                <Board spaces={this.props.spaces}>
+                <Board spaces={this.props.spaces}
+                       currentPlayer={this.state.currentPlayer}
+                >
                     <InfoBar message={this.props.ui.message}
                              screen={this.state.screen}
                              players={this.props.game.otherPlayers} />

src/components/farm/PlayerIcon.jsx

@@ -22,8 +22,9 @@ export default class PlayerIcon extends React.Component {
     render() {
         return (
             <center>
-                {this.props.colors
+                {this.props.colors.map(c => (
-                 .map(c => (<div key={c} className={'player player-' + c}></div>))}
+                    <div key={c} className={'player player-' + c + (c === this.props.current ? ' player-current' : '')} />
+                ))}
             </center>
         );
     }

src/components/farm/SpaceNode.jsx

@@ -73,7 +73,7 @@ class SpaceNode extends React.Component {
                         {title}
                     </div>)
                   : (null)}
-            { this.props.space.players.length ? <PlayerIcon colors={this.props.space.players} /> : ''}
+            { this.props.space.players.length ? <PlayerIcon colors={this.props.space.players} current={this.props.current} /> : ''}
                     <div className='space-description'>
                 {this.props.space.description}
             </div>

src/style.scss

@@ -244,6 +244,23 @@ $tab-margin: 0.3rem;
     margin-top: 4px;
     margin-left: 5px; }
 
+.player-current {
+    position: relative;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+    transition: all 0.3s ease-in-out; }
+
+.player-current::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  top: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.5);
+  box-shadow: 0 0px 5px $primary-color;
+  animation: die-pulse 2s ease-in-out infinite; }
+
 .player-selectable {
     border: 4px solid #ff816e;
     cursor: pointer;