gross

client/src/components/cryp.container.js

@@ -1,10 +1,16 @@
 const { connect } = require('preact-redux');
 
-const InvStats = require('./invstats');
+const CrypPanel = require('./cryp.panel');
 
-// Add the incident from state as a property
 const addState = connect(
-    state => ({ cryp: state.cryp })
+    function receiveState(state) {
+        const { ws, cryp } = state;
+        function sendCombatPve() {
+            return ws.sendCombatPve(cryp.id);
+        }
+
+        return { cryp, sendCombatPve };
+    }
 );
 
-module.exports = addState(InvStats);
+module.exports = addState(CrypPanel);

client/src/components/cryp.panel.jsx

@@ -1,54 +1,60 @@
 const preact = require('preact');
 
-function InvStats({ cryp }) {
+function CrypPanel({ cryp, sendCombatPve }) {
     if (!cryp) return <div>not ready</div>;
 
     return (
         <div 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">
-                    <article className="tile is-child notification is-success">
+                    <section className="tile is-child notification is-success">
                         <p>Helm Slot</p>
-                    </article>
-                    <article className="tile is-child notification is-success">
+                    </section>
+                    <section className="tile is-child notification is-success">
                         <p>Body Armor</p>
-                    </article>
-                    <article className="tile is-child notification is-success">
+                    </section>
+                    <section className="tile is-child notification is-success">
                         <p>Gloves</p>
-                    </article>
-                    <article className="tile is-child notification is-success">
+                    </section>
+                    <section className="tile is-child notification is-success">
                         <p>Boots</p>
-                    </article>
+                    </section>
                 </div>
                 <div className="tile is-parent is-6">
-                    <article className="tile is-child notification is-info">
+                    <section className="tile is-child notification is-info">
                         <figure className="image">
                             <svg width="160" height="160" data-jdenticon-value={cryp.name} />
                         </figure>
                         <p className="title">{cryp.name}</p>
                         <p className="subtitle">The big boy</p>
-                    </article>
+                    </section>
                 </div>
                 <div className="tile is-parent is-vertical is-3">
-                    <article className="tile is-child notification is-dark">
+                    <section className="tile is-child notification is-dark">
                         <p>Weapon</p>
-                    </article>
-                    <article className="tile is-child notification is-dark">
+                    </section>
+                    <section className="tile is-child notification is-dark">
                         <p>Jewellery</p>
-                    </article>
-                    <article className="tile is-child notification is-dark">
+                    </section>
+                    <section className="tile is-child notification is-dark">
                         <p>Artifact</p>
-                    </article>
+                    </section>
                 </div>
             </div>
             <div className="tile is-parent is-6">
-                <article className="tile is-child notification has-background-grey is-dark">
+                <section className="tile is-child notification has-background-grey is-dark">
                     <p className="title">Stat Area</p>
                     <p>{JSON.stringify(cryp.def)}</p>
                     <p>{JSON.stringify(cryp.dmg)}</p>
                     <p>{JSON.stringify(cryp.hp)}</p>
                     <p>{JSON.stringify(cryp.stam)}</p>
-                </article>
+                    <button
+                        className="button is-success"
+                        type="submit"
+                        onClick={() => sendCombatPve()}>
+                        Start PVE
+                    </button>
+                </section>
             </div>
         </div>
     );
@@ -57,4 +63,4 @@ function InvStats({ cryp }) {
     // that gets put into the dom
 }
 
-module.exports = InvStats;
+module.exports = CrypPanel;

client/src/components/login.container.jsx

@@ -10,7 +10,7 @@ const addState = connect(
         }
 
         return { account: state.account, submitLogin };
-    },
+    }
 );
 
 module.exports = addState(Login);