From 1ec43cd6b03355de9ad0f8b31dffa0c21111a364 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 23 Oct 2019 08:26:15 +1000
Subject: [PATCH] add inventory tutorial step

---
 client/assets/styles/instance.less       | 12 +-----------
 client/src/components/vbox.component.jsx | 12 +++++++++++-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index 30e26403..44857870 100644
--- a/client/assets/styles/instance.less
+++ b/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 .     combiner";
+        "vbox varrow 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;
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index ed39b212..16bdab66 100644
--- a/client/src/components/vbox.component.jsx
+++ b/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