diff --git a/client/.eslintrc.js b/client/.eslintrc.js index 02f4347a..b88c8b4c 100755 --- a/client/.eslintrc.js +++ b/client/.eslintrc.js @@ -833,7 +833,7 @@ module.exports = { // enforce consistent line breaks inside function parentheses // https://eslint.org/docs/rules/function-paren-newline - 'function-paren-newline': ['error', 'consistent'], + 'function-paren-newline': 'off', // Blacklist certain identifiers to prevent them being used // https://eslint.org/docs/rules/id-blacklist @@ -848,7 +848,7 @@ module.exports = { // Enforce the location of arrow function bodies with implicit returns // https://eslint.org/docs/rules/implicit-arrow-linebreak - 'implicit-arrow-linebreak': ['error', 'beside'], + 'implicit-arrow-linebreak': 'off', // this option sets a specific tab width for your code // https://eslint.org/docs/rules/indent diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 2fd7138f..bef3732d 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -7,6 +7,9 @@ export const setCryps = value => ({ type: SET_CRYPS, value }); export const SET_VBOX_INFO = 'SET_VBOX_INFO'; export const setVboxInfo = value => ({ type: SET_VBOX_INFO, value }); +export const SET_VBOX_HIGHLIGHT = 'SET_VBOX_HIGHLIGHT'; +export const setVboxHighlight = value => ({ type: SET_VBOX_HIGHLIGHT, value }); + export const SET_VBOX_HIDDEN = 'SET_VBOX_HIDDEN'; export const setVboxHidden = value => ({ type: SET_VBOX_HIDDEN, value }); diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index b62226c7..aa28d4a8 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -161,9 +161,9 @@ function Info(args) { if (!player) return false; if (combiner[0] !== null) { - const filteredCombos = vboxInfo.combos - .filter(combo => combiner.every(u => u === null || combo.units.includes(player.vbox.bound[u]))); + .filter(combo => combiner.every(u => u === null + || combo.units.includes(player.vbox.bound[u]))); return ( @@ -171,7 +171,7 @@ function Info(args) { {filteredCombos.map((c, i) => - {c.units.map(u => )} + {c.units.map((u, j) => )} )} @@ -185,7 +185,7 @@ function Info(args) { {vboxInfo.combos.filter(c => c.units.includes(info[1])).map((c, i) => - {c.units.map(u => )} + {c.units.map((u, j) => )} )} diff --git a/client/src/components/info.cryp.jsx b/client/src/components/info.cryp.jsx index 5c7a56b3..2390663b 100644 --- a/client/src/components/info.cryp.jsx +++ b/client/src/components/info.cryp.jsx @@ -8,8 +8,8 @@ const shapes = require('./shapes'); const addState = connect( function receiveState(state) { - const { activeCryp, player } = state; - return { activeCryp, player }; + const { activeCryp, player, vboxInfo } = state; + return { activeCryp, player, vboxInfo }; }, function receiveDispatch(dispatch) { @@ -25,7 +25,11 @@ const addState = connect( dispatch(actions.setVboxHidden(value)); } - return { setInfo, setActiveCryp, setVboxHidden }; + function setVboxHighlight(v) { + dispatch(actions.setVboxHighlight(v)); + } + + return { setInfo, setActiveCryp, setVboxHidden, setVboxHighlight }; } ); @@ -34,10 +38,12 @@ function InfoCryp(args) { const { activeCryp, player, + vboxInfo, setVboxHidden, setInfo, setActiveCryp, + setVboxHighlight, } = args; if (!activeCryp) return false; @@ -45,6 +51,12 @@ function InfoCryp(args) { if (!cryp) return false; + function setHighlight(type) { + if (type === 'skill') return setVboxHighlight(vboxInfo.vars.filter(v => v.skill)); + if (type === 'spec') return setVboxHighlight(vboxInfo.vars.filter(v => v.spec)); + return false; + } + // onClick={() => setInfo('skill', { skill: s, cryp })} const skills = range(0, 3).map(i => { const skill = cryp.skills[i]; @@ -52,7 +64,7 @@ function InfoCryp(args) { function skillClick(e) { if (!skill) { setVboxHidden(false); - setInfo('highlight', 'skill'); + setHighlight('skill'); } else setInfo('skill', { skill: skill.skill, cryp }); e.stopPropagation(); return setActiveCryp(cryp); @@ -77,7 +89,7 @@ function InfoCryp(args) { function blankSpecClick(e) { e.stopPropagation(); setActiveCryp(cryp); - setInfo('highlight', 'spec'); + setHighlight('spec'); setVboxHidden(true); } diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx index 82b97b60..8594e919 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 } = state; + const { ws, instance, player, account, vboxHidden, vboxInfo } = 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 }; + return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo }; }, function receiveDispatch(dispatch) { @@ -38,7 +38,11 @@ const addState = connect( return dispatch(actions.setInfo([])); } - return { quit, clearInfo, setInfo, setActiveCryp }; + function setVboxHighlight(v) { + dispatch(actions.setVboxHighlight(v)); + } + + return { quit, clearInfo, setInfo, setActiveCryp, setVboxHighlight }; } ); @@ -48,8 +52,16 @@ function Cryp(props) { cryp, setInfo, setActiveCryp, + vboxInfo, + setVboxHighlight, } = props; + function setHighlight(type) { + if (type === 'skill') return setVboxHighlight(vboxInfo.vars.filter(v => v.skill).map(v => v.v)); + if (type === 'spec') return setVboxHighlight(vboxInfo.vars.filter(v => v.spec).map(v => v.v)); + return false; + } + const skills = range(0, 3).map(i => { const skill = cryp.skills[i]; const s = skill @@ -57,7 +69,7 @@ function Cryp(props) { : ( ); function skillClick(e) { - if (!skill) setInfo('highlight', 'skill'); + if (!skill) setHighlight('skill'); else setInfo('skill', { skill: skill.skill, cryp }); e.stopPropagation(); return setActiveCryp(cryp); @@ -79,7 +91,7 @@ function Cryp(props) { function blankSpecClick(e) { e.stopPropagation(); setActiveCryp(cryp); - setInfo('highlight', 'spec'); + setHighlight('spec'); } if (!s) { @@ -148,13 +160,15 @@ function InstanceCryps(props) { sendVboxApply, vboxHidden, + vboxInfo, + setVboxHighlight, } = props; if (!player) return false; if (instance.phase === 'Lobby') return false; const cryps = player.cryps.map((c, i) => Cryp({ - cryp: c, sendVboxApply, setInfo, setActiveCryp, + cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight, })); const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`; diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index ba883045..084e7a99 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -24,6 +24,8 @@ function Vbox(args) { setReclaiming, showTeam, vboxHidden, + vboxHighlight, + setVboxHighlight, vboxInfo, } = args; @@ -31,6 +33,24 @@ function Vbox(args) { if (instance.phase === 'Lobby') return false; const { vbox } = player; + function combinerChange(newCombiner) { + setCombiner(newCombiner); + if (newCombiner.every(c => c === null)) return setVboxHighlight([]); + + const combinerValues = newCombiner.map(cv => player.vbox.bound[cv]).filter(cv => cv); + + const filteredCombos = vboxInfo.combos + .filter(combo => combinerValues.every(u => combo.units.includes(u))); + + const comboValues = vboxInfo.vars.filter(v => { + if (!filteredCombos.some(c => c.units.includes(v.v))) return false; + if (!['Red', 'Green', 'Blue'].includes(v.v) && combinerValues.includes(v.v)) return false; + return true; + }); + + return setVboxHighlight(comboValues.map(v => v.v)); + } + // // VBOX // @@ -62,16 +82,9 @@ function Vbox(args) { return true; } - const freeShouldHighlight = info[0] && info[0] === 'highlight'; - const freeRows = free.map((row, i) => { const cells = row.map((c, j) => { - const highlighted = () => { - if (!c || !freeShouldHighlight) return false; - if (info[1] === 'skill') return j === 1; - if (info[1] === 'spec') return j === 2; - return false; - }; + const highlighted = c && vboxHighlight.includes(c); function freeClick() { if (c) { @@ -83,7 +96,7 @@ function Vbox(args) { return ); @@ -176,7 +182,7 @@ function Vbox(args) { // function combinerRmv(i) { combiner[i] = null; - return setCombiner(combiner); + return combinerChange(combiner); } const combinerElement = (
{convertVar(c.var)}{convertVar(u)}{convertVar(u)}
{convertVar(c.var)}{convertVar(u)}{convertVar(u)}
vboxTouchStart(e, i, j)} onTouchEnd={e => vboxTouchEnd(e, i, j)} onTouchMove={e => vboxTouchMove(e)} @@ -110,14 +123,15 @@ function Vbox(args) { if (reclaiming && value) sendVboxReclaim(i); else if (highlight && activeCryp) { sendVboxApply(i); + setVboxHighlight([]); showTeam(); } else if (value) { const insert = combiner.findIndex(j => j === null); - if (insert === -1) return setCombiner([i, null, null]); + if (insert === -1) return combinerChange([i, null, null]); combiner[insert] = i; setInfo('item', value); setActiveCryp(null); - return setCombiner(combiner); + return combinerChange(combiner); } return false; } @@ -133,21 +147,13 @@ function Vbox(args) { ); } - const highlighted = () => { - if (!value || !info[0] || info[0] !== 'highlight') return false; - const v = vboxInfo.vars.find(vi => vi.v === value); - if (info[1] === 'skill') return v.skill; - if (info[1] === 'spec') return v.spec; - return false; - }; - - const highlight = highlighted(); + const highlighted = value && vboxHighlight.includes(value); return ( boundClick(e, i, highlight) }> + className={`${highlighted ? 'highlight' : ''}`} + onClick={e => boundClick(e, i, highlighted) }> {convertVar(value)}
diff --git a/client/src/components/vbox.container.jsx b/client/src/components/vbox.container.jsx index fa943a66..6b69bca1 100644 --- a/client/src/components/vbox.container.jsx +++ b/client/src/components/vbox.container.jsx @@ -16,6 +16,7 @@ const addState = connect( activeCryp, info, vboxHidden, + vboxHighlight, vboxInfo, } = state; @@ -49,6 +50,7 @@ const addState = connect( info, vboxInfo, vboxHidden, + vboxHighlight, sendVboxAccept, sendVboxDiscard, sendVboxReclaim, @@ -74,6 +76,10 @@ const addState = connect( return dispatch(actions.setActiveCryp(v)); } + function setVboxHighlight(v) { + return dispatch(actions.setVboxHighlight(v)); + } + function showTeam() { dispatch(actions.setInfo([null, null])); dispatch(actions.setVboxHidden(true)); @@ -85,7 +91,7 @@ const addState = connect( setActiveCryp, setReclaiming, setInfo, - setActiveCryp, + setVboxHighlight, showTeam, }; } diff --git a/client/src/keyboard.jsx b/client/src/keyboard.jsx index 73fadac8..647b4db0 100644 --- a/client/src/keyboard.jsx +++ b/client/src/keyboard.jsx @@ -9,6 +9,7 @@ function setupKeys(store) { key('esc', () => store.dispatch(actions.setActiveSkill(null))); key('esc', () => store.dispatch(actions.setActiveCryp(null))); key('esc', () => store.dispatch(actions.setInfo([null, null]))); + key('esc', () => store.dispatch(actions.setVboxHighlight([]))); } module.exports = setupKeys; diff --git a/client/src/main.jsx b/client/src/main.jsx index b7e4cef9..264c9ab0 100644 --- a/client/src/main.jsx +++ b/client/src/main.jsx @@ -36,6 +36,7 @@ const store = createStoreWithMiddleware( selectedCryps: reducers.selectedCrypsReducer, vboxInfo: reducers.vboxInfoReducer, vboxHidden: reducers.vboxHiddenReducer, + vboxHighlight: reducers.vboxHighlightReducer, showLog: reducers.showLogReducer, ws: reducers.wsReducer, }) @@ -44,7 +45,7 @@ const store = createStoreWithMiddleware( document.fonts.load('16pt "Jura"').then(() => { const events = registerEvents(store); - // store.subscribe(() => console.log(store.getState())); + store.subscribe(() => console.log(store.getState())); setupKeys(store); const ws = createSocket(events); diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index b2e6f373..c3976725 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -30,6 +30,16 @@ function vboxInfoReducer(state = defaultVboxInfo, action) { } } +const defaultVboxHighlight = []; +function vboxHighlightReducer(state = defaultVboxHighlight, action) { + switch (action.type) { + case actions.SET_VBOX_HIGHLIGHT: + return action.value; + default: + return state; + } +} + const defaultActiveSkill = null; function activeSkillReducer(state = defaultActiveSkill, action) { switch (action.type) { @@ -210,4 +220,5 @@ module.exports = { infoReducer, pingReducer, vboxInfoReducer, + vboxHighlightReducer, };