wip

WORKLOG.md

@@ -41,6 +41,8 @@
 
 *CLIENT*
 
+theme toasts
+
 mobile info page
 
 rework link

client/assets/styles/styles.css

@@ -455,37 +455,45 @@ header {
 }
 
 .inventory {
-    display: flex;
+    margin-right: 2em;
-    flex-flow: row wrap;
+    grid-area: inventory;
 }
 
-.inventory h2 {
+.inventory .list {
-    flex: 1 0 100%;
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 1em;
+    flex-flow: row wrap;
+    align-items: flex-end;
 }
 
 .inventory figure {
-    flex: 0 0 10%;
+    font-size: 125%;
     display: flex;
     flex-flow: column;
-    margin: 0.5em 1em;
-}
-
-/* heading included */
-.inventory figure:nth-child(3) {
-    margin-right: 2em;
-}
-
-.inventory figure div {
-
 }
 
 .menu-instances {
-    display: flex;
+    height: 100%;
-    flex-flow: column;
+    display: grid;
+
+    grid-template-rows: minmax(min-content, 2fr) 1fr;
+    grid-template-columns: 1fr 1fr;
+
+    grid-template-areas:
+        "constructs constructs"
+        "inventory  games";
 }
 
 .menu-instances .construct-list {
-    flex: 1;
+    grid-area: constructs;
+
+    /* poor man's <hr>*/
+    padding-bottom: 2em;
+    margin-bottom: 2em;
+    border-bottom: 0.1em solid whitesmoke;
 }
 
 .menu-instances .menu-construct {
@@ -493,6 +501,7 @@ header {
 }
 
 .menu-instance-list {
+    grid-area: games;
     flex: 1;
     order: 99;
     flex-flow: row wrap;
@@ -650,4 +659,4 @@ footer button .ready {
 
 .mobile-title {
     display: none;
-}
+}

client/assets/styles/styles.mobile.css

@@ -57,4 +57,14 @@
         display: block;
         margin-bottom: 1em;
     }
+
+    .menu-instances {
+        display: grid;
+
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "constructs"
+            "inventory"
+            "games";
+    }
 }

client/src/actions.jsx

@@ -1,26 +1,27 @@
 export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
-export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
-export const setConstructEditId = value => ({ type: 'SET_CONSTRUCT_EDIT_ID', value });
-export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
-export const setSkip = value => ({ type: 'SET_SKIP', value });
-export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
-export const setInstances = value => ({ type: 'SET_INSTANCES', value });
-export const setNav = value => ({ type: 'SET_NAV', value });
-export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
-export const setInstance = value => ({ type: 'SET_INSTANCE', value });
-export const setInstanceList = value => ({ type: 'SET_INSTANCE_LIST', value });
-export const setPing = value => ({ type: 'SET_PING', value });
-export const setPlayer = value => ({ type: 'SET_PLAYER', value });
-export const setGame = value => ({ type: 'SET_GAME', value });
-export const setResolution = value => ({ type: 'SET_RESOLUTION', value });
-export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
-export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
-export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
-export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });
 export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', value });
 export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });
+export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });
+export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
+export const setConstructEditId = value => ({ type: 'SET_CONSTRUCT_EDIT_ID', value });
+export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
+export const setGame = value => ({ type: 'SET_GAME', value });
 export const setInfo = value => ({ type: 'SET_INFO', value });
+export const setInstance = value => ({ type: 'SET_INSTANCE', value });
+export const setInstanceList = value => ({ type: 'SET_INSTANCE_LIST', value });
+export const setInstances = value => ({ type: 'SET_INSTANCES', value });
 export const setItemEquip = value => ({ type: 'SET_ITEM_EQUIP', value });
+export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
 export const setItemUnequip = value => ({ type: 'SET_ITEM_UNEQUIP', value });
+export const setMtxActive = value => ({ type: 'SET_MTX_ACTIVE', value });
+export const setNav = value => ({ type: 'SET_NAV', value });
+export const setPing = value => ({ type: 'SET_PING', value });
+export const setPlayer = value => ({ type: 'SET_PLAYER', value });
 export const setReclaiming = value => ({ type: 'SET_RECLAIMING', value });
