ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

equip animations

Browse Source
This commit is contained in:
ntr 2019-06-09 13:45:05 +10:00
parent 4e004703d7
commit fc2f58391c
2 changed files with 41 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
client/assets/styles/instance.css
View File

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

2
client/src/components/instance.equip.jsx
View File

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