Added WebSocket reconnect with keepalive

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

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 {

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 (
       <div className="Table">
-        { this.state.loading > 0 &&
-          <CircularProgress className='Loading'/>
-        } 
+        { this.state.loading > 0 && <CircularProgress className='Loading'/> } 
 
         { this.state.noNetwork && <div className='NoNetwork'/> }
         

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.`;