diff --git a/client/assets/icons/circle.svg b/client/assets/icons/circle.svg new file mode 100644 index 00000000..ded39dd7 --- /dev/null +++ b/client/assets/icons/circle.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + diff --git a/client/assets/icons/diamond.svg b/client/assets/icons/diamond.svg new file mode 100644 index 00000000..32409a13 --- /dev/null +++ b/client/assets/icons/diamond.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + diff --git a/client/assets/icons/hexagon.svg b/client/assets/icons/hexagon.svg new file mode 100644 index 00000000..e992e9ff --- /dev/null +++ b/client/assets/icons/hexagon.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + diff --git a/client/assets/icons/pentagon.svg b/client/assets/icons/pentagon.svg new file mode 100644 index 00000000..897bd2fe --- /dev/null +++ b/client/assets/icons/pentagon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + diff --git a/client/assets/icons/square.svg b/client/assets/icons/square.svg new file mode 100644 index 00000000..6ca479cf --- /dev/null +++ b/client/assets/icons/square.svg @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git a/client/assets/icons/squircle.svg b/client/assets/icons/squircle.svg new file mode 100644 index 00000000..06a8e8de --- /dev/null +++ b/client/assets/icons/squircle.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + diff --git a/client/assets/icons/triangle.svg b/client/assets/icons/triangle.svg new file mode 100644 index 00000000..df92e915 --- /dev/null +++ b/client/assets/icons/triangle.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + diff --git a/client/cryps.css b/client/cryps.css index 983c7265..acefcd0a 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -86,6 +86,37 @@ button.hidden { opacity: 0; } +svg { + fill: none; + stroke: whitesmoke; + stroke-width: 0; +} + +/* + COLOURS +*/ + +.green { + color: #1FF01F; + stroke: #1FF01F; +} + +.red { + color: #a52a2a; + stroke: #a52a2a; +} + +.blue { + color: #3498db; + stroke: #3498db; +} + +.yellow { + color: #FFD123; + stroke: #FFD123; +} + + /* LOGIN */ @@ -133,8 +164,9 @@ header { .header-status svg { margin-left: 1em; - height: 1em; + height: 1.5em; background-color: black; + stroke: whitesmoke; } .ping-path { @@ -389,19 +421,13 @@ header { flex: 1 1 0; border: 0; align-items: center; - padding: 0.25em 0; + padding: 0.5em 0 0 0; } .cryp-box .stats figcaption { font-size: 75%; } - -.cryp-box .stats svg { - height: 1.5em; - stroke-width: 2px; -} - .cryp-box .skills { display: flex; flex-flow: row wrap; @@ -423,6 +449,11 @@ header { border-top-width: 0; } +.stat-icon { + height: 2em; + stroke-width: 5px; + fill: none; +} /* GAME */ .game-back-btn { diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 6a8210df..4553fb93 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -2,7 +2,6 @@ const preact = require('preact'); const range = require('lodash/range'); const molecule = require('./molecule'); -const saw = require('./saw.component'); // const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R']; @@ -89,7 +88,6 @@ function GamePanel(props) { { stat: 'blue_shield', colour: '#3498db' }, ].map((s, i) => (
- {saw(s.colour)}
{cryp[s.stat].value} / {cryp[s.stat].max}
)); @@ -135,7 +133,6 @@ function GamePanel(props) { { stat: 'blue_shield', colour: '#3498db' }, ].map((s, j) => (
- {saw(s.colour)}
{cryp[s.stat].value} / {cryp[s.stat].max}
)); diff --git a/client/src/components/header.component.jsx b/client/src/components/header.component.jsx index c7b50237..5670f8d0 100644 --- a/client/src/components/header.component.jsx +++ b/client/src/components/header.component.jsx @@ -1,14 +1,14 @@ // eslint-disable-next-line const preact = require('preact'); -const saw = require('./saw.component'); +const { saw } = require('./shapes'); function renderHeader(args) { const { account } = args; const accountStatus = account ? (

{account.name}

