From 3f97e66f46e11716f29545c8c3f7160ad135c42d Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Mon, 28 Feb 2022 18:59:36 -0800
Subject: [PATCH] Hooking in No Network icon

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Table.css             |  19 +++++++++++++++++++
 client/src/Table.js              |  28 ++++++++++++++++++++--------
 client/src/assets/no-network.png | Bin 0 -> 1452 bytes
 3 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100755 client/src/assets/no-network.png

diff --git a/client/src/Table.css b/client/src/Table.css
index e3f1ca6..1d5f73c 100755
--- a/client/src/Table.css
+++ b/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;
diff --git a/client/src/Table.js b/client/src/Table.js
index 100270e..480d3e6 100755
--- a/client/src/Table.js
+++ b/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}/>
diff --git a/client/src/assets/no-network.png b/client/src/assets/no-network.png
new file mode 100755
index 0000000000000000000000000000000000000000..e2c65a9d70708b059d53c3d921d4ae51e1e6a8be
GIT binary patch
literal 1452
zcmb7EX)qfI6plnfoI7=f&_q&dO<hq(UC|`&v#OV)*k)CmAn8zb)!9l_sryc;wyI05
zS`rb0E*eGA7Ih@6X;}Bw(xO&(raL?PZ|5D~y!XBL&HMFe?yh#y5-Jh^06^No9)DsV
zFMJDe$bJr+&ONygkU%FpJYese-D5w>1^~bT4tSfBktK_zZJ}_2e7AK8@@7s_K`Oo;
zn|$zqy^*}=It~pkzokl|StHxgCyvG0ivv53`c%!La<GYyhukY6t2lA-1M*$AsXl>t
ziUGBx!_FW&U^hbese7@E=Qm}ia<;kf8pizmz{1P%rmOzSHv+zUNYtT6)r%uX!V?I5
z10J8Js9a}wmz+axtK9)vi0r`j>VCD1HHe?&h^^s@k>gHEqY8V7G(<3{$Yk$S5Pxel
z>w%OU9;TUU===k*0KsLjv1;Q-y;A%BuJmnk0um2*ihA6DR(u;f+m96L9z+`BzPFdv
zvxHCTwGtHqG5-?z@7h1=|BJ{R9EKR<3JKHH^*B{`wKF1qkXER`Bz~78Imok1*iI<*
z_}a$M)7Vznl3|F)I7Ra5U{_Fv`*G3+BQ}Kxp2(+tE&wXVTT6`k(&k*jq-98}l;A^P
ziRfq1f)$@mOOCcbJK6Xx$~(I(B8EKkvyZ4*`gN=@UPqx}ghtADEkcA7ftz%=$}8P4
zh$+wlydbiaI;8HeVk%Jru9dDEepp#J7z771<u>2cw2HJy!QbzxMk+=CyD85)g02``
zdM4lHk_qKYW{rfanL-<G)J+1XK*koIlwgCFl_6Vsk7ZVTXk?3wz1EEYSXZ}0rdig=
zI%Wk6CNF|?X^qASV*%0`X$V$)+i290C!9`&MrMY<`A>f1SPD$Z#!BPbz~L)}5|ns>
z<%ie$kZzky?W~)v*=1C{Y1auIj<d`*hB3VBcmcPTcQLwjg=Up&WW%*`&%G;?YNeaH
z)4O%mlal{Jy1r)fna5Zho9I@kS%>~om)YK!-wdVZ){OT;maI+uglG8Yh)g4oN@Yv_
zCU)#Jo=KF5;>~OJTpMf)zRNolGh2)_;~+g^0w(}6Vx%Vfve`{Bu1sY}Vhi%i=EENA
zY%04v;m-C0A&@wf$8hufQbgN7q@p^aUy@~K_!@?G^e{j$Nu|9MHIv6Igf)~k44Y5E
zYySx0U@Dd}VDseirNo^h3sc4SYeS8t&T)rEb>^N5tD>`;B{gJ;=G3?Jb~TOIKtXtt
zQA+x}q9Bv5`E@ZE#Z@&6rz0CLK#Mp~zK(z2Pfr&%7#DdVa|TPGxRuc=!xu?~6Q9)k
zUM*KQvezr7?3>swwtBX*kuDoJb*X`e8!T?pA7&miA9L3HZb?u(Jg>@Y_k~l_FZpUA
z^(bkAEMM9@`uRx36xe5jSG8)Ulp)6D0+<^81bUMa-^-2ZSdxaUM3K#(&!Q%m)%dz@
zOhy=Ca@i_0R89-qBD*}(oTy9ykKOrDO}A2vUA4RyH8MPdW6UTzC9@l?WV+|n)&y;+
zceNWLUT>rBJNsr~u(rh{eg&>th<HJ)vAo@WOkxPd94|t{dLqC|sqPB0(=yjrjm@{-
z$6-8A+nh>Z5$M9Oa?@36ewA&`&G_?p?_!RVLW9@kcj(_)j%#K+`f#)vCMq({Z8B_N
zJeI;%Wz1%_Oz}-!_~f1PO1dZY)ko7oG@Qgvj;_zw>S{_c59+BQ``jk4N{!H<KEKqo
zJlYsmS%Pg@tQhrsvQUoE_XmUt1LEc`CY0WszT5DZ2jbHG3tpEen@)M>I&fnj)bwR~
zdv_Y7TnV=4oz823zv&AHHqmvswxGx?!R5hS)m@dP-)4DXPfwi}Z4KgV&mzBqUV8c(
U%k{76@4sJw1Hlzvd)z<qFY6(w(EtDd

literal 0
HcmV?d00001