ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved?

Browse Source
This commit is contained in:
ntr 2019-05-08 19:48:18 +10:00
parent 70f3796d14
commit d6262ca4b5
10 changed files with 96 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/.eslintrc.js
View File

@ -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

3
client/src/actions.jsx
View File

@ -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 });

8
client/src/components/info.component.jsx
View File

@ -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 (
<table>
@ -171,7 +171,7 @@ function Info(args) {
{filteredCombos.map((c, i) =>
<tr key={i} >
<td className="highlight" >{convertVar(c.var)}</td>
{c.units.map(u => <td>{convertVar(u)}</td>)}
{c.units.map((u, j) => <td key={j}>{convertVar(u)}</td>)}
</tr>
)}
</tbody>
@ -185,7 +185,7 @@ function Info(args) {
{vboxInfo.combos.filter(c => c.units.includes(info[1])).map((c, i) =>
<tr key={i} >
<td className="highlight" >{convertVar(c.var)}</td>
{c.units.map(u => <td>{convertVar(u)}</td>)}
{c.units.map((u, j) => <td key={j} >{convertVar(u)}</td>)}
</tr>
)}
</tbody>

22
client/src/components/info.cryp.jsx
View File

@ -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);
}

26
client/src/components/instance.cryps.jsx
View File

@ -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) {
: (<span>&nbsp;</span>);
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'}`;

52
client/src/components/vbox.component.jsx
View File

@ -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 <td
key={j}
className={`${highlighted() ? 'highlight' : ''}`}
className={`${highlighted ? 'highlight' : ''}`}
onTouchStart={e => 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 (
<td
key={i}
className={`${highlight ? 'highlight' : ''}`}
onClick={e => boundClick(e, i, highlight) }>
className={`${highlighted ? 'highlight' : ''}`}
onClick={e => boundClick(e, i, highlighted) }>
{convertVar(value)}
</td>
);
@ -176,7 +182,7 @@ function Vbox(args) {
//
function combinerRmv(i) {
combiner[i] = null;
return setCombiner(combiner);
return combinerChange(combiner);
}
const combinerElement = (
<table className="vbox-table">

8
client/src/components/vbox.container.jsx
View File

@ -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,
};
}

1
client/src/keyboard.jsx
View File

@ -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;

3
client/src/main.jsx
View File

@ -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);

11
client/src/reducers.jsx
View File

@ -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,
};