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 (