Hooking in No Network icon

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

client/src/Table.css

@@ -18,6 +18,25 @@
   z-index: 10000;
 }
 
+.NoNetwork {
+  position: absolute;
+  z-index: 10000;
+  display: flex;
+  top: 1em;
+  right: 31em;
+  width: 3em;
+  height: 3em;
+  background-image: url("./assets/no-network.png");
+  background-size: contain;
+  background-position: center; 
+}
+
+.Roberta .Pip-Shape:hover,
+.Roberta .Pip-Shape {
+  background-image:url("./assets/woman-robber.png"); 
+}
+
+
 .BottomBar {
   display: flex;
   margin-right: 30rem;

client/src/Table.js

@@ -527,7 +527,8 @@ class Table extends React.Component {
       signature: "",
       buildActive: false,
       cardActive: undefined,
-      loading: 0
+      loading: 0,
+      noNetwork: false
     };
     this.componentDidMount = this.componentDidMount.bind(this);
     this.throwDice = this.throwDice.bind(this);
@@ -857,6 +858,16 @@ class Table extends React.Component {
     this.setState({ message: message });
   }
 
+  resetKeepAlive() {
+    if (this.keepAlive) {
+      clearTimeout(this.keepAlive);
+    }
+    this.keepAlive = setTimeout(() => {
+      console.error(`No server ping for 5 seconds!`);
+      this.setState({ noNetwork: true });
+    }, 5000);
+  }
+
   componentDidMount() {
     this.start = new Date();
 
@@ -872,6 +883,8 @@ class Table extends React.Component {
 
     this.ws.onopen = (event) => {
       console.log(`WebSocket open:`, event);
+      this.setState({ noNetwork: false });
+      this.resetKeepAlive();
     };
   
     this.ws.onmessage = (event) => {
@@ -892,18 +905,15 @@ class Table extends React.Component {
           this.setError(error);
           break;
         case 'ping':
-          if (this.keepAlive) {
-            clearTimeout(this.keepAlive);
-          }
-          this.keepAlive = setTimeout(() => {
-            console.error(`No server ping for 5 seconds!`);
-          }, 5000);
           this.ws.send(JSON.stringify({ type: 'pong', timestamp: data.ping }));
           break;
         default:
           console.log(`Unknown event type: ${data.type}`);
           break;
       }
+
+      this.resetKeepAlive();
+      this.setState({ noNetwork: false });
     }
 
     this.ws.onerror = (event) => {
@@ -912,7 +922,7 @@ class Table extends React.Component {
     };
 
     this.ws.onclose = (event) => {
-      this.setState({ error: event.message });
+      this.setState({ noNetowrk: true, error: event.message });
       console.error(`WebSocket close:`, event);
     };
 
@@ -1043,6 +1053,8 @@ class Table extends React.Component {
         { this.state.loading > 0 &&
           <CircularProgress className='Loading'/>
         } 
+
+        { this.state.noNetwork && <div className='NoNetwork'/> }
         
         <div style={{display: "inline-flex", flex: 1, flexDirection: "column"}}>
           <Board table={this} game={game}/>