bulma shit

client/src/actions.jsx

@@ -4,6 +4,9 @@ export const setAccount = (value) => ({ type: SET_ACCOUNT, value });
 export const SET_CRYPS = 'SET_CRYPS';
 export const setCryps = (value) => ({ type: SET_CRYPS, value });
 
+export const SET_ITEMS = 'SET_ITEMS';
+export const setItems = (value) => ({ type: SET_ITEMS, value });
+
 export const SET_BATTLE = 'SET_BATTLE';
 export const setBattle = (value) => ({ type: SET_BATTLE, value });
 

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">
+            <div className="column is-4">
-                <CrypListContainer />
+                <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>
+        <div className="tile is-parent is-vertical" >
-            <a className="button is-large is-fullwidth">
-                <span>Spawn 👾</span>
-            </a>
             {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;

client/src/main.jsx

@@ -15,9 +15,10 @@ const Body = require('./components/body.component');
 // Redux Store
 const store = createStore(
     combineReducers({
-        battle: reducers.battleReducer,
         account: reducers.accountReducer,
+        battle: reducers.battleReducer,
         cryps: reducers.crypsReducer,
+        items: reducers.itemsReducer,
         ws: reducers.wsReducer,
     })
 );

client/src/reducers.jsx

@@ -20,6 +20,16 @@ function crypsReducer(state = defaultCryps, action) {
     }
 }
 
+const defaultItems = null;
+function itemsReducer(state = defaultItems, action) {
+    switch (action.type) {
+    case actions.SET_ITEMS:
+        return action.value;
+    default:
+        return state;
+    }
+}
+
 const defaultBattle = null;
 function battleReducer(state = defaultBattle, action) {
     switch (action.type) {
@@ -44,5 +54,6 @@ module.exports = {
     battleReducer,
     accountReducer,
     crypsReducer,
+    itemsReducer,
     wsReducer,
 };

client/src/socket.jsx

@@ -86,7 +86,7 @@ function createSocket(store) {
 
     function itemList(response) {
         const [structName, items] = response;
-        console.log('got my items', items);
+        store.dispatch(actions.setItems(items));
     }
 
     // -------------
@@ -101,6 +101,10 @@ function createSocket(store) {
         send({ method: 'account_login', params: { name, password } });
     }
 
+    function sendCrypSpawn(name) {
+        send({ method: 'cryp_spawn', params: { name } });
+    }
+
     function sendCombatPve(id) {
         send({ method: 'combat_pve', params: { id } });
     }
@@ -139,6 +143,7 @@ function createSocket(store) {
     return {
         sendAccountLogin,
         sendCombatPve,
+        sendCrypSpawn,
         connect,
     };
 }

server/WORKLOG.md

@@ -28,10 +28,16 @@
 
 * Blockchain Integration?
 
+# Principles
+* Experience something
+* Express something
+* Prove something
 
 # Mechanic Ideas
-
 teams
+1v1 2v2 3v3
+
+
 
 physical, magic, pure dmg?
   elemental?