shop bois

client/src/components/account.status.jsx

@@ -96,7 +96,7 @@ function AccountStatus(args) {
                 {saw(pingColour(ping))}
                 <div class="ping-text">{ping}ms</div>
             </div>
-            <h3 class="account-header">{`¤${account.credits}`}</h3>
+            <h3 class="account-header">{`¤${account.balance}`}</h3>
             <Elements>
                 <StripeBitsBtn account={account} />
             </Elements>

client/src/components/anims/idle.jsx

@@ -1,7 +1,6 @@
 const anime = require('animejs').default;
 
 function idle(id) {
-    return false;
     const duration = anime.random(2000, 18000);
     const target = document.getElementById(id);
     return anime({

client/src/components/construct.jsx

@@ -31,7 +31,7 @@ class ConstructAvatar extends Component {
             <div
                 class="avatar"
                 id={this.props.construct.id}
-                style={{ 'background-image': `url(/imgs/32809d3b-60e6-4d37-a183-e5d33374613b.svg)` }}
+                style={{ 'background-image': `url(/imgs/${this.props.construct.img}.svg)` }}
             />
         );
     }

client/src/components/inventory.jsx

@@ -6,12 +6,19 @@ const actions = require('./../actions');
 const addState = connect(
     function receiveState(state) {
         const {
-            // ws,
+            ws,
             account,
+            shop,
         } = state;
 
+        function mtxBuy(mtx) {
+            return ws.sendMtxBuy(mtx.variant);
+        }
+
         return {
             account,
+            shop,
+            mtxBuy,
         };
     },
 
@@ -29,29 +36,37 @@ const addState = connect(
 function Inventory(args) {
     const {
         account,
+        shop,
+
         setMtxActive,
+        mtxBuy,
     } = args;
 
+    if (!shop) return false;
+
+    const useMtx = (item, i) => (
+        <figure key={i} onClick={() => setMtxActive(item)} >
+            <figcaption>{item}</figcaption>
+            <button>¤1</button>
+        </figure>
+    );
+
+    const availableMtx = (item, i) => (
+        <figure key={i} onClick={() => mtxBuy(item)} >
+            <figcaption>{item.variant}</figcaption>
+            <button>¤{item.credits}</button>
+        </figure>
+    );
+
     return (
         <div class="inventory">
-            <h1>¤ {account.credits}</h1>
+            <h1>¤ {account.balance}</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>
+                {shop.owned.map(useMtx)}
+            </div>
+            <h1>Shop</h1>
+            <div class='list'>
+                {shop.available.map(availableMtx)}
             </div>
         </div>
     );