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 ;
}
+ 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 (