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

Merge branch 'border-colours' of ssh://git.mnml.gg:40022/~/mnml into border-colours

Browse Source
This commit is contained in:
ntr 2019-10-16 11:16:18 +11:00
commit 972923a0c9
5 changed files with 59 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/assets/styles/colours.less
View File

@ -73,13 +73,13 @@ svg {
}
.red-blue-border {
animation: rb 2s cubic-bezier(1, 0, 0, 1) 0s infinite alternate;
animation: rb 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
}
.red-green-border {
animation: rg 2s cubic-bezier(1, 0, 0, 1) 0s infinite alternate;
animation: rg 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
}
.blue-green-border {
animation: bg 2s cubic-bezier(1, 0, 0, 1) 0s infinite alternate;
animation: bg 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
}
@keyframes rg {

38
client/src/components/buttons.jsx Normal file
View File

@ -0,0 +1,38 @@
module.exports = { // This will need to be edited if we change server recipes
// Attack
Strike: () => 'red-border',
Blast: () => 'blue-border',
Heal: () => 'green-border',
Chaos: () => 'red-blue-border',
Slay: () => 'red-green-border',
Siphon: () => 'blue-green-border',
// Stun
Link: () => 'blue-greenborder',
Bash: () => 'red-border',
Sleep: () => 'green-border',
Ruin: () => 'blue-border',
Break: () => 'red-green-border',
Banish: () => 'red-blue-border',
// Block
Counter: () => 'red-border',
Purify: () => 'green-border',
Electrify: () => 'blue-border',
Sustain: () => 'red-green-border',
Reflect: () => 'blue-green-border',
Recharge: () => 'blue-red-border',
// Buff
Intercept: () => 'red-border',
Triage: () => 'green-border',
Haste: () => 'red-green-border',
Absorb: () => 'blue-border',
Hybrid: () => 'blue-green-border',
Amplify: () => 'red-blue-border',
// Debuff
Restrict: () => 'red-border',
Purge: () => 'green-border',
Silence: () => 'blue-border',
Curse: () => 'red-green-border',
Decay: () => 'blue-green-border',
Invert: () => 'red-blue-border',
};

11
client/src/components/instance.constructs.jsx
View File

@ -2,10 +2,12 @@ const { connect } = require('preact-redux');
const preact = require('preact');
const range = require('lodash/range');
const buttons = require('./buttons');
const shapes = require('./shapes');
const { STATS } = require('../utils');
const { ConstructAvatar } = require('./construct');
const actions = require('../actions');
const { removeTier } = require('../utils');
const addState = connect(
function receiveState(state) {
@ -130,7 +132,14 @@ function Construct(props) {
// const action = skill ? '' : 'action';
const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill;
const classes = `${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''}`;
const border = () => {
if (!skill) return '';
const borderFn = buttons[removeTier(skill.skill)];
if (!borderFn) return '';
return borderFn();
};
const classes = `${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''} ${border()}`;
return (
<button
key={i}

6
client/src/components/skill.btn.jsx
View File

@ -2,6 +2,8 @@ const preact = require('preact');
const { connect } = require('preact-redux');
const actions = require('../actions');
const { removeTier } = require('../utils');
const buttons = require('./buttons');
const addState = connect(
function receiveState(state) {
@ -68,10 +70,12 @@ function Skill(props) {
return setActiveSkill(construct.id, s.skill);
}
const border = buttons[removeTier(s.skill)] ? buttons[removeTier(s.skill)]() : '';
return (
<button
disabled={cdText || s.disabled || ko}
class={`${(targeting || highlight) ? 'active' : ''}`}
class={`${(targeting || highlight) ? 'active' : ''} ${border}`}
type="submit"
onClick={onClick}>
{s.skill} {cdText}

26
client/src/components/vbox.component.jsx
View File

@ -4,9 +4,9 @@ const countBy = require('lodash/countBy');
const without = require('lodash/without');
const { connect } = require('preact-redux');
const { removeTier } = require('../utils');
const shapes = require('./shapes');
const actions = require('../actions');
const buttons = require('./buttons');
const addState = connect(
function receiveState(state) {
@ -283,29 +283,9 @@ function Vbox(args) {
return combinerChange(combiner);
}
const source = itemInfo.combos.filter(c => c.item === removeTier(v));
const colours = itemSource => {
if (!itemSource || !itemSource.length) return '';
if (itemSource[0].components[0] === 'Blue') {
if (itemSource[0].components[1] === 'Red') return 'red-blue-border';
if (itemSource[0].components[1] === 'Green') return 'blue-green-border';
if (itemSource[0].components[1] === 'Blue') return 'blue-border';
}
if (itemSource[0].components[0] === 'Red') {
if (itemSource[0].components[1] === 'Red') return 'red-border';
if (itemSource[0].components[1] === 'Green') return 'red-green-border';
if (itemSource[0].components[1] === 'Blue') return 'red-blue-border';
}
if (itemSource[0].components[0] === 'Green') {
if (itemSource[0].components[1] === 'Red') return 'red-green-border';
if (itemSource[0].components[1] === 'Green') return 'green-border';
if (itemSource[0].components[1] === 'Blue') return 'blue-green-border';
}
return '';
};
const highlighted = combiner.indexOf(i) > -1;
const classes = `${highlighted ? 'highlight' : colours(source)}`;
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
const classes = `${highlighted ? 'highlight' : border}`;
if (shapes[v]) {
return (
<button