combo preview styling

client/src/components/info.component.jsx

@@ -132,7 +132,7 @@ class InfoComponent extends preact.Component {
 
         const Combos = () => {
             if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
-            const generalNotes = (
+/*            const generalNotes = (
                 <div>
                     <h2> General </h2>
                     <p>
@@ -140,12 +140,12 @@ class InfoComponent extends preact.Component {
                         Click the <b>READY</b> button to start the <b>GAME PHASE</b>.
                     </p>
                 </div>
-            );
-            if (!player) return generalNotes;
-            if (!info) return generalNotes;
+            );*/
+            if (!player) return false;
+            if (!info) return false;
 
             const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
-            if (vboxCombos.length > 6 || vboxCombos.length === 0) return generalNotes;
+            if (vboxCombos.length > 6 || vboxCombos.length === 0) return false;
 
             const comboTable = vboxCombos.map((c, i) => {
                 const mouseOver = e => {
@@ -157,7 +157,7 @@ class InfoComponent extends preact.Component {
                         <div key="1">{convertItem(c.components[2])}</div>]
                     : c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>);
                 return (
-                    <div key={i} onMouseOver={mouseOver} class="table-button" onClick={() => setInfo(c.item)}>
+                    <div key={i} onMouseOver={mouseOver} class="table-button">
                         <div class="item">
                             {convertItem(c.item)}
                         </div>
@@ -165,12 +165,14 @@ class InfoComponent extends preact.Component {
                     </div>
                 );
             });
+            const comboList = comboTable.length > 0 ? <div class="combo-list">{comboTable}</div> : false;
             return (
                 <div class="combos">
-                    <div class="combo-header">COMBOS</div>
-                    <div class="combo-list">
-                        {comboTable}
+                    <div class="combo-header">
+                        <h2>COMBOS</h2>
+                        Combine colours and items.
                     </div>
+                    {comboList}
                 </div>
             );
         };

client/src/components/info.thresholds.jsx

@@ -87,9 +87,16 @@ function specThresholds(player, fullInfo, info) {
         );
     });
     return (
-        <div class="thresholds">
-            {thresholds}
+        <div>
+            <div class="thresholds">
+                {thresholds[0]}
+                {thresholds[1]}
+            </div>
+            <div class="thresholds">
+                {thresholds[2]}
+            </div>
         </div>
+
     );
 }