ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added the rest of the specs to SVG table

Browse Source
This commit is contained in:
Mashy 2019-04-04 10:36:25 +10:00
parent 01e3384e98
commit 706ad1d243
5 changed files with 129 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/cryps.css
View File

@ -116,6 +116,15 @@ svg {
stroke: #FFD123;
}
.purple {
color: #A25AC1;
stroke: #A25AC1;
}
.cyan {
color: #6AD1BF;
stroke: #6AD1BF;
}
/*
LOGIN

87
client/src/components/constants.jsx
View File

@ -184,21 +184,98 @@ module.exports = {
SPECS: {
Damage: {
description: 'Increase red / green / blue power stats cryp',
description: 'Increase red / green / blue damage stats cryp',
upgrades: 'combine with 2 red / blue / green',
},
Hp: {
description: 'Increases health of cryp',
upgrades: 'combine with 2 red / blue / green',
GreenDamageI: {
description: 'Increases green damage',
},
RedDamageI: {
description: 'Increased red damage',
},
BlueDamageI: {
description: 'Increased blue damage',
},
GRDI: {
description: 'Increased green and red damage',
},
GBDI: {
description: 'Increased green and blue damage',
},
RBDI: {
description: 'Increased red and blue damage',
},
Speed: {
description: 'Increases speed of cryp',
upgrades: 'combine with 2 red / blue / green',
},
Hp: {
description: 'Increases life',
upgrades: 'combine with 2 red / blue / green',
},
LifeI: {
description: 'Increases life',
},
RedShieldI: {
description: 'Increased red shield',
},
BlueShieldI: {
description: 'Increased blue shield',
},
LRSI: {
description: 'Increased life and red shield',
},
LBSI: {
description: 'Increased life and blue shield',
},
RBSI: {
description: 'Increased red and blue shield',
},
Speed: {
description: 'Increases speed of cryp',
upgrades: 'combine with 2 red / blue / green',
},
RedSpeedI: {
description: 'Increases red speed',
},
BlueSpeedI: {
description: 'Increases blue speed',
},
GreenSpeedI: {
description: 'Increases green speed',
},
GRSpeedI: {
description: 'Increases green and red speed',
},
GBSpeedI: {
description: 'Increases green and blue speed',
},
RBSpeedI: {
description: 'Increases red and blue speed',
},
},
COLOURS: {

27
client/src/components/info.component.jsx
View File

@ -10,9 +10,17 @@ function Info(args) {
const [type, value] = info;
if (type === 'item') {
let itemDetails;
if (SKILLS[value]) {
itemDetails = SKILLS[value];
} else if (SPECS[value]) {
itemDetails = SPECS[value];
} else if (COLOURS[value]) {
itemDetails = COLOURS[value];
} console.log(itemDetails);
return (
<div className="instance-info">
{info.value} - what does it do?
{value} - {itemDetails.description}
</div>
);
}
@ -54,27 +62,14 @@ function Info(args) {
{ stat: 'green_damage', disp: 'Green Damage', colour: '#1FF01F' },
{ stat: 'speed', disp: 'Speed', colour: '#FFD123' },
].map((s, i) => (
<div key={i}>{s.disp}: {value[s.stat].base} - {value[s.stat].max}</div>
<div key={i}>{s.disp}: {value[s.stat].base} {String.fromCharCode(8594)} {value[s.stat].max}</div>
));
const cryp = value;
const skills = cryp.skills.map((s, i) => <button key={i} className="instance-btn"
onClick={() => sendUnequip(cryp.id, s.skill)} >{s.skill}</button>);
const specs = cryp.specs.map((s, i) => <button key={i} className="instance-btn"
onClick={() => sendUnequip(cryp.id, s) }>{s}</button>);
return (
<div className="instance-info">
<h5>{cryp.name}</h5>
<h5>{value.name}</h5>
<div className="info-stats">
{stats}
</div>
<div className="info-skills">
{skills}
</div>
<div className="info-specs">
{specs}
</div>
</div>
);
}

6
client/src/components/instance.component.jsx
View File

@ -29,12 +29,12 @@ function Cryp(cryp, sendVboxApply, setInfo) {
const item = parseInt(e.dataTransfer.getData('text'), 10);
return sendVboxApply(cryp.id, item);
}
const specs = cryp.specs.map((s, i) => (
const specs = (cryp.specs.length > 0) ? cryp.specs.map((s, i) => (
<figure key={i} onClick={() => setInfo('spec', { spec: s, cryp })}>
{SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
<figcaption>{i}</figcaption>
<figcaption>{SPECS[s].caption}</figcaption>
</figure>
));
)) : null;
return (
<div

27
client/src/utils.jsx
View File

@ -65,9 +65,30 @@ const STATS = {
};
const SPECS = {
Hp: { colour: 'green', svg: shapes.square },
Damage: { colour: 'red', svg: shapes.hexagon },
Speed: { colour: 'yellow', svg: shapes.diamond },
Hp: { colour: 'white', caption: 'Hp', svg: shapes.square },
RedShieldI: { colour: 'red', caption: 'HpI', svg: shapes.square },
BlueShieldI: { colour: 'blue', caption: 'HpI', svg: shapes.square },
LifeI: { colour: 'green', caption: 'HpI', svg: shapes.square },
LRSI: { colour: 'yellow', caption: 'HpI', svg: shapes.square },
LBSI: { colour: 'cyan', caption: 'HpI', svg: shapes.square },
RBSI: { colour: 'purple', caption: 'HpI', svg: shapes.square },
Damage: { colour: 'white', caption: 'Damage', svg: shapes.hexagon },
RedDamageI: { colour: 'red', caption: 'DamageI', svg: shapes.hexagon },
BlueDamageI: { colour: 'blue', caption: 'DamageI', svg: shapes.hexagon },
GreenDamageI: { colour: 'green', caption: 'DamageI', svg: shapes.hexagon },
GRDI: { colour: 'yellow', caption: 'DamageI', svg: shapes.hexagon },
GBDI: { colour: 'cyan', caption: 'DamageI', svg: shapes.hexagon },
RBDI: { colour: 'purple', caption: 'DamageI', svg: shapes.hexagon },
Speed: { colour: 'white', caption: 'Speed', svg: shapes.diamond },
RedSpeed: { colour: 'red', caption: 'SpeedI', svg: shapes.diamond },
BlueSpeedI: { colour: 'blue', caption: 'SpeedI', svg: shapes.diamond },
GreenSpeedI: { colour: 'green', caption: 'speed', svg: shapes.diamond },
GRSpeedI: { colour: 'yellow', caption: 'SpeedI', svg: shapes.diamond },
GBSpeedI: { colour: 'cyan', caption: 'SpeedI', svg: shapes.diamond },
RBSpeedI: { colour: 'purple', caption: 'SpeedI', svg: shapes.diamond },
};
module.exports = {