diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css index 5fbf5a80..e55833b0 100644 --- a/client/assets/styles/instance.css +++ b/client/assets/styles/instance.css @@ -35,7 +35,7 @@ } .instance .info { - font-size: 75%; + /*font-size: 75%;*/ margin-left: 1em; grid-area: info; display: flex; @@ -44,6 +44,10 @@ white-space: pre-wrap; } +.instance .info h2 { + text-transform: uppercase; +} + .instance .cryps { grid-area: cryps; } @@ -391,22 +395,22 @@ button.equip { .thresholds { display: flex; - flex-flow: column; - align-items: center; - /*justify-content: space-around;*/ + flex-flow: row-wrap; + /*align-items: center;*/ + justify-content: space-around; } -.spec-goals figure { - margin: 1em 0; +.spec-goals { } .spec-goals figure svg { - height: 1em; + height: 2em; } .spec-goals .unmet { opacity: 0.5; } + /* Mobile Nav*/ #toggle-vbox { display: none; } #toggle-vbox-label { display: none; } diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index b8d55256..fef5ea23 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -17,7 +17,6 @@ function Info(args) { function Info() { if (!info) return false; const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info]; - console.log(INFO); if (!fullInfo) return false; const isSkill = fullInfo.skill; const isSpec = fullInfo.spec; diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx index 7dbfa2f9..5915ae69 100644 --- a/client/src/components/instance.cryps.jsx +++ b/client/src/components/instance.cryps.jsx @@ -67,6 +67,7 @@ function Cryp(props) { setItemEquip, setVboxHighlight, itemInfo, + setInfo, } = props; function setHighlight(type) { @@ -83,6 +84,11 @@ function Cryp(props) { return setActiveCryp(cryp); } + function hoverInfo(e, info) { + e.stopPropagation(); + return setInfo(info); + } + const { vbox } = player; const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item); const specList = itemInfo.items.filter(v => v.spec).map(v => v.item); @@ -105,7 +111,13 @@ function Cryp(props) { const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equip' : ''; const classes = `right ${action} ${equip}`; return ( - + ); }); @@ -128,7 +140,7 @@ function Cryp(props) { } return ( -
+
hoverInfo(e, s)} > {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
{SPECS[s].caption}
@@ -157,14 +169,15 @@ function Cryp(props) { // return 4; // }; // const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` }; + return (
{crypAvatar(cryp.name)}

{cryp.name}

-
+
hoverInfo(e, 'crypSkills')} > {skills}
-
+
hoverInfo(e, 'crypSpecs')} > {specs}
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx index 04350de0..7b5427b4 100644 --- a/client/src/components/instance.equip.jsx +++ b/client/src/components/instance.equip.jsx @@ -74,6 +74,11 @@ function Equipment(props) { return sendUnequip(activeCryp.id, itemUnequip); } + function hoverInfo(e, info) { + e.stopPropagation(); + return setInfo(info); + } + const skillClass = isSkill ? 'skills highlight' : 'skills'; const specClass = isSpec ? 'specs highlight' : 'specs'; @@ -84,7 +89,7 @@ function Equipment(props) { const item = convertItem(vbox.bound[i]); if (skillList.includes(item)) { return ( - ); @@ -95,7 +100,7 @@ function Equipment(props) { const item = convertItem(vbox.bound[i]); if (specList.includes(item)) { return ( -
boundClick(e, i)}> +
boundClick(e, i)} onMouseOver={e => hoverInfo(e, item)} > {SPECS[item].svg(`equip-icon ${SPECS[item].colour}`)}
{SPECS[item].caption}
@@ -103,11 +108,6 @@ function Equipment(props) { } return false; }); - function hoverInfo(e, info) { - e.stopPropagation(); - return setInfo(info); - } - return (
unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} > diff --git a/client/src/constants.jsx b/client/src/constants.jsx index b5066f2f..cfd6d865 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -9,36 +9,45 @@ module.exports = { INFO: { vbox: { item: 'VBOX', - description: 'Contains items that are available for you to buy.\nDouble-click to purchase.', + description: 'Contains ITEMS that are available for you to buy.\nDouble-click to purchase.', }, inventory: { item: 'INVENTORY', - description: 'Holds purchased items.', + description: 'Holds purchased ITEMS.\nClick to add ITEM to I-COMBINATOR.', }, combiner: { item: 'I-COMBINATOR', - description: 'Combines purchased items into more powerful variants. Hover over an item to see recipes.', + description: 'Combines purchased ITEMS into more powerful variants. Hover over an ITEM to see recipes.', }, reclaim: { item: 'RECLAIM', - description: 'Reclaim items for half the purchase cost of their combined items.\nClick to enable and click item to reclaim.', + description: 'Reclaim ITEMS for half the purchase cost of their combined ITEMS.\nClick to enable and click ITEM to reclaim.', }, refine: { item: 'REFINE', - description: 'Refine items currently in I-COMBINATOR into more powerful variants', + description: 'Refine ITEMS currently in I-COMBINATOR into more powerful variants', }, reroll: { item: 'REROLL', - description: 'Refill the VBOX with new items.\nCosts 5b.', + description: 'Refill the VBOX with new ITEMS.\nCosts 5b.', }, equipSkills: { item: 'QUICK ACCESS - SKILLS', - description: 'Click to select \nClick target Cryp to equip', + description: 'Click to select \nClick target CRYP to equip', }, equipSpecs: { item: 'QUICK ACCESS - SPECS', - description: 'Click to select \nClick target Cryp to equip', + description: 'Click to select \nClick target CRYP to equip', }, + crypSkill: { + item: 'SKILLS', + description: 'Skills are used by Cryps in-game.\nClick a SKILL above and select a CRYP to equip.', + }, + crypSpecs: { + item: 'SPECS', + description: 'SPECS increase the STATS of a CRYP.\nSPECS have increased effect once they reach a THRESHOLD across your whole team.\nClick a SPEC above and select a CRYP to equip.', + }, + }, ITEMS: {