tabs init

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>