wip

client/src/components/account.status.jsx

@@ -51,7 +51,7 @@ function BitsBtn(args) {
                 onClick={bitsClick}
                 class="stripe-btn"
                 role="link">
-                Get Bits
+                Get Credits
             </button>
 
         </div>

client/src/components/inventory.jsx

@@ -0,0 +1,60 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+
+const actions = require('./../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            // ws,
+            account,
+        } = state;
+
+        return {
+            account,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setMtxActive(mtx) {
+            dispatch(actions.setMtxActive(mtx));
+        }
+
+        return {
+            setMtxActive,
+        };
+    }
+);
+
+function Inventory(args) {
+    const {
+        account,
+        setMtxActive,
+    } = args;
+
+    return (
+        <div class="inventory">
+            <h1>¤ {account.credits}</h1>
+            <div class='list'>
+                <figure onClick={() => setMtxActive('Reimage')} >
+                    <figcaption>Reimage</figcaption>
+                    <button>¤1</button>
+                </figure>
+                <figure onClick={() => setMtxActive('Rename')} >
+                    <figcaption>Rename</figcaption>
+                    <button>¤1</button>
+                </figure>
+                <figure>
+                    <figcaption>Invader Architecture</figcaption>
+                    <button>∞</button>
+                </figure>
+                <figure>
+                    <figcaption>Molecular Architecture</figcaption>
+                    <button>∞</button>
+                </figure>
+            </div>
+        </div>
+    );
+}
+
+module.exports = addState(Inventory);

client/src/components/list.footer.jsx

@@ -25,22 +25,24 @@ const addState = connect(
 );
 
 function ListFooter(args) {
-    const {
-        showNav,
+    return false;
 
-        navToTeam,
-        setShowNav,
-    } = args;
+    // const {
+    //     showNav,
 
-    return (
-        <footer>
-            <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
-            <button
-                onClick={() => navToTeam()}>
-                Back
-            </button>
-        </footer>
-    );
+    //     navToTeam,
+    //     setShowNav,
+    // } = args;
+
+    // return (
+    //     <footer>
+    //         <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
+    //         <button
+    //             onClick={() => navToTeam()}>
+    //             Back
+    //         </button>
+    //     </footer>
+    // );
 }
 
 module.exports = addState(ListFooter);

client/src/components/list.jsx

@@ -5,12 +5,20 @@ const { stringSort, NULL_UUID, COLOURS } = require('./../utils');
 const { ConstructAvatar } = require('./construct');
 const actions = require('./../actions');
 const InstanceCreateForm = require('./instance.create.buttons');
+const Inventory = require('./inventory');
 
 const idSort = stringSort('id');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, constructs, team, instanceList, account } = state;
+        const {
+            ws,
+            constructs,
+            team,
+            instanceList,
+            account,
+            mtxActive,
+        } = state;
 
         function sendInstanceJoin(instance) {
             if (team.length) {
@@ -27,6 +35,12 @@ const addState = connect(
             return ws.sendInstanceList();
         }
 
+        function selectConstruct(id) {
+            if (!mtxActive) return false;
+            console.log('using', mtxActive, 'on', id);
+            ws.sendMtxApply(id, mtxActive);
+        }
+
         return {
             account,
             constructs,
@@ -35,18 +49,11 @@ const addState = connect(
             sendInstanceState,
             sendInstanceList,
             instanceList,
+
+            mtxActive,
+            selectConstruct
         };
     },
-
-    function receiveDispatch(dispatch) {
-        function editConstruct(id) {
-            dispatch(actions.setConstructEditId(id));
-        }
-
-        return {
-            editConstruct,
-        };
-    }
 );
 
 function List(args) {
@@ -59,7 +66,8 @@ function List(args) {
         sendInstanceList,
         instanceList,
 
-        editConstruct,
+        mtxActive,
+        selectConstruct,
     } = args;
 
     function listElements() {
@@ -81,6 +89,7 @@ function List(args) {
 
         return (
             <div class="menu-instance-list" >
+                <h1>Join Game</h1>
                 <table>
                     <thead>
                         <tr>
@@ -109,7 +118,8 @@ function List(args) {
         .map(construct =>
             <div
                 key={construct.id}
-                // onClick={() => editConstruct(construct.id)}
+                style={ mtxActive ? { cursor: 'pointer' } : {}}
+                onClick={() => selectConstruct(construct.id)}
                 class="menu-construct" >
                 <ConstructAvatar
                     name={construct.name}
@@ -124,22 +134,7 @@ function List(args) {
             <div class="construct-list">
                 {constructPanels}
             </div>
-            <hr />
-            <div class="inventory">
-                <h2>Inventory</h2>
-                <figure>
-                    <figcaption>Reimage</figcaption>
-                    <button>¤1</button>
-                </figure>
-                <figure>
-                    <figcaption>Rename</figcaption>
-                    <button>¤1</button>
-                </figure>
-                <figure>
-                    <figcaption>Invader Architecture</figcaption>
-                    <button>∞</button>
-                </figure>
-            </div>
+            <Inventory />
             {listElements()}
         </main>
     );