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

equip kinda wip

Browse Source
This commit is contained in:
ntr
2019-05-20 16:26:54 +10:00
parent b35909e231
commit be022b3de8
22 changed files with 284 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/game.component.jsx
+6 -3
View File
@@ -55,14 +55,19 @@ function GamePanel(props) {
return sendGameReady();
}
const otherTeams = game.players.filter(t => t.id !== account.id);
const playerTeam = game.players.find(t => t.id === account.id);
let actionText = 'Ready';
let actionStyles = 'instance-btn instance-ui-btn right';
if (game.phase === 'Finish') actionText = 'Done';
if (resolution) actionText = 'Skip';
if (actionText === 'Ready' && playerTeam.ready) actionStyles += ' ready';
const header = (
<div className="top">
<button
className="instance-btn instance-ui-btn right"
className={actionStyles}
onClick={() => actionClick()}>
{actionText}
</button>
@@ -75,8 +80,6 @@ function GamePanel(props) {
return null;
}
const otherTeams = game.players.filter(t => t.id !== account.id);
const playerTeam = game.players.find(t => t.id === account.id);
const zero = Date.parse(game.phase_end) - (1000 * 60);
const now = Date.now();
client/src/components/header.component.jsx
+2 -2
View File
@@ -12,8 +12,8 @@ function pingColour(ping) {
function renderHeader(args) {
const { account, ping } = args;
const accountStatus = account ?
(<div className="header-status">
const accountStatus = account
? (<div className="header-status">
<h1 className="header-username">{account.name}</h1>
{saw(pingColour(ping))}
<div className="ping-text">{ping}ms</div>
client/src/components/info.component.jsx
+30 -44
View File
@@ -5,24 +5,27 @@ const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./../const
const { COLOUR_ICONS, STATS, SPECS, convertItem, crypAvatar } = require('../utils');
const shapes = require('./shapes');
const InfoCryp = require('./info.cryp');
function Info(args) {
const {
activeCryp,
info,
infoCryp,
itemInfo,
combiner,
sendUnequip,
instance,
player,
itemInfo,
vboxHidden,
} = args;
function CrypItem() {
if (!info) return false;
const [type, value] = info;
if (!type) return false;
const fullInfo = itemInfo.items.find(i => i.item === info);
if (!fullInfo) return false;
const isSkill = fullInfo.skill;
const isSpec = fullInfo.spec;
let red = 0;
let blue = 0;
@@ -34,44 +37,23 @@ function Info(args) {
});
const teamColours = { red, blue, green };
if (type === 'item') {
let itemDetails;
if (SKILLS[value]) {
itemDetails = SKILLS[value];
} else if (SPEC_CONSTANT[value]) {
itemDetails = SPEC_CONSTANT[value];
} else if (COLOURS[value]) {
itemDetails = COLOURS[value];
}
const unequipBtn = activeCryp
? <button onClick={() => sendUnequip(activeCryp.id, info)}>unequip</button>
: null;
if (!itemDetails) {
return console.warn('UNHANLDED VAR', value);
}
return (
<div className="info-item">
{value} - {itemDetails.description}
</div>
);
}
if (type === 'skill') {
const skillInfo = SKILLS[value.skill];
const description = skillInfo ? skillInfo.description : '?????';
if (isSkill) {
return (
<div className="info-skill">
<div> {value.skill} </div>
<div> {description} </div>
<button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
unequip
</button>
<div>{fullInfo.item}</div>
<div>{fullInfo.description}</div>
{unequipBtn}
</div>
);
}
if (type === 'spec') {
const { spec } = value;
const breaks = SPEC_CONSTANT[value.spec].thresholds;
const colourReqs = SPEC_CONSTANT[spec].colours || [];
if (isSpec) {
const breaks = SPEC_CONSTANT[info].thresholds;
const colourReqs = SPEC_CONSTANT[info].colours || [];
const thresholdEl = colourReqs.map((c, i) => {
const numIcons = Math.max(...breaks);
@@ -102,17 +84,21 @@ function Info(args) {
return (
<div className="info-spec">
<div> {value.spec} </div>
<div> {SPEC_CONSTANT[value.spec].description} </div>
<div>{info}</div>
<div>{fullInfo.description}</div>
<div className="thresholds">
{thresholdEl}
</div>
<button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
unequip
</button>
{unequipBtn}
</div>
);
}
return (
<div className="info-item">
{fullInfo.item} - {fullInfo.description}
</div>
);
}
function playerRound(id) {
@@ -161,7 +147,7 @@ function Info(args) {
}
function Combos() {
if (!info[0]) return false;
if (info) return false;
if (activeCryp) return false;
if (!player) return false;
@@ -183,7 +169,7 @@ function Info(args) {
</table>
);
}
const vboxCombos = itemInfo.combos.filter(c => c.units.includes(info[1]));
const vboxCombos = itemInfo.combos.filter(c => c.units.includes(info));
if (vboxCombos.length > 6) return false;
return (
<table>
@@ -212,7 +198,7 @@ function Info(args) {
</div>
);
}
// <InfoCryp /> not required anymore
// <ScoreBoard /> Takes up too much space maybe a context switch
module.exports = Info;
client/src/components/info.cryp.jsx
-134
View File
@@ -1,134 +0,0 @@
const preact = require('preact');
const range = require('lodash/range');
const { connect } = require('preact-redux');
const actions = require('../actions');
const { STATS, SPECS, crypAvatar } = require('../utils');
const shapes = require('./shapes');
const addState = connect(
function receiveState(state) {
const { activeCryp, player, itemInfo } = state;
return { activeCryp, player, itemInfo };
},
function receiveDispatch(dispatch) {
function setInfo(item, value) {
dispatch(actions.setInfo([item, value]));
}
function setActiveCryp(value) {
dispatch(actions.setActiveCryp(value));
}
function setVboxHidden(value) {
dispatch(actions.setVboxHidden(value));
}
function setVboxHighlight(v) {
dispatch(actions.setVboxHighlight(v));
}
return { setInfo, setActiveCryp, setVboxHidden, setVboxHighlight };
}
);
function InfoCryp(args) {
const {
activeCryp,
player,
itemInfo,
setVboxHidden,
setInfo,
setActiveCryp,
setVboxHighlight,
} = args;
if (!activeCryp) return false;
const cryp = player.cryps.find(c => c.id === activeCryp.id);
if (!cryp) return false;
function setHighlight(type) {
if (type === 'skill') return setVboxHighlight(itemInfo.items.filter(v => v.skill).map(v => v.v));
if (type === 'spec') return setVboxHighlight(itemInfo.items.filter(v => v.spec).map(v => v.v));
return false;
}
// onClick={() => setInfo('skill', { skill: s, cryp })}
const skills = range(0, 3).map(i => {
const skill = cryp.skills[i];
function skillClick(e) {
if (!skill) {
setVboxHidden(false);
setHighlight('skill');
} else setInfo('skill', { skill: skill.skill, cryp });
e.stopPropagation();
return setActiveCryp(cryp);
}
const s = cryp.skills[i]
? cryp.skills[i].skill
: (<span>&nbsp;</span>);
return <button key={i} alt={s} onClick={skillClick} >{s}</button>;
});
const stats = Object.values(STATS).map((s, j) => (
<figure key={j} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value}</figcaption>
</figure>
));
const specs = range(0, 6).map(i => {
const s = cryp.specs[i];
function blankSpecClick(e) {
e.stopPropagation();
setActiveCryp(cryp);
setHighlight('spec');
setVboxHidden(true);
}
if (!s) {
return (
<figure key={i} className="gray" onClick={blankSpecClick}>
{shapes.diamond('stat-icon gray')}
<figcaption>&nbsp;</figcaption>
</figure>
);
}
function specClick(e) {
e.stopPropagation();
setActiveCryp(cryp);
setInfo('spec', { spec: s, cryp });
}
return (
<figure key={i} onClick={specClick}>
{SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
<figcaption>{SPECS[s].caption}</figcaption>
</figure>
);
});
return (
<div className="info-cryp">
<div className="stats">
{stats}
</div>
<div className="specs">
{specs}
</div>
<div className="skills">
{skills}
</div>
</div>
);
}
module.exports = addState(InfoCryp);
client/src/components/instance.component.jsx
-4
View File
@@ -9,11 +9,7 @@ function InstanceComponent(args) {
const {
instance,
player,
quit,
sendInstanceReady,
vboxHidden,
setVboxHidden,
} = args;
if (!instance) return false;
client/src/components/instance.container.jsx
+2 -31
View File
@@ -6,43 +6,14 @@ const Instance = require('./instance.component');
const addState = connect(
function receiveState(state) {
const { ws, instance, player, account, activeItem, vboxHidden } = state;
const { ws, instance, player } = state;
function sendInstanceReady() {
return ws.sendInstanceReady(instance.id);
}
function sendVboxApply(crypId, i) {
return ws.sendVboxApply(instance.id, crypId, i);
}
return { instance, player, account, sendInstanceReady, sendVboxApply, activeItem, vboxHidden };
return { instance, player, sendInstanceReady };
},
function receiveDispatch(dispatch) {
function quit() {
dispatch(actions.setInstance(null));
}
function setInfo(item, value) {
dispatch(actions.setInfo([item, value]));
}
function setVboxHidden(v) {
dispatch(actions.setVboxHidden(v));
}
function setActiveCryp(value) {
dispatch(actions.setActiveCryp(value));
}
function clearInfo() {
return dispatch(actions.setInfo([]));
}
return { quit, clearInfo, setInfo, setVboxHidden, setActiveCryp };
}
);
module.exports = addState(Instance);
client/src/components/instance.cryps.jsx
+45 -23
View File
@@ -8,7 +8,7 @@ const actions = require('../actions');
const addState = connect(
function receiveState(state) {
const { ws, instance, player, account, vboxHidden, itemInfo, activeItem, activeCryp } = state;
const { ws, instance, player, account, vboxHidden, 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, activeItem, activeCryp };
return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, itemInfo, itemEquip, activeCryp };
},
function receiveDispatch(dispatch) {
@@ -26,8 +26,8 @@ const addState = connect(
dispatch(actions.setInstance(null));
}
function setInfo(item, value) {
dispatch(actions.setInfo([item, value]));
function setInfo(item) {
dispatch(actions.setInfo(item));
}
function setActiveCryp(value) {
@@ -35,14 +35,22 @@ const addState = connect(
}
function clearInfo() {
return dispatch(actions.setInfo([]));
return dispatch(actions.setInfo(null));
}
function setVboxHighlight(v) {
dispatch(actions.setVboxHighlight(v));
}
return { quit, clearInfo, setInfo, setActiveCryp, setVboxHighlight };
function setItemEquip(v) {
return dispatch(actions.setItemEquip(v));
}
function setItemUnequip(v) {
return dispatch(actions.setItemUnequip(v));
}
return { quit, clearInfo, setInfo, setActiveCryp, setItemUnequip, setItemEquip, setVboxHighlight };
}
);
@@ -50,32 +58,34 @@ const addState = connect(
function Cryp(props) {
const {
activeCryp,
activeItem,
itemEquip,
cryp,
player,
sendVboxApply,
setInfo,
setActiveCryp,
setItemUnequip,
setItemEquip,
setVboxHighlight,
itemInfo,
} = props;
function setHighlight(type) {
if (type === 'skill') return setVboxHighlight(itemInfo.items.filter(v => v.skill).map(v => v.v));
if (type === 'spec') return setVboxHighlight(itemInfo.items.filter(v => v.spec).map(v => v.v));
if (type === 'skill') return setVboxHighlight(itemInfo.items.filter(v => v.skill).map(v => v.item));
if (type === 'spec') return setVboxHighlight(itemInfo.items.filter(v => v.spec).map(v => v.item));
return false;
}
function onClick(e) {
e.stopPropagation();
e.preventDefault();
if (activeItem !== null) sendVboxApply(cryp.id, activeItem);
if (itemEquip !== null) sendVboxApply(cryp.id, itemEquip);
setItemEquip(null);
return setActiveCryp(cryp);
}
const { vbox } = player;
const skillList = itemInfo.items.filter(v => v.skill).map(v => v.v);
const specList = itemInfo.items.filter(v => v.spec).map(v => v.v);
const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
const skills = range(0, 3).map(i => {
const skill = cryp.skills[i];
@@ -84,15 +94,15 @@ function Cryp(props) {
: (<span className="gray">+</span>);
function skillClick(e) {
if (!skill && activeItem !== null) return sendVboxApply(cryp.id, activeItem);
if (!skill) setHighlight('skill');
else setInfo('skill', { skill: skill.skill, cryp });
if (!skill) return false;
setItemUnequip(skill.skill);
setActiveCryp(cryp);
e.stopPropagation();
return setActiveCryp(cryp);
return true;
}
const action = skill ? '' : 'action';
const equip = skillList.includes(vbox.bound[activeItem]) && !skill ? 'equip' : '';
const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equip' : '';
const classes = `right ${action} ${equip}`;
return (
<button key={i} className={classes} onClick={skillClick} >{s}</button>
@@ -104,13 +114,13 @@ function Cryp(props) {
function blankSpecClick(e) {
e.stopPropagation();
if (activeItem !== null) return sendVboxApply(cryp.id, activeItem);
if (itemEquip !== null) return sendVboxApply(cryp.id, itemEquip);
setHighlight('spec');
return setActiveCryp(cryp);
}
if (!s) {
const equip = specList.includes(vbox.bound[activeItem]) ? 'equip-spec' : 'gray';
const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
return (
<figure key={i} onClick={blankSpecClick} className={equip} >
{shapes.diamond(`stat-icon ${equip}`)}
@@ -120,8 +130,8 @@ function Cryp(props) {
function specClick(e) {
e.stopPropagation();
setItemUnequip(s);
setActiveCryp(cryp);
setInfo('spec', { spec: s, cryp });
}
return (
@@ -185,7 +195,7 @@ function Cryp(props) {
function InstanceCryps(props) {
const {
activeCryp,
activeItem,
itemEquip,
player,
instance,
// clearInfo,
@@ -196,13 +206,25 @@ function InstanceCryps(props) {
vboxHidden,
itemInfo,
setVboxHighlight,
setItemUnequip,
setItemEquip,
} = props;
if (!player) return false;
if (instance.phase === 'Lobby') return false;
const cryps = player.cryps.map((c, i) => Cryp({
activeCryp, activeItem, cryp: c, player, sendVboxApply, setInfo, setActiveCryp, itemInfo, setVboxHighlight,
activeCryp,
itemEquip,
setItemUnequip,
setItemEquip,
cryp: c,
player,
sendVboxApply,
setInfo,
setActiveCryp,
itemInfo,
setVboxHighlight,
}));
const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`;
client/src/components/instance.equip.jsx
+35 -32
View File
@@ -7,29 +7,33 @@ const { convertItem, SPECS } = require('./../utils');
const addState = connect(
function receiveState(state) {
const { player, itemInfo, info, ws, instance } = state;
const { player, activeCryp, itemInfo, info, ws, instance, itemUnequip } = state;
function sendUnequip(crypId, item) {
return ws.sendVboxUnequip(instance.id, crypId, item);
}
return { player, itemInfo, info, sendUnequip };
return { player, itemInfo, info, sendUnequip, activeCryp, itemUnequip };
},
function receiveDispatch(dispatch) {
function setInfo(item, value) {
dispatch(actions.setInfo([item, value]));
function setInfo(item) {
dispatch(actions.setInfo(item));
}
function clearInfo() {
return dispatch(actions.setInfo([]));
return dispatch(actions.setInfo(null));
}
function setActiveItem(v) {
return dispatch(actions.setActiveItem(v));
function setItemEquip(v) {
return dispatch(actions.setItemEquip(v));
}
return { setInfo, setActiveItem, clearInfo };
function setItemUnequip(v) {
return dispatch(actions.setItemUnequip(v));
}
return { setInfo, setItemEquip, setItemUnequip, clearInfo };
}
);
@@ -37,48 +41,47 @@ const addState = connect(
function Equipment(props) {
const {
player,
info,
itemUnequip,
setItemEquip,
setItemUnequip,
activeCryp,
itemInfo,
sendUnequip,
setInfo,
setActiveItem,
} = props;
const { vbox } = player;
const infoType = info ? info[0] : false;
const infoValue = info ? info[1] : false;
const fullInfo = itemInfo.items.find(i => i.item === itemUnequip);
const isSkill = fullInfo && fullInfo.skill;
const isSpec = fullInfo && fullInfo.spec;
function boundClick(e, i) {
const value = vbox.bound[i];
setInfo('item', value);
setActiveItem(i);
setItemEquip(i);
return false;
}
function skillUnequip(e) {
function unequipClick(e) {
e.stopPropagation();
if (infoType === 'skill') sendUnequip(infoValue.cryp.id, infoValue.skill);
return true;
if (!itemUnequip) return false;
if (!activeCryp) return false;
setItemUnequip(null);
return sendUnequip(activeCryp.id, itemUnequip);
}
function specUnequip(e) {
e.stopPropagation();
if (infoType === 'spec') sendUnequip(infoValue.cryp.id, infoValue.spec);
return true;
}
const skillClass = infoType === 'skill' ? 'skills highlight' : 'skills';
const specClass = infoType === 'spec' ? 'specs highlight' : 'specs';
// const classes = `right ${skill ? '' : 'action'}`;
const skillList = itemInfo.items.filter(v => v.skill).map(v => v.v);
const specList = itemInfo.items.filter(v => v.spec).map(v => v.v);
const skillClass = isSkill ? 'skills highlight' : 'skills';
const specClass = isSpec ? 'specs highlight' : 'specs';
const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
const skills = range(0, 9).map(i => {
const item = convertItem(vbox.bound[i]);
if (skillList.includes(item)) {
return (
<button key={i} className={''} onClick={e => boundClick(e, i)}>
<button key={i} onClick={e => boundClick(e, i)}>
{item}
</button>
);
@@ -99,13 +102,13 @@ function Equipment(props) {
return (
<div className="equip" >
<div className={skillClass} onClick={e => skillUnequip(e)}>
<div className={skillClass} onClick={e => unequipClick(e)}>
<h3>Skills</h3>
<div className ="items">
{skills}
</div>
</div>
<div className={specClass} onClick={e => specUnequip(e)}>
<div className={specClass} onClick={e => unequipClick(e)}>
<h3>Specs</h3>
<div className ="items">
{specs}
client/src/components/nav.jsx
+2 -1
View File
@@ -80,7 +80,8 @@ function Nav(args) {
<h2>Team</h2>
{teamElements}
<h2>Instances</h2>
<button onClick={() => navTo('list')}>Join</button>
<button onClick={() => navTo('team')}>1. Select Team</button>
<button onClick={() => navTo('list')}>2. Join</button>
<hr />
{joined}
<h2>Hax</h2>
client/src/components/team.jsx
+1 -1
View File
@@ -113,7 +113,7 @@ function Team(args) {
disabled={team.some(c => !c)}
className="instance-btn instance-ui-btn right"
onClick={() => navToList()}>
Join an Instance
Join Instance
</button>
</div>
);
client/src/components/vbox.component.jsx
+2 -2
View File
@@ -89,7 +89,7 @@ function Vbox(args) {
function freeClick() {
if (c) {
setActiveCryp(null);
return setInfo('item', c);
return setInfo(c);
}
return false;
}
@@ -129,7 +129,7 @@ function Vbox(args) {
const insert = combiner.findIndex(j => j === null);
if (insert === -1) return combinerChange([i, null, null]);
combiner[insert] = i;
setInfo('item', value);
setInfo(value);
setActiveCryp(null);
return combinerChange(combiner);
}
client/src/components/vbox.container.jsx
+3 -3
View File
@@ -68,8 +68,8 @@ const addState = connect(
return dispatch(actions.setReclaiming(v));
}
function setInfo(type, info) {
return dispatch(actions.setInfo([type, info]));
function setInfo(item) {
return dispatch(actions.setInfo(item));
}
function setActiveCryp(v) {
@@ -81,7 +81,7 @@ const addState = connect(
}
function showTeam() {
dispatch(actions.setInfo([null, null]));
dispatch(actions.setInfo(null));
dispatch(actions.setVboxHidden(true));
return true;
}