more icons

This commit is contained in:
ntr 2019-04-03 17:31:25 +11:00
parent 31d8516652
commit cdf0cd6cfe
3 changed files with 18 additions and 20 deletions

View File

@ -3,6 +3,10 @@ const range = require('lodash/range');
const molecule = require('./molecule');
const { STATS } = require('../utils');
console.log(STATS);
// const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
function GamePanel(props) {
@ -82,12 +86,9 @@ function GamePanel(props) {
);
});
const stats = [
{ stat: 'hp', colour: '#1FF01F' },
{ stat: 'red_shield', colour: '#a52a2a' },
{ stat: 'blue_shield', colour: '#3498db' },
].map((s, i) => (
const stats = Object.values(STATS).map((s, i) => (
<figure key={i} alt={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
</figure>
));
@ -127,12 +128,9 @@ function GamePanel(props) {
}
function OpponentCryp(cryp, i) {
const stats = [
{ stat: 'hp', colour: '#1FF01F' },
{ stat: 'red_shield', colour: '#a52a2a' },
{ stat: 'blue_shield', colour: '#3498db' },
].map((s, j) => (
const stats = [STATS.hp, STATS.redShield, STATS.blueShield].map((s, j) => (
<figure key={j} alt={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
</figure>
));

View File

@ -30,7 +30,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
return sendVboxApply(cryp.id, item);
}
const stats = STATS.map((s, i) => (
const stats = Object.values(STATS).map((s, i) => (
<figure key={i} alt={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value}</figcaption>

View File

@ -54,15 +54,15 @@ 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 },
];
const STATS = {
hp: { stat: 'hp', colour: 'green', svg: shapes.square },
greenDamage: { stat: 'green_damage', colour: 'green', svg: shapes.diamond },
redShield: { stat: 'red_shield', colour: 'red', svg: shapes.hexagon },
redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.pentagon },
blueShield: { stat: 'blue_shield', colour: 'blue', svg: shapes.squircle },
blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
speed: { stat: 'speed', colour: 'yellow', svg: shapes.triangle },
};
module.exports = {
stringSort,