Merge branch 'release/1.5.6'

VERSION

@@ -1 +1 @@
-1.5.5
+1.5.6

acp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnml-client",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "",
   "main": "index.js",
   "scripts": {

client/assets/styles/colours.less

@@ -61,3 +61,84 @@ svg {
     color: @white;
     stroke: @white;
 }
+
+.red-border {
+    border-color: @red;
+}
+.blue-border {
+    border-color: @blue;
+}
+.green-border {
+    border-color: @green;
+}
+
+.red-blue-border {
+    animation: rb 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
+}
+.red-green-border {
+    animation: rg 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
+}
+.blue-green-border {
+    animation: bg 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
+}
+
+.combo-border:not(.highlight) {
+    animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
+}
+
+@keyframes rg {
+    0% {
+        border-color: @red;
+    }
+    50% {
+        border-color: @gray-box;
+    }
+    100% {
+        border-color: @green;
+    }
+}
+
+@keyframes rb {
+    0% {
+        border-color: @red;
+    }
+    50% {
+        border-color: @gray-box;
+    }
+    100% {
+        border-color: @blue;
+    }
+}
+
+@keyframes bg {
+    0% {
+        border-color: @blue;
+    }
+    50% {
+        border-color: @gray-box;
+    }
+    100% {
+        border-color: @green;
+    }
+}
+
+@keyframes co {
+    from {
+        background: @black;
+    }
+    to {
+        background: @gray-exists;
+    }
+}
+
+button {
+    &.blue {
+        border-color: @blue;
+    }
+    &.red {
+        border-color: @red;
+    }
+    &.green {
+        border-color: @green;
+    }
+}

client/assets/styles/instance.less

@@ -361,12 +361,16 @@
 // }
 
 .equipping, .receiving {
-    transition: border-color 0.5s ease-in;
+    animation: eq 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
-    transition-duration: 0.25s;
+}
-    transition-delay: 0;
-    transition-timing-function: ease;
 
-    border: 2px dashed @gray-hint;
+@keyframes eq {
+    from {
+        background: @black;
+    }
+    to {
+        background: @gray;
+    }
 }
 
 .thresholds {

client/assets/styles/styles.less

@@ -204,6 +204,7 @@ table .highlight {
 button[disabled] {
     color: #222;
     border-color: #222;
+    animation: 0;
 }
 
 #mnml input, #mnml select {

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnml-client",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "",
   "main": "index.js",
   "scripts": {

client/src/components/animations.jsx

@@ -118,6 +118,7 @@ class ConstructAnimation extends Component {
             case 'Electrocute': return <Electrocute />;
             case 'ElectrocuteTick': return <Electrocute />;
             case 'Counter': return <Counter player={player} />;
+            case 'CounterAttack': return <Attack direction={direction} />;
             case 'Purify': return <Purify player={player} />;
             case 'Recharge': return <Recharge player={player} />;
             case 'Reflect': return <Refl player={player} />;

client/src/components/anims/chaos.jsx

@@ -20,6 +20,7 @@ function projectile(x, y, radius, colour) {
             cy={y}
             r={radius}
             fill={colour}
+            filter={colour === '#a52a2a' ? 'url(#chaosRedFilter)' : 'url(#chaosBlueFilter)'}
         />
     );
 }
@@ -43,6 +44,19 @@ class Chaos extends Component {
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
+                <defs>
+                    <filter id="chaosBlueFilter">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+                        <feMerge>
+                            <feMergeNode />
+                            <feMergeNode in="SourceGraphic" />
+                        </feMerge>
+                    </filter>
+                    <filter id='chaosRedFilter'>
+                        <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
+                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                    </filter>
+                </defs>
                 {this.charges}
             </svg>
         );
@@ -75,6 +89,17 @@ class Chaos extends Component {
             easing: 'easeInQuad',
         }));
 
+        this.animations.push(anime({
+            targets: ['#chaosRedFilter feTurbulence', '#chaosRedFilter feDisplacementMap'],
+            baseFrequency: 2,
+            scale: 20,
+            numOctaves: 5,
+            easing: 'easeOutSine',
+
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
         projectiles.forEach(proj => this.animations.push(anime({
             targets: proj,
             cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),

client/src/components/anims/siphon.tick.jsx

@@ -93,7 +93,7 @@ class SiphonTick extends Component {
                 cy: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)),
                 delay: (Math.random() * duration * 1 / 2),
                 duration,
-                easing: 'easeInQuad',
+                easing: 'easeOutQuad',
             });
         });
     }

client/src/components/anims/slay.jsx

@@ -28,7 +28,7 @@ function projectile(x, y, radius, colour) {
 
 function sword(colour) {
     return (
-        <polygon points='150,150 75,75, 150,300, 225,75' fill={colour} id="sword" filter="url(#slayFilter)"></polygon>
+        <polygon points='150,150 100,75, 150,300, 200,75' fill={colour} id="sword" filter="url(#slayFilter)"></polygon>
     );
 }
 

client/src/components/buttons.jsx

@@ -0,0 +1,92 @@
+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',
+
+    //     // Lifes Upgrades
+    // LifeGG: () => 'green-border',
+    // LifeRR: () => 'red-border',
+    // LifeBB:() => 'blue-border',
+    // LifeRG: () => 'red-green-border',
+    // LifeGB: () => 'green-blue-border',
+    // LifeRB:() => 'red-blue-border',
+    // LifeRRPlus: () => 'red-border',
+    // LifeBBPlus:() => 'blue-border',
+    // LifeRGPlus: () => 'red-green-border',
+    // LifeGBPlus: () => 'green-blue-border',
+    // LifeRBPlus:() => 'red-blue-border',
+    // LifeGGPlusPlus: () => 'green-border',
+    // LifeRRPlusPlus: () => 'red-border',
+    // LifeBBPlusPlus:() => 'blue-border',
+    // LifeRGPlusPlus: () => 'red-green-border',
+    // LifeGBPlusPlus: () => 'green-blue-border',
+    // LifeRBPlusPlus:() => 'red-blue-border',
+    // // Powers Upgrades
+    // PowerGG: () => 'green-border',
+    // PowerRR: () => 'red-border',
+    // PowerBB:() => 'blue-border',
+    // PowerRG: () => 'red-green-border',
+    // PowerGB: () => 'green-blue-border',
+    // PowerRB:() => 'red-blue-border',
+    // PowerRRPlus: () => 'red-border',
+    // PowerBBPlus:() => 'blue-border',
+    // PowerRGPlus: () => 'red-green-border',
+    // PowerGBPlus: () => 'green-blue-border',
+    // PowerRBPlus:() => 'red-blue-border',
+    // PowerGGPlusPlus: () => 'green-border',
+    // PowerRRPlusPlus: () => 'red-border',
+    // PowerBBPlusPlus:() => 'blue-border',
+    // PowerRGPlusPlus: () => 'red-green-border',
+    // PowerGBPlusPlus: () => 'green-blue-border',
+    // PowerRBPlusPlus:() => 'red-blue-border',
+    // // Speeds Upgrades
+    // SpeedGG: () => 'green-border',
+    // SpeedRR: () => 'red-border',
+    // SpeedBB: () => 'blue-border',
+    // SpeedRG: () => 'red-green-border',
+    // SpeedGB: () => 'green-blue-border',
+    // SpeedRB: () => 'red-blue-border',
+    // SpeedRRPlus: () => 'red-border',
+    // SpeedBBPlus: () => 'blue-border',
+    // SpeedRGPlus: () => 'red-green-border',
+    // SpeedGBPlus: () => 'green-blue-border',
+    // SpeedRBPlus: () => 'red-blue-border',
+    // SpeedGGPlusPlus: () => 'green-border',
+    // SpeedRRPlusPlus: () => 'red-border',
+    // SpeedBBPlusPlus: () => 'blue-border',
+    // SpeedRGPlusPlus: () => 'red-green-border',
+    // SpeedGBPlusPlus: () => 'green-blue-border',
+    // SpeedRBPlusPlus: () => '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

@@ -3,9 +3,10 @@ const range = require('lodash/range');
 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) {
@@ -168,12 +169,29 @@ function Vbox(args) {
 
         function onClick(e) {
             e.stopPropagation();
+            setItemEquip(null);
             setCombiner([]);
+
             if (selected) return clearVboxSelected();
             return setVboxSelected([group, index]);
         }
 
-        const classes = `${selected ? 'highlight' : ''}`;
+        const combinerItems = combiner.map(j => vbox.bound[j]);
+        const combinerCount = countBy(combinerItems, co => co);
+
+        const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => {
+            if (combo.components.includes(v)) {
+                return combinerItems.every(c => {
+                    if (!combo.components.includes(c)) return false;
+                    const comboCount = countBy(combo.components, co => co);
+                    if (combinerCount[c] > comboCount[c]) return false;
+                    if (c === v && combinerCount[c] + 1 > comboCount[c]) return false;
+                    return true;
+                });
+            } return false;
+        }) ? 'combo-border' : '';
+
+        const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
 
         if (shapes[v]) {
             return (
@@ -246,6 +264,21 @@ function Vbox(args) {
             return <button disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
         }
 
+        const combinerItems = combiner.map(j => vbox.bound[j]);
+        const combinerCount = countBy(combinerItems, co => co);
+
+        const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => {
+            if (combo.components.includes(v)) {
+                return combinerItems.every(c => {
+                    if (!combo.components.includes(c)) return false;
+                    const comboCount = countBy(combo.components, co => co);
+                    if (combinerCount[c] > comboCount[c]) return false;
+                    if (c === v && combinerCount[c] + 1 > comboCount[c]) return false;
+                    return true;
+                });
+            } return false;
+        }) ? 'combo-border' : '';
+
         function onClick(e) {
             if (vboxSelecting) clearVboxSelected();
             if (reclaiming) return sendVboxReclaim(i);
@@ -261,21 +294,7 @@ function Vbox(args) {
 
             combiner.push(i);
 
-            // invalid combo
+            if (!comboHighlight) {
-            const combinerItems = combiner.map(j => vbox.bound[j]);
-            const combinerCounts = countBy(combinerItems, c => c);
-
-            // unless some combo
-            // contains every combinerItems
-            // and combinerItems.count of item >= components.count(item)
-
-            if (!itemInfo.combos
-                .some(combo => {
-                    const comboCount = countBy(combo.components, c => c);
-                    return combinerItems.every(c =>
-                        combo.components.includes(c) && comboCount[c] >= combinerCounts[c]
-                    );
-                })) {
                 return combinerChange([i]);
             }
 
@@ -283,7 +302,8 @@ function Vbox(args) {
         }
 
         const highlighted = combiner.indexOf(i) > -1;
-        const classes = `${highlighted ? 'highlight' : ''}`;
+        const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
+        const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
         if (shapes[v]) {
             return (
                 <button

ops/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnml-ops",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "",
   "main": "index.js",
   "scripts": {

server/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mnml"
-version = "1.5.5"
+version = "1.5.6"
 authors = ["ntr <ntr@smokestack.io>"]
 
 [dependencies]