button borders across the board

client/assets/styles/colours.less

@@ -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 {

client/src/components/buttons.jsx

@@ -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',
+
+};

client/src/components/instance.constructs.jsx

@@ -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}

client/src/components/skill.btn.jsx

@@ -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}

client/src/components/vbox.component.jsx

@@ -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