wordbots · AlexNisnevich · Apr 20, 2023 · Apr 11, 2023 · Apr 11, 2023 · Apr 14, 2023
diff --git a/src/common/actions/socket.ts b/src/common/actions/socket.ts
@@ -57,6 +57,7 @@ export const LEAVE_QUEUE = 'ws:LEAVE_QUEUE';
 export const SPECTATE = 'ws:SPECTATE';
 export const LEAVE = 'ws:LEAVE';
 export const SEND_USER_DATA = 'ws:SEND_USER_DATA';
+export const REJOIN_GAME = 'ws:REJOIN_GAME';
 export const KEEPALIVE = 'ws:KEEPALIVE';
 
 export function host(name: string, format: w.Format, deck: w.DeckInGame, options: w.GameOptions): w.Action {
@@ -112,6 +113,12 @@ export function sendUserData(userData?: fb.User): w.Action {
   };
 }
 
+export function rejoinGame(): w.Action {
+  return {
+    type: REJOIN_GAME
+  };
+}
+
 export function keepalive(): w.Action {
   return {
     type: KEEPALIVE
@@ -143,4 +150,6 @@ export const CLIENT_ID = 'ws:CLIENT_ID';
 export const INFO = 'ws:INFO';
 export const GAME_START = 'ws:GAME_START';
 export const CURRENT_STATE = 'ws:CURRENT_STATE';
+export const PLAYER_DISCONNECTED = 'ws:PLAYER_DISCONNECTED';
+export const PLAYER_RECONNECTED = 'ws:PLAYER_RECONNECTED';
 export const REVEAL_CARDS = 'ws:REVEAL_CARDS';
diff --git a/src/common/components/game/Board.tsx b/src/common/components/game/Board.tsx
@@ -28,7 +28,7 @@ interface BoardProps {
   tutorialStep?: w.TutorialStep
   attack: w.Attack | null
   isGameOver: boolean
-  isWaitingForParse: boolean
+  isPaused: boolean
 
   onSelectTile: (hexId: w.HexId, action?: 'move' | 'attack' | 'place' | null, intermediateMoveHex?: w.HexId | null) => void
   onActivateAbility: (abilityIdx: number) => void
@@ -60,7 +60,7 @@ export default class Board extends React.Component<BoardProps, BoardState> {
   }
 
   get isMyTurn(): boolean {
-    return this.props.currentTurn === this.props.player && !this.props.isWaitingForParse;
+    return this.props.currentTurn === this.props.player && !this.props.isPaused;
   }
 
   get playingAnObject(): boolean {

diff --git a/src/common/components/game/DraftArea.tsx b/src/common/components/game/DraftArea.tsx
@@ -16,6 +16,7 @@ import PlayerName from './PlayerName';
 interface DraftAreaProps {
   player: w.PlayerColor | 'neither'
   usernames: w.PerPlayer<string>
+  disconnectedPlayers: w.PlayerColor[]
   draft: w.DraftState
   format: GameFormat
   isGameOver: boolean
@@ -132,7 +133,7 @@ export default class DraftArea extends React.Component<DraftAreaProps, DraftArea
   }
 
   private renderDraftArea(): JSX.Element {
-    const { player, format, onDraftCards } = this.props;
+    const { player, format } = this.props;
 
     if (player === 'neither') {
       return (
@@ -146,7 +147,14 @@ export default class DraftArea extends React.Component<DraftAreaProps, DraftArea
         </div>
       );
     } else if (this.currentCardGroup) {
-      return <DraftCardPicker cardGroup={this.currentCardGroup} player={player} format={format} onDraftCards={onDraftCards} />;
+      return (
+        <DraftCardPicker
+          cardGroup={this.currentCardGroup}
+          player={player}
+          format={format}
+          onDraftCards={this.handleDraftCards}
+        />
+      );
     } else {
       return (
         <div style={{
@@ -162,7 +170,7 @@ export default class DraftArea extends React.Component<DraftAreaProps, DraftArea
   }
 
   private renderPlayerArea(color: w.PlayerColor, isOpponent: boolean): React.ReactNode {
-    const { draft, player, usernames } = this.props;
+    const { draft, player, usernames, disconnectedPlayers } = this.props;
     const { cardsDrafted } = draft[color];
 
     const numCardsDrafted = cardsDrafted.length;
@@ -174,6 +182,7 @@ export default class DraftArea extends React.Component<DraftAreaProps, DraftArea
           opponent={isOpponent}
           color={color}
           playerName={usernames[color]}
+          isDisconnected={disconnectedPlayers.includes(color)}
         />
 
         <div style={{
@@ -197,6 +206,13 @@ export default class DraftArea extends React.Component<DraftAreaProps, DraftArea
     );
   }
 
+  private handleDraftCards = (player: w.PlayerColor, cards: w.CardInGame[]) => {
+    const { disconnectedPlayers, onDraftCards } = this.props;
+    if (disconnectedPlayers.length === 0) {
+      onDraftCards(player, cards);
+    }
+  }
+
   private handleToggleShowDeck = () => {
     this.setState(({ isDeckOpen }) => ({ isDeckOpen: !isDeckOpen }));
   }

diff --git a/src/common/components/game/GameArea.tsx b/src/common/components/game/GameArea.tsx
@@ -25,10 +25,12 @@ export interface GameProps {
   player: w.PlayerColor | 'neither'
   currentTurn: w.PlayerColor
   usernames: w.PerPlayer<string>
+  disconnectedPlayers: w.PlayerColor[]
   winner: w.GameWinner
   gameOptions: w.GameOptions
   draft: w.DraftState | null
   format: GameFormat
+  joinedInProgressGame: boolean
 
   selectedTile: w.HexId | null
   selectedCard: number | null
@@ -59,6 +61,7 @@ export interface GameProps {
   volume: number
 
   gameOver: boolean
+  isPaused: boolean
   isTutorial: boolean
   isPractice: boolean
   isSandbox: boolean

diff --git a/src/common/components/game/GameAreaContents.tsx b/src/common/components/game/GameAreaContents.tsx
@@ -32,22 +32,23 @@ type GameAreaContentsProps = GameProps & GameAreaHandlerProps & {
 export default class GameAreaContents extends React.PureComponent<GameAreaContentsProps> {
   public render = (): JSX.Element => {
     const {
-      attack, bluePieces, currentTurn, draft, eventQueue, format, gameOptions, gameOver, isAttackHappening,
-      isMyTurn, isMyTurnAndNoActionsLeft, isPractice, isSandbox, isSpectator, isTutorial, isWaitingForParse,
+      attack, bluePieces, currentTurn, disconnectedPlayers, draft, eventQueue, format, gameOptions, gameOver, isAttackHappening,
+      isMyTurn, isMyTurnAndNoActionsLeft, isPaused, isPractice, isSandbox, isSpectator, isTutorial, isWaitingForParse, joinedInProgressGame,
       orangePieces, player, playingCardType, selectedTile, target, tutorialStep, usernames, winner, volume,
       onActivateObject, onClickEndGame, onForfeit, onNextTutorialStep,
       onPassTurn, onPrevTutorialStep, onSelectTile, onTutorialStep, onDraftCards, onSetVolume,
       actualPlayer, boardSize, boardMargin, compactControls, startAnimationComplete, onToggleFullscreen, history
     } = this.props;
 
-    const shouldShowCountdownAnimation = !isTutorial && !isSandbox && !isSpectator;
+    const shouldShowCountdownAnimation = !isTutorial && !isSandbox && !joinedInProgressGame;
 
     if (draft) {
       return (
         <React.Fragment>
           <DraftArea
             player={player}
             usernames={usernames}
+            disconnectedPlayers={disconnectedPlayers}
             draft={draft}
             format={format}
             isGameOver={gameOver}
@@ -83,8 +84,8 @@ export default class GameAreaContents extends React.PureComponent<GameAreaConten
               draft={draft}
               isTimerEnabled={!gameOver && !isTutorial && !isPractice && !isSandbox && !gameOptions.disableTurnTimer && startAnimationComplete}
               isMyTurn={isMyTurn}
+              isPaused={isPaused || isWaitingForParse}
               isAttackHappening={isAttackHappening}
-              isWaitingForParse={isWaitingForParse}
               volume={volume}
               onPassTurn={onPassTurn}
               onSetVolume={onSetVolume}
@@ -104,7 +105,7 @@ export default class GameAreaContents extends React.PureComponent<GameAreaConten
                 player={actualPlayer}
                 compact={compactControls}
                 gameOver={gameOver}
-                isMyTurn={isMyTurn || isSandbox}
+                isMyTurn={(isMyTurn && !isPaused) || isSandbox}
                 isMyTurnAndNoActionsLeft={isMyTurnAndNoActionsLeft}
                 isAttackHappening={isAttackHappening}
                 isWaitingForParse={isWaitingForParse}
@@ -155,7 +156,7 @@ export default class GameAreaContents extends React.PureComponent<GameAreaConten
                   tutorialStep={tutorialStep}
                   attack={attack}
                   isGameOver={!!winner}
-                  isWaitingForParse={isWaitingForParse}
+                  isPaused={isPaused || isWaitingForParse}
                   onSelectTile={onSelectTile}
                   onActivateAbility={onActivateObject}
                   onTutorialStep={onTutorialStep}

diff --git a/src/common/components/game/LeftControls.tsx b/src/common/components/game/LeftControls.tsx
@@ -14,7 +14,7 @@ interface LeftControlsProps {
   isTimerEnabled: boolean
   isMyTurn?: boolean
   isAttackHappening?: boolean
-  isWaitingForParse?: boolean
+  isPaused?: boolean
   volume: number
   style?: React.CSSProperties
   onPassTurn: (player: w.PlayerColor) => void
@@ -25,7 +25,7 @@ interface LeftControlsProps {
 export default class LeftControls extends React.PureComponent<LeftControlsProps> {
   public render(): JSX.Element {
     const {
-      player, currentTurn, draft, isTimerEnabled, isMyTurn, isAttackHappening, isWaitingForParse, volume, style,
+      player, currentTurn, draft, isTimerEnabled, isMyTurn, isAttackHappening, isPaused, volume, style,
       onPassTurn, onSetVolume, onToggleFullscreen
     } = this.props;
 
@@ -50,7 +50,7 @@ export default class LeftControls extends React.PureComponent<LeftControlsProps>
           enabled={isTimerEnabled}
           isMyTurn={!!draft || isMyTurn}
           isAttackHappening={isAttackHappening}
-          isWaitingForParse={isWaitingForParse}
+          isPaused={isPaused}
           onPassTurn={onPassTurn}
         />
         <div

diff --git a/src/common/components/game/PlayerArea.tsx b/src/common/components/game/PlayerArea.tsx
@@ -126,6 +126,7 @@ export default class PlayerArea extends React.Component<PlayerAreaProps, PlayerA
           color={color}
           playerName={gameProps.usernames[color]}
           isSandbox={gameProps.isSandbox}
+          isDisconnected={gameProps.disconnectedPlayers.includes(color) && !gameProps.winner}
         />
         <EnergyCount
           color={color}

diff --git a/src/common/components/game/PlayerName.tsx b/src/common/components/game/PlayerName.tsx
@@ -8,16 +8,18 @@ interface PlayerNameProps {
   playerName: string
   opponent?: boolean
   isSandbox?: boolean
+  isDisconnected?: boolean
 }
 
 export default class PlayerName extends React.PureComponent<PlayerNameProps> {
   public render(): JSX.Element {
-    const { color, playerName, opponent, isSandbox } = this.props;
+    const { color, playerName, opponent, isSandbox, isDisconnected } = this.props;
     return (
       <div
+        className={isDisconnected ? 'blink' : ''}
         style={{
           position: 'absolute',
-          backgroundColor: {orange: ORANGE_PLAYER_COLOR, blue: BLUE_PLAYER_COLOR}[color],
+          backgroundColor: { orange: ORANGE_PLAYER_COLOR, blue: BLUE_PLAYER_COLOR }[color],
           color: 'white',
           fontFamily: '"Carter One", "Carter One-fallback"',
           fontSize: 32,

diff --git a/src/common/components/game/Timer.tsx b/src/common/components/game/Timer.tsx
@@ -11,7 +11,7 @@ interface TimerProps {
   enabled?: boolean
   isMyTurn?: boolean
   isAttackHappening?: boolean
-  isWaitingForParse?: boolean
+  isPaused?: boolean
   onPassTurn: (player: w.PlayerColor) => void
 }
 
@@ -46,7 +46,7 @@ export default class Timer extends React.Component<TimerProps, TimerState> {
   }
 
   public componentDidUpdate(prevProps: TimerProps): void {
-    (this as any).isPaused = this.props.isWaitingForParse;
+    (this as any).isPaused = this.props.isPaused;
 
     if (prevProps.currentTurn !== this.props.currentTurn) {
       this.resetTimer();

diff --git a/src/common/components/play/Lobby.tsx b/src/common/components/play/Lobby.tsx
@@ -3,12 +3,13 @@ import { History } from 'history';
 import * as React from 'react';
 
 import * as m from '../../../server/multiplayer/multiplayer';
-import { CHAT_WIDTH } from '../../constants';
+import { CHAT_WIDTH, MAX_Z_INDEX } from '../../constants';
 import * as w from '../../types';
 import { unpackDeck } from '../../util/decks';
 import { GameFormat, renderFormatDisplayName } from '../../util/formats';
 import Background from '../Background';
 import RouterDialog from '../RouterDialog';
+import SpinningGears from '../SpinningGears';
 import Title from '../Title';
 
 import GameBrowser from './GameBrowser';
@@ -119,7 +120,14 @@ export default class Lobby extends React.Component<LobbyProps, LobbyState> {
         </div>
 
         <Title text="Arena" />
-        <div style={{ padding: `20px ${CHAT_WIDTH + 20}px 0 20px` }}>
+
+        {(!connected) && <div style={{ position: 'fixed', top: 200, width: '100%', zIndex: MAX_Z_INDEX }}>
+          <div style={{ margin: '0 auto' }}>
+            <SpinningGears />
+          </div>
+        </div>}
+
+        <div style={{ padding: `20px ${CHAT_WIDTH + 20}px 0 20px`, opacity: connected ? 1 : 0.2 }}>
           <LobbyStatus
             connecting={connecting}
             connected={connected}

diff --git a/src/common/components/play/Waiting.tsx b/src/common/components/play/Waiting.tsx
@@ -17,6 +17,8 @@ interface WaitingState {
 }
 
 export default class Waiting extends React.Component<WaitingProps, WaitingState> {
+  private timeout: NodeJS.Timeout | undefined = undefined;
+
   public state = {
     waitingSecs: 0
   };
@@ -26,7 +28,13 @@ export default class Waiting extends React.Component<WaitingProps, WaitingState>
     moment.relativeTimeThreshold('s', 60);
     moment.relativeTimeThreshold('ss', 3);
 
-    setTimeout(this.tick, 1000);
+    this.timeout = setTimeout(this.tick, 1000);
+  }
+
+  public componentWillUnmount(): void {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
   }
 
   public render(): JSX.Element {
@@ -59,7 +67,7 @@ export default class Waiting extends React.Component<WaitingProps, WaitingState>
               ...
             </div>
           </div>
-          { inQueue &&
+          {inQueue &&
             <div>
               {queueSize} player(s) in queue.{' '}
               <Button
@@ -78,6 +86,6 @@ export default class Waiting extends React.Component<WaitingProps, WaitingState>
 
   private tick = () => {
     this.setState((state) => ({ waitingSecs: state.waitingSecs + 1 }));
-    setTimeout(this.tick, 1000);
+    this.timeout = setTimeout(this.tick, 1000);
   }
 }
diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -19,6 +19,7 @@ export const ENABLE_ULTRA_VERBOSE_DEBUG_GAME_LOG = false;  // logs ALL debug mes
 
 // Server settings.
 
+export const DISCONNECT_FORFEIT_TIME_SECS = 30; // How long the server will wait after a player disconnects before forfeiting that player's game
 export const ENABLE_OBFUSCATION_ON_SERVER = false; // Don't set to true until all the bugs are worked out!
 
 // Game rules.