Added error handling toasts

client/src/events.js

@@ -64,6 +64,29 @@ function registerEvents(registry, events, tutorial) {
         return setCryps(cryps);
     });
 
+    const errMessages = {
+        select_cryps: 'Select your cryps before battle using the numbered buttons next to the cryp avatar',
+        complete_nodes: 'You need to complete the previously connected nodes first',
+    };
+
+    function errorPrompt(type) {
+        const message = errMessages[type];
+        const OK_BUTTON = '<button type="submit">OK</button>';
+        toast.info({
+            theme: 'dark',
+            color: 'black',
+            timeout: false,
+            drag: false,
+            position: 'center',
+            maxWidth: window.innerWidth / 2,
+            close: false,
+            buttons: [
+                [OK_BUTTON, (instance, thisToast) => instance.hide({ transitionOut: 'fadeOut' }, thisToast)],
+            ],
+            message,
+        });
+    }
+
     function loginPrompt() {
         const USER_INPUT = '<input className="input" type="email" placeholder="username" />';
         const PASSWORD_INPUT = '<input className="input" type="password" placeholder="password" />';
@@ -152,6 +175,7 @@ function registerEvents(registry, events, tutorial) {
     tutorial('welcome');
 
     return {
+        errorPrompt,
         loginPrompt,
         setAccount,
         setActiveSkill,

client/src/socket.js

@@ -170,6 +170,7 @@ function createSocket(events) {
     // this object wraps the reply types to a function
     const handlers = {
         cryp_spawn: crypSpawn,
+        cryp_forget: () => true,
         cryp_learn: () => true,
         game_pve: gamePve,
         game_state: gameState,
@@ -184,6 +185,17 @@ function createSocket(events) {
 
     };
 
+    function errHandler(error) {
+        switch (error) {
+            case 'no active zone': return sendZoneCreate();
+            case 'no cryps selected': return events.errorPrompt('select_cryps');
+            case 'node requirements not met': return events.errorPrompt('complete_nodes');
+
+            default: return errorToast(error);
+
+        }
+    }
+
     // decodes the cbor and
     // calls the handlers defined above based on message type
     function onMessage(event) {
@@ -194,8 +206,7 @@ function createSocket(events) {
         console.log(res);
 
         // check for error and split into response type and data
-        if (res.err === 'no active zone') sendZoneCreate();
+        if (res.err) return errHandler(res.err);
-        if (res.err) return errorToast(res.err);
         const { method, params } = res;
         if (!handlers[method]) return errorToast(`${method} handler missing`);
         return handlers[method](params);