From e466b65819dd85823a2c5cc77b1e8315388ad090 Mon Sep 17 00:00:00 2001 From: ntr Date: Sun, 31 Mar 2019 13:30:28 +1100 Subject: [PATCH] mess with styles and reclaim --- html-client/cryps.css | 32 +++++++++++------ html-client/src/actions.jsx | 3 ++ html-client/src/components/vbox.component.jsx | 34 +++++++------------ html-client/src/components/vbox.container.jsx | 20 +++++++---- html-client/src/events.jsx | 5 +++ html-client/src/keyboard.jsx | 19 +++-------- html-client/src/main.jsx | 13 +++---- html-client/src/reducers.jsx | 13 ++++++- html-client/src/socket.jsx | 1 + 9 files changed, 81 insertions(+), 59 deletions(-) diff --git a/html-client/cryps.css b/html-client/cryps.css index 5f9a785a..21255df1 100755 --- a/html-client/cryps.css +++ b/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 { diff --git a/html-client/src/actions.jsx b/html-client/src/actions.jsx index 8f635aa2..7ed080f2 100644 --- a/html-client/src/actions.jsx +++ b/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 }); diff --git a/html-client/src/components/vbox.component.jsx b/html-client/src/components/vbox.component.jsx index c967d0c8..339fb50c 100644 --- a/html-client/src/components/vbox.component.jsx +++ b/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 = [ - combinerAdd(0) }>{convertVar(vbox.bound[0])} - combinerAdd(1) }>{convertVar(vbox.bound[1])} - combinerAdd(2) }>{convertVar(vbox.bound[2])} + boundClick(0) }>{convertVar(vbox.bound[0])} + boundClick(1) }>{convertVar(vbox.bound[1])} + boundClick(2) }>{convertVar(vbox.bound[2])} , - combinerAdd(3) }>{convertVar(vbox.bound[3])} - combinerAdd(4) }>{convertVar(vbox.bound[4])} - combinerAdd(5) }>{convertVar(vbox.bound[5])} + boundClick(3) }>{convertVar(vbox.bound[3])} + boundClick(4) }>{convertVar(vbox.bound[4])} + boundClick(5) }>{convertVar(vbox.bound[5])} , - combinerAdd(6) }>{convertVar(vbox.bound[6])} - combinerAdd(7) }>{convertVar(vbox.bound[7])} - combinerAdd(8) }>{convertVar(vbox.bound[8])} + boundClick(6) }>{convertVar(vbox.bound[6])} + boundClick(7) }>{convertVar(vbox.bound[7])} + boundClick(8) }>{convertVar(vbox.bound[8])} , ]; @@ -104,7 +96,7 @@ function Vbox(args) { INVENTORY diff --git a/html-client/src/components/vbox.container.jsx b/html-client/src/components/vbox.container.jsx index 78f48028..ff5c5745 100644 --- a/html-client/src/components/vbox.container.jsx +++ b/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 }; } ); diff --git a/html-client/src/events.jsx b/html-client/src/events.jsx index 515c535e..aba3afc9 100644 --- a/html-client/src/events.jsx +++ b/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, diff --git a/html-client/src/keyboard.jsx b/html-client/src/keyboard.jsx index 9866de38..dbcd1c5a 100644 --- a/html-client/src/keyboard.jsx +++ b/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; diff --git a/html-client/src/main.jsx b/html-client/src/main.jsx index 7859a6a9..0f429856 100644 --- a/html-client/src/main.jsx +++ b/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)); diff --git a/html-client/src/reducers.jsx b/html-client/src/reducers.jsx index 54cd3d57..a87d28d8 100644 --- a/html-client/src/reducers.jsx +++ b/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, }; diff --git a/html-client/src/socket.jsx b/html-client/src/socket.jsx index 5c28d3f4..a51093e4 100644 --- a/html-client/src/socket.jsx +++ b/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) {