From e224f57ea03d1b13cd9ad1bfce915d5f3da567ee Mon Sep 17 00:00:00 2001 From: ntr Date: Sun, 7 Jul 2019 23:31:12 +1000 Subject: [PATCH] wip --- WORKLOG.md | 2 + client/assets/styles/styles.css | 47 +++++++++++-------- client/assets/styles/styles.mobile.css | 10 ++++ client/src/actions.jsx | 37 ++++++++------- client/src/components/account.status.jsx | 2 +- client/src/components/inventory.jsx | 60 ++++++++++++++++++++++++ client/src/components/list.footer.jsx | 30 ++++++------ client/src/components/list.jsx | 53 ++++++++++----------- client/src/events.jsx | 17 ++++--- client/src/keyboard.jsx | 2 +- client/src/reducers.jsx | 1 + client/src/socket.jsx | 10 +++- 12 files changed, 181 insertions(+), 90 deletions(-) create mode 100644 client/src/components/inventory.jsx diff --git a/WORKLOG.md b/WORKLOG.md index 1da7877d..1b8a57c9 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -41,6 +41,8 @@ *CLIENT* +theme toasts + mobile info page rework link diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css index 6ca8dca7..cde93b48 100644 --- a/client/assets/styles/styles.css +++ b/client/assets/styles/styles.css @@ -455,37 +455,45 @@ header { } .inventory { - display: flex; - flex-flow: row wrap; + margin-right: 2em; + grid-area: inventory; } -.inventory h2 { - flex: 1 0 100%; +.inventory .list { + 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; - flex-flow: column; + height: 100%; + 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
*/ + 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; -} \ No newline at end of file +} diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css index 828b814f..2c2c8ac7 100644 --- a/client/assets/styles/styles.mobile.css +++ b/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"; + } } diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 5dded5df..8b75c237 100644 --- a/client/src/actions.jsx +++ b/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 }); diff --git a/client/src/components/account.status.jsx b/client/src/components/account.status.jsx index e5f8dceb..6684af0b 100644 --- a/client/src/components/account.status.jsx +++ b/client/src/components/account.status.jsx @@ -51,7 +51,7 @@ function BitsBtn(args) { onClick={bitsClick} class="stripe-btn" role="link"> - Get Bits + Get Credits diff --git a/client/src/components/inventory.jsx b/client/src/components/inventory.jsx new file mode 100644 index 00000000..66079ece --- /dev/null +++ b/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 ( +
+

¤ {account.credits}

+
+
setMtxActive('Reimage')} > +
Reimage
+ +
+
setMtxActive('Rename')} > +
Rename
+ +
+
+
Invader Architecture
+ +
+
+
Molecular Architecture
+ +
+
+
+ ); +} + +module.exports = addState(Inventory); diff --git a/client/src/components/list.footer.jsx b/client/src/components/list.footer.jsx index fc69f8d7..65109d72 100644 --- a/client/src/components/list.footer.jsx +++ b/client/src/components/list.footer.jsx @@ -25,22 +25,24 @@ const addState = connect( ); function ListFooter(args) { - const { - showNav, + return false; - navToTeam, - setShowNav, - } = args; + // const { + // showNav, - return ( - - ); + // navToTeam, + // setShowNav, + // } = args; + + // return ( + // + // ); } module.exports = addState(ListFooter); diff --git a/client/src/components/list.jsx b/client/src/components/list.jsx index 45712ef4..b3324d8c 100644 --- a/client/src/components/list.jsx +++ b/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 (
+

Join Game

@@ -109,7 +118,8 @@ function List(args) { .map(construct =>
editConstruct(construct.id)} + style={ mtxActive ? { cursor: 'pointer' } : {}} + onClick={() => selectConstruct(construct.id)} class="menu-construct" > {constructPanels}
-
-
-

Inventory

-
-
Reimage
- -
-
-
Rename
- -
-
-
Invader Architecture
- -
-
+ {listElements()} ); diff --git a/client/src/events.jsx b/client/src/events.jsx index 25d0e76c..6ebdf442 100644 --- a/client/src/events.jsx +++ b/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, }; } diff --git a/client/src/keyboard.jsx b/client/src/keyboard.jsx index 3791cbb1..9e8629b4 100644 --- a/client/src/keyboard.jsx +++ b/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; diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index 99b90f85..9aa95e35 100644 --- a/client/src/reducers.jsx +++ b/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'), diff --git a/client/src/socket.jsx b/client/src/socket.jsx index 3ca95f36..ca1e1703 100644 --- a/client/src/socket.jsx +++ b/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,