vbox apply

html-client/cryps.css

@@ -195,10 +195,15 @@ button:hover {
 
 .vbox-table td {
     border: 1px solid whitesmoke;
-    padding: 0 0.5em;
+    padding: 0.2em;
     text-align: center;
     height: 40px;
     cursor: pointer;
+    text-transform: uppercase;
+}
+
+.vbox-table td div {
+    border: 1px solid whitesmoke;
 }
 
 .spacer {

html-client/src/components/instance.component.jsx

@@ -6,8 +6,8 @@ const VboxContainer = require('./vbox.container');
 const molecule = require('./molecule');
 const saw = require('./saw.component');
 
-function Cryp(cryp) {
-    const skills = range(0, 4).map((i) => {
+function Cryp(cryp, sendVboxApply) {
+    const skills = range(0, 4).map(i => {
         const s = cryp.skills[i]
             ? cryp.skills[i].skill
             : (<span>&nbsp;</span>);
@@ -15,6 +15,19 @@ function Cryp(cryp) {
         return <button key={i} className="cryp-skill-btn" >{s}</button>;
     });
 
+    // needed for ondrop to fire
+    function onDragOver(e) {
+        e.preventDefault();
+        return false;
+    }
+
+    function onDrop(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        const item = parseInt(e.dataTransfer.getData('text'), 10);
+        return sendVboxApply(cryp.id, item);
+    }
+
     const stats = [
         { stat: 'hp', colour: '#1FF01F' },
         { stat: 'green_damage', colour: '#1FF01F' },
@@ -31,7 +44,12 @@ function Cryp(cryp) {
     ));
 
     return (
-        <div className="cryp-box">
+        <div
+            key={cryp.id}
+            className="cryp-box"
+            onDragOver={onDragOver}
+            onDrop={onDrop}
+            >
             <figure className="img">
                 {molecule}
                 <figcaption>{cryp.name}</figcaption>
@@ -52,11 +70,12 @@ function InstanceComponent(args) {
         instance,
         quit,
         sendInstanceReady,
+        sendVboxApply,
     } = args;
 
     if (!instance) return <div>...</div>;
 
-    const cryps = instance.cryps.map(Cryp);
+    const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply));
 
     return (
         <section className="instance" >

html-client/src/components/instance.container.jsx

@@ -12,7 +12,11 @@ const addState = connect(
             return ws.sendInstanceReady(instance.instance);
         }
 
-        return { instance, account, sendInstanceReady };
+        function sendVboxApply(crypId, i) {
+            return ws.sendVboxApply(instance.instance, crypId, i);
+        }
+
+        return { instance, account, sendInstanceReady, sendVboxApply };
     },
 
     function receiveDispatch(dispatch, { instance, combiner }) {

html-client/src/components/vbox.component.jsx

@@ -1,7 +1,13 @@
 const preact = require('preact');
+const range = require('lodash/range');
 
 function convertVar(v) {
     return v || '';
+    // uncomment for double borders in vbox
+    // if (v) {
+    //     return <div>{v}</div>;
+    // }
+    // return;
 }
 
 function Vbox(args) {
@@ -20,6 +26,19 @@ function Vbox(args) {
     const { vbox } = instance;
     if (!instance.vbox) return false;
 
+    // lots of rubbish to make it flow nice
+    function boundClick(i) {
+        if (reclaiming) {
+            return sendVboxReclaim(i);
+        }
+
+        if (combiner.indexOf(i) === -1) {
+            const insert = combiner.findIndex(j => j === null);
+            combiner[insert] = i;
+            return setCombiner(combiner);
+        }
+        return setCombiner([i, null, null]);
+    }
 
     function combinerRmv(i) {
         combiner[i] = null;
@@ -47,21 +66,31 @@ function Vbox(args) {
         );
     });
 
+    const boundTds = range(0, 9).map(i => (
+        <td
+            key={i}
+            draggable="true"
+            onDragStart={e => e.dataTransfer.setData('text', i)}
+            onClick={() => boundClick(i) }>
+            {convertVar(vbox.bound[i])}
+        </td>
+    ));
+
     const boundRows = [
         <tr key={0} >
-            <td onClick={() => boundClick(0) }>{convertVar(vbox.bound[0])}</td>
-            <td onClick={() => boundClick(1) }>{convertVar(vbox.bound[1])}</td>
-            <td onClick={() => boundClick(2) }>{convertVar(vbox.bound[2])}</td>
+            {boundTds[0]}
+            {boundTds[1]}
+            {boundTds[2]}
         </tr>,
         <tr key={1}>
-            <td onClick={() => boundClick(3) }>{convertVar(vbox.bound[3])}</td>
-            <td onClick={() => boundClick(4) }>{convertVar(vbox.bound[4])}</td>
-            <td onClick={() => boundClick(5) }>{convertVar(vbox.bound[5])}</td>
+            {boundTds[3]}
+            {boundTds[4]}
+            {boundTds[5]}
         </tr>,
         <tr key={2}>
-            <td onClick={() => boundClick(6) }>{convertVar(vbox.bound[6])}</td>
-            <td onClick={() => boundClick(7) }>{convertVar(vbox.bound[7])}</td>
-            <td onClick={() => boundClick(8) }>{convertVar(vbox.bound[8])}</td>
+            {boundTds[6]}
+            {boundTds[7]}
+            {boundTds[8]}
         </tr>,
     ];
 

html-client/src/components/vbox.container.jsx

@@ -21,10 +21,7 @@ const addState = connect(
         }
 
         function sendVboxReclaim(i) {
-            if (reclaiming) {
-                return ws.sendVboxReclaim(instance.instance, i);
-            }
-            return false;
+            return ws.sendVboxReclaim(instance.instance, i);
         }
 
         return {