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-columns: 3fr 1fr 3fr;
grid-template-areas: grid-template-areas:
"dl sl ll" "dl sl ll"
"di si li"; "st st st";
border-top: 1px solid whitesmoke; 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 { .instance-cryp .stats figcaption {
font-size: 75%; font-size: 75%;
} }
.instance-cryp .stats .damage-label { .instance-cryp .stats .icons {
grid-area: dl; grid-area: st;
display: flex;
justify-content: center;
}
.instance-cryp .stats .damage-icons {
grid-area: di;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
flex: 1; flex: 1;
justify-content: center; 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 { .instance-cryp .stats .speed-label {
grid-area: sl; grid-area: sl;
display: flex; 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 { .instance-cryp .stats .life-label {
grid-area: ll; grid-area: ll;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.instance-cryp .stats .life-icons {
grid-area: li;
display: flex;
flex-flow: row;
flex: 1;
justify-content: center;
}
/* Equipment */ /* Equipment */
.instance-equip { .instance-equip {
grid-area: e; grid-area: e;
display: flex; display: flex;
min-height: 20%; min-height: 10%;
padding-bottom: 1em; 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}> <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>
));
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}`)}
<figcaption>{cryp[s.stat].value}</figcaption> <figcaption>{cryp[s.stat].value}</figcaption>
</figure> </figure>
)); ));
@ -184,20 +170,14 @@ function Cryp(props) {
<div className="damage-label"> <div className="damage-label">
Damage Damage
</div> </div>
<div className="damage-icons">
{damage}
</div>
<div className="speed-label"> <div className="speed-label">
Speed Speed
</div> </div>
<div className="speed-icons">
{speed}
</div>
<div className="life-label"> <div className="life-label">
Life Life
</div> </div>
<div className="life-icons"> <div className="icons">
{life} {stats}
</div> </div>
</div> </div>
</div> </div>

21
client/styles.css
View File

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