Inform player when they've lost connection

app/scripts/components/dashboard.js

@@ -100,6 +100,8 @@ class DashboardComponent {
           'Requesting new game...' :
         this.session.status === 'roomNotFound' ?
           'This room does not exist.' :
+        this.session.disconnected ?
+          'Sorry, you\'ve lost connection.' :
 
         // If the current player needs to enter a name
         this.session.status === 'newPlayer' ?
@@ -149,7 +151,7 @@ class DashboardComponent {
       ),
 
       // If game is in progress, allow user to end game at any time
-      this.game.inProgress && this.session.status !== 'watchingGame' ? [
+      this.game.inProgress && this.session.status !== 'watchingGame' && !this.session.disconnected ? [
         m('button', { onclick: () => this.endGame(roomCode) }, 'End Game')
       ] :
 

app/scripts/components/game.js

@@ -59,6 +59,11 @@ class GameComponent {
       this.game.restoreFromServer({ game, localUser });
       m.redraw();
     });
+    this.session.on('disconnect', () => {
+      // At this point, the session object's `disconnected` flag is
+      // automatically set to true
+      m.redraw();
+    });
   }
 
   view({ attrs: { roomCode } }) {

app/scripts/models/session.js

@@ -18,6 +18,14 @@ class Session {
     this.executeCallQueue();
   }
 
+  get connected() {
+    return this.socket ? this.socket.connected : false;
+  }
+
+  get disconnected() {
+    return this.socket ? this.socket.disconnected : false;
+  }
+
   executeCallQueue() {
     this.callQueue.forEach(({ method, args }) => {
       this[method](...args);