diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 8002fc6c..57315e7c 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -3,7 +3,6 @@ export const setCryps = value => ({ type: 'SET_CRYPS', 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 setVboxHidden = value => ({ type: 'SET_VBOX_HIDDEN', value }); export const setInstances = value => ({ type: 'SET_INSTANCES', value }); export const setNav = value => ({ type: 'SET_NAV', value }); export const setInstance = value => ({ type: 'SET_INSTANCE', value }); diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 1ae989bf..2fc43b63 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -1,26 +1,20 @@ const preact = require('preact'); const range = require('lodash/range'); -const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./../constants'); -const { COLOUR_ICONS, STATS, SPECS, convertItem, crypAvatar } = require('../utils'); -const shapes = require('./shapes'); +const { ITEMS: { SPECS: SPEC_CONSTANT } } = require('./../constants'); +const { COLOUR_ICONS, convertItem } = require('../utils'); function Info(args) { const { - activeCryp, - info, - infoCryp, itemInfo, combiner, - sendUnequip, instance, player, - vboxHidden, } = args; - function CrypItem() { + function Info() { if (!info) return false; const fullInfo = itemInfo.items.find(i => i.item === info); if (!fullInfo) return false; @@ -37,16 +31,11 @@ function Info(args) { }); const teamColours = { red, blue, green }; - const unequipBtn = activeCryp - ? - : null; - if (isSkill) { return (
{fullInfo.item}
{fullInfo.description}
- {unequipBtn}
); } @@ -89,7 +78,6 @@ function Info(args) {
{thresholdEl}
- {unequipBtn} ); } @@ -123,7 +111,7 @@ function Info(args) { } function ScoreBoard() { - if (activeCryp || info[0]) return null; + if (info[0]) return null; const players = instance.players.map((p, i) => { const pText = playerText(p); @@ -148,7 +136,6 @@ function Info(args) { function Combos() { if (info) return false; - if (activeCryp) return false; if (!player) return false; if (!(combiner.every(u => u === null))) { @@ -189,11 +176,9 @@ function Info(args) { // ?

game beginning...

// : null; - const classes = `info ${vboxHidden ? '' : 'hidden'}`; - return ( -
- +
+
); diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx index bf1cd941..9da668c7 100644 --- a/client/src/components/info.container.jsx +++ b/client/src/components/info.container.jsx @@ -6,29 +6,21 @@ const Info = require('./info.component'); const addState = connect( function receiveState(state) { const { - activeCryp, + ws, combiner, info, - ws, - instance, itemInfo, - vboxHidden, + instance, player, } = state; - function sendUnequip(crypId, item) { - return ws.sendVboxUnequip(instance.id, crypId, item); - } - return { - activeCryp, - info, + ws, combiner, - sendUnequip, + info, + itemInfo, instance, player, - itemInfo, - vboxHidden, }; }, ); diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 7c6fcb8d..7a71d37b 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -1,15 +1,41 @@ const preact = require('preact'); +const { connect } = require('preact-redux'); -const VboxContainer = require('./vbox.container'); +const Vbox = require('./vbox.component'); const InfoContainer = require('./info.container'); const InstanceCrypsContainer = require('./instance.cryps'); const EquipmentContainer = require('./instance.equip'); -function InstanceComponent(args) { +const actions = require('../actions'); + +const addState = connect( + function receiveState(state) { + const { ws, instance, player } = state; + + function sendInstanceReady() { + return ws.sendInstanceReady(instance.id); + } + + return { instance, player, sendInstanceReady }; + }, + + function receiveDispatch(dispatch) { + function setInfo(c) { + return dispatch(actions.setInfo(c)); + } + + return { + setInfo, + }; + } +); + +function Instance(args) { const { instance, player, sendInstanceReady, + setInfo, } = args; if (!instance) return false; @@ -44,7 +70,7 @@ function InstanceComponent(args) { ); return ( -
+
setInfo(null)} >
{actionBtn} {timer} @@ -52,7 +78,7 @@ function InstanceComponent(args) { - + @@ -60,4 +86,4 @@ function InstanceComponent(args) { ); } -module.exports = InstanceComponent; +module.exports = addState(Instance); diff --git a/client/src/components/instance.container.jsx b/client/src/components/instance.container.jsx index 3f518bd5..736fe6a5 100644 --- a/client/src/components/instance.container.jsx +++ b/client/src/components/instance.container.jsx @@ -14,6 +14,16 @@ const addState = connect( return { instance, player, sendInstanceReady }; }, + + function receiveDispatch(dispatch) { + function setInfo(c) { + return dispatch(actions.setInfo(c)); + } + + return { + setInfo, + }; + } ); module.exports = addState(Instance); diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx index 034eb1fa..7dbfa2f9 100644 --- a/client/src/components/instance.cryps.jsx +++ b/client/src/components/instance.cryps.jsx @@ -8,7 +8,7 @@ const actions = require('../actions'); const addState = connect( function receiveState(state) { - const { ws, instance, player, account, vboxHidden, itemInfo, itemEquip, activeCryp } = state; + const { ws, instance, player, account, itemInfo, itemEquip, activeCryp } = state; function sendInstanceReady() { return ws.sendInstanceReady(instance.id); @@ -18,7 +18,7 @@ const addState = connect( return ws.sendVboxApply(instance.id, crypId, i); } - return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, itemInfo, itemEquip, activeCryp }; + return { instance, player, account, sendInstanceReady, sendVboxApply, itemInfo, itemEquip, activeCryp }; }, function receiveDispatch(dispatch) { @@ -196,7 +196,6 @@ function InstanceCryps(props) { setActiveCryp, sendVboxApply, - vboxHidden, itemInfo, setVboxHighlight, setItemUnequip, @@ -220,7 +219,7 @@ function InstanceCryps(props) { setVboxHighlight, })); - const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`; + const classes = `cryp-list`; return (
setActiveCryp(null)}> {cryps} diff --git a/client/src/components/main.jsx b/client/src/components/main.jsx index b37720e1..593491a3 100644 --- a/client/src/components/main.jsx +++ b/client/src/components/main.jsx @@ -4,7 +4,7 @@ const { connect } = require('preact-redux'); const LoginContainer = require('./login.container'); const GameContainer = require('./game.container'); -const InstanceContainer = require('./instance.container'); +const Instance = require('./instance.component'); const Team = require('./team'); const List = require('./list'); @@ -32,7 +32,6 @@ function Main(props) { } if (game) { - console.log('game time'); return ( ); @@ -40,7 +39,7 @@ function Main(props) { if (instance) { return ( - + ); } diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 9a77cf61..fd2abc58 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -1,32 +1,98 @@ const preact = require('preact'); const range = require('lodash/range'); +const { connect } = require('preact-redux'); const shapes = require('./shapes'); - const { convertItem } = require('./../utils'); +const actions = require('../actions'); + +const addState = connect( + function receiveState(state) { + const { + ws, + instance, + player, + combiner, + reclaiming, + vboxHighlight, + itemInfo, + } = state; + + function sendVboxDiscard() { + return ws.sendVboxDiscard(instance.id); + } + + function sendVboxAccept(group, index) { + return ws.sendVboxAccept(instance.id, group, index); + } + + function sendVboxCombine() { + return ws.sendVboxCombine(instance.id, combiner); + } + + function sendVboxReclaim(i) { + return ws.sendVboxReclaim(instance.id, i); + } + + + return { + combiner, + instance, + player, + reclaiming, + sendVboxAccept, + sendVboxCombine, + sendVboxDiscard, + sendVboxReclaim, + vboxHighlight, + itemInfo, + }; + }, + + function receiveDispatch(dispatch) { + function setCombiner(c) { + return dispatch(actions.setCombiner(c)); + } + + function setReclaiming(v) { + return dispatch(actions.setReclaiming(v)); + } + + function setInfo(item) { + return dispatch(actions.setInfo(item)); + } + + function setVboxHighlight(v) { + return dispatch(actions.setVboxHighlight(v)); + } + + return { + setCombiner, + setReclaiming, + setInfo, + setVboxHighlight, + }; + } + +); function Vbox(args) { const { - activeCryp, - setActiveCryp, combiner, - info, instance, + itemInfo, player, reclaiming, sendVboxAccept, - sendVboxApply, sendVboxCombine, sendVboxDiscard, sendVboxReclaim, + vboxHighlight, + setCombiner, setInfo, setReclaiming, - showTeam, - vboxHidden, - vboxHighlight, setVboxHighlight, - itemInfo, } = args; if (!player) return false; @@ -82,18 +148,18 @@ function Vbox(args) { return true; } + function vboxHover(e, v) { + if (v) { + setInfo(v); + e.stopPropagation(); + } + return true; + } + const freeRows = free.map((row, i) => { const cells = row.map((c, j) => { const highlighted = c && vboxHighlight.includes(c); - function freeClick() { - if (c) { - setActiveCryp(null); - return setInfo(c); - } - return false; - } - return vboxTouchEnd(e, i, j)} onTouchMove={e => vboxTouchMove(e)} - onClick={freeClick} + // onClick={freeClick} onDblClick={() => sendVboxAccept(j, i) } + onMouseOver={(e) => vboxHover(e, c)} > {convertItem(c)} ; @@ -118,19 +185,13 @@ function Vbox(args) { // // INVENTORY // - function boundClick(e, i, highlight) { + function boundClick(e, i) { const value = vbox.bound[i]; - if (reclaiming && value) sendVboxReclaim(i); - else if (highlight && activeCryp) { - sendVboxApply(i); - setVboxHighlight([]); - showTeam(); - } else if (value) { + if (reclaiming && value) return sendVboxReclaim(i); + if (value) { const insert = combiner.findIndex(j => j === null); if (insert === -1) return combinerChange([i, null, null]); combiner[insert] = i; - setInfo(value); - setActiveCryp(null); return combinerChange(combiner); } return false; @@ -153,6 +214,7 @@ function Vbox(args) { vboxHover(e, value)} onClick={e => boundClick(e, i, highlighted) }> {convertItem(value)} @@ -211,7 +273,7 @@ function Vbox(args) { return setReclaiming(!reclaiming); } - const classes = `vbox ${vboxHidden ? 'hidden' : ''}`; + const classes = `vbox`; const reclaimClass = `instance-btn instance-ui-btn vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`; return ( @@ -258,4 +320,4 @@ function Vbox(args) { ); } -module.exports = Vbox; +module.exports = addState(Vbox); diff --git a/client/src/components/vbox.container.jsx b/client/src/components/vbox.container.jsx deleted file mode 100644 index 1bb628cd..00000000 --- a/client/src/components/vbox.container.jsx +++ /dev/null @@ -1,101 +0,0 @@ -const { connect } = require('preact-redux'); - -const actions = require('../actions'); - -const Vbox = require('./vbox.component'); - -const addState = connect( - function receiveState(state) { - const { - ws, - instance, - player, - combiner, - reclaiming, - activeItem, - activeCryp, - info, - vboxHidden, - vboxHighlight, - itemInfo, - } = state; - - function sendVboxApply(i) { - return ws.sendVboxApply(instance.id, activeCryp.id, i); - } - - function sendVboxDiscard() { - return ws.sendVboxDiscard(instance.id); - } - - function sendVboxAccept(group, index) { - return ws.sendVboxAccept(instance.id, group, index); - } - - function sendVboxCombine() { - return ws.sendVboxCombine(instance.id, combiner); - } - - function sendVboxReclaim(i) { - return ws.sendVboxReclaim(instance.id, i); - } - - return { - instance, - player, - combiner, - reclaiming, - activeItem, - activeCryp, - info, - itemInfo, - vboxHidden, - vboxHighlight, - sendVboxAccept, - sendVboxDiscard, - sendVboxReclaim, - sendVboxCombine, - sendVboxApply, - }; - }, - - function receiveDispatch(dispatch) { - function setCombiner(c) { - return dispatch(actions.setCombiner(c)); - } - - function setReclaiming(v) { - return dispatch(actions.setReclaiming(v)); - } - - function setInfo(item) { - return dispatch(actions.setInfo(item)); - } - - function setActiveCryp(v) { - return dispatch(actions.setActiveCryp(v)); - } - - function setVboxHighlight(v) { - return dispatch(actions.setVboxHighlight(v)); - } - - function showTeam() { - dispatch(actions.setInfo(null)); - dispatch(actions.setVboxHidden(true)); - return true; - } - - return { - setCombiner, - setActiveCryp, - setReclaiming, - setInfo, - setVboxHighlight, - showTeam, - }; - } - -); - -module.exports = addState(Vbox); diff --git a/client/src/events.jsx b/client/src/events.jsx index 2f2eb5fc..5d8e729c 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -143,7 +143,6 @@ function registerEvents(store) { const player = v.players.find(p => p.id === account.id); if (player) store.dispatch(actions.setPlayer(player)); if (v) ws.startInstanceStateTimeout(v.id); - if (v.phase === 'Lobby') store.dispatch(actions.setVboxHidden(true)); return store.dispatch(actions.setInstance(v)); } diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index 7e3e0bfd..6df16115 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -13,26 +13,25 @@ function createReducer(defaultState, actionType) { module.exports = { account: createReducer(null, 'SET_ACCOUNT'), activeCryp: createReducer(null, 'SET_ACTIVE_CRYP'), - activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'), activeItem: createReducer(null, 'SET_ACTIVE_VAR'), + activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'), combiner: createReducer([null, null, null], 'SET_COMBINER'), cryps: createReducer([], 'SET_CRYPS'), game: createReducer(null, 'SET_GAME'), info: createReducer(null, 'SET_INFO'), - itemEquip: createReducer(null, 'SET_ITEM_EQUIP'), - itemUnequip: createReducer(null, 'SET_ITEM_UNEQUIP'), instance: createReducer(null, 'SET_INSTANCE'), instances: createReducer([], 'SET_INSTANCES'), - skip: createReducer(false, 'SET_SKIP'), + itemEquip: createReducer(null, 'SET_ITEM_EQUIP'), + itemInfo: createReducer({ combos: [], items: [] }, 'SET_ITEM_INFO'), + itemUnequip: createReducer(null, 'SET_ITEM_UNEQUIP'), nav: createReducer(null, 'SET_NAV'), ping: createReducer(null, 'SET_PING'), player: createReducer(null, 'SET_PLAYER'), reclaiming: createReducer(false, 'SET_RECLAIMING'), resolution: createReducer(null, 'SET_RESOLUTION'), - team: createReducer([null, null, null], 'SET_SELECTED_CRYPS'), showLog: createReducer(false, 'SET_SHOW_LOG'), - vboxHidden: createReducer(false, 'SET_VBOX_HIDDEN'), + skip: createReducer(false, 'SET_SKIP'), + team: createReducer([null, null, null], 'SET_SELECTED_CRYPS'), vboxHighlight: createReducer([], 'SET_VBOX_HIGHLIGHT'), - itemInfo: createReducer({ combos: [], items: [] }, 'SET_ITEM_INFO'), ws: createReducer(null, 'SET_WS'), };