diff --git a/client/src/Table.css b/client/src/Table.css index 1d5f73c..301a4fb 100755 --- a/client/src/Table.css +++ b/client/src/Table.css @@ -11,11 +11,11 @@ .Loading { position: absolute; - top: calc(50vh - 1.5em); - left: calc(30vw - 1.5em); + top: 1em; + right: 31em; width: 3em !important; height: 3em !important; - z-index: 10000; + z-index: 10010; } .NoNetwork { diff --git a/client/src/Table.js b/client/src/Table.js index 480d3e6..77eed3e 100755 --- a/client/src/Table.js +++ b/client/src/Table.js @@ -868,10 +868,7 @@ class Table extends React.Component { }, 5000); } - componentDidMount() { - this.start = new Date(); - - console.log(`Mounted: ${base}`); + connectWebSocket() { let loc = window.location, new_uri; if (loc.protocol === "https:") { new_uri = "wss"; @@ -879,6 +876,8 @@ class Table extends React.Component { new_uri = "ws"; } new_uri = `${new_uri}://${loc.host}${base}/api/v1/games/ws/${this.id}`; + console.log(`Attempting WebSocket connection to ${new_uri}`); + this.ws = new WebSocket(new_uri); this.ws.onopen = (event) => { @@ -919,12 +918,31 @@ class Table extends React.Component { this.ws.onerror = (event) => { this.setState({ error: event.message }); console.error(`WebSocket error:`, event); + if (!this.websocketReconnect) { + this.websocketReconnect = setTimeout(() => { + delete this.websocketReconnect; + this.connectWebSocket(); + }, 1000); + } }; this.ws.onclose = (event) => { - this.setState({ noNetowrk: true, error: event.message }); console.error(`WebSocket close:`, event); + this.setState({ noNetowrk: true, error: event.message }); + if (!this.websocketReconnect) { + this.websocketReconnect = setTimeout(() => { + delete this.websocketReconnect; + this.connectWebSocket(); + }, 1000); + } }; + } + + componentDidMount() { + this.start = new Date(); + + console.log(`Mounted: ${base}`); + this.connectWebSocket(); const params = {}; if (this.id) { @@ -1050,9 +1068,7 @@ class Table extends React.Component { return (
- { this.state.loading > 0 && - - } + { this.state.loading > 0 && } { this.state.noNetwork &&
} diff --git a/server/routes/games.js b/server/routes/games.js index ac2a363..37d2d3a 100755 --- a/server/routes/games.js +++ b/server/routes/games.js @@ -743,9 +743,7 @@ const setPlayerName = (game, session, name) => { const tmp = game.sessions[key]; if (tmp.name && tmp.name.toLowerCase() === name.toLowerCase()) { if (!tmp.player || (Date.now() - tmp.player.lastActive) > 60000) { - session.color = tmp.color; - session.player = tmp.player; - session.initialSettlement = tmp.initialSettlement; + Object.assign(session, tmp); delete game.sessions[key]; } else { return `${name} is already taken and has been active in the last minute.`;