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

Stat icons auto scale

Browse Source
This commit is contained in:
Mashy 2019-05-15 14:48:58 +10:00
parent c331c92711
commit 3eeb5985f7
3 changed files with 23 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
client/instance.css
View File

@ -234,36 +234,32 @@
grid-template-columns: 3fr 1fr 3fr;
grid-template-areas:
"dl sl ll"
"di si li";
"st st st";
border-top: 1px solid whitesmoke;
}
.instance-cryp .stats figure {
flex: 1;
border: 0;
align-items: center;
padding: 0.5em 0 0 0;
text-align: center;
}
.instance-cryp .stats figcaption {
font-size: 75%;
}
.instance-cryp .stats .damage-label {
grid-area: dl;
display: flex;
justify-content: center;
}
.instance-cryp .stats .damage-icons {
grid-area: di;
.instance-cryp .stats .icons {
grid-area: st;
display: flex;
flex-flow: row;
flex: 1;
justify-content: center;
}
.stat-icon {
width: 100%;
}
.instance-cryp .stats .damage-label {
grid-area: dl;
display: flex;
justify-content: center;
}
.instance-cryp .stats .speed-label {
grid-area: sl;
display: flex;
@ -271,33 +267,19 @@
}
.instance-cryp .stats .speed-icons {
grid-area: si;
display: flex;
flex-flow: row;
flex: 1;
justify-content: center;
}
.instance-cryp .stats .life-label {
grid-area: ll;
display: flex;
justify-content: center;
}
.instance-cryp .stats .life-icons {
grid-area: li;
display: flex;
flex-flow: row;
flex: 1;
justify-content: center;
}
/* Equipment */
.instance-equip {
grid-area: e;
display: flex;
min-height: 20%;
min-height: 10%;
padding-bottom: 1em;
}

28
client/src/components/instance.cryps.jsx
View File

@ -132,23 +132,9 @@ function Cryp(props) {
);
});
const damage = Object.values(STATS).slice(0, 3).map(s => (
const stats = Object.values(STATS).map(s => (
<figure key={s.stat} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value}</figcaption>
</figure>
));
const speed = Object.values(STATS).slice(3, 4).map(s => (
<figure key={s.stat} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value}</figcaption>
</figure>
));
const life = Object.values(STATS).slice(4, 8).map(s => (
<figure key={s.stat} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
{s.svg(`stat-icon ${s.colour} stat`)}
<figcaption>{cryp[s.stat].value}</figcaption>
</figure>
));
@ -184,20 +170,14 @@ function Cryp(props) {
<div className="damage-label">
Damage
</div>
<div className="damage-icons">
{damage}
</div>
<div className="speed-label">
Speed
</div>
<div className="speed-icons">
{speed}
</div>
<div className="life-label">
Life
</div>
<div className="life-icons">
{life}
<div className="icons">
{stats}
</div>
</div>
</div>

21
client/styles.css
View File

@ -53,20 +53,11 @@ figure {
main {
padding: 0 2em;
display: grid;
grid-template-columns: repeat(10, 10%));
grid-template-rows: min-content 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content 1fr;
grid-template-areas:
"hd hd hd hd hd hd hd hd hd hd"
"nav main main main main main main main main main"
"nav main main main main main main main main main"
"nav main main main main main main main main main"
"nav main main main main main main main main main"
"nav main main main main main main main main main"
"nav main main main main main main main main main"
"nav main main main main main main main main main"
"nav main main main main main main main main main"
"nav main main main main main main main main main";
"hd hd"
"nav main";
}
nav {
@ -494,10 +485,6 @@ header {
text-align: center;
}
.info-cryp .stats .stat-icon {
height: 2.5em;
}
.info-cryp .specs figure {
border: 0;
margin: 1em 0;