+ const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
+
));
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 70fb688a..cbbc714a 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -2,10 +2,10 @@ const preact = require('preact');
const range = require('lodash/range');
const { INFO } = require('./../constants');
-const { SPECS } = require('./../utils');
-const { COLOUR_ICONS, convertItem } = require('../utils');
+const { convertItem } = require('../utils');
+const shapes = require('./shapes');
-function Info(args) {
+function InfoComponent(args) {
const {
info,
itemInfo,
@@ -24,16 +24,6 @@ function Info(args) {
const isSkill = fullInfo.skill;
const isSpec = fullInfo.spec;
- let red = 0;
- let blue = 0;
- let green = 0;
- player.constructs.forEach(construct => {
- red += construct.colours.red;
- blue += construct.colours.blue;
- green += construct.colours.green;
- });
- const teamColours = { red, blue, green };
-
if (isSkill) {
return (
@@ -44,32 +34,64 @@ function Info(args) {
}
if (isSpec) {
- const breaks = SPECS[info].thresholds;
- const colourReqs = SPECS[info].colours || [];
+ let red = 0;
+ let blue = 0;
+ let green = 0;
+ player.constructs.forEach(construct => {
+ red += construct.colours.red;
+ blue += construct.colours.blue;
+ green += construct.colours.green;
+ });
+ const teamColours = { red, blue, green };
- const thresholdEl = colourReqs.map((c, i) => {
- const numIcons = Math.max(...breaks);
- const dots = range(0, numIcons).map(j => {
- const unmet = teamColours[c] < j + 1;
- const caption = breaks.includes(j + 1)
- ? '+ x'
- : '';
+ const colourReqs = fullInfo.values.bonuses || [];
- const reqClass = unmet
- ? 'unmet'
- : '';
+ const thresholds = colourReqs.map((bonus, i) => {
+ const colours = ['red', 'green', 'blue'];
+ const colourGoals = colours.map(c => {
+ const colourReq = bonus.req[c];
+ if (colourReqs === 0) return false;
+
+ const start = i === 0
+ ? 0
+ : colourReqs[i - 1].req[c];
+
+ const dots = range(start, colourReq).map(j => {
+ const unmet = teamColours[c] < j + 1;
+
+ const reqClass = unmet
+ ? 'unmet'
+ : '';
+
+ return (
+
+ {shapes.square([c])}
+
+ );
+ });
return (
-
- {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
- {caption}
-
+
+ {dots}
+
);
});
+ const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
+
+ const reqClass = reqsMet
+ ? ''
+ : 'unmet';
+
return (
-
- {dots}
+
+
+ {colourGoals}
+
+
+ + {bonus.bonus}
+
+
);
});
@@ -79,7 +101,7 @@ function Info(args) {
{info}
{fullInfo.description}
- {thresholdEl}
+ {thresholds}
);
@@ -142,4 +164,4 @@ function Info(args) {
);
}
-module.exports = Info;
+module.exports = InfoComponent;
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index 7c72e07c..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 { SPECS, STATS, instanceConstruct } = require('../utils');
+const { STATS, instanceConstruct } = require('../utils');
const actions = require('../actions');
const addState = connect(
@@ -146,12 +146,14 @@ function Construct(props) {
const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
return (
- {shapes.diamond(`stat-icon ${equip}`)}
+ {shapes.diamond(equip)}
);
}
+ const specInfo = itemInfo.items.find(i => i.item === s);
+
function specClick(e) {
e.stopPropagation();
setItemUnequip(s);
@@ -174,35 +176,23 @@ function Construct(props) {
onClick={specClick}
onDblClick={specDblClick}
onMouseOver={e => hoverInfo(e, s)} >
- {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
-
{SPECS[s].caption}
+ {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';
- // const cTotal = construct.colours.red + construct.colours.blue + construct.colours.green;
- // const colours = mapValues(construct.colours, c => {
- // if (cTotal === 0) return 245;
- // return Math.floor(c / cTotal * 255);
- // });
- // const alpha = cTotal === 0 ? 1 : 0.75;
- // const thickness = total => {
- // if (total < 3) return 1;
- // if (total < 6) return 2;
- // if (total < 9) return 3;
- // return 4;
- // };
- // const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
-
return (
{instanceConstruct(construct.name, construct.id)}
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx
index fa5f8813..3a18908a 100644
--- a/client/src/components/instance.equip.jsx
+++ b/client/src/components/instance.equip.jsx
@@ -4,7 +4,7 @@ const range = require('lodash/range');
const actions = require('../actions');
const shapes = require('./shapes');
-const { convertItem, SPECS } = require('./../utils');
+const { convertItem } = require('./../utils');
const addState = connect(
function receiveState(state) {
@@ -64,9 +64,11 @@ function Equipment(props) {
const isSkill = fullInfo && fullInfo.skill;
const isSpec = fullInfo && fullInfo.spec;
+ console.log('isSkill', isSkill, fullInfo);
+
function skillClick(e, i) {
if (itemUnequip && activeConstruct) return false;
- const value = vbox.bound[i];
+ // const value = vbox.bound[i];
setItemEquip(i);
return false;
}
@@ -87,37 +89,38 @@ function Equipment(props) {
const skillClass = isSkill ? 'skills highlight' : 'skills';
const specClass = isSpec ? 'specs highlight' : 'specs';
- const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
- const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
-
const skills = range(0, 9).map(i => {
const item = convertItem(vbox.bound[i]);
- if (skillList.includes(item)) {
+ const skillInfo = itemInfo.items.find(i => i.item === item);
+ if (skillInfo && skillInfo.skill) {
return (
);
- } return false;
+ }
+ return false;
});
const specs = range(0, 9).map(i => {
const item = convertItem(vbox.bound[i]);
- if (specList.includes(item)) {
+ const specInfo = itemInfo.items.find(i => i.item === item);
+ if (specInfo && specInfo.spec) {
return (
skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
- {SPECS[item].svg(`stat-icon ${SPECS[item].colour}`)}
- {SPECS[item].caption}
+ {shapes[item]()}
+ {item}
);
- } return false;
+ }
+ return false;
});
if (skills.every(s => !s)) skills.push(
);
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 60e86f17..0cacc7a2 100644
--- a/client/src/components/svgs/square.jsx
+++ b/client/src/components/svgs/square.jsx
@@ -1,14 +1,40 @@
const preact = require('preact');
-module.exports = function triangle(classes) {
+module.exports = function square(colours) {
+ if (colours.length === 1) {
+ return (
+
+ );
+ }
+
return (
);
}
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 (
-