mess with styles and reclaim

html-client/cryps.css

@@ -174,7 +174,7 @@ button:hover {
 
 .vbox-btn {
     margin: 0;
-    padding: 0.5em;
+    padding: 0 0.5em;
     background-color: whitesmoke;
     color: black;
 }
@@ -191,16 +191,12 @@ button:hover {
 
 .vbox-table td {
     border: 1px solid whitesmoke;
-    padding: 0.5em;
+    padding: 0 0.5em;
     text-align: center;
     height: 40px;
     cursor: pointer;
 }
 
-.vbox-table th:first-child, td:first-child {
-    padding: 0.5em;
-}
-
 .spacer {
     min-width: 100%;
 }
@@ -213,19 +209,35 @@ button:hover {
         this controls the size of the box
         as it fills the whole container
     */
-    padding: 0 2em 0 0;
-    margin: 0 0 2em 0;
+    padding: 0 1em 2em 0;
+}
+
+/*cheeky one to push them in line with the buttons */
+.cryp-box:first-child {
+    margin-top: -2.5em;
 }
 
 .cryp-box figure {
     margin: 0;
-    flex-grow: 1;
+    flex: 1 1 50%;
     border: 1px solid whitesmoke;
     text-align: center;
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: column;
 }
 
 .cryp-box figure figcaption {
-    /*border-top: 1px solid whitesmoke;*/
+}
+
+.cryp-box .stats figure {
+    border: 0;
+    align-items: center
+}
+
+.cryp-box .stats {
+    border-top-width: 0;
+    border: 1px solid whitesmoke;
 }
 
 .cryp-box .skills {

html-client/src/actions.jsx

@@ -25,5 +25,8 @@ export const setActiveIncoming = value => ({ type: SET_ACTIVE_INCOMING, value })
 export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL';
 export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: crypId ? { crypId, skill } : null });
 
+export const SET_RECLAIMING = 'SET_RECLAIMING';
+export const setReclaiming = value => ({ type: SET_RECLAIMING, value });
+
 export const SET_WS = 'SET_WS';
 export const setWs = value => ({ type: SET_WS, value });

html-client/src/components/vbox.component.jsx

@@ -1,5 +1,4 @@
 const preact = require('preact');
-// const key = require('keymaster');
 
 function convertVar(v) {
     return v || '';
@@ -9,25 +8,18 @@ function Vbox(args) {
     const {
         instance,
         combiner,
-        setCombiner,
+        reclaiming,
         sendVboxAccept,
         sendVboxDiscard,
         sendVboxReclaim,
         sendVboxCombine,
+        setCombiner,
+        setReclaiming,
     } = args;
 
     const { vbox } = instance;
     if (!instance.vbox) return false;
 
-    // lots of rubbish to make it flow nice
-    function combinerAdd(i) {
-        if (combiner.indexOf(i) === -1) {
-            const insert = combiner.findIndex(j => j === null);
-            combiner[insert] = i;
-            return setCombiner(combiner);
-        }
-        return setCombiner([i, null, null]);
-    }
 
     function combinerRmv(i) {
         combiner[i] = null;
@@ -57,19 +49,19 @@ function Vbox(args) {
 
     const boundRows = [
         <tr key={0} >
-            <td onClick={() => combinerAdd(0) }>{convertVar(vbox.bound[0])}</td>
-            <td onClick={() => combinerAdd(1) }>{convertVar(vbox.bound[1])}</td>
-            <td onClick={() => combinerAdd(2) }>{convertVar(vbox.bound[2])}</td>
+            <td onClick={() => boundClick(0) }>{convertVar(vbox.bound[0])}</td>
+            <td onClick={() => boundClick(1) }>{convertVar(vbox.bound[1])}</td>
+            <td onClick={() => boundClick(2) }>{convertVar(vbox.bound[2])}</td>
         </tr>,
         <tr key={1}>
-            <td onClick={() => combinerAdd(3) }>{convertVar(vbox.bound[3])}</td>
-            <td onClick={() => combinerAdd(4) }>{convertVar(vbox.bound[4])}</td>
-            <td onClick={() => combinerAdd(5) }>{convertVar(vbox.bound[5])}</td>
+            <td onClick={() => boundClick(3) }>{convertVar(vbox.bound[3])}</td>
+            <td onClick={() => boundClick(4) }>{convertVar(vbox.bound[4])}</td>
+            <td onClick={() => boundClick(5) }>{convertVar(vbox.bound[5])}</td>
         </tr>,
         <tr key={2}>
-            <td onClick={() => combinerAdd(6) }>{convertVar(vbox.bound[6])}</td>
-            <td onClick={() => combinerAdd(7) }>{convertVar(vbox.bound[7])}</td>
-            <td onClick={() => combinerAdd(8) }>{convertVar(vbox.bound[8])}</td>
+            <td onClick={() => boundClick(6) }>{convertVar(vbox.bound[6])}</td>
+            <td onClick={() => boundClick(7) }>{convertVar(vbox.bound[7])}</td>
+            <td onClick={() => boundClick(8) }>{convertVar(vbox.bound[8])}</td>
         </tr>,
     ];
 
@@ -104,7 +96,7 @@ function Vbox(args) {
             <span>INVENTORY</span>
             <button
                 className="instance-btn instance-ui-btn vbox-btn"
-                onClick={() => sendVboxReclaim()}>
+                onClick={() => setReclaiming(!reclaiming)}>
                 reclaim
             </button>
             <table className="vbox-table">

html-client/src/components/vbox.container.jsx

@@ -6,7 +6,7 @@ const Vbox = require('./vbox.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, combiner } = state;
+        const { ws, instance, combiner, reclaiming } = state;
 
         function sendVboxDiscard() {
             return ws.sendVboxDiscard(instance.instance);
@@ -17,16 +17,20 @@ const addState = connect(
         }
 
         function sendVboxCombine() {
-            return ws.sendVboxCombine(combiner);
+            return ws.sendVboxCombine(instance.instance, combiner);
         }
 
-        function sendVboxReclaim(v) {
-            return ws.sendVboxDiscard(instance.instance, v);
+        function sendVboxReclaim(i) {
+            if (reclaiming) {
+                return ws.sendVboxReclaim(instance.instance, i);
+            }
+            return false;
         }
 
         return {
             instance,
             combiner,
+            reclaiming,
             sendVboxAccept,
             sendVboxDiscard,
             sendVboxReclaim,
@@ -36,10 +40,14 @@ const addState = connect(
 
     function receiveDispatch(dispatch) {
         function setCombiner(c) {
-            dispatch(actions.setCombiner(c));
+            return dispatch(actions.setCombiner(c));
         }
 
-        return { setCombiner };
+        function setReclaiming(v) {
+            return dispatch(actions.setReclaiming(v));
+        }
+
+        return { setCombiner, setReclaiming };
     }
 
 );

html-client/src/events.jsx

@@ -24,6 +24,10 @@ function registerEvents(store) {
         store.dispatch(actions.setAccount(account));
     }
 
+    function clearCombiner() {
+        store.dispatch(actions.setCombiner([null, null, null]));
+    }
+
     function setActiveSkill(skill) {
         console.log('EVENT ->', 'activeSkill', skill);
     }
@@ -187,6 +191,7 @@ function registerEvents(store) {
     return {
         errorPrompt,
         // loginPrompt,
+        clearCombiner,
         setAccount,
         setActiveSkill,
         setCryps,

html-client/src/keyboard.jsx

@@ -2,21 +2,10 @@ const key = require('keymaster');
 const actions = require('./actions');
 
 function setupKeys(store) {
-    store.subscribe(() => {
-        const state = store.getState();
-
-        key.unbind('esc');
-
-        if (state.activeItem) {
-            key('esc', () => store.dispatch(actions.setActiveItem(null)));
-        }
-        if (state.activeSkill) {
-            key('esc', () => store.dispatch(actions.setActiveSkill(null)));
-        }
-        if (state.activeIncoming) {
-            key('esc', () => store.dispatch(actions.setActiveIncoming(null)));
-        }
-    });
+    console.log('binding keys');
+    key.unbind('esc');
+    key('esc', () => store.dispatch(actions.setCombiner([null, null, null])));
+    key('esc', () => store.dispatch(actions.setReclaiming(false)));
 }
 
 module.exports = setupKeys;

html-client/src/main.jsx

@@ -6,7 +6,7 @@ const { createStore, combineReducers } = require('redux');
 
 const reducers = require('./reducers');
 const actions = require('./actions');
-// const setupKeys = require('./keyboard');
+const setupKeys = require('./keyboard');
 const createSocket = require('./socket');
 const registerEvents = require('./events');
 
@@ -19,19 +19,20 @@ const store = createStore(
         account: reducers.accountReducer,
         activeSkill: reducers.activeSkillReducer,
         combiner: reducers.combinerReducer,
-        game: reducers.gameReducer,
         cryps: reducers.crypsReducer,
-        selectedCryps: reducers.selectedCrypsReducer,
-        instances: reducers.instancesReducer,
+        game: reducers.gameReducer,
         instance: reducers.instanceReducer,
+        instances: reducers.instancesReducer,
+        reclaiming: reducers.reclaimingReducer,
+        selectedCryps: reducers.selectedCrypsReducer,
         ws: reducers.wsReducer,
     })
 );
 
-document.fonts.load('10pt "Jura"').then(() => {
+document.fonts.load('16pt "Jura"').then(() => {
     const events = registerEvents(store);
     store.subscribe(() => console.log(store.getState()));
-    // setupKeys(store);
+    setupKeys(store);
 
     const ws = createSocket(events);
     store.dispatch(actions.setWs(ws));

html-client/src/reducers.jsx

@@ -80,6 +80,16 @@ function gameReducer(state = defaultGame, action) {
     }
 }
 
+const defaultReclaiming = false;
+function reclaimingReducer(state = defaultReclaiming, action) {
+    switch (action.type) {
+        case actions.SET_RECLAIMING:
+            return action.value;
+        default:
+            return state;
+    }
+}
+
 const defaultWs = null;
 function wsReducer(state = defaultWs, action) {
     switch (action.type) {
@@ -96,8 +106,9 @@ module.exports = {
     combinerReducer,
     crypsReducer,
     gameReducer,
-    instancesReducer,
     instanceReducer,
+    instancesReducer,
+    reclaimingReducer,
     selectedCrypsReducer,
     wsReducer,
 };

html-client/src/socket.jsx

@@ -103,6 +103,7 @@ function createSocket(events) {
 
     function sendVboxCombine(instanceId, indices) {
         send({ method: 'player_vbox_combine', params: { instance_id: instanceId, indices } });
+        events.clearCombiner();
     }
 
     function sendVboxReclaim(instanceId, index) {