Fixing Moving bugs.

src/components/farm/Board.jsx

@@ -1011,7 +1011,6 @@ class Harvest extends React.Component {
 // props: currentPos, moveTo, color
 // actions: movePlayer
 class Moving extends React.Component {
-    timerId = false
     endPos = 0
     color = ''
     hurtBack = false
@@ -1041,14 +1040,17 @@ class Moving extends React.Component {
                               this.color);
         this.setState(state => ({ currentPos: state.currentPos + delta}));
         if (this.state.currentPos + delta !== this.endPos) {
-            this.timerId = setInterval(() => this.tick(), 500);
+            if (this.props.timerId) {
+                clearInterval(this.props.timerId);
+            }
+            this.props.setTimerId(setInterval(() => this.tick(), 500));
         }
     }
 
     componentWillUnmount() {
-        if (this.timerId) {
+        if (this.props.timerId) {
-            clearInterval(this.timerId);
+            clearInterval(this.props.timerId);
-            this.timerId = false;
+            this.props.setTimerId(false);
         }
         // if another player skips movement
         if (this.state.currentPos !== this.endPos) {
@@ -1065,8 +1067,8 @@ class Moving extends React.Component {
                               this.color);
         this.setState(state => ({ currentPos: state.currentPos + delta}));
         if (this.state.currentPos === this.endPos) {
-            if (this.timerId) { clearInterval(this.timerId); }
+            if (this.props.timerId) { clearInterval(this.props.timerId); }
-            this.timerId = false;
+            this.props.setTimerId(false);
         }
     }
 
@@ -1074,8 +1076,8 @@ class Moving extends React.Component {
         if (!preventAutoSkip) {
             skip('moving');
         }
-        clearInterval(this.timerId);
+        clearInterval(this.props.timerId);
-        this.timerId = false;
+        this.props.setTimerId(false);
         this.props.movePlayer(this.endPos, this.state.currentPos, this.color);
         this.setState({ currentPos: this.endPos });
     }
@@ -1234,12 +1236,15 @@ class Action extends React.Component {
                                 spaces={this.props.spaces}
                                 movePlayer={this.props.movePlayer}
                                 autoSkip={this.props.ui.autoSkip}
+                                timerId={this.props.timerId}
+                                setTimerId={this.props.setTimerId}
                                 ui={this.props.ui} />);
                 buttons = (<Fragment />);
                 break;
             case 'goto':
                 view = (<Moving showNextAction={() => this.props.showNextAction()}
-                                key={this.props.game.currentPlayer + '|' + this.props.ui.actionValue.from + '|' + this.props.ui.actionValue.to}
+                                timerId={this.props.timerId}
+                                setTimerId={this.props.setTimerId}
                                 player={this.props.player}
                                 game={this.props.game}
                                 spaces={this.props.spaces}
@@ -1492,7 +1497,8 @@ class BoardApp extends React.Component {
         super(props);
         this.state = {
             screen: SCREENS.summary,
-            card: props.ui.card
+            card: props.ui.card,
+            timerId: false
         };
         this.myRef = React.createRef();
         this.actionRef = React.createRef();
@@ -1555,6 +1561,15 @@ class BoardApp extends React.Component {
         // midRow.onmouseover = () => this.props.setMessagePanelSpace(null);
     }
 
+    setTimerId = id => {
+        this.setState(state => {
+            if (state.timerId) {
+                clearInterval(state.timerId);
+            }
+            return { timerId: id }
+        });
+    }
+
     iconClass = icon => {
         return this.iconToScreen[icon] === this.state.screen ? 'is-active' :
                (this.iconToScreen[icon] === SCREENS.trade ?
@@ -1673,6 +1688,20 @@ class BoardApp extends React.Component {
                 </AlertOverlay>
             );
         }
+        const actionComponent = (
+            <Action
+                timerId={this.state.timerId}
+                setTimerId={this.setTimerId}
+                forwardRef={x => this.actionRef = x}
+                spaces={this.props.spaces}
+                player={this.props.player}
+                game={this.props.game}
+                movePlayer={this.props.movePlayer}
+                showNextAction={this.props.nextUIAction}
+                otherPlayersTurn={this.props.player.name !== this.props.game.currentPlayer}
+                screen={this.state.screen}
+                showScreen={screen => this.showScreen(screen)}
+                ui={this.props.ui} />);
         // faExchangeAlt -> trade icon, hidden for now
         return (
             <div className='game-container' ref={this.myRef}>
@@ -1705,17 +1734,7 @@ class BoardApp extends React.Component {
                                                game={this.props.game} showScreen={this.showScreen} />
                             </div>
                             <div className={this.tabClass(SCREENS.action)}>
-                                <Action
+                                {actionComponent}
-                                    forwardRef={x => this.actionRef = x}
-                                    spaces={this.props.spaces}
-                                    player={this.props.player}
-                                    game={this.props.game}
-                                    movePlayer={this.props.movePlayer}
-                                    showNextAction={this.props.nextUIAction}
-                                    otherPlayersTurn={this.props.player.name !== this.props.game.currentPlayer}
-                                    screen={this.state.screen}
-                                    showScreen={screen => this.showScreen(screen)}
-                                    ui={this.props.ui} />
                             </div>
                             <div className={this.tabClass(SCREENS.cards)}>
                                 <Row>
@@ -1757,17 +1776,7 @@ class BoardApp extends React.Component {
                         </div>
                         <div className='static-tab-container show-for-large'>
                             <div className='tab show'>
-                                <Action
+                                {actionComponent}
-                                    forwardRef={x => this.actionRefExtra = x}
-                                    spaces={this.props.spaces}
-                                    player={this.props.player}
-                                    game={this.props.game}
-                                    movePlayer={this.props.movePlayer}
-                                    showNextAction={this.props.nextUIAction}
-                                    otherPlayersTurn={this.props.player.name !== this.props.game.currentPlayer}
-                                    screen={this.state.screen}
-                                    showScreen={screen => this.showScreen(screen)}
-                                    ui={this.props.ui} />
                             </div>
                         </div>
                     </div>

src/components/farm/interface.js

@@ -108,15 +108,6 @@ function handleMessage(evt) {
         if (data.event === 'end-of-game') {
             store.dispatch(alert(ALERTS.endOfGame, data.results, 'endOfGame' + data.game.turn));
         }
-        if (data.event === 'action' && data.action === false) {
-            const playerSpaces = store.getState().farm.ui.playerSpaces;
-            data.game.otherPlayers.map(x => x.player).concat([data.player]).forEach(player => {
-                if (player.space !== playerSpaces[player.color]) {
-                    store.dispatch(movePlayer(player.space, playerSpaces[player.color],
-                                              player.color));
-                }
-            });
-        }
     });
 };
 
@@ -133,6 +124,14 @@ function roll() {
 }
 
 function endTurn() {
+    const farmState = store.getState().farm;
+    const playerSpaces = farmState.ui.playerSpaces;
+    farmState.game.otherPlayers.map(x => x.player).concat([farmState.player]).forEach(player => {
+        if (player.space !== playerSpaces[player.color]) {
+            store.dispatch(movePlayer(player.space, playerSpaces[player.color],
+                                      player.color));
+        }
+    });
     store.dispatch(gameState(GAME_STATES.turnEnded));
     sendCommand({ type: 'turn-ended' });
 }