bulma shit

client/src/components/body.component.jsx

@@ -1,14 +1,26 @@
 // eslint-disable-next-line
 const preact = require('preact');
 
+const ItemListContainer = require('./item.list.container');
+const CrypSpawnContainer = require('./cryp.spawn.container');
 const CrypListContainer = require('./cryp.list.container');
 const BattleContainer = require('./battle.container');
 
 function renderBody() {
     return (
         <section className="columns">
-            <div className="column is-3">
-                <CrypListContainer />
+            <div className="column is-4">
+                <div className="column">
+                    <CrypSpawnContainer />
+                </div>
+                <div className="columns">
+                    <div className="column is-8">
+                        <CrypListContainer />
+                    </div>
+                    <div className="column">
+                        <ItemListContainer />
+                    </div>
+                </div>
             </div>
             <div className="column">
                 <BattleContainer />

client/src/components/cryp.list.jsx

@@ -1,10 +1,11 @@
 const preact = require('preact');
 
+
 function CrypList({ cryps, sendCombatPve }) {
     if (!cryps) return <div>not ready</div>;
     const crypPanels = cryps.map(cryp => (
 
-        <div key={cryp.id} className="tile is-parent is-vertical box">
+        <div key={cryp.id} className="tile is-vertical box">
             <div className="tile is-vertical is-child">
                 <div className="columns" >
                     <div className="column is-10">
@@ -19,10 +20,10 @@ function CrypList({ cryps, sendCombatPve }) {
 
                 </div>
                 <div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
-                <progress className="progress is-success" value={cryp.hp.value} max={cryp.stam.value}></progress>
+                <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
             </div>
             <button
-                className="button is-success"
+                className="button is-dark"
                 type="submit"
                 onClick={() => sendCombatPve(cryp.id)}>
                 Start PVE
@@ -30,10 +31,7 @@ function CrypList({ cryps, sendCombatPve }) {
         </div>
     ));
     return (
-        <div>
-            <a className="button is-large is-fullwidth">
-                <span>Spawn 👾</span>
-            </a>
+        <div className="tile is-parent is-vertical" >
             {crypPanels}
         </div>
     );

client/src/components/cryp.panel.jsx

@@ -28,7 +28,7 @@ function renderCrypPanel(cryp) {
                             </div>
                         </div>
                         <div className="has-text-centered">5 / 5 HP </div>
-                        <progress className="progress is-success" value="5" max="5"></progress>
+                        <progress className="progress is-dark" value="5" max="5"></progress>
                     </div>
                 </div>
             </div>

client/src/components/cryp.spawn.button.jsx

@@ -0,0 +1,31 @@
+// eslint-disable-next-line
+const preact = require('preact');
+
+function renderSpawnButton({ account, sendCrypSpawn }) {
+    let name = '';
+
+    if (!account) return <div>...</div>;
+
+    return (
+        <div className="columns">
+            <div className="column">
+                <input
+                    className="input"
+                    type="email"
+                    placeholder="cryp name"
+                    onChange={e => (name = e.target.value)}
+                />
+            </div>
+            <div className="column is-3">
+                <button
+                    className="button is-dark is-fullwidth"
+                    type="submit"
+                    onClick={() => sendCrypSpawn(name)}>
+                    Spawn 👾
+                </button>
+            </div>
+        </div>
+    );
+}
+
+module.exports = renderSpawnButton;

client/src/components/cryp.spawn.container.js

@@ -0,0 +1,18 @@
+const { connect } = require('preact-redux');
+
+const CrypSpawnButton = require('./cryp.spawn.button');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws } = state;
+        function sendCrypSpawn(name) {
+            return ws.sendCrypSpawn(name);
+        }
+
+        console.log(ws);
+
+        return { account: state.account, sendCrypSpawn };
+    }
+);
+
+module.exports = addState(CrypSpawnButton);

client/src/components/item.list.container.js

@@ -0,0 +1,16 @@
+const { connect } = require('preact-redux');
+
+const ItemList = require('./item.list');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws, items } = state;
+        function sendItemUse(crypId) {
+            return ws.sendItemUse(crypId);
+        }
+
+        return { items, sendItemUse };
+    }
+);
+
+module.exports = addState(ItemList);

client/src/components/item.list.jsx

@@ -0,0 +1,36 @@
+const preact = require('preact');
+
+function ItemList({ items, sendItemUse }) {
+    if (!items) return <div>...</div>;
+    const itemPanels = items.map(item => (
+
+        <div key={item.id} className="tile is-parent is-vertical box">
+            <div className="tile is-vertical is-child">
+                <div className="columns" >
+                    <div className="column is-8">
+                        <p className="title">{item.action}</p>
+                        <p className="subtitle">∞</p>
+                    </div>
+                    <div className="column">
+                        <figure className="image">
+                            <svg width="40" height="40" data-jdenticon-value={item.action} />
+                        </figure>
+                    </div>
+                </div>
+            </div>
+            <button
+                className="button is-dark"
+                type="submit"
+                onClick={() => sendItemUse(item.id)}>
+                Use
+            </button>
+        </div>
+    ));
+    return (
+        <div className="tile is-parent" >
+            {itemPanels}
+        </div>
+    );
+}
+
+module.exports = ItemList;

client/src/components/login.component.jsx

@@ -43,7 +43,7 @@ function renderLogin({ account, submitLogin }) {
             <div className="field">
                 <p className="control">
                     <button
-                        className="button is-success"
+                        className="button is-dark"
                         type="submit"
                         onClick={() => submitLogin(details.name, details.password)}>
                         Login

client/src/components/sidebar.component.jsx

@@ -1,19 +0,0 @@
-// eslint-disable-next-line
-const preact = require('preact');
-
-const LoginContainer = require('./login.container');
-
-function renderHeader() {
-    return (
-        <section className="hero is-dark">
-            <div className="hero-body">
-                <div className="container">
-                    <h1 className="title">cryps.gg</h1>
-                    <LoginContainer />
-                </div>
-            </div>
-        </section>
-    );
-}
-
-module.exports = renderHeader;