Add disconnection/reconnection alerts

Author: mgrinspan

package-lock.json

@@ -33,6 +33,7 @@
     "socket.io-client": "^3.1.1",
     "vue": "^2.6.12",
     "vue-loader": "^15.9.5",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.6.12",
+    "vue-toasted": "^1.1.28"
   }
 }

package.json

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import VueToasted from 'vue-toasted';
 import * as Sentry from '@sentry/vue';
 import { Integrations as SentryIntegrations } from '@sentry/tracing';
 
@@ -12,6 +13,8 @@ Sentry.init({
 	release: process.env.MIX_COMMIT_HASH,
 });
 
+Vue.use(VueToasted);
+
 // Extend Vue
 const App = Vue.extend({ render: renderer => renderer(Main) });
 

src/app.js

@@ -177,6 +177,8 @@ export default {
 			timer: null,
 			timerFrame: null,
 
+			disconnectedToast: null,
+
 			mobile: false,
 		};
 	},
@@ -189,6 +191,19 @@ export default {
 			this.teamId = matches.groups.team || null;
 			this.socket = io({ transports: ['websocket', 'polling'], query: { game: this.gameId, team: this.teamId } });
 
+			this.socket.on('connect', () => {
+				if(this.disconnectedToast !== null) {
+					this.disconnectedToast.goAway();
+
+					this.$toasted.success('Reconnected!', { duration: 3000 }).goAway();
+				}
+			});
+			this.socket.on('disconnect', () => {
+				this.disconnectedToast?.goAway();
+
+				this.disconnectedToast = this.$toasted.error('Attempting to reconnect...');
+			});
+
 			this.socket.on('game-state', state => {
 				this.state = state;