+export const setResolution = value => ({ type: 'SET_RESOLUTION', value });
+export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
+export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
+export const setSkip = value => ({ type: 'SET_SKIP', value });
+export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
+export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
 export const setWs = value => ({ type: 'SET_WS', value });

client/src/components/account.status.jsx

@@ -51,7 +51,7 @@ function BitsBtn(args) {
                 onClick={bitsClick}
                 class="stripe-btn"
                 role="link">
-                Get Bits
+                Get Credits
             </button>
 
         </div>

client/src/components/inventory.jsx

@@ -0,0 +1,60 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+
+const actions = require('./../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            // ws,
+            account,
+        } = state;
+
+        return {
+            account,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setMtxActive(mtx) {
+            dispatch(actions.setMtxActive(mtx));
+        }
+
+        return {
+            setMtxActive,
+        };
+    }
+);
+
+function Inventory(args) {
+    const {
+        account,
+        setMtxActive,
+    } = args;
+
+    return (
+        <div class="inventory">
+            <h1>¤ {account.credits}</h1>
+            <div class='list'>
+                <figure onClick={() => setMtxActive('Reimage')} >
+                    <figcaption>Reimage</figcaption>
+                    <button>¤1</button>
+                </figure>
+                <figure onClick={() => setMtxActive('Rename')} >
+                    <figcaption>Rename</figcaption>
+                    <button>¤1</button>
+                </figure>
+                <figure>
+                    <figcaption>Invader Architecture</figcaption>
+                    <button>∞</button>
+                </figure>
+                <figure>
+                    <figcaption>Molecular Architecture</figcaption>
+                    <button>∞</button>
+                </figure>
+            </div>
+        </div>
+    );
+}
+
+module.exports = addState(Inventory);

client/src/components/list.footer.jsx

@@ -25,22 +25,24 @@ const addState = connect(
 );
 
 function ListFooter(args) {
-    const {
+    return false;
-        showNav,
 
-        navToTeam,
+    // const {
-        setShowNav,
+    //     showNav,
-    } = args;
 
-    return (
+    //     navToTeam,
-        <footer>
+    //     setShowNav,
-            <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
+    // } = args;
-            <button
+
-                onClick={() => navToTeam()}>
+    // return (
-                Back
+    //     <footer>
-            </button>
+    //         <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
-        </footer>
+    //         <button
-    );
+    //             onClick={() => navToTeam()}>
+    //             Back
+    //         </button>
+    //     </footer>
+    // );
 }
 
 module.exports = addState(ListFooter);

client/src/components/list.jsx

@@ -5,12 +5,20 @@ const { stringSort, NULL_UUID, COLOURS } = require('./../utils');
 const { ConstructAvatar } = require('./construct');
 const actions = require('./../actions');
 const InstanceCreateForm = require('./instance.create.buttons');
+const Inventory = require('./inventory');
 
 const idSort = stringSort('id');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, constructs, team, instanceList, account } = state;
