This commit is contained in:
ntr 2019-05-20 17:31:03 +10:00
parent 7dc350159b
commit 9ef8de59f3
7 changed files with 64 additions and 41 deletions

View File

@ -41,6 +41,7 @@
display: flex;
flex-flow: column;
justify-content: center;
white-space: pre-wrap;
}
.instance .cryps {

View File

@ -1,7 +1,7 @@
const preact = require('preact');
const range = require('lodash/range');
const { ITEMS: { SPECS: SPEC_CONSTANT } } = require('./../constants');
const { ITEMS: { SPECS: SPEC_CONSTANT }, INFO } = require('./../constants');
const { COLOUR_ICONS, convertItem } = require('../utils');
function Info(args) {
@ -16,7 +16,8 @@ function Info(args) {
function Info() {
if (!info) return false;
const fullInfo = itemInfo.items.find(i => i.item === info);
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;
@ -34,7 +35,7 @@ function Info(args) {
if (isSkill) {
return (
<div className="info-skill">
<div>{fullInfo.item}</div>
<h2>{fullInfo.item}</h2>
<div>{fullInfo.description}</div>
</div>
);
@ -84,7 +85,8 @@ function Info(args) {
return (
<div className="info-item">
{fullInfo.item} - {fullInfo.description}
<h2>{fullInfo.item}</h2>
<div>{fullInfo.description}</div>
</div>
);
}

View File

@ -1,29 +0,0 @@
const { connect } = require('preact-redux');
const actions = require('../actions');
const Instance = require('./instance.component');
const addState = connect(
function receiveState(state) {
const { ws, instance, player } = state;
function sendInstanceReady() {
return ws.sendInstanceReady(instance.id);
}
return { instance, player, sendInstanceReady };
},
function receiveDispatch(dispatch) {
function setInfo(c) {
return dispatch(actions.setInfo(c));
}
return {
setInfo,
};
}
);
module.exports = addState(Instance);

View File

@ -49,6 +49,8 @@ function Equipment(props) {
itemInfo,
sendUnequip,
setInfo,
} = props;
const { vbox } = player;
@ -101,15 +103,20 @@ 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)}>
<div className={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >
<h3>Skills</h3>
<div className ="items">
{skills}
</div>
</div>
<div className={specClass} onClick={e => unequipClick(e)}>
<div className={specClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSpecs')} >
<h3>Specs</h3>
<div className ="items">
{specs}

View File

@ -63,7 +63,7 @@ function Nav(args) {
setTestInstance,
} = args;
const joined = instances.map((i, j) => (
const joined = instances.map(i => (
<button key={i.id} onClick={() => sendInstanceState(i)} >{i.name}</button>
));

View File

@ -169,7 +169,7 @@ function Vbox(args) {
// onClick={freeClick}
onDblClick={() => sendVboxAccept(j, i) }
onMouseOver={(e) => vboxHover(e, c)}
onMouseOver={e => vboxHover(e, c)}
>
{convertItem(c)}
</td>;
@ -273,18 +273,24 @@ function Vbox(args) {
return setReclaiming(!reclaiming);
}
function hoverInfo(e, info) {
e.stopPropagation();
return setInfo(info);
}
const classes = `vbox`;
const reclaimClass = `instance-btn instance-ui-btn vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
return (
<div className={classes}>
<div className='vbox-box' onClick={() => setReclaiming(false)} >
<div className='vbox-box' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'vbox')} >
<div className="vbox-hdr">
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
<div className="bits" >{vbox.bits}b</div>
</div>
<button
className="instance-btn instance-ui-btn vbox-btn"
onMouseOver={e => hoverInfo(e, 'reroll')}
onClick={() => sendVboxDiscard()}>
Reroll
</button>
@ -294,10 +300,11 @@ function Vbox(args) {
</tbody>
</table>
</div>
<div className='vbox-inventory' onClick={() => setReclaiming(false)} >
<div className='vbox-inventory' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'inventory')} >
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
<button
className={reclaimClass}
onMouseOver={e => hoverInfo(e, 'reclaim')}
onClick={reclaimClick}>
reclaim
</button>
@ -307,10 +314,11 @@ function Vbox(args) {
</tbody>
</table>
</div>
<div className="vbox-combiner">
<div className="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</h3>
<button
className="instance-btn instance-ui-btn vbox-btn"
onMouseOver={e => hoverInfo(e, 'refine')}
onClick={() => sendVboxCombine()}>
refine
</button>

View File

@ -6,6 +6,41 @@ module.exports = {
POST_SKILL: 500,
},
INFO: {
vbox: {
item: 'VBOX',
description: 'Contains items that are available for you to buy.\nDouble-click to purchase.',
},
inventory: {
item: 'INVENTORY',
description: 'Holds purchased items.',
},
combiner: {
item: 'I-COMBINATOR',
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.',
},
refine: {
item: 'REFINE',
description: 'Refine items currently in I-COMBINATOR into more powerful variants',
},
reroll: {
item: 'REROLL',
description: 'Refill the VBOX with new items.\nCosts 5b.',
},
equipSkills: {
item: 'QUICK ACCESS - SKILLS',
description: 'Click to select \nClick target Cryp to equip',
},
equipSpecs: {
item: 'QUICK ACCESS - SPECS',
description: 'Click to select \nClick target Cryp to equip',
},
},
ITEMS: {
SKILLS: {
Amplify: {
@ -21,7 +56,6 @@ module.exports = {
Banish: {
description: 'target cryp is prevented from casting any skills and taking any damage',
colours: '1 Red 1 Green',
},
Blast: {