init

client/assets/styles/vbox.less

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

client/src/components/instance.constructs.jsx

@@ -223,7 +223,7 @@ function Construct(props) {
     const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
     const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`);
     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}/>
             <h2 class="name" onMouseOver={e => hoverInfo(e, `constructName ${construct.name}`)}>{construct.name}</h2>
             <div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >

client/src/components/vbox.component.jsx

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