diff --git a/client/game.css b/client/game.css
index d5fc922a..38789d1c 100644
--- a/client/game.css
+++ b/client/game.css
@@ -65,7 +65,7 @@
grid-template-areas:
"skills . ."
"avatar target ."
- "stats effects .";
+ "stats stats effects";
transition-property: all;
transition-duration: 0.5s;
@@ -92,6 +92,15 @@
flex-flow: row;
}
+.game-cryp figure {
+ padding: 0 0.5em;
+}
+
+.game-cryp figcaption {
+ white-space: nowrap;
+ font-size: 100%;
+}
+
.game-cryp .skills {
grid-area: skills;
display: flex;
diff --git a/client/instance.css b/client/instance.css
index a841c2e9..bc379746 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -224,36 +224,39 @@
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;
}
+.equip-icon {
+ height: 2em;
+ stroke-width: 5px;
+ fill: none;
+}
+
+
+.instance-cryp .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;
@@ -261,33 +264,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: 15%;
padding-bottom: 1em;
}
@@ -299,7 +288,7 @@
.instance-equip .label {
display: flex;
font-size: 20pt;
- padding: 15px;
+ padding: 10px;
}
.instance-equip .skills {
@@ -311,7 +300,7 @@
flex: 1 1 100%;
color: whitesmoke;
font-size: 16pt;
- padding: 10px;
+ padding: 5px;
border-width: 0px;
border-bottom-width: 1px;
border-left-width: 1px;
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index 853a5af8..b904759d 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -132,23 +132,9 @@ function Cryp(props) {
);
});
- const damage = Object.values(STATS).slice(0, 3).map(s => (
+ const stats = Object.values(STATS).map(s => (