equip animations

client/assets/styles/instance.css

@@ -176,7 +176,7 @@
         "avatar "
         "stats  ";
 
-    padding: 0.5em;
+    /*padding: 0.5em;*/
     border: 2px solid #222;
     border-left-width: 0;
 }
@@ -212,7 +212,8 @@
 
 .construct-list .skills button {
     flex: 1;
-    border-width: 0px;
+    /*border: 1px solid #222;*/
+    border: none;
 }
 
 .construct-list .specs {
@@ -333,19 +334,45 @@
     margin-bottom: 0.5em;
 }
 
-button.equipping {
-    animation: equip-skill 1s infinite ease-in-out alternate;
+.equipping {
+  position: relative;
 }
 
-@keyframes equip-skill {
-    0% {
-        background-color: black;
-        box-shadow: inset 0 0 0 0 whitesmoke;
+.equipping::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 50%;
+    width: 100%;
+    height: 2px;
+    transform-origin: center;
+    background-color: whitesmoke;
+    animation: equipping-skill 1s infinite linear alternate;
+    opacity: 0;
+}
+
+.equipping::after, .equip-spec::after {
+    content: '';
+    position: absolute;
+    bottom: 2px;
+    left: 50%;
+    width: 100%;
+    height: 2px;
+    transform-origin: center;
+    background-color: whitesmoke;
+    animation: equipping-skill 1s infinite linear alternate;
+    opacity: 0;
+    animation-delay: 0.75s
+}
+
+@keyframes equipping-skill {
+    from {
+        transform: translate(-50%, 0) scaleX(0);
     }
 
-    100% {
-        background-color: #181818;
-        box-shadow: inset 0.5em 0 0 0 whitesmoke;
+    to {
+        transform: translate(-50%, 0) scaleX(0.75);
+        opacity: 1;
     }
 }
 
@@ -355,22 +382,10 @@ button.equipping {
 }
 
 .equip-spec {
-    animation: equip-spec 1s infinite ease-in-out alternate;
-}
-
-@keyframes equip-spec {
-    0% {
-        color: #333;
+    position: relative;
     stroke: #333;
-    }
-
-    100% {
-        color:  #7a7a7a;
-        stroke:  #7a7a7a;
-    }
 }
 
-
 .equip .specs figcaption {
     font-size: 75%;
 }

client/src/components/instance.equip.jsx

@@ -106,7 +106,7 @@ function Equipment(props) {
             return (
                 <figure key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
                     {shapes[item]()}
-                    <figcaption>{item}</figcaption>
+                    <figcaption>{item ? item : '-'}</figcaption>
                 </figure>
             );
         }