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 => (
- {s.svg(`stat-icon ${s.colour}`)} -
{cryp[s.stat].value}
-
- )); - - const speed = Object.values(STATS).slice(3, 4).map(s => ( -
- {s.svg(`stat-icon ${s.colour}`)} -
{cryp[s.stat].value}
-
- )); - - const life = Object.values(STATS).slice(4, 8).map(s => ( -
- {s.svg(`stat-icon ${s.colour}`)} + {s.svg(`stat-icon ${s.colour} stat`)}
{cryp[s.stat].value}
)); @@ -184,20 +170,14 @@ function Cryp(props) {
Damage
-
- {damage} -
Speed
-
- {speed} -
Life
-
- {life} +
+ {stats}
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx index 53ee434a..63fd54f1 100644 --- a/client/src/components/instance.equip.jsx +++ b/client/src/components/instance.equip.jsx @@ -67,7 +67,7 @@ function Equipment(props) { if (specList.includes(item)) { return (
boundClick(e, i)}> - {SPECS[item].svg(`stat-icon ${SPECS[item].colour}`)} + {SPECS[item].svg(`equip-icon ${SPECS[item].colour}`)}
{SPECS[item].caption}
); diff --git a/client/styles.css b/client/styles.css index 8bb729a6..30cb5780 100644 --- a/client/styles.css +++ b/client/styles.css @@ -53,20 +53,11 @@ figure { main { padding: 0 2em; display: grid; - grid-template-columns: repeat(10, 1fr); - 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; @@ -514,6 +501,7 @@ header { .stats figcaption { font-size: 75%; + white-space: nowrap; } .resolving .skills button { @@ -548,10 +536,8 @@ figure.gray { fill: none; } - section .top { display: flex; flex-flow: column; flex: 1; -} - +} \ No newline at end of file