diff --git a/client/instance.css b/client/instance.css index 3daa30bb..84f56aea 100644 --- a/client/instance.css +++ b/client/instance.css @@ -7,7 +7,7 @@ grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(11, 1fr); grid-template-areas: - "n v v v v v v v x x x x" + ". v v v v v v v x x x x" "n v v v v v v v x x x x" "n v v v v v v v x x x x" "n v v v v v v v x x x x" @@ -23,7 +23,7 @@ .instance-hdr { grid-area: n; display: flex; - flex-flow: row; + flex-flow: column; flex: 0 0 100%; } @@ -180,15 +180,14 @@ .instance-cryp { display: grid; grid-template-columns: repeat(5, 1fr); - grid-template-rows: repeat(4, 1fr); + grid-template-rows: repeat(5, 1fr); grid-template-areas: + "sp sp sp sp sp" "av av av sk sk" "av av av sk sk" "av av av sk sk" - "sp sp sp sp sp"; + "st st st st st"; - max-width: 350px; - max-height: 350px; margin-left: 1em; border: 1px solid whitesmoke; transition-property: all; @@ -201,12 +200,11 @@ grid-area: av; display: flex; flex: 1 1 auto; - justify-content: center; } .instance-cryp .avatar figure { margin: 0; - height: 75%; + height: 100%; text-align: center; box-sizing: border-box; } @@ -215,12 +213,23 @@ font-size: 90%; } +.instance-cryp .skills { + grid-area: sk; + display: flex; + flex-flow: column; +} + +.instance-cryp .skills button { + height: 100%; + width: 100%; +} + .instance-cryp .specs { grid-area: sp; display: flex; flex: 1; justify-content: center; - border-top: 1px solid whitesmoke; + border-bottom: 1px solid whitesmoke; } .instance-cryp .specs figure { @@ -235,13 +244,22 @@ font-size: 75%; } -.instance-cryp .skills { - grid-area: sk; +.instance-cryp .stats { + grid-area: st; display: flex; - flex-flow: column; + flex: 1; + justify-content: center; + border-top: 1px solid whitesmoke; } -.instance-cryp .skills button { - height: 100%; - width: 100%; +.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%; } diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index d4e75669..e6adf175 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -88,8 +88,8 @@ function InstanceComponent(args) {
 
{actionBtn} + {timer} - {timer} diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx index 5e437875..42d6f16d 100644 --- a/client/src/components/instance.cryps.jsx +++ b/client/src/components/instance.cryps.jsx @@ -3,7 +3,7 @@ const preact = require('preact'); const range = require('lodash/range'); const shapes = require('./shapes'); -const { SPECS, crypAvatar } = require('../utils'); +const { SPECS, STATS, crypAvatar } = require('../utils'); const actions = require('../actions'); const addState = connect( @@ -119,6 +119,12 @@ function Cryp(props) { ); }); + const stats = Object.values(STATS).map((s, j) => ( +
+ {s.svg(`stat-icon ${s.colour}`)} +
{cryp[s.stat].value}
+
+ )); // const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green; // const colours = mapValues(cryp.colours, c => { // if (cTotal === 0) return 245; @@ -147,6 +153,9 @@ function Cryp(props) {
{specs}
+
+ {stats} +
); } diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 70ce7a55..8ef86e2b 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -65,13 +65,13 @@ function crypAvatar(name) { const NULL_UUID = '00000000-0000-0000-0000-000000000000'; const STATS = { - speed: { stat: 'speed', colour: 'white', svg: shapes.triangle }, redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.circle }, greenDamage: { stat: 'green_damage', colour: 'green', svg: shapes.circle }, blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle }, redLife: { stat: 'red_life', colour: 'red', svg: shapes.square }, greenLife: { stat: 'green_life', colour: 'green', svg: shapes.square }, blueLife: { stat: 'blue_life', colour: 'blue', svg: shapes.square }, + speed: { stat: 'speed', colour: 'white', svg: shapes.triangle }, }; const SPECS = {