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,
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>

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

@@ -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:

4
src/server/farm.scm
View File

@@ -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)))