cryps list

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;