From 6213bdf421672808fae03ff877a2b7269ecb82a5 Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 8 Apr 2019 12:53:52 +1000 Subject: [PATCH] info updates --- client/cryps.css | 25 ++- client/src/components/info.component.jsx | 170 +++++++++++-------- client/src/components/info.container.jsx | 15 +- client/src/components/instance.component.jsx | 37 +++- client/src/components/instance.container.jsx | 12 +- client/src/components/vbox.container.jsx | 3 +- 6 files changed, 168 insertions(+), 94 deletions(-) diff --git a/client/cryps.css b/client/cryps.css index a9c65df9..c1a8772b 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -399,41 +399,50 @@ header { min-width: 300px; } +/* + INFO +*/ .thresholds { display: flex; flex-direction: row; justify-content: left; } -.info-skills { +.info-cryp .skills { display: flex; } -.info-skills .cryp-skill-btn { +.info-cryp .skills .cryp-skill-btn { border: 1px solid whitesmoke; } -.info-stats { +.info-cryp .stats, .info-cryp .specs { display: flex; flex-flow: row wrap; justify-content: space-around; } -.info-stats .speed { +.info-cryp .stats .speed { flex: 1 0 100%; } -.info-stats figure { +.info-cryp .stats figure { flex: 0 0 30%; border: 0; margin: 1em 0; text-align: center; } -.info-stats .stat-icon { +.info-cryp .stats .stat-icon { height: 2.5em; } +.info-cryp .specs figure { + border: 0; + margin: 1em 0; + text-align: center; +} + /* CRYP BOX */ .cryp-box { @@ -504,7 +513,7 @@ header { border-right-width: 0px; } -.skills .cryp-skill-btn:first-child { +.cryp-list .skills .cryp-skill-btn:first-child { border-top-width: 0; } @@ -701,7 +710,7 @@ header { height: 1em; } - .stats figcaption { + .cryp-list .stats figcaption { display: none; } diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 82ebabd1..97098463 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -1,93 +1,92 @@ const preact = require('preact'); const range = require('lodash/range'); -const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants'); -const { COLOUR_ICONS, STATS } = require('../utils'); +const { ITEMS: { SKILLS, COLOURS } } = require('./constants'); +const { COLOUR_ICONS, STATS, SPECS } = require('../utils'); function Info(args) { const { + activeCryp, info, sendUnequip, instance, } = args; - if (!info.length) return (
 
); - let red = 0; let blue = 0; let green = 0; - instance.cryps.forEach(cryp => { - red += cryp.colours.red; - blue += cryp.colours.blue; - green += cryp.colours.green; - }); - const teamColours = { red, blue, green }; - const [type, value] = info; - if (type === 'item') { - let itemDetails; - if (SKILLS[value]) { - itemDetails = SKILLS[value]; - } else if (SPECS[value]) { - itemDetails = SPECS[value]; - } else if (COLOURS[value]) { - itemDetails = COLOURS[value]; - } - return ( -
- {value} - {itemDetails.description} -
- ); - } - if (type === 'skill') { - return ( -
-
+ function infoVar(info) { + let red = 0; let blue = 0; let green = 0; + instance.cryps.forEach(cryp => { + red += cryp.colours.red; + blue += cryp.colours.blue; + green += cryp.colours.green; + }); + const teamColours = { red, blue, green }; + const [type, value] = info; + if (type === 'item') { + let itemDetails; + if (SKILLS[value]) { + itemDetails = SKILLS[value]; + } else if (SPECS[value]) { + itemDetails = SPECS[value]; + } else if (COLOURS[value]) { + itemDetails = COLOURS[value]; + } + return ( +
+ {value} - {itemDetails.description} +
+ ); + } + + if (type === 'skill') { + return ( +
{value.skill}
{SKILLS[value.skill].description}
-
- ); - } + ); + } - function thresholds(t, spec) { - return ( - SPECS[spec].colours.map((c, i) => ( -
- {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)} -
{Math.min(teamColours[c], t)} / {t}
-
- )) - ); - } - - - if (type === 'spec') { - const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => { - const threshold = thresholds(t, value.spec); + function thresholds(t, spec) { return ( -
- {threshold} + SPECS[spec].colours.map((c, i) => ( +
+ {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)} +
{Math.min(teamColours[c], t)} / {t}
+
+ )) + ); + } + + + if (type === 'spec') { + const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => { + const threshold = thresholds(t, value.spec); + return ( +
+ {threshold} +
+ ); + }) : null; + return ( +
+
+
{value.spec}
+
{SPECS[value.spec].description}
+ {breaks} +
+
); - }) : null; - return ( -
-
-
{value.spec}
-
{SPECS[value.spec].description}
- {breaks} -
- -
- ); + } } - if (type === 'cryp') { - const cryp = value; - -// onClick={() => setInfo('skill', { skill: s, cryp })} + function infoCrypElement(cryp) { + // onClick={() => setInfo('skill', { skill: s, cryp })} const skills = range(0, 4).map(i => { const s = cryp.skills[i] ? cryp.skills[i].skill @@ -101,18 +100,45 @@ function Info(args) {
{cryp[s.stat].value}
)); + + const specs = cryp.specs.map((s, i) => ( +
+ {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)} +
{SPECS[s].caption}
+
+ )); + + return ( -
+
{cryp.name}
-
- {skills} -
-
+
{stats}
+
+ {specs} +
+
+ {skills} +
); } + + const infoCryp = activeCryp + ? infoCrypElement(activeCryp) + : null; + + const otherInfo = info.length + ? infoVar(info) + : null; + + return ( +
+ {infoCryp} + {otherInfo} +
+ ); } module.exports = Info; diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx index 469061ff..1b098e82 100644 --- a/client/src/components/info.container.jsx +++ b/client/src/components/info.container.jsx @@ -6,12 +6,23 @@ const Info = require('./info.component'); const addState = connect( function receiveState(state) { - const { info, ws, instance } = state; + const { + activeCryp, + info, + ws, + instance, + } = state; + function sendUnequip(crypId, item) { return ws.sendVboxUnequip(instance.instance, crypId, item); } - return { info, sendUnequip, instance }; + return { + activeCryp, + info, + sendUnequip, + instance, + }; } /* function receiveDispatch(dispatch) { diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 9826a901..f606262a 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -6,15 +6,28 @@ const VboxContainer = require('./vbox.container'); const InfoContainer = require('./info.container'); const molecule = require('./molecule'); -const shapes = require('./shapes'); -const { STATS, SPECS } = require('../utils'); +const { SPECS } = require('../utils'); + +function Cryp(props) { + const { + cryp, + sendVboxApply, + setInfo, + activeVar, + setActiveCryp, + } = props; -function Cryp(cryp, sendVboxApply, setInfo, activeVar) { const skills = range(0, 4).map(i => { const s = cryp.skills[i] ? cryp.skills[i].skill : ( ); - return ; + + function skillClick() { + setInfo('skill', { skill: s, cryp }); + setActiveCryp(cryp); + } + + return ; }); // needed for ondrop to fire @@ -35,9 +48,7 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) { e.preventDefault(); if (activeVar !== null) return sendVboxApply(cryp.id, activeVar); - document.getElementsByClassName('instance-info')[0].scrollIntoView(); - - return setInfo('cryp', cryp); + return setActiveCryp(cryp); } const specs = cryp.specs.map((s, i) => ( @@ -75,19 +86,27 @@ function InstanceComponent(args) { // account, instance, quit, + // clearInfo, sendInstanceReady, sendVboxApply, setInfo, activeVar, setActiveVar, + setActiveCryp, } = args; if (!instance) return
...
; - const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo, activeVar)); + const cryps = instance.cryps.map((c, i) => Cryp({ + cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp, + })); + + function onClick(e) { + setActiveVar(null); + } return ( -
setActiveVar(null)} > +