Handling lag better stage 1.

src/components/farm/Board.jsx

@@ -51,7 +51,7 @@ import { buy, roll, endTurn, loan, trade, submitTradeAccept,
          leaveGame, kickPlayer, toggleRevealForTrade,
          addAIPlayer } from './interface.js'
 
-const showScreenDelay = 2000;
+const showScreenDelay = 0;
 
 function test() {
     if (!document.querySelector('.show-for-large .action-item')) {
@@ -79,6 +79,44 @@ function assetsValue(player) {
                 ((player.assets.harvester + player.assets.tractor) * 10000);
 }
 
+class NextActionButton extends React.Component {
+    state = {
+        clicked: false
+    }
+
+    onClick = (e) => {
+        if (this.props.onClick) {
+            this.props.onClick(e);
+        }
+        this.setState({ clicked: true });
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.state.clicked && this.props.actionId !== this.props.nextActionId) {
+            this.setState({ clicked: false }, () => this.props.showNextAction());
+        }
+    }
+
+    render() {
+        const { clicked } = this.state;
+        if (clicked) {
+            return (
+                <Button disabled>Loading...</Button>
+            );
+        } else {
+            const buttonProps = { ...this.props };
+            delete buttonProps['action'];
+            delete buttonProps['nextAction'];
+            delete buttonProps['showNextAction'];
+            delete buttonProps['onClick'];
+            const button = React.cloneElement((
+                <Button onClick={this.onClick}>{this.props.children}</Button>
+            ), buttonProps);
+            return button;
+        }
+    }
+}
+
 class ResourceUnit extends React.Component {
     render () {
         const hslString = 'hsl(' + this.props.h + ', ' + this.props.s;
@@ -229,7 +267,7 @@ class PlayerTurnContainer extends React.Component {
                 </Fragment>
             );
         } else if (player.state === GAME_STATES.midTurn) {
-            if (this.props.ui.action) {
+            if (this.props.ui.action && this.props.ui.action !== 'actions-end') {
                 if (this.props.screen === SCREENS.action) {
                     view = `It's your turn!`;
                 } else {
@@ -1104,6 +1142,7 @@ class Die extends React.Component {
         super(props);
         this.state = { num: props.roll ? this.roll() : props.num,
                        finalFace: false,
+                       showScreenTriggered: false,
                        autoSkip: typeof props.autoSkip === 'undefined' ? false :
                                  props.autoSkip };
         this.trigger = 1000 * this.speed[props.speed ? props.speed : 'fast']
@@ -1128,6 +1167,14 @@ class Die extends React.Component {
         }
     }
 
+    next = () => {
+        if (this.props.showScreenPlaceholder) {
+            this.setState({ showScreenTriggered: true });
+        } else {
+            this.props.showScreen();
+        }
+    }
+
     tick = () => {
         let finished = false;
         return function() {
@@ -1150,9 +1197,9 @@ class Die extends React.Component {
                         this.setState({ num: this.props.num, finalFace: true });
                         if (this.props.showScreen) {
                             this.showScreenTimerId = setInterval(() => {
-                                this.props.showScreen();
                                 clearInterval(this.showScreenTimerId);
                                 this.showScreenTimerId = false;
+                                this.next();
                             }, this.props.showScreenDelay);
                         }
                     } else {
@@ -1189,9 +1236,9 @@ class Die extends React.Component {
         this.setState({ num: this.props.num, finalFace: true });
         if (this.props.showScreen) {
             this.showScreenTimerId = setInterval(() => {
-                this.props.showScreen();
                 clearInterval(this.showScreenTimerId);
                 this.showScreenTimerId = false;
+                this.next();
             }, this.props.showScreenDelay);
         }
     }
@@ -1203,6 +1250,8 @@ class Die extends React.Component {
                 this.skip(true);
             }
             this.setState({ autoSkip: this.props.autoSkip });
+        } else if (this.state.showScreenTriggered && this.props.showScreenTrigger) {
+            this.props.showScreen();
         }
     }
 
@@ -1265,6 +1314,9 @@ class Die extends React.Component {
                      <Button className="action-item" onClick={() => this.skip()}>Skip</Button>
                  </div>) :
                  (<Fragment />)}
+                {this.state.showScreenTriggered && !this.props.showScreenTrigger ? (
+                     <>{this.props.showScreenPlaceholder}</>
+                ) : (<></>)}
             </Fragment>
         );
     }
@@ -1289,6 +1341,8 @@ class Rolling extends React.Component {
                      showScreen={this.props.showScreen}
                      skip={this.props.skip}
                      autoSkip={this.props.autoSkip}
+                     showScreenTrigger={this.props.ui.actionId !== this.props.ui.nextActionId}
+                     showScreenPlaceholder={'Loading...'}
                      showScreenDelay={this.props.showScreenDelay} />
             </GroupBox>
         );
@@ -1467,7 +1521,12 @@ class Moving extends React.Component {
             buttons = (<Fragment />);
         } else if (this.props.ui.playerSpaces[(this.props.currentPlayer.ai && this.props.currentPlayer.color) || this.props.player.color]
             === this.props.ui.actionValue.to) {
-            buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
+            buttons = (
+                <NextActionButton className="action-item" actionId={this.props.ui.actionId}
+                                  nextActionId={this.props.ui.nextActionId} showNextAction={this.props.showNextAction}>
+                    Continue
+                </NextActionButton>
+            );
         } else {
             buttons = (<Button className="action-item" onClick={() => this.skip()}>Skip</Button>);
         }
@@ -1511,7 +1570,8 @@ class Action extends React.Component {
     }
 
     render() {
-        let view, buttons;
+        let view,
+            buttons = false;
         const { currentPlayer } = this.props;
         switch (this.props.ui.action) {
             case 'otb':
@@ -1531,7 +1591,11 @@ class Action extends React.Component {
                         </div>
                     );
                 }
-                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
+                buttons = (
+                    <NextActionButton className="action-item" actionId={this.props.ui.actionId}
+                                      nextActionId={this.props.ui.nextActionId} showNextAction={this.props.showNextAction}>
+                        Continue
+                    </NextActionButton>);
                 break;
             case 'farmers-fate':
                 view = (
@@ -1542,7 +1606,12 @@ class Action extends React.Component {
                         </GroupBox>
                     </div>
                 );
-                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
+                buttons = (
+                    <NextActionButton className="action-item" actionId={this.props.ui.actionId}
+                                      nextActionId={this.props.ui.nextActionId} showNextAction={this.props.showNextAction}>
+                        Continue
+                    </NextActionButton>
+                );
                 break;
             case 'ff-uncle-bert':
                 const { cash } = this.props.player;
@@ -1591,7 +1660,6 @@ class Action extends React.Component {
                         </div>
                     </GroupBox>
                 );
-                buttons = (<Fragment />);
                 break;
             case 'money':
                 const { amount, player } = this.props.ui.actionValue;
@@ -1606,7 +1674,12 @@ class Action extends React.Component {
                             </div>
                         </div>
                     </div>);
-                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
+                buttons = (
+                    <NextActionButton className="action-item" actionId={this.props.ui.actionId}
+                                      nextActionId={this.props.ui.nextActionId} showNextAction={this.props.showNextAction}>
+                        Continue
+                    </NextActionButton>
+                );
                 break;
             case 'info':
                 view = (
@@ -1614,7 +1687,12 @@ class Action extends React.Component {
                         <p>{this.props.ui.actionValue}</p>
                     </div>
                 );
-                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
+                buttons = (
+                    <NextActionButton className="action-item" actionId={this.props.ui.actionId}
+                                      nextActionId={this.props.ui.nextActionId} showNextAction={this.props.showNextAction}>
+                        Continue
+                    </NextActionButton>
+                );
                 break;
             case 'harvest':
                 view = (<Harvest rolled={this.props.ui.actionValue.rolled}
@@ -1630,7 +1708,6 @@ class Action extends React.Component {
                                  acres={this.props.ui.actionValue.acres}
                                  autoSkip={this.props.ui.autoSkip}
                                  nextAction={() => this.props.showNextAction()} />);
-                buttons = (<Fragment />);
                 break;
             case 'move':
                 view = (<Moving showNextAction={() => this.props.showNextAction()}
@@ -1645,7 +1722,6 @@ class Action extends React.Component {
                                 setTimerId={this.props.setTimerId}
                                 setMovingSkip={this.props.setMovingSkip}
                                 ui={this.props.ui} />);
-                buttons = (<Fragment />);
                 break;
             case 'resolve-move':
                 view = (<Moving showNextAction={() => this.props.showNextAction()}
@@ -1660,7 +1736,6 @@ class Action extends React.Component {
                                 setTimerId={this.props.setTimerId}
                                 setMovingSkip={this.props.setMovingSkip}
                                 ui={this.props.ui} />);
-                buttons = (<Fragment />);
                 break;
             case 'goto':
                 view = (<Moving showNextAction={() => this.props.showNextAction()}
@@ -1674,11 +1749,9 @@ class Action extends React.Component {
                                 movePlayer={this.props.movePlayer}
                                 autoSkip={this.props.ui.autoSkip}
                                 ui={this.props.ui} />);
-                buttons = (<Fragment />);
                 break;
             case 'pre-rolling':
                 view = (<PreRolling name={this.props.game.currentPlayer} />);
-                buttons = (<Fragment />);
                 break;
             case 'roll':
                 const roll = this.props.ui.actionValue.to -
@@ -1694,8 +1767,8 @@ class Action extends React.Component {
                                  autoSkip={this.props.ui.autoSkip}
                                  skip={(this.props.player.name === this.props.game.currentPlayer ||
                                         currentPlayer.ai)}
+                                 ui={this.props.ui}
                                  showScreenDelay={showScreenDelay} />);
-                buttons = (<Fragment />);
                 break;
             default:
                 if (this.props.player.name === this.props.game.currentPlayer) {
@@ -1714,6 +1787,9 @@ class Action extends React.Component {
                     view = (<Fragment>Waiting for {this.props.game.currentPlayer}</Fragment>);
                 }
         }
+        if (!buttons) {
+            buttons = (<></>);
+        }
         return (
             <div ref={x => this.props.forwardRef(x)}>
                 <Row>

src/components/farm/reducers.js

@@ -123,8 +123,10 @@ const initialState = {
           cardError: false,
           action: false,
           actionValue: null,
+          actionId: -1,
           nextAction: false,
           nextActionValue: null,
+          nextActionId: -1,
           actionChangeHandled: true,
           message: '',
           alerts: {},
@@ -144,6 +146,8 @@ const initialState = {
     profileTurns: 500
 }
 
+let lastActionId = -1;
+
 export default function(state = initialState, action) {
     switch (action.type) {
     case UPDATE_GAME:
@@ -209,15 +213,18 @@ export default function(state = initialState, action) {
                                      maxHeight: action.maxHeight }};
     case SET_NEXT_ACTION:
         return { ...state, ui: { ...state.ui, nextAction: action.action,
-                                 nextActionValue: action.value }};
+                                 nextActionValue: action.value,
+                                 nextActionId: ++lastActionId }};
     case NEXT_UI_ACTION:
         return { ...state, ui: { ...state.ui, action: state.ui.nextAction,
                                  actionValue: state.ui.nextActionValue,
+                                 actionId: state.ui.nextActionId,
                                  autoSkip: false,
                                  actionChangeHandled: !state.ui.nextAction }};
     case NEXT_UI_ACTION_SILENT: // don't set actionChangeHandled
         return { ...state, ui: { ...state.ui, action: state.ui.nextAction,
-                                 actionValue: state.ui.nextActionValue }};
+                                 actionValue: state.ui.nextActionValue,
+                                 actionId: state.ui.nextActionId }};
     case MARK_ACTION_CHANGE_HANDLED:
         return { ...state, ui: { ...state.ui, actionChangeHandled: true }};
     case ALERT:

src/server/farm.scm

@@ -1172,8 +1172,8 @@
                (begin
                  (reconcile-display-cash player game)
                  (safe-set! (game-actions game) '())
-                 (message-players! game player `((action . #f) (value . #f)))
+                 (message-players! game player `((action . "actions-end") (value . #f)))
-                 (create-ws-response player "action" '((action . #f))))
+                 (create-ws-response player "action" '((action . "actions-end") (value . #f))))
                (let* ((action (car (game-actions game)))
                       (name (alist-ref '?action action))
                       (value (alist-ref '?value action)))