login form

client/src/components/cryp.container.js

@@ -0,0 +1,10 @@
+const { connect } = require('preact-redux');
+
+const InvStats = require('./invstats');
+
+// Add the incident from state as a property
+const addState = connect(
+    state => ({ cryp: state.cryp }),
+);
+
+module.exports = addState(InvStats);

client/src/components/invstats.jsx

@@ -1,8 +1,8 @@
 const preact = require('preact');
 
-// components all the way down
+function InvStats({ cryp }) {
+    if (!cryp) return <div>not ready</div>;
 
-function InvStats() {
     return (
         <div className="tile is-ancestor has-text-centered has-background-grey is-dark is-10">
             <div className="tile is-6">
@@ -23,9 +23,9 @@ function InvStats() {
                 <div className="tile is-parent is-6">
                     <article className="tile is-child notification is-info">
                         <figure className="image">
-                            <svg width="160" height="160" data-jdenticon-value="UltimateCryp"  />
+                            <svg width="160" height="160" data-jdenticon-value={cryp.name} />
                         </figure>
-                        <p className="title">Cryp#XYZ</p>
+                        <p className="title">{cryp.name}</p>
                         <p className="subtitle">The big boy</p>
                     </article>
                 </div>
@@ -44,6 +44,10 @@ function InvStats() {
             <div className="tile is-parent is-6">
                 <article 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>
             </div>
         </div>

client/src/components/login.component.jsx

@@ -0,0 +1,43 @@
+const preact = require('preact');
+
+function renderLogin({ account, submitLogin }) {
+    if (account) return <div>{JSON.stringify(account)}</div>;
+
+    const details = {
+        name: '',
+        password: '',
+    };
+
+    return (
+        <div>
+            <div className="field">
+                <p className="control has-icons-left has-icons-right">
+                    <input className="input" type="email" placeholder="Email" onChange={e => details.name = e.target.value} />
+                    <span className="icon is-small is-left">
+                        <i className="fas fa-user" />
+                    </span>
+                    <span className="icon is-small is-right">
+                        <i className="fas fa-check" />
+                    </span>
+                </p>
+            </div>
+            <div className="field">
+                <p className="control has-icons-left">
+                    <input className="input" type="password" placeholder="Password" onChange={e => details.password = e.target.value} />
+                    <span className="icon is-small is-left">
+                        <i className="fas fa-lock" />
+                    </span>
+                </p>
+            </div>
+            <div className="field">
+                <p className="control">
+                    <button className="button is-success" type="submit" onClick={() => submitLogin(details.name, details.password)}>
+                Login
+                    </button>
+                </p>
+            </div>
+        </div>
+    );
+}
+
+module.exports = renderLogin;

client/src/components/login.container.jsx

@@ -0,0 +1,16 @@
+const { connect } = require('preact-redux');
+
+const Login = require('./login.component');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws } = state;
+        function submitLogin(name, password) {
+            return ws.sendAccountLogin(name, password);
+        }
+
+        return { account: state.account, submitLogin };
+    },
+);
+
+module.exports = addState(Login);

client/src/components/status.component.jsx

@@ -1,6 +0,0 @@
-const preact = require('preact');
-
-module.exports = ({ account }) => {
-    if (account) return <div>{JSON.stringify(account)}</div>;
-    return <div>not logged in</div>;
-};

client/src/components/status.container.js

@@ -1,13 +0,0 @@
-const { connect } = require('preact-redux');
-
-const Status = require('./status.component');
-
-// Add the incident from state as a property
-const addState = connect(
-    state => ({ account: state.account }),
-    // dispatch => ({
-    //     closeDetails() { dispatch(openIncident()); },
-    // }),
-);
-
-module.exports = addState(Status);