tjhintz/farm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Handling lag better stage 1.

Browse Source
This commit is contained in:
Thomas Hintz
2020-04-30 20:54:45 -07:00
parent ce0070ed7e
commit 99b60b5aba
3 changed files with 104 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/farm/Board.jsx
View File

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

11
src/components/farm/reducers.js
View File

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

4
src/server/farm.scm
View File

@@ -1172,8 +1172,8 @@
(begin (begin
(reconcile-display-cash player game) (reconcile-display-cash player game)
(safe-set! (game-actions 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))) (let* ((action (car (game-actions game)))
(name (alist-ref '?action action)) (name (alist-ref '?action action))
(value (alist-ref '?value action))) (value (alist-ref '?value action)))