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

init

Browse Source
This commit is contained in:
Mashy 2019-11-04 14:33:06 +10:00
parent a6473cb84c
commit 6f578f0747
3 changed files with 19 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/assets/styles/vbox.less
View File

@ -83,7 +83,7 @@
&.highlight { &.highlight {
color: black; color: black;
background: @white; background: @white;
border: 1px solid @white; // border: 1px solid @white; (this bangs around the vbox)
// overwrite the classes on white svg elements // overwrite the classes on white svg elements
svg { svg {

2
client/src/components/instance.constructs.jsx
View File

@ -223,7 +223,7 @@ function Construct(props) {
const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`; const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`); const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`);
return ( return (
<div key={construct.id} class={classes} onClick={onClick}> <div key={construct.id} class={classes} onClick={onClick} onDragOver={ev => ev.preventDefault()} onDrop={onClick}>
<ConstructAvatar construct={construct} mouseOver={avatarMouseOver}/> <ConstructAvatar construct={construct} mouseOver={avatarMouseOver}/>
<h2 class="name" onMouseOver={e => hoverInfo(e, `constructName ${construct.name}`)}>{construct.name}</h2> <h2 class="name" onMouseOver={e => hoverInfo(e, `constructName ${construct.name}`)}>{construct.name}</h2>
<div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} > <div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >

50
client/src/components/vbox.component.jsx
View File

@ -194,8 +194,6 @@ class Vbox extends preact.Component {
e.stopPropagation(); e.stopPropagation();
setItemEquip(null); setItemEquip(null);
setCombiner([]); setCombiner([]);
if (selected) return clearVboxSelected();
setInfo(vbox.free[group][index]); setInfo(vbox.free[group][index]);
return setVboxSelected([group, index]); return setVboxSelected([group, index]);
} }
@ -217,28 +215,18 @@ class Vbox extends preact.Component {
const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`; const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
if (shapes[v]) { const vboxObject = shapes[v] ? shapes[v]() : v;
return ( return (
<label draggable='true'>
<button <button
class={classes} class={classes}
onMouseOver={e => vboxHover(e, v)} onMouseOver={e => vboxHover(e, v)}
onMouseDown={onClick} onMouseDown={onClick}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
onDblClick={onDblClick} > onDblClick={onDblClick}
{shapes[v]()} > {vboxObject}
</button> </button>
); </label>
}
return (
<button
class={classes}
onMouseDown={onClick}
onClick={e => e.stopPropagation()}
onDblClick={onDblClick}
onMouseOver={e => vboxHover(e, v)}>
{v}
</button>
); );
} }
@ -334,26 +322,19 @@ class Vbox extends preact.Component {
const highlighted = combiner.indexOf(i) > -1; const highlighted = combiner.indexOf(i) > -1;
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : ''; const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`; const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
if (shapes[v]) {
return ( const invObject = shapes[v] ? shapes[v]() : v;
return (
<div draggable="true">
<button <button
class={classes} class={classes}
onMouseOver={e => vboxHover(e, v)} onMouseOver={e => vboxHover(e, v)}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
onMouseDown={onClick}> onMouseDown={onClick}>
{shapes[v]()} {invObject}
</button> </button>
); </div>
}
return (
<button
class={classes}
onMouseDown={onClick}
onClick={e => e.stopPropagation()}
onMouseOver={e => vboxHover(e, v)}>
{v}
</button>
); );
} }
@ -408,7 +389,10 @@ class Vbox extends preact.Component {
<div class={inventoryClass} <div class={inventoryClass}
onMouseDown={inventoryClick} onMouseDown={inventoryClick}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}> style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
onDragOver={ev => ev.preventDefault()}
onDrop={inventoryClick}
>
<div class="vbox-hdr"> <div class="vbox-hdr">
<h3 <h3
onTouchStart={e => e.target.scrollIntoView(true)} onTouchStart={e => e.target.scrollIntoView(true)}