diff --git a/html-client/cryps.css b/html-client/cryps.css index a78b63aa..09931dec 100644 --- a/html-client/cryps.css +++ b/html-client/cryps.css @@ -7,6 +7,8 @@ body { color: whitesmoke; font-size: 16pt; padding: 1em 2em; + overflow: hidden; + user-select: none; } button, input { @@ -29,7 +31,7 @@ button:hover { MENU */ .header { - margin-bottom: 2em; + margin-bottom: 1.5em; } .home-cryp { @@ -142,12 +144,24 @@ button:hover { padding: 0; } +.vbox-hdr { + display: flex; + align-items: flex-end; +} + +.vbox-hdr div { + flex-grow: 1; +} + +.vbox-hdr h3 { + margin: 0; +} + .vbox-btn { margin: 0; padding: 0.5em; background-color: whitesmoke; color: black; - user-select: none; } .vbox-btn:hover { @@ -179,12 +193,14 @@ button:hover { /* CRYP BOX */ .cryp-box { display: flex; + flex-wrap: wrap; padding: 0; + margin: 0 0 2em 0; } .cryp-box figure { - width: 50%; - margin: 0 0 2em 0; + margin: 0; + flex-grow: 1; border: 1px solid whitesmoke; } @@ -197,10 +213,15 @@ button:hover { } .cryp-skill-btn { - font-size: 150%; + font-size: 125%; border-width: 1px; width: 100%; height: 25%; padding: 0; margin: -1px 0 0 -1px; } + +.cryp-box .stats { + width: 100%; +} + diff --git a/html-client/src/components/instance.component.jsx b/html-client/src/components/instance.component.jsx index d50073d4..98269b8d 100644 --- a/html-client/src/components/instance.component.jsx +++ b/html-client/src/components/instance.component.jsx @@ -6,16 +6,32 @@ const molecule = require('./molecule'); function Cryp(cryp) { const skills = cryp.skills.map((s, i) => ( - + )); + + const stats = [ + 'hp', + 'green_damage', + 'red_shield', + 'red_damage', + 'blue_damage', + 'blue_shield', + 'speed', + ].map((s, i) => ( + {cryp[s].stat} {cryp[s].value} + )); + return (