nearly
This commit is contained in:
ntr
parent
9ef8de59f3
commit
9c586fe9f7
@ -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; }
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 (
|
||||
<button key={i} className={classes} onClick={skillClick} >{s}</button>
|
||||
<button
|
||||
key={i}
|
||||
className={classes}
|
||||
onClick={skillClick}
|
||||
onMouseOver={e => hoverInfo(e, s)} >
|
||||
{s}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
@ -128,7 +140,7 @@ function Cryp(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<figure key={i} onClick={specClick}>
|
||||
<figure key={i} onClick={specClick} onMouseOver={e => hoverInfo(e, s)} >
|
||||
{SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
|
||||
<figcaption>{SPECS[s].caption}</figcaption>
|
||||
</figure>
|
||||
@ -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 (
|
||||
<div key={cryp.id} className={crypClass} onClick={onClick} >
|
||||
{crypAvatar(cryp.name)}
|
||||
<h2 className="name" >{cryp.name}</h2>
|
||||
<div className="skills">
|
||||
<div className="skills" onMouseOver={e => hoverInfo(e, 'crypSkills')} >
|
||||
{skills}
|
||||
</div>
|
||||
<div className="specs">
|
||||
<div className="specs" onMouseOver={e => hoverInfo(e, 'crypSpecs')} >
|
||||
{specs}
|
||||
</div>
|
||||
<div className="stats">
|
||||
|
||||
@ -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 (
|
||||
<button key={i} onClick={e => boundClick(e, i)}>
|
||||
<button key={i} onClick={e => boundClick(e, i)} onMouseOver={e => hoverInfo(e, item)}>
|
||||
{item}
|
||||
</button>
|
||||
);
|
||||
@ -95,7 +100,7 @@ function Equipment(props) {
|
||||
const item = convertItem(vbox.bound[i]);
|
||||
if (specList.includes(item)) {
|
||||
return (
|
||||
<figure key={i} onClick={e => boundClick(e, i)}>
|
||||
<figure key={i} onClick={e => boundClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
|
||||
{SPECS[item].svg(`equip-icon ${SPECS[item].colour}`)}
|
||||
<figcaption>{SPECS[item].caption}</figcaption>
|
||||
</figure>
|
||||
@ -103,11 +108,6 @@ function Equipment(props) {
|
||||
} return false;
|
||||
});
|
||||
|
||||
function hoverInfo(e, info) {
|
||||
e.stopPropagation();
|
||||
return setInfo(info);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="equip" >
|
||||
<div className={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user