tabs init

client/assets/styles/instance.less

@@ -3,7 +3,7 @@
 .instance {
     overflow-x: hidden;
     display: grid;
-    grid-template-columns: 2fr minmax(min-content, 1fr);
+    grid-template-columns: 1fr minmax(min-content, 1fr);
     grid-template-rows: min-content 1fr;
 
     grid-template-areas:

client/assets/styles/menu.less

@@ -4,11 +4,12 @@
     height: 100%;
     display: grid;
 
-    grid-template-rows: minmax(min-content, 2fr) 1fr;
+    grid-template-rows: minmax(min-content, 2fr) min-content 1fr;
     grid-template-columns: 1fr;
 
     grid-template-areas:
         "top"
+        "tabs"
         "bottom";
 
     .top {
@@ -63,7 +64,6 @@
     .inventory {
         margin-top: 2em;
         grid-area: bottom;
-
         display: grid;
         grid-template-columns: 1fr 1fr;
 
@@ -87,4 +87,18 @@
             flex-flow: column;
         }
     }
+
+    .options {
+        grid-area: tabs;
+        display: flex;
+        flex-flow: row;
+        button {
+            border-top: 0;
+            border: 1px solid #222;
+            &:not(:last-child) {
+                border-right: 0;
+            }
+            flex: 1;
+        }
+    }
 }

client/assets/styles/styles.less

@@ -88,8 +88,8 @@ dl {
     grid-template-rows: min-content 1fr min-content;
     grid-template-areas:
       "hd  hd   ctrl"
-      "nav main ctrl"
-      "nav main ctrl";
+      "main main ctrl"
+      "main main ctrl";
 }
 
 main {
@@ -198,12 +198,6 @@ button[disabled] {
 */
 
 .welcome {
-    .highlight {
-        color: black;
-        background: @white;
-        border: 1px solid @white;
-    }
-
     .login {
         width: 50%;
         display: flex;
@@ -213,11 +207,6 @@ button[disabled] {
 
     .options {
         width: 50%;
-        display: flex;
-        flex-flow: row;
-        button {
-            flex: 1;
-        }
     }
 
     h2 {
@@ -262,4 +251,32 @@ figure.gray {
 
 .mobile-title {
     display: none;
-}
+}
+
+.options {
+    display: flex;
+    flex-flow: row;
+
+    button {
+        &.highlight {
+            color: @white;
+            box-shadow: inset 0px 5px 0px 0px @white;
+            border: 0;
+            &:first-child {
+                border-left: 1px solid #444;
+            }
+
+            &:last-child {
+                border-right: 1px solid #444;
+            }
+
+        }
+
+        border: 1px solid #444;
+        flex: 1;
+    }
+}
+
+nav {
+    display: none;
+}

client/src/components/info.component.jsx

@@ -31,6 +31,8 @@ function InfoComponent(args) {
             return (
                 <div class="info-skill">
                     <h2>{fullInfo.item}</h2>
+                    <h3>Skill > BB</h3>
+                    <h3>tri 3</h3>
                     <div> {infoDescription} </div>
                 </div>
             );

client/src/components/play.jsx

@@ -111,6 +111,25 @@ function Play(args) {
             <div class="team top">
                 {constructPanels}
             </div>
+            <h1>mnml.gg</h1>
+            <div class="options">
+                <button
+                    class={`login-btn highlight`}>
+                    Play
+                </button>
+                <button
+                    class={`login-btn`}>
+                    News
+                </button>
+                <button
+                    class={`login-btn`}>
+                    Store
+                </button>
+                <button
+                    class={`login-btn`}>
+                    ⚙ Account
+                </button>
+            </div>
             <Inventory />
         </main>
     );

client/src/components/vbox.component.jsx

@@ -203,7 +203,7 @@ function Vbox(args) {
                 <button
                     class={classes}
                     onMouseOver={e => vboxHover(e, v)}
-                    onClick={onClick}
+                    onMouseDown={onClick}
                     onDblClick={onDblClick} >
                     {shapes[v]()}
                 </button>
@@ -213,7 +213,7 @@ function Vbox(args) {
         return (
             <button
                 class={classes}
-                onClick={onClick}
+                onMouseDown={onClick}
                 onDblClick={onDblClick}
                 onMouseOver={e => vboxHover(e, v)}>
                 {v}
@@ -225,7 +225,7 @@ function Vbox(args) {
     function vboxElement() {
         return (
             <div class='vbox-vbox'
-                onClick={() => setReclaiming(false)}
+                onMouseDown={() => setReclaiming(false)}
                 onMouseOver={e => hoverInfo(e, 'vbox')}>
                 <div class="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
@@ -241,7 +241,7 @@ function Vbox(args) {
                 <button
                     class='vbox-btn'
                     onMouseOver={e => hoverInfo(e, 'refill')}
-                    onClick={() => sendVboxDiscard()}>
+                    onMouseDown={() => sendVboxDiscard()}>
                     refill - 2b
                 </button>
             </div>
@@ -270,7 +270,7 @@ function Vbox(args) {
     //             key={i}
     //             class={`${highlighted ? 'highlight' : ''}`}
     //             onMouseOver={(e) => vboxHover(e, value)}
-    //             onClick={e => boundClick(e, i, highlighted) }>
+    //             onMouseDown={e => boundClick(e, i, highlighted) }>
     //             {convertItem(value)}
     //         </td>
     //     );
@@ -311,7 +311,7 @@ function Vbox(args) {
                 <button
                     class={classes}
                     onMouseOver={e => vboxHover(e, v)}
-                    onClick={onClick}>
+                    onMouseDown={onClick}>
                     {shapes[v]()}
                 </button>
             );
@@ -320,7 +320,7 @@ function Vbox(args) {
         return (
             <button
                 class={classes}
-                onClick={onClick}
+                onMouseDown={onClick}
                 onMouseOver={e => vboxHover(e, v)}>
                 {v}
             </button>
@@ -347,7 +347,7 @@ function Vbox(args) {
                 class='vbox-btn'
                 disabled={combiner.length !== 3}
                 onMouseOver={e => hoverInfo(e, 'refine')}
-                onClick={() => sendVboxCombine()}>
+                onMouseDown={() => sendVboxCombine()}>
                 {text}
             </button>
         );
@@ -364,7 +364,7 @@ function Vbox(args) {
 
         return (
             <div class={inventoryClass}
-                onClick={inventoryClick}
+                onMouseDown={inventoryClick}
                 style={vboxSelecting || itemUnequip.length ? { cursor: 'pointer' } : null}
                 onMouseOver={e => hoverInfo(e, 'inventory')}>
                 <div class="vbox-hdr">
@@ -372,7 +372,7 @@ function Vbox(args) {
                     <button
                         class='vbox-btn reclaim'
                         onMouseOver={e => hoverInfo(e, 'reclaim')}
-                        onClick={reclaimClick}>
+                        onMouseDown={reclaimClick}>
                         reclaim
                     </button>
                 </div>