vbox hints

client/cryps.css

@@ -166,6 +166,11 @@ img {
     stroke: #6AD1BF;
 }
 
+.gray {
+    color: #333;
+    stroke: #333;
+}
+
 /*
     LOGIN
 */
@@ -464,9 +469,9 @@ button[disabled] {
 .vbox-btn {
     flex: 1 0 100%;
     margin: 0;
-    padding: 0 0.5em;
     background-color: whitesmoke;
     color: black;
+    border-width: 0;
 }
 
 .vbox-btn:hover {
@@ -710,7 +715,7 @@ table td svg {
     border-top-width: 1px;
 }
 
-.instance-cryp:first-child {
+.instance-cryp button:first-child {
     border-top-width: 0;
 }
 

client/src/components/instance.cryps.jsx

@@ -107,19 +107,19 @@ function Cryp(props) {
         );
     });
 
-    const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
-    const colours = mapValues(cryp.colours, c => {
-        if (cTotal === 0) return 245;
-        return Math.floor(c / cTotal * 255);
-    });
-    const alpha = cTotal === 0 ? 1 : 0.75;
-    const thickness = total => {
-        if (total < 3) return 1;
-        if (total < 6) return 2;
-        if (total < 9) return 3;
-        return 4;
-    };
-    const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
+    // const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
+    // const colours = mapValues(cryp.colours, c => {
+    //     if (cTotal === 0) return 245;
+    //     return Math.floor(c / cTotal * 255);
+    // });
+    // const alpha = cTotal === 0 ? 1 : 0.75;
+    // const thickness = total => {
+    //     if (total < 3) return 1;
+    //     if (total < 6) return 2;
+    //     if (total < 9) return 3;
+    //     return 4;
+    // };
+    // const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
 
     return (
         <div
@@ -127,7 +127,6 @@ function Cryp(props) {
             className="instance-cryp"
             onDragOver={onDragOver}
             onDrop={onDrop}
-            style={border}
             >
             <div className="instance-cryp-top">
                 <figure className="img" onClick={onClick}>
@@ -148,6 +147,7 @@ function Cryp(props) {
 function InstanceCryps(props) {
     const {
         player,
+        instance,
         activeCryp,
         activeVar,
 
@@ -159,9 +159,10 @@ function InstanceCryps(props) {
     } = props;
 
     if (!player) return false;
+    if (instance.phase === 'Lobby') return false;
 
     const infoSelected = activeVar !== null || activeCryp;
-    const crypListClass = `cryp-list ${infoSelected ? '' : 'hidden'}`;
+    const crypListClass = `cryp-list`;
 
     const cryps = player.cryps.map((c, i) => Cryp({
         cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp,

client/src/components/vbox.component.jsx

@@ -22,7 +22,7 @@ function Vbox(args) {
         activeVar,
         activeCryp,
         player,
-        // instance,
+        instance,
         combiner,
         reclaiming,
         sendVboxAccept,
@@ -36,6 +36,7 @@ function Vbox(args) {
     } = args;
 
     if (!player) return false;
+    if (instance.phase === 'Lobby') return false;
     const { vbox } = player;
 
     //
@@ -130,7 +131,10 @@ function Vbox(args) {
     function boundClick(e, i) {
         if (reclaiming && vbox.bound[i]) sendVboxReclaim(i);
         else if (vbox.bound[i]) {
-            const insert = combiner.findIndex(j => j === null);
+            const insert = ['Red', 'Green', 'Blue'].includes(vbox.bound[i])
+                ? combiner.findIndex(j => j === null)
+                : 2;
+
             if (insert === -1) return setCombiner([i, null, null]);
             combiner[insert] = i;
             boundTimer = null;
@@ -193,9 +197,15 @@ function Vbox(args) {
         <table className="vbox-table">
             <tbody>
                 <tr>
-                    <td onClick={() => combinerRmv(0)}>{convertVar(vbox.bound[combiner[0]])}</td>
-                    <td onClick={() => combinerRmv(1)}>{convertVar(vbox.bound[combiner[1]])}</td>
-                    <td onClick={() => combinerRmv(2)}>{convertVar(vbox.bound[combiner[2]])}</td>
+                    <td onClick={() => combinerRmv(0)}>
+                        {combiner[0] !== null ? convertVar(vbox.bound[combiner[0]]) : shapes.vboxColour('gray')}
+                    </td>
+                    <td onClick={() => combinerRmv(1)}>
+                        {combiner[1] !== null ? convertVar(vbox.bound[combiner[1]]) : shapes.vboxColour('gray')}
+                    </td>
+                    <td onClick={() => combinerRmv(2)}>
+                        {convertVar(vbox.bound[combiner[2]])}
+                    </td>
                 </tr>
             </tbody>
         </table>