handlePing = () => {
const { curUser, game } = this.props;
const hasJoined = isPlayer(game, curUser);
if (hasJoined) {
const { ping } = getCurPlayer(game, curUser);
const now = Date.now();
// Prevent flooding the network with hysterical pings
if (!ping || now - ping > 500) {
this.props.ping();
}
}
};
handleSelectP2 = () => {
const { curUser, game, playerPause } = this.props;
const { status } = getCurPlayer(game, curUser);
if (game.players.length > 1) {
throw new Error('Game already has two players');
}
// READY status for a solo player means the game is running
// Is status is LOST the player will see the invite screen anyway
if (status === 'READY') {
playerPause();
}
};
render() {
const { jsReady, curUser, game } = this.props;
const { isMobile } = this.state;
const hasJoined = isPlayer(game, curUser);
const curPlayer = getCurPlayer(game, curUser);
const otherPlayer = getOtherPlayer(game, curPlayer);
return (
<GameContainer
outer={
isMobile && (
<FadeIn>
<LandscapeControls />
</FadeIn>
)
}
>
<GamePreview
curUser={curUser}
game={game}
screen={this.renderScreens()}
onSelectP2={
// I know, right...
// We only want to enable this on READY state (when game is running
// for solo player), because in other states (new game and game
// over) we already show the invite screen.
jsReady && hasJoined && curPlayer.status === 'READY' && !otherPlayer
? this.handleSelectP2
: undefined
}
showFooter
/>
<PortraitControls />
</GameContainer>
);
}
renderScreens() {
const { jsReady, curUser, game, backfills } = this.props;
const { isWatching } = this.state;
const hasJoined = isPlayer(game, curUser);
const disabled = Boolean(!jsReady || backfills[game.id]);
// P1 is the current user's player, P2 is the other (in multiplayer games)
const curPlayer = getCurPlayer(game, curUser);
const otherPlayer = getOtherPlayer(game, curPlayer);
if (isWatching) {
return this.renderScreen(this.renderMenuBtn(), false);
}
if (!hasJoined && otherPlayer) {
return this.renderScreen(
<GameFull disabled={disabled} onWatch={this.handleWatch} />
);
}
if (!curUser) {
return this.renderScreen(<Auth />);
}
if (!hasJoined) {
return this.renderScreen(
<JoinGame
disabled={disabled}
onWatch={this.handleWatch}
onJoin={this.handleJoin}
/>
);
}
// No screen when current user joined and game is running
if (allPlayersReady(game)) {
return null;
}
if (curPlayer.status === 'LOST' || curPlayer.status === 'WON') {
return this.renderScreen(
<GameOver
disabled={disabled}
curUser={curUser}
game={game}
onRestart={this.handleReady}
/>
);
}
if (!otherPlayer) {
if (curPlayer.status === 'PAUSE') {
return this.renderScreen(
<Invite
disabled={disabled}
gameId={game.id}
onPlay={this.handleReady}
/>
);
}
// curPlayer status is 'PENDING', because if it wouldn've been 'READY'
// allPlayersReady(game) would've returned true
return this.renderScreen(
<NewGame
disabled={disabled}
gameId={game.id}
onPlay={this.handleReady}
/>
);
}
if (curPlayer.status === 'READY') {
return this.renderScreen(
<WaitingForOther
disabled={disabled}
curPlayer={curPlayer}
onPing={this.handlePing}
/>
);
}
// curPlayer.status === 'PENDING'
return this.renderScreen(
<GetReady
disabled={disabled}
otherPlayer={otherPlayer}
onReady={this.handleReady}
/>
);
}