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

Thresholds for specs

Browse Source
This commit is contained in:
Mashy 2019-04-04 12:50:01 +10:00
parent 34ed44cc57
commit 0840dd7dfd
6 changed files with 84 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/cryps.css
View File

@ -512,4 +512,10 @@ header {
align-items: center;
padding-left: 2em;
flex: 1;
}
}
.thresholds {
display: flex;
flex-direction: row;
justify-content: left;
}

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

@ -190,62 +190,79 @@ module.exports = {
GreenDamageI: {
description: 'Increases green damage',
colours: ['green'],
thresholds: [5, 10, 20],
},
RedDamageI: {
description: 'Increased red damage',
colours: ['red'],
thresholds: [5, 10, 20],
},
BlueDamageI: {
description: 'Increased blue damage',
colours: ['blue'],
thresholds: [5, 10, 20],
},
GRDI: {
description: 'Increased green and red damage',
colours: ['green', 'red'],
thresholds: [2, 5, 10],
},
GBDI: {
description: 'Increased green and blue damage',
colours: ['green', 'blue'],
thresholds: [2, 5, 10],
},
RBDI: {
description: 'Increased red and blue damage',
colours: ['red', 'blue'],
thresholds: [2, 5, 10],
},
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',
colours: ['green'],
thresholds: [5, 10, 20],
},
RedShieldI: {
description: 'Increased red shield',
colours: ['red'],
thresholds: [5, 10, 20],
},
BlueShieldI: {
description: 'Increased blue shield',
colours: ['blue'],
thresholds: [5, 10, 20],
},
LRSI: {
description: 'Increased life and red shield',
colours: ['green', 'red'],
thresholds: [2, 5, 10],
},
LBSI: {
description: 'Increased life and blue shield',
colours: ['green', 'blue'],
thresholds: [2, 5, 10],
},
RBSI: {
description: 'Increased red and blue shield',
colours: ['red', 'blue'],
thresholds: [2, 5, 10],
},
Speed: {
@ -255,26 +272,38 @@ module.exports = {
RedSpeedI: {
description: 'Increases red speed',
colours: ['red'],
thresholds: [5, 10, 20],
},
BlueSpeedI: {
description: 'Increases blue speed',
colours: ['blue'],
thresholds: [5, 10, 20],
},
GreenSpeedI: {
description: 'Increases green speed',
colours: ['green'],
thresholds: [5, 10, 20],
},
GRSpeedI: {
description: 'Increases green and red speed',
colours: ['green', 'red'],
thresholds: [2, 5, 10],
},
GBSpeedI: {
description: 'Increases green and blue speed',
colours: ['green', 'blue'],
thresholds: [2, 5, 10],
},
RBSpeedI: {
description: 'Increases red and blue speed',
colours: ['red', 'blue'],
thresholds: [2, 5, 10],
},
},

4
client/src/components/game.component.jsx
View File

@ -5,8 +5,6 @@ const molecule = require('./molecule');
const { STATS } = require('../utils');
console.log(STATS);
// const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
function GamePanel(props) {
@ -142,7 +140,7 @@ function GamePanel(props) {
{skills}
</div>
</div>
<div className="stats">
<div className="cryp-box">
{stats}
</div>
</div>

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

@ -1,13 +1,21 @@
const preact = require('preact');
const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
const { COLOUR_ICONS } = require('../utils');
function Info(args) {
const {
info,
sendUnequip,
instance,
} = args;
if (!info.length) return (<div className="instance-info">&nbsp;</div>);
let red = 0; let blue = 0; let green = 0;
instance.cryps.forEach(cryp => {
red += cryp.colours.red;
blue += cryp.colours.blue;
green += cryp.colours.green;
});
const teamColours = { red, blue, green };
const [type, value] = info;
if (type === 'item') {
let itemDetails;
@ -17,7 +25,7 @@ function Info(args) {
itemDetails = SPECS[value];
} else if (COLOURS[value]) {
itemDetails = COLOURS[value];
} console.log(itemDetails);
}
return (
<div className="instance-info">
{value} - {itemDetails.description}
@ -38,12 +46,34 @@ function Info(args) {
</div>
);
}
function thresholds(t, spec) {
return (
SPECS[spec].colours.map((c, i) => (
<figure key={i} alt={c.colour}>
{COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
<figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
</figure>
))
);
}
if (type === 'spec') {
const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => {
const threshold = thresholds(t, value.spec);
return (
<div className="thresholds" key={i} alt={t}>
{threshold}
</div>
);
}) : null;
return (
<div className="instance-info">
<div>
<div> {value.spec} </div>
<div> {SPECS[value.spec].description} </div>
{breaks}
</div>
<button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
unequip

2
client/src/components/info.container.jsx
View File

@ -11,7 +11,7 @@ const addState = connect(
return ws.sendVboxUnequip(instance.instance, crypId, item);
}
return { info, sendUnequip };
return { info, sendUnequip, instance };
}
/*
function receiveDispatch(dispatch) {

7
client/src/utils.jsx
View File

@ -91,6 +91,12 @@ const SPECS = {
};
const COLOUR_ICONS = {
red: { colour: 'red', caption: 'red', svg: shapes.circle },
blue: { colour: 'blue', caption: 'blue', svg: shapes.circle },
green: { colour: 'green', caption: 'green', svg: shapes.circle },
};
module.exports = {
stringSort,
numSort,
@ -99,4 +105,5 @@ module.exports = {
NULL_UUID,
STATS,
SPECS,
COLOUR_ICONS,
};