- {saw('whitesmoke')} + {saw('stat-icon')}
) : ''; diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 9236e756..6631ae01 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -5,7 +5,9 @@ const range = require('lodash/range'); const VboxContainer = require('./vbox.container'); const InfoContainer = require('./info.container'); const molecule = require('./molecule'); -const saw = require('./saw.component'); + +const shapes = require('./shapes'); +const { STATS } = require('../utils'); function Cryp(cryp, sendVboxApply, setInfo) { const skills = range(0, 4).map(i => { @@ -28,17 +30,9 @@ function Cryp(cryp, sendVboxApply, setInfo) { return sendVboxApply(cryp.id, item); } - const stats = [ - { stat: 'hp', colour: '#1FF01F' }, - { stat: 'green_damage', colour: '#1FF01F' }, - { stat: 'red_shield', colour: '#a52a2a' }, - { stat: 'red_damage', colour: '#a52a2a' }, - { stat: 'blue_shield', colour: '#3498db' }, - { stat: 'blue_damage', colour: '#3498db' }, - { stat: 'speed', colour: '#FFD123' }, - ].map((s, i) => ( + const stats = STATS.map((s, i) => (
- {saw(s.colour)} + {s.svg(`stat-icon ${s.colour}`)}
{cryp[s.stat].value}
)); diff --git a/client/src/components/shapes.jsx b/client/src/components/shapes.jsx new file mode 100644 index 00000000..1af0905d --- /dev/null +++ b/client/src/components/shapes.jsx @@ -0,0 +1,19 @@ +const circle = require('./svgs/circle'); +const diamond = require('./svgs/diamond'); +const hexagon = require('./svgs/hexagon'); +const pentagon = require('./svgs/pentagon'); +const saw = require('./svgs/saw'); +const square = require('./svgs/square'); +const squircle = require('./svgs/squircle'); +const triangle = require('./svgs/triangle'); + +module.exports = { + circle, + diamond, + hexagon, + pentagon, + square, + squircle, + triangle, + saw, +}; diff --git a/client/src/components/svgs/circle.jsx b/client/src/components/svgs/circle.jsx new file mode 100644 index 00000000..895c7006 --- /dev/null +++ b/client/src/components/svgs/circle.jsx @@ -0,0 +1,20 @@ +const preact = require('preact'); + +module.exports = function triangle(classes) { + return ( + + + + + + + + + + ); +}; diff --git a/client/src/components/svgs/diamond.jsx b/client/src/components/svgs/diamond.jsx new file mode 100644 index 00000000..62fdb803 --- /dev/null +++ b/client/src/components/svgs/diamond.jsx @@ -0,0 +1,16 @@ +const preact = require('preact'); + +module.exports = function triangle(classes) { + return ( + + + + + + + + + + ); +}; diff --git a/client/src/components/svgs/hexagon.jsx b/client/src/components/svgs/hexagon.jsx new file mode 100644 index 00000000..ad1c3364 --- /dev/null +++ b/client/src/components/svgs/hexagon.jsx @@ -0,0 +1,21 @@ +const preact = require('preact'); + +module.exports = function triangle(classes) { + return ( + + + + + + + + + + ); +}; diff --git a/client/src/components/svgs/pentagon.jsx b/client/src/components/svgs/pentagon.jsx new file mode 100644 index 00000000..8deec920 --- /dev/null +++ b/client/src/components/svgs/pentagon.jsx @@ -0,0 +1,16 @@ +const preact = require('preact'); + +module.exports = function triangle(classes) { + return ( + + + + + + + + + + ); +} diff --git a/client/src/components/saw.component.jsx b/client/src/components/svgs/saw.jsx similarity index 99% rename from client/src/components/saw.component.jsx rename to client/src/components/svgs/saw.jsx index e9ba3aa8..2e615897 100644 --- a/client/src/components/saw.component.jsx +++ b/client/src/components/svgs/saw.jsx @@ -7,4 +7,4 @@ module.exports = function saw(colour) { ); -} +}; diff --git a/client/src/components/svgs/square.jsx b/client/src/components/svgs/square.jsx new file mode 100644 index 00000000..60e86f17 --- /dev/null +++ b/client/src/components/svgs/square.jsx @@ -0,0 +1,14 @@ +const preact = require('preact'); + +module.exports = function triangle(classes) { + return ( + + + + + + + + ); +} diff --git a/client/src/components/svgs/squircle.jsx b/client/src/components/svgs/squircle.jsx new file mode 100644 index 00000000..82bbabf3 --- /dev/null +++ b/client/src/components/svgs/squircle.jsx @@ -0,0 +1,22 @@ +const preact = require('preact'); + +module.exports = function triangle(classes) { + return ( + + + + + + + + + + + + ); +} diff --git a/client/src/components/svgs/triangle.jsx b/client/src/components/svgs/triangle.jsx new file mode 100644 index 00000000..14af355b --- /dev/null +++ b/client/src/components/svgs/triangle.jsx @@ -0,0 +1,16 @@ +const preact = require('preact'); + +module.exports = function triangle(classes) { + return ( + + + + + + + + + + ); +} diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 95082661..ce861c41 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -1,5 +1,7 @@ const get = require('lodash/get'); +const shapes = require('./components/shapes'); + const stringSort = (k, desc) => { if (desc) { return (a, b) => { @@ -52,10 +54,21 @@ function requestAvatar(name) { const NULL_UUID = '00000000-0000-0000-0000-000000000000'; +const STATS = [ + { stat: 'hp', colour: 'green', svg: shapes.square }, + { stat: 'green_damage', colour: 'green', svg: shapes.diamond }, + { stat: 'red_shield', colour: 'red', svg: shapes.hexagon }, + { stat: 'red_damage', colour: 'red', svg: shapes.pentagon }, + { stat: 'blue_shield', colour: 'blue', svg: shapes.squircle }, + { stat: 'blue_damage', colour: 'blue', svg: shapes.circle }, + { stat: 'speed', colour: 'yellow', svg: shapes.triangle }, +]; + module.exports = { stringSort, numSort, genAvatar, requestAvatar, NULL_UUID, + STATS, };