clear rename when selecting new mtxactive, balance error toast

client/src/components/inventory.jsx

@@ -1,8 +1,25 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
+const toast = require('izitoast');
 
 const actions = require('./../actions');
 
+const balanceError = () =>
+    toast.error({
+        theme: 'dark',
+        color: 'black',
+        timeout: false,
+        drag: false,
+        position: 'center',
+        maxWidth: window.innerWidth / 2,
+        close: false,
+        buttons: [
+            ['<button type="submit">OK</button>',
+                (instance, thisToast) => instance.hide({ transitionOut: 'fadeOut' }, thisToast)],
+        ],
+        message: 'Insufficient Balance',
+    });
+
 const addState = connect(
     function receiveState(state) {
         const {
@@ -23,8 +40,11 @@ const addState = connect(
     },
 
     function receiveDispatch(dispatch) {
-        function setMtxActive(mtx) {
+        function setMtxActive(mtx, balance) {
+            if (balance === 0) return balanceError();
+            dispatch(actions.setConstructRename(null));
             dispatch(actions.setMtxActive(mtx));
+            return true;
         }
 
         return {
@@ -37,7 +57,6 @@ function Inventory(args) {
     const {
         account,
         shop,
-
         setMtxActive,
         mtxBuy,
     } = args;
@@ -45,7 +64,7 @@ function Inventory(args) {
     if (!shop) return false;
 
     const useMtx = (item, i) => (
-        <figure key={i} onClick={() => setMtxActive(item)} >
+        <figure key={i} onClick={() => setMtxActive(item, account.balance)} >
             <figcaption>{item}</figcaption>
             <button>¤1</button>
         </figure>

client/src/components/list.jsx

@@ -1,7 +1,7 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
 
-const { stringSort, NULL_UUID, COLOURS } = require('./../utils');
+const { stringSort } = require('./../utils');
 const { ConstructAvatar } = require('./construct');
 const actions = require('./../actions');
 const InstanceCreateForm = require('./instance.create.buttons');
@@ -17,7 +17,6 @@ const addState = connect(
             constructRename,
             team,
             instanceList,
-            account,
             mtxActive,
         } = state;
 
@@ -28,16 +27,11 @@ const addState = connect(
             return false;
         }
 
-        function sendInstanceState(instance) {
-            return ws.sendInstanceState(instance.id);
-        }
-
         function sendInstanceList() {
             return ws.sendInstanceList();
         }
 
         function sendConstructAvatarReroll(id) {
-            if (!mtxActive) return false;
             console.log('using', mtxActive, 'on', id);
             return ws.sendMtxApply(id, mtxActive, '');
         }
@@ -47,7 +41,6 @@ const addState = connect(
         }
 
         return {
-            account,
             constructs,
             instanceList,
             mtxActive,
@@ -55,7 +48,6 @@ const addState = connect(
             team,
             sendConstructRename,
             sendInstanceJoin,
-            sendInstanceState,
             sendInstanceList,
             sendConstructAvatarReroll,
         };
@@ -81,14 +73,12 @@ const addState = connect(
 
 function List(args) {
     const {
-        account,
         team,
         constructs,
         constructRename,
         clearMtxRename,
         setConstructRename,
         sendConstructRename,
-        sendInstanceState,
         sendInstanceJoin,
         sendInstanceList,
         instanceList,
@@ -134,10 +124,6 @@ function List(args) {
         );
     }
 
-    // <div class="controls">
-       // <button>&#9881;</button>
-    // </div>
-
     const constructPanels = constructs
         .filter(c => team.includes(c.id))
         .sort(idSort)
@@ -164,14 +150,13 @@ function List(args) {
                     onClick={() => {
                         if (!mtxActive) return false;
                         if (mtxActive === 'Rename') return setConstructRename(construct.id);
-                        sendConstructAvatarReroll(construct.id);
+                        return sendConstructAvatarReroll(construct.id);
                     }}
                     class="menu-construct" >
                     <ConstructAvatar construct={construct} />
                     {constructName}
                     {confirm}
                     {cancel}
-
                 </div>
             );
         });