diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css index 146bd1de..637d96d3 100644 --- a/client/assets/styles/instance.css +++ b/client/assets/styles/instance.css @@ -289,14 +289,8 @@ margin: 0 1em; } -.equip-icon { - height: 2em; - stroke-width: 5px; - fill: none; -} - -.construct-list .stat-icon { - width: 100%; +.icons figure { + flex: 1; } .construct-list .stats .damage-label { @@ -424,6 +418,10 @@ button.equipping { text-align: center; } +.thresholds svg { + stroke-width: 5px; +} + .thresholds hr { margin: 1em 0; } diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 5cabdae3..d199661d 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -1,7 +1,8 @@ const preact = require('preact'); const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils'); -const { animationDivs } = require('../animations'); +// const { animationDivs } = require('../animations'); const GameConstruct = require('./game.construct'); +const shapes = require('./shapes'); function GamePanel(props) { const { @@ -121,11 +122,11 @@ function GamePanel(props) { const ko = construct.green_life.value === 0 ? 'ko' : ''; const classes = eventClasses(resolution, construct); - const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => ( -
- {s.svg(`stat-icon ${s.colour}`)} -
{construct[s.stat].value} / {construct[s.stat].max}
-
{construct[s.stat].value}
+ const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => ( +
+ {shapes[s]()} +
{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}
+
{construct[STATS[s].stat].value}
)); diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index b364466c..b749e37b 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -5,6 +5,7 @@ const range = require('lodash/range'); const actions = require('../actions'); const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils'); const { animationDivs } = require('../animations'); +const shapes = require('./shapes'); const SkillBtn = require('./skill.btn'); @@ -57,11 +58,11 @@ function GameConstruct(props) { const skills = range(0, 3) .map(i => ); - const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => ( -
- {s.svg(`stat-icon ${s.colour}`)} -
{construct[s.stat].value} / {construct[s.stat].max}
-
{construct[s.stat].value}
+ const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => ( +
+ {shapes[s]()} +
{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}
+
{construct[STATS[s].stat].value}
)); diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 5f19e389..cbbc714a 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -1,9 +1,9 @@ const preact = require('preact'); -const { Fragment } = require('preact'); const range = require('lodash/range'); const { INFO } = require('./../constants'); -const { COLOUR_ICONS, convertItem } = require('../utils'); +const { convertItem } = require('../utils'); +const shapes = require('./shapes'); function InfoComponent(args) { const { @@ -65,7 +65,7 @@ function InfoComponent(args) { return (
- {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)} + {shapes.square([c])}
); }); diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 32659125..91af7728 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -3,7 +3,7 @@ const preact = require('preact'); const range = require('lodash/range'); const shapes = require('./shapes'); -const { STATS, instanceConstruct, convertColourCode } = require('../utils'); +const { STATS, instanceConstruct } = require('../utils'); const actions = require('../actions'); const addState = connect( @@ -146,7 +146,7 @@ function Construct(props) { const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray'; return (
- {shapes.diamond(`stat-icon ${equip}`)} + {shapes.diamond(equip)}
 
); @@ -176,18 +176,20 @@ function Construct(props) { onClick={specClick} onDblClick={specDblClick} onMouseOver={e => hoverInfo(e, s)} > - {shapes[specInfo.values.shape.toLowerCase()](convertColourCode(specInfo.values.colour))} + {shapes[s]()}
{s}
); }); - const stats = Object.values(STATS).map(s => ( -
- {s.svg(`stat-icon ${s.colour} stat`)} -
{construct[s.stat].value}
-
- )); + const stats = Object.keys(STATS).map(s => { + const stat = STATS[s]; + return
+ {shapes[s]()} +
{construct[stat.stat].value}
+
; + }); + const activeId = activeConstruct ? activeConstruct.id : false; const constructClass = activeId === construct.id ? 'instance-construct-active' : 'instance-construct'; diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx index 7c4289de..3a18908a 100644 --- a/client/src/components/instance.equip.jsx +++ b/client/src/components/instance.equip.jsx @@ -108,7 +108,7 @@ function Equipment(props) { if (specInfo && specInfo.spec) { return (
skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} > - {shapes[specInfo.values.shape.toLowerCase()](`stat-icon ${specInfo.values.colour}`)} + {shapes[item]()}
{item}
); @@ -120,7 +120,7 @@ function Equipment(props) { if (specs.every(s => !s)) { specs.push(
- {shapes.diamond('stat-icon gray')} + {shapes.diamond('gray')}
 
); diff --git a/client/src/components/shapes.jsx b/client/src/components/shapes.jsx index 4366f759..1693937a 100644 --- a/client/src/components/shapes.jsx +++ b/client/src/components/shapes.jsx @@ -18,4 +18,43 @@ module.exports = { triangle, saw, vboxColour, + + // stats + RedLife: () => square(['red']), + GreenLife: () => square(['green']), + BlueLife: () => square(['blue']), + RedPower: () => circle(['red']), + GreenPower: () => circle(['green']), + BluePower: () => circle(['blue']), + Speed: () => triangle(['white']), + + // specs + // Base + Power: () => circle(['white']), + Life: () => square(['white']), + // Speed, + + // Lifes Upgrades + LifeGGI: () => square(['green']), + LifeRRI: () => square(['red']), + LifeBBI: () => square(['blue']), + LifeRGI: () => square(['red', 'green']), + LifeGBI: () => square(['green', 'blue']), + LifeRBI: () => square(['red', 'blue']), + + // Power Upgrades + PowerGGI: () => circle(['green']), + PowerRRI: () => circle(['red']), + PowerBBI: () => circle(['blue']), + PowerRGI: () => circle(['red', 'green']), + PowerGBI: () => circle(['green', 'blue']), + PowerRBI: () => circle(['red', 'blue']), + + // Speed Upgrades + SpeedGGI: () => triangle(['green']), + SpeedRRI: () => triangle(['red']), + SpeedBBI: () => triangle(['blue']), + SpeedRGI: () => triangle(['red', 'green']), + SpeedGBI: () => triangle(['green', 'blue']), + SpeedRBI: () => triangle(['red', 'blue']), }; diff --git a/client/src/components/svgs/circle.jsx b/client/src/components/svgs/circle.jsx index 895c7006..ce388243 100644 --- a/client/src/components/svgs/circle.jsx +++ b/client/src/components/svgs/circle.jsx @@ -1,20 +1,38 @@ const preact = require('preact'); -module.exports = function triangle(classes) { - return ( - - - - - - - - - - ); +module.exports = function circle(colours) { + if (colours.length === 1) { + return ( + + + + + + + + ); + } + + return ( + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/client/src/components/svgs/square.jsx b/client/src/components/svgs/square.jsx index 65f4b18a..0cacc7a2 100644 --- a/client/src/components/svgs/square.jsx +++ b/client/src/components/svgs/square.jsx @@ -1,9 +1,22 @@ const preact = require('preact'); module.exports = function square(colours) { + if (colours.length === 1) { + return ( + + + + + + + + ); + } + return ( + viewBox="0 0 199.33 199.99" > diff --git a/client/src/components/svgs/triangle.jsx b/client/src/components/svgs/triangle.jsx index 14af355b..95d0a468 100644 --- a/client/src/components/svgs/triangle.jsx +++ b/client/src/components/svgs/triangle.jsx @@ -1,16 +1,38 @@ const preact = require('preact'); -module.exports = function triangle(classes) { +module.exports = function triangle(colours) { + if (colours.length === 1) { + return ( + + + + + + + + ); + } + return ( - - - - - - - - + + + + + + + + + + + + + + + + + + + ); -} +}; diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 15d1dc06..e84ca50a 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -130,37 +130,37 @@ function gameConstructImg(name, id, combatTextEl, selectSkillTarget) { const NULL_UUID = '00000000-0000-0000-0000-000000000000'; const STATS = { - redPower: { + RedPower: { stat: 'red_power', colour: 'red', svg: shapes.circle, }, - greenPower: { + GreenPower: { stat: 'green_power', colour: 'green', svg: shapes.circle, }, - bluePower: { + BluePower: { stat: 'blue_power', colour: 'blue', svg: shapes.circle, }, - speed: { + Speed: { stat: 'speed', colour: 'white', svg: shapes.triangle, }, - redLife: { + RedLife: { stat: 'red_life', colour: 'red', svg: shapes.square, }, - greenLife: { + GreenLife: { stat: 'green_life', colour: 'green', svg: shapes.square, }, - blueLife: { + BlueLife: { stat: 'blue_life', colour: 'blue', svg: shapes.square, @@ -168,12 +168,6 @@ const STATS = { }; -const COLOUR_ICONS = { - red: { colour: 'red', caption: 'red', svg: shapes.square }, - blue: { colour: 'blue', caption: 'blue', svg: shapes.square }, - green: { colour: 'green', caption: 'green', svg: shapes.square }, -}; - function resoConstructHealth(resolution, currentGame) { if (!resolution) return false; @@ -454,18 +448,6 @@ function convertItem(v) { // return; } -function convertColourCode(cc) { - if (cc === 'RR') return ['red', 'red']; - if (cc === 'GG') return ['green', 'green']; - if (cc === 'BB') return ['blue', 'blue']; - if (cc === 'RG') return ['red', 'green']; - if (cc === 'RB') return ['red', 'blue']; - if (cc === 'GB') return ['green', 'blue']; - if (cc === 'W') return ['white', 'white']; - - return ['gray', 'gray']; -} - module.exports = { animateConstruct, stringSort, @@ -480,8 +462,6 @@ module.exports = { getCombatSequence, getCombatText, resoConstructHealth, - convertColourCode, NULL_UUID, STATS, - COLOUR_ICONS, };