cryps list

client/src/actions.jsx

@@ -1,8 +1,11 @@
 export const SET_ACCOUNT = 'SET_ACCOUNT';
 export const setAccount = (value) => ({ type: SET_ACCOUNT, value });
 
-export const SET_CRYP = 'SET_CRYP';
-export const setCryp = (value) => ({ type: SET_CRYP, value });
+export const SET_CRYPS = 'SET_CRYPS';
+export const setCryps = (value) => ({ type: SET_CRYPS, value });
+
+export const SET_ACTIVE_CRYP = 'SET_ACTIVE_CRYP';
+export const setActiveCryp = (value) => ({ type: SET_ACTIVE_CRYP, value });
 
 export const SET_WS = 'SET_WS';
 export const setWs = (value) => ({ type: SET_WS, value });

client/src/components/cryp.container.js

@@ -1,16 +0,0 @@
-const { connect } = require('preact-redux');
-
-const CrypPanel = require('./cryp.panel');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws, cryp } = state;
-        function sendCombatPve() {
-            return ws.sendCombatPve(cryp.id);
-        }
-
-        return { cryp, sendCombatPve };
-    }
-);
-
-module.exports = addState(CrypPanel);

client/src/components/cryps.container.js

@@ -0,0 +1,16 @@
+const { connect } = require('preact-redux');
+
+const CrypsPanel = require('./cryps.panel');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws, cryps } = state;
+        function sendCombatPve(crypId) {
+            return ws.sendCombatPve(crypId);
+        }
+
+        return { cryps, sendCombatPve };
+    }
+);
+
+module.exports = addState(CrypsPanel);

client/src/components/cryps.panel.jsx

@@ -1,10 +1,10 @@
 const preact = require('preact');
 
-function CrypPanel({ cryp, sendCombatPve }) {
-    if (!cryp) return <div>not ready</div>;
+function CrypPanel({ cryps, sendCombatPve }) {
+    if (!cryps) return <div>not ready</div>;
 
-    return (
-        <div className="tile is-ancestor has-text-centered has-background-grey is-dark is-10">
+    const crypPanels = cryps.map(cryp => (
+        <div key={cryp.id} className="tile is-ancestor has-text-centered has-background-grey is-dark is-10">
             <div className="tile is-6">
                 <div className="tile is-parent is-vertical is-3">
                     <section className="tile is-child notification is-success">
@@ -51,16 +51,22 @@ function CrypPanel({ cryp, sendCombatPve }) {
                     <button
                         className="button is-success"
                         type="submit"
-                        onClick={() => sendCombatPve()}>
+                        onClick={() => sendCombatPve(cryp.id)}>
                         Start PVE
                     </button>
                 </section>
             </div>
         </div>
-    );
+    ));
     // map is a function that is called on every element of an array
     // so in this ^^ case it calls Icon('Mashy') which returns some jsx
     // that gets put into the dom
+
+    return (
+        <section>
+            {crypPanels}
+        </section>
+    );
 }
 
 module.exports = CrypPanel;

client/src/main.jsx

@@ -9,17 +9,17 @@ const actions = require('./actions');
 const fizzyText = require('../lib/fizzy-text');
 const createSocket = require('./socket');
 
-const CrypContainer = require('./components/cryp.container');
+const CrypsContainer = require('./components/cryps.container');
 const LoginContainer = require('./components/login.container');
-const Navbar = require('./components/navbar');
+// const Navbar = require('./components/navbar');
 
 // Redux Store
 const store = createStore(
     combineReducers({
         account: reducers.accountReducer,
-        cryp: reducers.crypReducer,
+        cryps: reducers.crypsReducer,
         ws: reducers.wsReducer,
-    }),
+    })
 );
 
 store.subscribe(() => console.log(store.getState()));
@@ -36,10 +36,9 @@ jdenticon.config = {
 
 const Cryps = () => (
     <section>
-        <Navbar />
         <LoginContainer />
         <div id="fizzytext" />
-        <CrypContainer />
+        <CrypsContainer />
     </section>
 );
 

client/src/reducers.jsx

@@ -10,10 +10,10 @@ function accountReducer(state = defaultAccount, action) {
     }
 }
 
-const defaultCryp = null;
-function crypReducer(state = defaultCryp, action) {
+const defaultCryps = null;
+function crypsReducer(state = defaultCryps, action) {
     switch (action.type) {
-    case actions.SET_CRYP:
+    case actions.SET_CRYPS:
         return action.value;
     default:
         return state;
@@ -32,6 +32,6 @@ function wsReducer(state = defaultWs, action) {
 
 module.exports = {
     accountReducer,
-    crypReducer,
+    crypsReducer,
     wsReducer,
 };

client/src/socket.jsx

@@ -31,14 +31,19 @@ function createSocket(store) {
 
         account = login;
         store.dispatch(actions.setAccount(login));
+        send({ method: 'account_cryps', params: {} });
         console.log(account);
-        return send({ method: 'cryp_spawn', params: { name: 'drake' } });
+    }
+
+    function accountCryps(response) {
+        const [structName, cryps] = response;
+        store.dispatch(actions.setCryps(cryps));
+        console.log('got my cryps', cryps);
     }
 
     function crypSpawn(response) {
         const [structName, cryp] = response;
         console.log('got a new cryp', cryp);
-        return store.dispatch(actions.setCryp(cryp));
     }
 
     function combatPve(response) {
@@ -74,6 +79,7 @@ function createSocket(store) {
         combat_pve: combatPve,
         account_login: accountLogin,
         account_create: accountLogin,
+        account_cryps: accountCryps,
     };
 
     // decodes the cbor and
@@ -93,8 +99,7 @@ function createSocket(store) {
 
     // Connection opened
     ws.addEventListener('open', function wsOpen(event) {
-        // send({ method: 'account_create', params: { name: 'ntr', password: 'grepgrepgrep' }});
-        // send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
+        send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
     });
 
     // Listen for messages