add inventory tutorial step

client/assets/styles/instance.less

@@ -97,8 +97,7 @@
     grid-template-columns: 1fr min-content 1fr;
     grid-template-areas:
         "vbox varrow inventory"
-        "vbox .     carrow"
+        "vbox varrow combiner";
-        "vbox .     combiner";
 }
 
 .vbox-inventory {
@@ -112,15 +111,6 @@
     justify-content: flex-end;
 }
 
-.vbox-combiner-arrow {
-    color: @gray-hint;
-    grid-area: carrow;
-    display: block;
-    text-align: center;
-    font-size: 2em;
-    vertical-align: center;
-}
-
 .vbox-arrow, .vbox-arrow-mobile {
     display: flex;
     justify-content:center;

client/src/components/vbox.component.jsx

@@ -275,6 +275,16 @@ function Vbox(args) {
             return <button disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
         }
 
+        const tutorial = instance.time_control === 'Practice'
+            && instance.rounds.length === 1
+            && i === 0
+            && combiner.length === 0
+            && vboxSelected.length === 0
+            && vbox.bits === 16
+            && vbox.bound.length === 5
+            && vbox.free[0].filter(c => c).length === 4
+            ? 'combo-border' : null;
+
         const combinerItems = combiner.map(j => vbox.bound[j]);
         const combinerCount = countBy(combinerItems, co => co);
 
@@ -314,7 +324,7 @@ function Vbox(args) {
 
         const highlighted = combiner.indexOf(i) > -1;
         const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
-        const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
+        const classes = `${highlighted ? 'highlight' : border} ${comboHighlight} ${tutorial}`;
         if (shapes[v]) {
             return (
                 <button