+        const {
+            ws,
+            constructs,
+            team,
+            instanceList,
+            account,
+            mtxActive,
+        } = state;
 
         function sendInstanceJoin(instance) {
             if (team.length) {
@@ -27,6 +35,12 @@ const addState = connect(
             return ws.sendInstanceList();
         }
 
+        function selectConstruct(id) {
+            if (!mtxActive) return false;
+            console.log('using', mtxActive, 'on', id);
+            ws.sendMtxApply(id, mtxActive);
+        }
+
         return {
             account,
             constructs,
@@ -35,18 +49,11 @@ const addState = connect(
             sendInstanceState,
             sendInstanceList,
             instanceList,
+
+            mtxActive,
+            selectConstruct
         };
     },
-
-    function receiveDispatch(dispatch) {
-        function editConstruct(id) {
-            dispatch(actions.setConstructEditId(id));
-        }
-
-        return {
-            editConstruct,
-        };
-    }
 );
 
 function List(args) {
@@ -59,7 +66,8 @@ function List(args) {
         sendInstanceList,
         instanceList,
 
-        editConstruct,
+        mtxActive,
+        selectConstruct,
     } = args;
 
     function listElements() {
@@ -81,6 +89,7 @@ function List(args) {
 
         return (
             <div class="menu-instance-list" >
+                <h1>Join Game</h1>
                 <table>
                     <thead>
                         <tr>
@@ -109,7 +118,8 @@ function List(args) {
         .map(construct =>
             <div
                 key={construct.id}
-                // onClick={() => editConstruct(construct.id)}
+                style={ mtxActive ? { cursor: 'pointer' } : {}}
+                onClick={() => selectConstruct(construct.id)}
                 class="menu-construct" >
                 <ConstructAvatar
                     name={construct.name}
@@ -124,22 +134,7 @@ function List(args) {
             <div class="construct-list">
                 {constructPanels}
             </div>
-            <hr />
+            <Inventory />
-            <div class="inventory">
-                <h2>Inventory</h2>
-                <figure>
-                    <figcaption>Reimage</figcaption>
-                    <button>¤1</button>
-                </figure>
-                <figure>
-                    <figcaption>Rename</figcaption>
-                    <button>¤1</button>
-                </figure>
-                <figure>
-                    <figcaption>Invader Architecture</figcaption>
-                    <button>∞</button>
-                </figure>
-            </div>
             {listElements()}
         </main>
     );

client/src/events.jsx

@@ -110,6 +110,10 @@ function registerEvents(store) {
         store.dispatch(actions.setCombiner([null, null, null]));
     }
 
+    function clearMtxActive() {
+        store.dispatch(actions.setMtxActive(null));
+    }
+
     function setActiveSkill(skill) {
         store.dispatch(actions.setActiveSkill(skill));
     }
@@ -208,21 +212,22 @@ function registerEvents(store) {
     }
 
     return {
-        errorPrompt,
         clearCombiner,
+        clearInfo,
         clearInstance,
+        clearMtxActive,
+        errorPrompt,
         setAccount,
-        setActiveSkill,
+        setAccountInstances,
         setActiveItem,
+        setActiveSkill,
         setConstructList,
         setGame,
-        clearInfo,
         setInstance,
         setInstanceList,
-        setAccountInstances,
-        setWs,
-        setPing,
         setItemInfo,
+        setPing,
+        setWs,
     };
 }
 

client/src/keyboard.jsx

@@ -12,7 +12,7 @@ function setupKeys(store) {
     key('esc', () => store.dispatch(actions.setItemEquip(null)));
     key('esc', () => store.dispatch(actions.setItemUnequip(null)));
     key('esc', () => store.dispatch(actions.setVboxHighlight([])));
-    key('esc', () => store.dispatch(actions.setConstructDeleteId(null)));
+    key('esc', () => store.dispatch(actions.setMtxActive(null)));
 }
 
 module.exports = setupKeys;

client/src/reducers.jsx

@@ -26,6 +26,7 @@ module.exports = {
     itemEquip:          createReducer(null, 'SET_ITEM_EQUIP'),
     itemInfo:           createReducer({ combos: [], items: [] }, 'SET_ITEM_INFO'),
     itemUnequip:        createReducer(null, 'SET_ITEM_UNEQUIP'),
+    mtxActive:          createReducer(null, 'SET_MTX_ACTIVE'),
     nav:                createReducer('team', 'SET_NAV'),
     showNav:            createReducer(null, 'SET_SHOW_NAV'),
     ping:               createReducer(null, 'SET_PING'),

client/src/socket.jsx

@@ -139,6 +139,11 @@ function createSocket(events) {
         send({ method: 'instance_ready', params: { instance_id: instanceId } });
     }
 
+    function sendMtxApply(constructId, mtx) {
+        send({ method: 'mtx_apply', params: { construct_id: constructId, mtx } });
+        events.clearMtxActive();
+    }
+
     // -------------
     //   Incoming
     // -------------
@@ -242,12 +247,12 @@ function createSocket(events) {
         // decode binary msg from server
         const blob = new Uint8Array(event.data);
         const res = cbor.decode(blob);
-        const [msgType, params] = res;
+        if (res.err) return errHandler(res.err);
 
+        const [msgType, params] = res;
         if (msgType !== 'Pong') console.log(res);
 
         // check for error and split into response type and data
-        if (res.err) return errHandler(res.err);
         if (!handlers[msgType]) return errorToast(`${msgType} handler missing`);
         return handlers[msgType](params);
     }
@@ -326,6 +331,7 @@ function createSocket(events) {
         sendVboxDiscard,
         sendVboxUnequip,
         sendItemInfo,
+        sendMtxApply,
         startInstanceStateTimeout,
         startGameStateTimeout,
         connect,