summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorThomas Hintz <t@thintz.com>2020-04-30 20:54:45 -0700
committerThomas Hintz <t@thintz.com>2020-04-30 20:54:45 -0700
commit99b60b5abae0609c17b257b6c237173c4a44ae22 (patch)
tree55c567a7acc29c872fe16fded7e60d5118213b9a
parentce0070ed7e9bdcd5317c6dbb6578b3eee9977d71 (diff)
downloadfarm-99b60b5abae0609c17b257b6c237173c4a44ae22.tar.gz
Handling lag better stage 1.
-rw-r--r--src/components/farm/Board.jsx110
-rw-r--r--src/components/farm/reducers.js11
-rw-r--r--src/server/farm.scm4
3 files changed, 104 insertions, 21 deletions
diff --git a/src/components/farm/Board.jsx b/src/components/farm/Board.jsx
index 8c1e2fd..156be60 100644
--- a/src/components/farm/Board.jsx
+++ b/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>
diff --git a/src/components/farm/reducers.js b/src/components/farm/reducers.js
index 8e79603..8a957e5 100644
--- a/src/components/farm/reducers.js
+++ b/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:
diff --git a/src/server/farm.scm b/src/server/farm.scm
index cdf67ba..038c848 100644
--- a/src/server/farm.scm
+++ b/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)))
- (create-ws-response player "action" '((action . #f))))
+ (message-players! game player `((action . "actions-end") (value . #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)))