diff --git a/client/src/modules/front_end_components/HTMLFragments.js b/client/src/modules/front_end_components/HTMLFragments.js index c0261f7..04aa487 100644 --- a/client/src/modules/front_end_components/HTMLFragments.js +++ b/client/src/modules/front_end_components/HTMLFragments.js @@ -114,6 +114,7 @@ export const HTMLFragments = {
+
diff --git a/client/src/modules/game_state/states/InProgress.js b/client/src/modules/game_state/states/InProgress.js index de8c8cb..76b76cb 100644 --- a/client/src/modules/game_state/states/InProgress.js +++ b/client/src/modules/game_state/states/InProgress.js @@ -523,11 +523,25 @@ function renderPotentialMods (gameState, group, transferModHandlers, socket) { if (transferPrompt !== null) { transferPrompt.innerHTML = ''; } - socket.emit( + socket.timeout(5000).emit( globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.TRANSFER_MODERATOR, gameState.accessCode, - { personId: member.id } + { personId: member.id }, + (err) => { + if (err) { + console.error(err); + socket.emit( + globals.SOCKET_EVENTS.IN_GAME_MESSAGE, + globals.EVENT_IDS.FETCH_GAME_STATE, + stateBucket.currentGameState.accessCode, + { personId: stateBucket.currentGameState.client.cookie }, + (gameState) => { + SharedStateUtil.gameStateAckFn(gameState, socket); + } + ); + } + } ); }); } diff --git a/client/src/modules/game_state/states/Lobby.js b/client/src/modules/game_state/states/Lobby.js index 49e9fa6..1e018b7 100644 --- a/client/src/modules/game_state/states/Lobby.js +++ b/client/src/modules/game_state/states/Lobby.js @@ -15,13 +15,25 @@ export class Lobby { this.startGameHandler = (e) => { e.preventDefault(); Confirmation('Start game and deal roles?', () => { - socket.emit( + socket.timeout(5000).emit( globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.START_GAME, stateBucket.currentGameState.accessCode, null, - () => { - this.removeStartGameFunctionalityIfPresent(); + (err) => { + if (err) { + socket.emit( + globals.SOCKET_EVENTS.IN_GAME_MESSAGE, + globals.EVENT_IDS.FETCH_GAME_STATE, + stateBucket.currentGameState.accessCode, + { personId: stateBucket.currentGameState.client.cookie }, + (gameState) => { + SharedStateUtil.gameStateAckFn(gameState, socket); + } + ); + } else { + this.removeStartGameFunctionalityIfPresent(); + } } ); }); @@ -108,19 +120,6 @@ export class Lobby { document.getElementById('spectator-count') ); }); - - // this.socket.on(globals.EVENT_IDS.PLAYER_LEFT, (player) => { - // removeStartGameFunctionalityIfPresent(this.stateBucket.currentGameState, this.startGameHandler); - // toast(player.name + ' has left!', 'error', false, true, 'short'); - // const index = this.stateBucket.currentGameState.people.findIndex(person => person.id === player.id); - // if (index >= 0) { - // this.stateBucket.currentGameState.people.splice( - // index, - // 1 - // ); - // this.populatePlayers(); - // } - // }); } displayStartGamePromptForModerators () { diff --git a/client/src/modules/game_state/states/shared/SharedStateUtil.js b/client/src/modules/game_state/states/shared/SharedStateUtil.js index 614392f..2ac7d92 100644 --- a/client/src/modules/game_state/states/shared/SharedStateUtil.js +++ b/client/src/modules/game_state/states/shared/SharedStateUtil.js @@ -12,6 +12,17 @@ import { ModalManager } from '../../../front_end_components/ModalManager.js'; // This constant is meant to house logic that is utilized by more than one game state export const SharedStateUtil = { + gameStateAckFn: (gameState, socket) => { + stateBucket.currentGameState = gameState; + processGameState( + stateBucket.currentGameState, + gameState.client.cookie, + socket, + true, + true + ); + }, + restartHandler: (stateBucket) => { XHRUtility.xhr( '/api/games/' + stateBucket.currentGameState.accessCode + '/restart', @@ -45,23 +56,13 @@ export const SharedStateUtil = { }, setClientSocketHandlers: (stateBucket, socket) => { - const commonAckLogic = (gameState) => { - stateBucket.currentGameState = gameState; - processGameState( - stateBucket.currentGameState, - gameState.client.cookie, - socket, - true, - true - ); - }; const startGameStateAckFn = (gameState) => { - commonAckLogic(gameState); + SharedStateUtil.gameStateAckFn(gameState, socket); toast('Game started!', 'success'); }; const restartGameStateAckFn = (gameState) => { - commonAckLogic(gameState); + SharedStateUtil.gameStateAckFn(gameState, socket); toast('Game restarted!', 'success'); }; @@ -86,13 +87,14 @@ export const SharedStateUtil = { stateBucket.currentGameState.accessCode, { personId: stateBucket.currentGameState.client.cookie }, function (gameState) { + const oldUserType = stateBucket.currentGameState.client.userType; stateBucket.currentGameState = gameState; processGameState( stateBucket.currentGameState, gameState.client.cookie, socket, true, - true + gameState.client.userType !== oldUserType ); } ); @@ -165,27 +167,24 @@ function processGameState ( refreshPrompt = true, animateContainer = false ) { - const containerAnimation = document.getElementById('game-state-container').animate( - [ - { opacity: '0', transform: 'translateY(10px)' }, - { opacity: '1', transform: 'translateY(0px)' } + if (animateContainer) { + document.getElementById('game-state-container').animate( + [ + { opacity: '0', transform: 'translateY(10px)' }, + { opacity: '1', transform: 'translateY(0px)' } + ], { + duration: 500, + easing: 'ease-in-out', + fill: 'both' + }); + document.getElementById('client-container').animate([ + { opacity: '0' }, + { opacity: '1' } ], { duration: 500, - easing: 'ease-in-out', + easing: 'ease-out', fill: 'both' }); - const clientAnimation = document.getElementById('client-container').animate([ - { opacity: '0' }, - { opacity: '1' } - ], { - duration: 500, - easing: 'ease-out', - fill: 'both' - }); - - if (animateContainer) { - containerAnimation.play(); - clientAnimation.play(); } displayClientInfo(currentGameState.client.name, currentGameState.client.userType); diff --git a/client/src/styles/game.css b/client/src/styles/game.css index 5972d24..b588c67 100644 --- a/client/src/styles/game.css +++ b/client/src/styles/game.css @@ -60,7 +60,6 @@ display: flex; width: 95%; margin: 1em auto 140px auto; - animation: fade-in-slide-up 2s; } #game-state-container h2 { diff --git a/server/modules/Events.js b/server/modules/Events.js index f497937..65cf6a6 100644 --- a/server/modules/Events.js +++ b/server/modules/Events.js @@ -34,21 +34,6 @@ const Events = [ ); } }, - { - id: EVENT_IDS.REMOVE_SPECTATOR, - stateChange: (game, socketArgs, vars) => { - const spectatorIndex = game.people.findIndex(person => person.userType === globals.USER_TYPES.SPECTATOR && person.id === socketArgs.personId); - if (spectatorIndex >= 0) { - game.people.splice(spectatorIndex, 1); - } - }, - communicate: (game, socketArgs, vars) => { - vars.gameManager.namespace.in(game.accessCode).emit( - globals.EVENT_IDS.REMOVE_SPECTATOR, - GameStateCurator.mapPerson(socketArgs) - ); - } - }, { id: EVENT_IDS.FETCH_GAME_STATE, stateChange: (game, socketArgs, vars) => { @@ -183,18 +168,10 @@ const Events = [ } }, communicate: (game, socketArgs, vars) => { - const moderator = vars.gameManager.findPersonByField(game, 'id', game.currentModeratorId); - const previousModerator = vars.gameManager.findPersonByField(game, 'id', game.previousModeratorId); - if (moderator && vars.gameManager.namespace.sockets.get(moderator.socketId)) { - vars.gameManager.namespace.to(moderator.socketId).emit(globals.EVENTS.SYNC_GAME_STATE); + if (vars.ackFn) { + vars.ackFn(); } - if (previousModerator && vars.gameManager.namespace.sockets.get(previousModerator.socketId)) { - vars.gameManager.namespace.to(previousModerator.socketId).emit(globals.EVENTS.SYNC_GAME_STATE); - } - vars.gameManager.namespace.to(game.accessCode).emit(globals.EVENT_IDS.UPDATE_SPECTATORS, game.people - .filter(p => p.userType === globals.USER_TYPES.SPECTATOR) - .map(spectator => GameStateCurator.mapPerson(spectator)) - ); + vars.gameManager.namespace.to(game.accessCode).emit(globals.EVENT_IDS.SYNC_GAME_STATE); } }, {