wip

client/src/components/instance.cryps.jsx

@@ -111,7 +111,7 @@ function Cryp(props) {
         if (!s) {
             const equip = specList.includes(vbox.bound[activeVar]) ? 'equip-spec' : 'gray';
             return (
-                <figure key={i} onClick={blankSpecClick}>
+                <figure key={i} onClick={blankSpecClick} className={equip} >
                     {shapes.diamond(`stat-icon ${equip}`)}
                     <figcaption>+</figcaption>
                 </figure>
@@ -155,7 +155,7 @@ function Cryp(props) {
     return (
         <div key={cryp.id} className="instance-cryp" onClick={onClick} >
             {crypAvatar(cryp.name)}
-            <div className="name" >{cryp.name}</div>
+            <h2 className="name" >{cryp.name}</h2>
             <div className="skills">
                 {skills}
             </div>
@@ -163,13 +163,13 @@ function Cryp(props) {
                 {specs}
             </div>
             <div className="stats">
-                <div className="damage-label">
+                <div className="damage-label label">
                     Damage
                 </div>
-                <div className="speed-label">
+                <div className="speed-label label">
                     Speed
                 </div>
-                <div className="life-label">
+                <div className="life-label label">
                     Life
                 </div>
                 <div className="icons">

client/src/components/instance.equip.jsx

@@ -74,23 +74,16 @@ function Equipment(props) {
         } return false;
     });
 
-    const skillLabel = skills.every(i => i === false) ? '' : 'Skills';
-    const specLabel = specs.every(i => i === false) ? '' : 'Specs';
-
     return (
         <div className="equip" >
             <div className="skills">
-                <div className="label">
-                    {skillLabel}
-                </div>
+                <h3>Skills</h3>
                 <div className ="items">
                     {skills}
                 </div>
             </div>
             <div className="specs">
-                <div className="label">
-                    {specLabel}
-                </div>
+                <h3>Specs</h3>
                 <div className ="items">
                     {specs}
                 </div>

client/src/components/vbox.component.jsx

@@ -218,7 +218,7 @@ function Vbox(args) {
         <div className={classes}>
             <div className='vbox-box' onClick={() => setReclaiming(false)} >
                 <div className="vbox-hdr">
-                    <div onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</div>
+                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
                     <div className="bits" >{vbox.bits}b</div>
                 </div>
                 <button
@@ -233,7 +233,7 @@ function Vbox(args) {
                 </table>
             </div>
             <div className='vbox-inventory' onClick={() => setReclaiming(false)} >
-                <span onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</span>
+                <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
                 <button
                     className={reclaimClass}
                     onClick={reclaimClick}>
@@ -246,7 +246,7 @@ function Vbox(args) {
                 </table>
             </div>
             <div className="vbox-combiner">
-                <span onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</span>
+                <h3 onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</h3>
                 <button
                     className="instance-btn instance-ui-btn vbox-btn"
                     onClick={() => sendVboxCombine()}>