shop bois

client/src/actions.jsx

@@ -23,6 +23,7 @@ export const setResolution = value => ({ type: 'SET_RESOLUTION', value });
 export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
 export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
 export const setSkip = value => ({ type: 'SET_SKIP', value });
+export const setShop = value => ({ type: 'SET_SHOP', value });
 export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
 export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
 export const setWs = value => ({ type: 'SET_WS', value });

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>
     );

client/src/events.jsx

@@ -111,6 +111,10 @@ function registerEvents(store) {
         store.dispatch(actions.setAccount(account));
     }
 
+    function setShop(v) {
+        store.dispatch(actions.setShop(v));
+    }
+
     function clearCombiner() {
         store.dispatch(actions.setInfo([]));
         store.dispatch(actions.setCombiner([null, null, null]));
@@ -233,6 +237,7 @@ function registerEvents(store) {
         setInstanceList,
         setItemInfo,
         setPing,
+        setShop,
         setWs,
     };
 }

client/src/reducers.jsx

@@ -35,6 +35,7 @@ module.exports = {
     reclaiming:         createReducer(false, 'SET_RECLAIMING'),
     resolution:         createReducer(null, 'SET_RESOLUTION'),
     skip:               createReducer(false, 'SET_SKIP'),
+    shop:               createReducer(false, 'SET_SHOP'),
     team:               createReducer([null, null, null], 'SET_SELECTED_CONSTRUCTS'),
     vboxHighlight:      createReducer([], 'SET_VBOX_HIGHLIGHT'),
     ws:                 createReducer(null, 'SET_WS'),

client/src/socket.jsx

@@ -124,6 +124,10 @@ function createSocket(events) {
         // events.clearMtxActive();
     }
 
+    function sendMtxBuy(mtx) {
+        send(['MtxBuy', { mtx }]);
+    }
+
     // -------------
     //   Incoming
     // -------------
@@ -133,6 +137,10 @@ function createSocket(events) {
         sendAccountInstances();
     }
 
+    function onAccountShop(shop) {
+        events.setShop(shop);
+    }
+
     function onAccountInstances(list) {
         events.setAccountInstances(list);
         setTimeout(sendAccountInstances, 5000);
@@ -198,6 +206,7 @@ function createSocket(events) {
         AccountState: onAccount,
         AccountConstructs: onAccountConstructs,
         AccountInstances: onAccountInstances,
+        AccountShop: onAccountShop,
         GameState: onGameState,
         InstanceState: onInstanceState,
         ItemInfo: onItemInfo,
@@ -308,6 +317,7 @@ function createSocket(events) {
         sendVboxUnequip,
         sendItemInfo,
         sendMtxApply,
+        sendMtxBuy,
         startInstanceStateTimeout,
         startGameStateTimeout,
         connect,