diff --git a/VERSION b/VERSION index 5ebba4f0..03082db7 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.5.5 \ No newline at end of file +1.5.6 \ No newline at end of file diff --git a/acp/package.json b/acp/package.json index c1034fe4..a9ffeccf 100644 --- a/acp/package.json +++ b/acp/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.5.5", + "version": "1.5.6", "description": "", "main": "index.js", "scripts": { diff --git a/client/assets/styles/colours.less b/client/assets/styles/colours.less index cfed8007..b6362c6b 100644 --- a/client/assets/styles/colours.less +++ b/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; + } +} \ No newline at end of file diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 151443c1..05952fc7 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -361,12 +361,16 @@ // } .equipping, .receiving { - transition: border-color 0.5s ease-in; - transition-duration: 0.25s; - transition-delay: 0; - transition-timing-function: ease; + animation: eq 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate; +} - border: 2px dashed @gray-hint; +@keyframes eq { + from { + background: @black; + } + to { + background: @gray; + } } .thresholds { diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index f89cecb0..7150057e 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -204,6 +204,7 @@ table .highlight { button[disabled] { color: #222; border-color: #222; + animation: 0; } #mnml input, #mnml select { diff --git a/client/package.json b/client/package.json index acec772b..9d22f205 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.5.5", + "version": "1.5.6", "description": "", "main": "index.js", "scripts": { diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index f72b356b..84953719 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -118,6 +118,7 @@ class ConstructAnimation extends Component { case 'Electrocute': return ; case 'ElectrocuteTick': return ; case 'Counter': return ; + case 'CounterAttack': return ; case 'Purify': return ; case 'Recharge': return ; case 'Reflect': return ; diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 8250af93..447ea3f0 100644 --- a/client/src/components/anims/chaos.jsx +++ b/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"> + + + + + + + + + + + + + {this.charges} ); @@ -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)), diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx index 5d0faaf9..43155c07 100644 --- a/client/src/components/anims/siphon.tick.jsx +++ b/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', }); }); } diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx index fe07c228..68654ea8 100644 --- a/client/src/components/anims/slay.jsx +++ b/client/src/components/anims/slay.jsx @@ -28,7 +28,7 @@ function projectile(x, y, radius, colour) { function sword(colour) { return ( - + ); } diff --git a/client/src/components/buttons.jsx b/client/src/components/buttons.jsx new file mode 100644 index 00000000..c2f72b15 --- /dev/null +++ b/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', +}; diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index fce829f5..bc7e005f 100644 --- a/client/src/components/instance.constructs.jsx +++ b/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 ( ; } + 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 - 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] - ); - })) { + if (!comboHighlight) { 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 (