diff --git a/client/src/App.css b/client/src/App.css index 97c6b52..817653f 100755 --- a/client/src/App.css +++ b/client/src/App.css @@ -19,6 +19,7 @@ body { } .Table .ErrorDialog { + z-index: 10000; display: flex; justify-content: space-around; align-items: center; diff --git a/client/src/App.js b/client/src/App.js index 7973bc6..38b9c5e 100755 --- a/client/src/App.js +++ b/client/src/App.js @@ -45,11 +45,27 @@ const Table = () => { setWs(event.target); setConnecting(false); - /* Request a game-update */ - event.target.send(JSON.stringify({ - type: 'get', - fields: [ 'name', 'id' ] - })); + /* Request a full game-update + * We only need gameId and name for App.js, however in the event + * of a network disconnect, we need to refresh the entire game + * state on reload so all bound components reflect the latest + * state */ + if (loaded) { + event.target.send(JSON.stringify({ + type: 'game-update' + })); + if (name) { + event.target.send(JSON.stringify({ + type: 'player-name', + name + })); + } + } else { + event.target.send(JSON.stringify({ + type: 'get', + fields: [ 'name', 'id' ] + })) + } }; const onWsMessage = (event) => { @@ -97,12 +113,17 @@ const Table = () => { const error = `Connection to Ketr Ketran game server failed! ` + `Connection attempt will be retried every 5 seconds.`; console.error(error); + setWs(undefined); resetConnection(); setError(error); }; const onWsClose = (event) => { + const error = `Connection to Ketr Ketran game was lost. ` + + `Attempting to reconnect...`; + console.error(error); console.log(`ws: close`); + setWs(undefined); resetConnection(); };